Refactors for layout selector and WP 6.8 compatibility (#2639)

* refactors for layout selector and wp 6.8 compat

* ensure the layout selector auto-opens

* try test fix

* try pipeline fixes

Author: aledesma-godaddy

.github/workflows/test-e2e-cypress.yml

@@ -41,7 +41,7 @@ jobs:
       - name: Setup Spec Matrix
         id: setup-spec-matrix
         run: |
-          changed_files=$(git diff --name-only --diff-filter=ADMR ${{ github.event.before }} origin/master)
+          changed_files=$(git diff --name-only --diff-filter=ADMR origin/master...HEAD)
           spec_list=()
           declare -A spec_seen
 

.github/workflows/test-e2e.yml

@@ -35,14 +35,3 @@ jobs:
       wpVersion: "WordPress/WordPress#${{matrix.wp}}"
       theme: ${{matrix.theme}}
       phpVersion: ${{matrix.php}}
-    concurrency:
-      group: >
-        ${{
-          format(
-            'chrome-e2e-WP{0}-PHP{1}-{2}',
-            matrix.wp,
-            matrix.php,
-            matrix.theme == '' && 'twentytwentythree' || 'go'
-          )
-        }}
-      cancel-in-progress: true

.github/workflows/test-wp-next.yml

@@ -37,9 +37,6 @@ jobs:
       wpVersion: ${{ needs.set_constant.outputs.wp_next }}
       installPath: "tests-wordpress-6.8-RC2"
       theme: "https://downloads.wordpress.org/theme/go.zip"
-    concurrency:
-      group: chrome-wp-next
-      cancel-in-progress: true
 
   # PHP Unit testing
   php_unit_wp_next:

src/extensions/layout-selector/index.js

@@ -13,8 +13,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, DropdownMenu, Icon, MenuGroup, MenuItem, Modal, Path, SVG } from '@wordpress/components';
 import { Component, isValidElement } from '@wordpress/element';
-import { compose, ifCondition } from '@wordpress/compose';
-import { register, useSelect, withDispatch, withSelect } from '@wordpress/data';
+import { register, useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -176,78 +175,89 @@ class LayoutSelector extends Component {
 	}
 }
 
+const LayoutSelectorApp = () => {
+	// Hooks must be called unconditionally and in the same order every render.
+	const [ layoutSelectorEnabled ] = useEntityProp( 'root', 'site', LAYOUT_SELECTOR_FEATURE_ENABLED_KEY );
+
+	const layouts = useComputedLayouts();
+	const categories = useCategories( layouts );
+
+	const {
+		hasLayouts,
+		hasCategories,
+		selectedCategory,
+		templateSelectorActive,
+		isMobile,
+		hasComputedLayouts,
+	} = useSelect( ( select ) => {
+		const ts = select( 'coblocks/template-selector' ) || {};
+		const vp = select( 'core/viewport' ) || {};
+		return {
+			hasLayouts: typeof ts.hasLayouts === 'function' ? ts.hasLayouts() : false,
+			hasCategories: typeof ts.hasCategories === 'function' ? ts.hasCategories() : false,
+			selectedCategory: typeof ts.getSelectedCategory === 'function' ? ts.getSelectedCategory() : 'most-used',
+			templateSelectorActive: typeof ts.isTemplateSelectorActive === 'function' ? ts.isTemplateSelectorActive() : false,
+			isMobile: typeof vp.isViewportMatch === 'function' ? vp.isViewportMatch( '< medium' ) : false,
+			hasComputedLayouts: typeof ts.getComputedLayouts === 'function' ? ( ( ts.getComputedLayouts() || [] ).length > 0 ) : false,
+		};
+	}, [] );
+
+	const tsDispatch = useDispatch( 'coblocks/template-selector' ) || {};
+	const editorDispatch = useDispatch( 'core/editor' ) || {};
+	const noticesDispatch = useDispatch( 'core/notices' ) || {};
+
+	// Non-hook logic can be conditional.
+	const labsIsPresent = !! document.getElementsByClassName( 'coblocks-labs-modal' )?.[ 0 ];
+	const shouldRender = layoutSelectorEnabled && ! labsIsPresent && hasLayouts && hasCategories && hasComputedLayouts;
+
+	if ( ! shouldRender ) {
+		return null;
+	}
+
+	const closeTemplateSelector = typeof tsDispatch.closeTemplateSelector === 'function' ? tsDispatch.closeTemplateSelector : () => {};
+	const incrementLayoutUsage = typeof tsDispatch.incrementLayoutUsage === 'function' ? tsDispatch.incrementLayoutUsage : () => {};
+	const updateSelectedCategory = typeof tsDispatch.updateSelectedCategory === 'function' ? tsDispatch.updateSelectedCategory : () => {};
+	const editPost = typeof editorDispatch.editPost === 'function' ? editorDispatch.editPost : () => {};
+	const createSuccessNotice = typeof noticesDispatch.createSuccessNotice === 'function' ? noticesDispatch.createSuccessNotice : () => {};
+
+	const useEmptyTemplateLayout = () => {
+		editPost( { blocks: [], title: '' } );
+		closeTemplateSelector();
+	};
+
+	const useTemplateLayout = ( layout ) => {
+		editPost( {
+			blocks: layout.blocks,
+			title: layout.label,
+		} );
+		closeTemplateSelector();
+		incrementLayoutUsage( layout );
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: layout name */
+				__( '"%s" layout has been added to the page.', 'coblocks' ),
+				layout.label
+			),
+			{ type: 'snackbar' }
+		);
+	};
+
+	return (
+		<LayoutSelector
+			categories={ categories }
+			selectedCategory={ selectedCategory }
+			updateSelectedCategory={ updateSelectedCategory }
+			isActive={ templateSelectorActive }
+			isMobile={ isMobile }
+			useEmptyTemplateLayout={ useEmptyTemplateLayout }
+			useTemplateLayout={ useTemplateLayout }
+			layouts={ layouts }
+		/>
+	);
+};
+
 if ( typeof coblocksLayoutSelector !== 'undefined' && coblocksLayoutSelector.postTypeEnabled ) {
 	registerPlugin( 'coblocks-layout-selector', {
-		render: compose( [
-			ifCondition( () => {
-				const [ layoutSelectorEnabled ] = useEntityProp( 'root', 'site', LAYOUT_SELECTOR_FEATURE_ENABLED_KEY );
-				// Prevent render if labs modal is open.
-				const labsIsPresent = !! document.getElementsByClassName( 'coblocks-labs-modal' )?.[ 0 ];
-				const {
-					hasLayouts,
-					hasCategories,
-				} = useSelect( ( select ) => select( 'coblocks/template-selector' ) );
-
-				return layoutSelectorEnabled && ! labsIsPresent && hasLayouts() && hasCategories();
-			} ),
-			withSelect( ( select ) => {
-				const {
-					getSelectedCategory,
-					isTemplateSelectorActive,
-				} = select( 'coblocks/template-selector' );
-
-				const { isViewportMatch } = select( 'core/viewport' );
-
-				const layouts = useComputedLayouts();
-
-				return {
-					categories: useCategories( layouts ),
-					isActive: isTemplateSelectorActive(),
-					isMobile: isViewportMatch( '< medium' ),
-					layouts,
-					selectedCategory: getSelectedCategory(),
-				};
-			} ),
-			withDispatch( ( dispatch ) => {
-				const {
-					closeTemplateSelector,
-					incrementLayoutUsage,
-					updateSelectedCategory,
-				} = dispatch( 'coblocks/template-selector' );
-				const { editPost } = dispatch( 'core/editor' );
-				const { createWarningNotice, createSuccessNotice } = dispatch( 'core/notices' );
-
-				return {
-					closeTemplateSelector,
-					createSuccessNotice,
-					createWarningNotice,
-					editPost,
-					updateSelectedCategory,
-
-					useEmptyTemplateLayout: () => {
-						editPost( { blocks: [], title: '' } );
-						closeTemplateSelector();
-					},
-
-					// Replace any blocks with the selected layout.
-					useTemplateLayout: ( layout ) => {
-						editPost( {
-							blocks: layout.blocks,
-							title: layout.label,
-						} );
-						closeTemplateSelector();
-						incrementLayoutUsage( layout );
-						createSuccessNotice(
-							sprintf(
-								// translators: %s is the post title.
-								__( '"%s" layout has been added to the page.', 'coblocks' ),
-								layout.label
-							),
-							{ type: 'snackbar' }
-						);
-					},
-				};
-			} ),
-		] )( LayoutSelector ),
+		render: LayoutSelectorApp,
 	} );
 }

src/extensions/layout-selector/index.php

@@ -62,8 +62,8 @@ function coblocks_layout_selector_layouts() {
  * Localize layout and category definitions for the Layout Selector component.
  */
 function coblocks_localize_layout_selector() {
-	$current_screen   = get_current_screen();
-	$screen_post_type = $current_screen->post_type;
+	$current_screen   = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
+	$screen_post_type = ( $current_screen && isset( $current_screen->post_type ) ) ? $current_screen->post_type : null;
 
 	$allowed_post_types = array(
 		'page',
@@ -73,7 +73,7 @@ function coblocks_localize_layout_selector() {
 		'coblocks-editor',
 		'coblocksLayoutSelector',
 		array(
-			'postTypeEnabled' => in_array( $screen_post_type, $allowed_post_types, true ),
+			'postTypeEnabled' => $screen_post_type ? in_array( $screen_post_type, $allowed_post_types, true ) : false,
 			'layouts'         => coblocks_layout_selector_layouts(),
 			'categories'      => coblocks_layout_selector_categories(),
 		)

src/extensions/layout-selector/store.js

@@ -9,7 +9,7 @@ import { kebabCase } from 'lodash';
  */
 import { controls } from '@wordpress/data-controls';
 import memoize from 'memize';
-import { createReduxStore, select } from '@wordpress/data';
+import { createReduxStore, select as dataSelect } from '@wordpress/data';
 
 const DEFAULT_STATE = {
 	categories: coblocksLayoutSelector.categories || [],
@@ -110,11 +110,19 @@ const store = createReduxStore( 'coblocks/template-selector', {
 
 	resolvers: {
 		* isTemplateSelectorActive() {
-			const isCleanNewPost = select( 'core/editor' ).isCleanNewPost();
-			const isEditedPostEmpty = select( 'core/editor' ).isEditedPostEmpty();
+			// Ensure the editor store is available in environments where it isn't auto-enqueued.
+			const editorSelect = dataSelect( 'core/editor' );
+			const isCleanNewPost = editorSelect && typeof editorSelect.isCleanNewPost === 'function'
+				? editorSelect.isCleanNewPost()
+				: false;
+			const isEditedPostEmpty = editorSelect && typeof editorSelect.isEditedPostEmpty === 'function'
+				? editorSelect.isEditedPostEmpty()
+				: false;
 			const shouldShowTemplateSelector = isCleanNewPost || isEditedPostEmpty;
 
-			return shouldShowTemplateSelector && actions.openTemplateSelector();
+			if ( shouldShowTemplateSelector ) {
+				yield actions.openTemplateSelector();
+			}
 		},
 	},
 	selectors: {