Merge branch 'gambitph:develop' into patch-18

Author: DAnn2012

.config/webpack.config.dev.js

@@ -26,11 +26,6 @@ module.exports = [
 		},
 		// Admin settings script.
 		'admin_welcome': path.resolve( __dirname, '../src/welcome/admin.js' ),
-		// V2 deprecated scripts, we build this here since that's how we did it before.
-		'admin_welcome_v2': {
-			import: path.resolve( __dirname, '../src/deprecated/v2/welcome/admin.js' ),
-			filename: 'deprecated/[name].js'
-		},
 		'frontend_blocks_deprecated_v2': {
 			import: path.resolve( __dirname, '../src/deprecated/v2/block-frontend.js' ),
 			filename: 'deprecated/[name].js'
@@ -39,6 +34,7 @@ module.exports = [
 
 	output: {
 		filename: '[name].js',
+		chunkFilename: '[name].[contenthash].json', // Output filename for dynamically imported chunks
     },
 
     // Externals are only WordPress loaded libraries.

.config/webpack.config.prod.js

@@ -26,11 +26,6 @@ module.exports = [
 		},
 		// Admin settings script.
 		'admin_welcome': path.resolve( __dirname, '../src/welcome/admin.js' ),
-		// V2 deprecated script, we build this here since that's how we did it before.
-		'admin_welcome_v2': {
-			import: path.resolve( __dirname, '../src/deprecated/v2/welcome/admin.js' ),
-			filename: 'deprecated/[name].js'
-		},
 		'frontend_blocks_deprecated_v2': {
 			import: path.resolve( __dirname, '../src/deprecated/v2/block-frontend.js' ),
 			filename: 'deprecated/[name].js'
@@ -39,6 +34,7 @@ module.exports = [
 
 	output: {
 		filename: '[name].js',
+		chunkFilename: '[name].[contenthash].json', // Output filename for dynamically imported chunks
     },
 
     // Externals are only WordPress loaded libraries.

.github/workflows/playwright.yml

@@ -13,20 +13,20 @@ jobs:
       matrix:
         include:
           - php_version: '7.3'
-            wp_version: 6.4.5
+            wp_version: 6.5.5
 
           - php_version: '7.3'
             wp_version: null
 
-          - php_version: '8.2'
-            wp_version: 6.4.5
-
           - php_version: '8.2'
             wp_version: 6.5.5
 
           - php_version: '8.2'
             wp_version: 6.6.2
 
+          - php_version: '8.2'
+            wp_version: 6.7.2
+
           - php_version: '8.2'
             wp_version: null
 
@@ -71,6 +71,8 @@ jobs:
         npm install -g @wordpress/env
     - name: Start wp-env
       run: wp-env start
+    - name: Print current WP version
+      run: wp-env run tests-cli wp core version
     - name: Create post with existing blocks
       run: |
         POST_ID=$(wp-env run tests-cli wp post create wp-content/plugins/Stackable/e2e/config/post-content.txt --post_title="Existing Blocks" --post_status=publish --porcelain)

.vscode/settings.json

@@ -11,4 +11,4 @@
 		"css",
 		"scss"
 	]
-}
+}

e2e/readme.md

@@ -32,8 +32,17 @@ WP_BASE_URL=http://local.local/
 WP_AUTH_STORAGE=wp-auth.json
 WP_USERNAME=admin
 WP_PASSWORD=password
+STACKABLE_SLUG={ STACKABLE SLUG }
+WP_TEST_POSTID={ POST_ID }
+WP_STK_LICENSE={ STACKABLE LICENSE }
 ```
 
+In Freemius, make sure the license key is:
+- new
+- lifetime unlimited quota
+- has an owner
+- non-blocking and white-labeled
+
 Run this command to run e2e:
 
 ```bash

e2e/test-utils/stackable.ts

@@ -8,12 +8,9 @@ export class StackableFixture {
 	  this.page = page
 	}
 
-	// When loading the Stackable settings in the Admin, there are 4 requests to wp/v2/settings
-	// This function waits for all 4 requests to finish to ensure Stackable settings are loaded and reflected on the page
+	// Wait for Stackable Settings to be fetched
 	async waitForSettings(): Promise<void> {
 		return new Promise( ( resolve, reject ) => {
-			let responseCount = 0
-
 			const cleanup = () => {
 				this.page.off( 'requestfinished', finishedCallback )
 				this.page.off( 'requestfinished', failedCallback )
@@ -29,14 +26,10 @@ export class StackableFixture {
 						} )
 
 						if ( settings ) {
-							responseCount++
-						} else {
-							throw Error( 'Failed to get Stackable settings' )
-						}
-
-						if ( responseCount === 4 ) {
 							cleanup()
 							resolve()
+						} else {
+							throw Error( 'Failed to get Stackable settings' )
 						}
 					} catch ( error ) {
 						cleanup()

e2e/tests/admin.spec.ts

@@ -40,6 +40,10 @@ test( 'Stackable settings should be saved', async ( {
 	// Make sure all Stackable settings are loaded
 	await settings
 
+	// There should be no PHP errors
+	const pageError = await admin.getPageError()
+	expect( pageError ).toBeNull()
+
 	// Retrieves the value of the first option, toggles it and check if the value changed
 	const option = page.locator( '.ugb-admin-toggle-setting' ).first().getByRole( 'switch' )
 	const val = await option.getAttribute( 'aria-checked' )

e2e/tests/block-editor.spec.ts

@@ -24,7 +24,14 @@ test.describe( 'Block Editor', () => {
 	} ) => {
 		// Insert Stackable Text Block through block inserter
 		// Also checks if Stackable Block is in the list of blocks in the Editor
-		await page.getByLabel( 'Toggle block inserter' ).click()
+		if ( await page.getByLabel( 'Toggle block inserter' ).isVisible() ) {
+			// For WP version 6.7 and below
+			await page.getByLabel( 'Toggle block inserter' ).click()
+		} else {
+			// For WP version 6.8
+			await page.getByLabel( 'Block Inserter' ).click()
+		}
+
 		await page.locator( '.editor-block-list-item-stackable-text' ).click()
 
 		await expect( editor.canvas.getByLabel( 'Block: Text' ) ).toBeVisible()
@@ -39,6 +46,13 @@ test.describe( 'Block Editor', () => {
 		} )
 
 		await editor.selectBlocks( editor.canvas.getByLabel( 'Block: Text' ) )
+
+		const settings = page.getByLabel( 'Settings', { exact: true } )
+
+		if ( await settings.getAttribute( 'aria-pressed' ) === 'false' ) {
+			await settings.click()
+		}
+
 		await expect( page.getByLabel( 'Layout Tab' ) ).toBeVisible()
 		await expect( page.getByLabel( 'Style Tab' ) ).toBeVisible()
 		await expect( page.getByLabel( 'Advanced Tab' ) ).toBeVisible()
@@ -52,6 +66,12 @@ test.describe( 'Block Editor', () => {
 			name: 'stackable/text',
 		} )
 
+		const settings = page.getByLabel( 'Settings', { exact: true } )
+
+		if ( await settings.getAttribute( 'aria-pressed' ) === 'false' ) {
+			await settings.click()
+		}
+
 		// Add content and color to Stackable Text Block
 		await editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ).fill( 'test' )
 		await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
@@ -79,7 +99,7 @@ test.describe( 'Block Editor', () => {
 	} )
 
 	test( 'The Stackable block added in the editor should be visible in the frontend', async ( {
-		page, editor,
+		page, editor, admin,
 	} ) => {
 		await editor.insertBlock( {
 			name: 'stackable/text',
@@ -111,5 +131,9 @@ test.describe( 'Block Editor', () => {
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
+
+		// There should be no PHP errors on frontend
+		const pageError = await admin.getPageError()
+		expect( pageError ).toBeNull()
 	} )
 } )

e2e/tests/global-settings.spec.ts

@@ -1,7 +1,6 @@
 import { test, expect } from 'e2e/test-utils'
-import { createColor, getRgb } from '~stackable/plugins/global-settings/colors/util'
 
-test.describe( 'Global Settigs', () => {
+test.describe( 'Global Settings', () => {
 	let pid = null
 
 	// Create Posts for testing
@@ -22,6 +21,7 @@ test.describe( 'Global Settigs', () => {
 		editor,
 	} ) => {
 		await page.getByLabel( 'Stackable Settings' ).click()
+		await page.getByRole( 'button', { name: 'Global Color Palette' } ).click()
 
 		// Add a new Global Color
 		const panel = page.locator( '.ugb-global-settings-color-picker ' ).filter( { hasText: 'Global Colors' } )
@@ -51,18 +51,31 @@ test.describe( 'Global Settigs', () => {
 
 		// Verify the newly added global color is in the color picker
 		await expect( page.getByRole( 'heading', { name: 'Global Colors' } ) ).toBeVisible()
-		await expect( page.getByLabel( `Color: Custom Color ${ count }` ) ).toBeVisible()
+
+		// For WP 6.7 and below, the label for colors has a prefix `Color: `
+		// For WP 6.8 the prefix was removed.
+		const regex = new RegExp( `^(?:Color:\\s*)?Custom Color ${ count }$` )
+
+		await expect( page.getByLabel( regex ) ).toBeVisible()
 
 		// Verify the color value
-		await page.getByLabel( `Color: Custom Color ${ count }` ).click()
+		await page.getByLabel( regex ).click()
 		await expect( page.getByLabel( 'Hex color' ) ).toHaveValue( hexValue )
 
 		// Click on the color picker button to close the popup
 		await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
 		// Delete added Global Color
 		await page.getByLabel( 'Stackable Settings' ).click()
-		await panel.locator( `.ugb-global-settings-color-picker__color-indicators > div > div:nth-child(${ count }) > button.stk-global-settings-color-picker__delete-button` ).click()
+
+		page.on( 'dialog', async dialog => await dialog.accept() )
+		const deleteRequest = page.waitForResponse( response => response.url().includes( 'wp/v2/settings' ) && response.request().method() === 'POST' )
+
+		await globalColors.getByLabel( 'Delete' ).nth( count - 1 ).click()
+
+		await deleteRequest
+		const _count = ( await globalColors.evaluate( node => Array.from( node.childNodes ) ) ).length
+		expect( _count ).toBeLessThan( count )
 	} )
 
 	test( 'Global Typography Styles should be applied when adding a heading', async ( {
@@ -93,56 +106,81 @@ test.describe( 'Global Settigs', () => {
 
 		await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'font-size', '32px' )
 
-		 // Reset Global Typography Styles
-		 await page.getByLabel( 'Stackable Settings' ).click()
-		 await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).getByRole( 'button', { name: 'Reset' } ).click()
+		// Reset Global Typography Styles
+		await page.getByLabel( 'Stackable Settings' ).click()
+
+		const resetButton = page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).getByLabel( 'Reset' )
+		const deleteRequest = page.waitForResponse( response => response.url().includes( 'wp/v2/settings' ) && response.request().method() === 'POST' )
+		await resetButton.click()
+
+		await deleteRequest
+		await expect( resetButton ).not.toBeVisible()
 	} )
 
 	test( 'When a default block is created, adding the block should have the default block\'s attributes', async ( {
 		page,
 		editor,
 	} ) => {
-		// Generate a color
-		const color = createColor()
-
 		await page.getByLabel( 'Stackable Settings' ).click()
 		await page.getByRole( 'button', { name: 'Block Defaults' } ).click()
 
 		// Open the Default Text Block Editor
 		const defaultBlockPagePromise = page.waitForEvent( 'popup' )
+
+		// Reset the block defaults first if it has been edited
+		const resetButton = page.locator( '.components-panel__body', { hasText: 'Block Defaults' } ).locator( '.stk-block-default-control', { hasText: /^Text$/ } ).first().getByLabel( 'Reset' )
+
+		if ( await resetButton.isVisible() ) {
+			await resetButton.click()
+		}
+
 		const textBlock = page.locator( '.components-panel__body', { hasText: 'Block Defaults' } ).locator( '.stk-block-default-control', { hasText: /^Text$/ } ).first().getByLabel( 'Edit' )
 		await textBlock.click()
 		const defaultBlockPage = await defaultBlockPagePromise
 
 		// Set a color for the default Text Block
 		await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
-		await defaultBlockPage.getByLabel( 'Hex color' ).fill( color )
+		await defaultBlockPage.getByLabel( 'Hex color' ).fill( 'ff0000' )
 		await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
+		// The default timeout is 30s, extend it to 90s
+		const updateRequest = defaultBlockPage.waitForResponse( response => response.url().includes( 'update_block_style' ) && response.request().method() === 'POST', { timeout: 90_000 } )
+
 		// In older WP versions, the button text is 'Update' instead of 'Save'
-		if ( await defaultBlockPage.getByRole( 'button', { name: 'Save', exact: true } ).isVisible() ) {
+		if ( await defaultBlockPage.getByRole( 'button', {
+			name: 'Save', exact: true, disabled: false,
+		} ).isVisible() ) {
 			await defaultBlockPage.getByRole( 'button', { name: 'Save', exact: true } ).click()
-		} else {
+		} else if ( await defaultBlockPage.getByRole( 'button', { name: 'Update', disabled: false } ).isVisible() ) {
 			await defaultBlockPage.getByRole( 'button', { name: 'Update' } ).click()
 		}
 
-		await defaultBlockPage.close()
+		// Make sure default block has been updated
+		await ( await updateRequest ).finished()
 
 		// Insert a Stackable Text Block, and check if the color is the same as the one set in the default block
-		await page.reload()
-		await editor.insertBlock( {
-			name: 'stackable/text',
-			attributes: {
-				text: 'test',
-			},
-		} )
-
-		await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', `rgb(${ getRgb( color ) })` )
+		const timeouts = [ 1_000, 5_000, 30_000 ]
+		for ( const timeout of timeouts ) {
+			try {
+				await page.reload()
+				await editor.insertBlock( {
+					name: 'stackable/text',
+					attributes: {
+						text: 'test',
+					},
+				} )
+
+				await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
+				break
+			} catch ( e ) {
+				// Ignore the error and try again because the default block might not be updated yet
+				await page.waitForTimeout( timeout )
+			}
+		}
 
 		// Reset Default Block
 		await page.getByLabel( 'Stackable Settings' ).click()
 		await page.getByRole( 'button', { name: 'Block Defaults' } ).click()
 		await page.locator( '.components-panel__body', { hasText: 'Block Defaults' } ).locator( '.stk-block-default-control', { hasText: /^Text$/ } ).first().getByLabel( 'Reset' ).click()
 	} )
 } )
-