Fix: WP 6.8 Compatibility (#3489)

* adjust wp version, print current wp version

* update tests, add php 7.3 and wp 6.5.5

* fix adding slides to carousel block

* update failing test

* update global settings test

* add break, await response to finish

Author: kaeizen

.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)

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()

e2e/tests/global-settings.spec.ts

@@ -51,10 +51,15 @@ test.describe( 'Global Settings', () => {
 
 		// 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
@@ -139,7 +144,7 @@ test.describe( 'Global Settings', () => {
 		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.waitForRequest( request => request.url().includes( 'update_block_style' ) && request.method() === 'POST', { timeout: 90_000 } )
+		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', {
@@ -150,20 +155,28 @@ test.describe( 'Global Settings', () => {
 			await defaultBlockPage.getByRole( 'button', { name: 'Update' } ).click()
 		}
 
-		// Make sure default block has been updated before closing the tab
-		await updateRequest
-		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(255, 0, 0)' )
+		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()

src/block/column/block.json

@@ -13,6 +13,7 @@
 	],
 	"parent": [
 		"stackable/columns",
+		"stackable/carousel",
 		"stackable/feature",
 		"stackable/feature-grid",
 		"stackable/horizontal-scroller",

src/stk-block-types.php

@@ -223,6 +223,7 @@ function stackable_get_blocks_array( $blocks = array() ) {
 				],
 				'parent' => [
 					'stackable/columns',
+					'stackable/carousel',
 					'stackable/feature',
 					'stackable/feature-grid',
 					'stackable/horizontal-scroller',