Highlight main block at hover (#47415)

* 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

---------

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

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

@@ -13,6 +13,7 @@ import {
 	__unstableIframe as Iframe,
 	privateApis as blockEditorPrivateApis,
 	BlockList,
+	store as blockEditorStore,
 	// @ts-ignore No types for this exist yet.
 } from '@wordpress/block-editor';
 // @ts-ignore No types for this exist yet.
@@ -29,6 +30,8 @@ import { FontFamily } from '../types/font';
 import { FontFamiliesLoaderDotCom } from './sidebar/global-styles/font-pairing-variations/font-families-loader-dot-com';
 import { CustomizeStoreContext } from '.';
 import { isAIFlow } from '../guards';
+import { selectBlockOnHover } from './utils/select-block-on-hover';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 // @ts-ignore No types for this exist yet.
 const { Provider: DisabledProvider } = Disabled.Context;
@@ -87,6 +90,13 @@ function ScaledBlockPreview( {
 		viewportWidth = containerWidth;
 	}
 
+	// @ts-expect-error No types for this exist yet.
+	const { selectBlock, setBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	// @ts-expect-error No types for this exist yet.
+	const { getBlockParents } = useSelect( blockEditorStore );
+
 	// Avoid scrollbars for pattern previews.
 	const editorStyles = useMemo( () => {
 		if ( ! isScrollable && settings.styles ) {
@@ -207,6 +217,28 @@ function ScaledBlockPreview( {
 		// Stop mousemove event listener to disable block tool insertion feature.
 		bodyElement.addEventListener( 'mousemove', onMouseMove, true );
 
+		if ( window.wcAdminFeatures[ 'pattern-toolkit-full-composability' ] ) {
+			bodyElement.addEventListener( 'click', ( event ) => {
+				selectBlockOnHover( event, {
+					selectBlockByClientId: selectBlock,
+					getBlockParents,
+					setBlockEditingMode,
+				} );
+			} );
+
+			bodyElement.addEventListener(
+				'mouseover',
+				( event ) => {
+					selectBlockOnHover( event, {
+						selectBlockByClientId: selectBlock,
+						getBlockParents,
+						setBlockEditingMode: () => void 0,
+					} );
+				},
+				true
+			);
+		}
+
 		const observer = new window.MutationObserver( onChange );
 		observer.observe( bodyElement, {
 			attributes: true,
@@ -253,7 +285,7 @@ function ScaledBlockPreview( {
 					// @ts-ignore disabled prop exists
 					scrolling={ isScrollable ? 'yes' : 'no' }
 					tabIndex={ -1 }
-					readonly={ ! isNavigable }
+					readonly={ false }
 					style={
 						autoScale
 							? {
@@ -297,8 +329,8 @@ function ScaledBlockPreview( {
 					<style>
 						{ `
 						.block-editor-block-list__block::before,
-						.is-selected::after,
-						.is-hovered::after,
+						.has-child-selected > .is-selected::after,
+						.is-hovered:not(.is-selected.is-hovered)::after,
 						.block-list-appender {
 							display: none !important;
 						}

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx

@@ -159,6 +159,10 @@ export const SidebarNavigationScreenHomepage = () => {
 								select( blockEditorStore )
 							).__experimentalGetParsedPattern( pattern.name );
 
+							if ( ! parsedPattern ) {
+								return acc;
+							}
+
 							return [ ...acc, ...parsedPattern.blocks ];
 						},
 						[]

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -828,3 +828,8 @@ body.woocommerce-assembler {
 .woocommerce-customize-store__logo-menu-item-delete {
 	color: #cc1818;
 }
+
+.components-resizable-box__container.has-show-handle.block-library-cover__resize-container,
+.components-resizable-box__handle.components-resizable-box__side-handle.components-resizable-box__handle-left {
+	display: none;
+}

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

@@ -7,7 +7,13 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button, Path, SVG } from '@wordpress/components';
+import {
+	Button,
+	Path,
+	SVG,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
 import {
 	unlock,
 	// @ts-expect-error No types for this exist yet.
@@ -100,21 +106,25 @@ export default function Shuffle( { clientId }: { clientId: string } ) {
 	}
 
 	return (
-		<Button
-			label={ __( 'Shuffle', 'woocommerce' ) }
-			icon={ shuffleIcon }
-			onClick={ () => {
-				const nextPattern = getNextPattern();
-				// @ts-expect-error - attributes is marked as readonly.
-				nextPattern.blocks[ 0 ].attributes = {
-					...nextPattern.blocks[ 0 ].attributes,
-					metadata: {
-						...nextPattern.blocks[ 0 ].attributes.metadata,
-						categories,
-					},
-				};
-				replaceBlocks( clientId, nextPattern.blocks );
-			} }
-		/>
+		<ToolbarGroup>
+			<ToolbarButton>
+				<Button
+					label={ __( 'Shuffle', 'woocommerce' ) }
+					icon={ shuffleIcon }
+					onClick={ () => {
+						const nextPattern = getNextPattern();
+						// @ts-expect-error - attributes is marked as readonly.
+						nextPattern.blocks[ 0 ].attributes = {
+							...nextPattern.blocks[ 0 ].attributes,
+							metadata: {
+								...nextPattern.blocks[ 0 ].attributes.metadata,
+								categories,
+							},
+						};
+						replaceBlocks( clientId, nextPattern.blocks );
+					} }
+				/>
+			</ToolbarButton>
+		</ToolbarGroup>
 	);
 }

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

@@ -4,11 +4,7 @@
 
 import { useSelect } from '@wordpress/data';
 import { BlockInstance } from '@wordpress/blocks';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	Toolbar as WPToolbar,
-} from '@wordpress/components';
+import { ToolbarGroup, Toolbar as WPToolbar } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import {
 	BlockMover,
@@ -91,15 +87,9 @@ export const Toolbar = () => {
 								}
 							/>
 						</ToolbarGroup>
-						<ToolbarGroup>
-							<ToolbarButton>
-								{ currentBlock && (
-									<Shuffle
-										clientId={ currentBlock?.clientId }
-									/>
-								) }
-							</ToolbarButton>
-						</ToolbarGroup>
+						{ currentBlock && (
+							<Shuffle clientId={ currentBlock?.clientId } />
+						) }
 					</>
 				</WPToolbar>
 			</div>

plugins/woocommerce-admin/client/customize-store/assembler-hub/utils/select-block-on-hover.ts

@@ -0,0 +1,55 @@
+const BLOCK_SELECTOR = '.block-editor-block-list__block';
+
+const getBlockClientId = ( node: HTMLElement ) => {
+	while ( node && node.nodeType !== node.ELEMENT_NODE ) {
+		node = node.parentNode as HTMLElement;
+	}
+
+	if ( ! node ) {
+		return;
+	}
+
+	const elementNode = node;
+	const blockNode = elementNode.closest( BLOCK_SELECTOR );
+
+	if ( ! blockNode ) {
+		return;
+	}
+
+	return blockNode.id.slice( 'block-'.length );
+};
+
+export const selectBlockOnHover = (
+	event: MouseEvent,
+	{
+		selectBlockByClientId,
+		getBlockParents,
+		setBlockEditingMode,
+	}: {
+		selectBlockByClientId: (
+			clientId: string,
+			initialPosition: 0 | -1 | null
+		) => void;
+		getBlockParents: ( clientId: string ) => string[];
+		setBlockEditingMode?: ( clientId: string, mode: string ) => void;
+	}
+) => {
+	const target = event.target as HTMLElement;
+
+	const blockClientId = getBlockClientId( target );
+
+	if ( ! blockClientId ) {
+		return;
+	}
+
+	const blockParents = getBlockParents( blockClientId );
+
+	if ( ! blockParents || blockParents.length === 0 ) {
+		selectBlockByClientId( blockClientId, null );
+	} else {
+		if ( setBlockEditingMode ) {
+			setBlockEditingMode( blockClientId, 'disabled' );
+		}
+		selectBlockByClientId( blockParents[ 0 ], null );
+	}
+};

plugins/woocommerce/changelog/47415-add-highlight-selected-block

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Highlight the pattern when the user hovers it.