[CYS Full Composability] Ensure that the assembler doesn't crash when the feature flag is enabled, but the site doesn't have the latest version of Gutenberg. (#47546)

* CYS: allow to the user to move the pattern

* add feature flag

* Add changefile(s) from automation for the following project(s): woocommerce

* CYS: Add shuffle button

* CYS - add shuffle feature

* Add changefile(s) from automation for the following project(s): woocommerce

* use WooCommerce feature flag approach

* fix lint error

* Highlight the pattern when the user hovers it

* Add changefile(s) from automation for the following project(s): woocommerce

* CYS - Assembler: improve feature flag check

* Add changefile(s) from automation for the following project(s): woocommerce

* improve logic

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx

@@ -32,6 +32,7 @@ import { CustomizeStoreContext } from '.';
 import { isAIFlow } from '../guards';
 import { selectBlockOnHover } from './utils/select-block-on-hover';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { isFullComposabilityFeatureAndAPIAvailable } from './utils/is-full-composability-enabled';
 
 // @ts-ignore No types for this exist yet.
 const { Provider: DisabledProvider } = Disabled.Context;
@@ -217,7 +218,7 @@ function ScaledBlockPreview( {
 		// Stop mousemove event listener to disable block tool insertion feature.
 		bodyElement.addEventListener( 'mousemove', onMouseMove, true );
 
-		if ( window.wcAdminFeatures[ 'pattern-toolkit-full-composability' ] ) {
+		if ( isFullComposabilityFeatureAndAPIAvailable() ) {
 			bodyElement.addEventListener( 'click', ( event ) => {
 				selectBlockOnHover( event, {
 					selectBlockByClientId: selectBlock,
@@ -285,7 +286,11 @@ function ScaledBlockPreview( {
 					// @ts-ignore disabled prop exists
 					scrolling={ isScrollable ? 'yes' : 'no' }
 					tabIndex={ -1 }
-					readonly={ false }
+					readonly={
+						isFullComposabilityFeatureAndAPIAvailable()
+							? false
+							: true
+					}
 					style={
 						autoScale
 							? {

plugins/woocommerce-admin/client/customize-store/assembler-hub/block-preview.tsx

@@ -19,6 +19,7 @@ import {
 } from './auto-block-preview';
 import { ChangeHandler } from './hooks/use-editor-blocks';
 import { Toolbar } from './toolbar/toolbar';
+import { isFullComposabilityFeatureAndAPIAvailable } from './utils/is-full-composability-enabled';
 
 export const BlockPreview = ( {
 	blocks,
@@ -43,9 +44,7 @@ export const BlockPreview = ( {
 				onChange={ onChange }
 				useSubRegistry={ useSubRegistry }
 			>
-				{ window.wcAdminFeatures[
-					'pattern-toolkit-full-composability'
-				] && <Toolbar /> }
+				{ isFullComposabilityFeatureAndAPIAvailable() && <Toolbar /> }
 				<AutoHeightBlockPreview settings={ settings } { ...props } />
 			</BlockEditorProvider>
 		</>

plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx

@@ -91,6 +91,7 @@ export default function Shuffle( { clientId }: { clientId: string } ) {
 			);
 		} );
 	}, [ categories, patterns ] );
+
 	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
 		return null;
 	}

plugins/woocommerce-admin/client/customize-store/assembler-hub/utils/is-full-composability-enabled.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import {
+	BlockPopover,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/block-editor';
+
+export const isPatternToolkitFullComposabilityFeatureFlagEnabled = () => {
+	return window.wcAdminFeatures[ 'pattern-toolkit-full-composability' ];
+};
+
+export const isGutenbergAPIAvailableForFullComposability = () => {
+	return [ BlockPopover ].every(
+		( api ) => api !== undefined && api !== null
+	);
+};
+
+export const isFullComposabilityFeatureAndAPIAvailable = () => {
+	return (
+		isPatternToolkitFullComposabilityFeatureFlagEnabled() &&
+		isGutenbergAPIAvailableForFullComposability()
+	);
+};

plugins/woocommerce/changelog/47546-47545-cys-full-composability-ensure-that-the-assembler-doesnt-crash-when-the-feature-flag-is-enabled-but-site-doesnt-have-the-latest-version-of-gutenberg

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+[CYS Full Composability] Ensure that the assembler doesn't crash when the feature flag is enabled, but the site doesn't have the latest version of Gutenberg.