[Customize your store] Make the frame not navigable for the MVP (#40431)

* Make the frame not navigable for the MVP

* Add changelog

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

@@ -47,6 +47,7 @@ export type ScaledBlockPreviewProps = {
 	};
 	additionalStyles: string;
 	onClickNavigationItem: ( event: MouseEvent ) => void;
+	isNavigable: boolean;
 };
 
 function ScaledBlockPreview( {
@@ -55,6 +56,7 @@ function ScaledBlockPreview( {
 	settings,
 	additionalStyles,
 	onClickNavigationItem,
+	isNavigable = false,
 }: ScaledBlockPreviewProps ) {
 	const { setLogoBlock } = useContext( LogoBlockContext );
 	const [ fontFamilies ] = useGlobalSetting(
@@ -77,139 +79,153 @@ function ScaledBlockPreview( {
 			<Iframe
 				aria-hidden
 				tabIndex={ -1 }
-				contentRef={ useRefEffect( ( bodyElement: HTMLBodyElement ) => {
+				readonly={ ! isNavigable }
-					const {
+				contentRef={ useRefEffect(
-						ownerDocument: { documentElement },
+					( bodyElement: HTMLBodyElement ) => {
-					} = bodyElement;
+						const {
+							ownerDocument: { documentElement },
+						} = bodyElement;
 
-					documentElement.classList.add(
+						documentElement.classList.add(
-						'block-editor-block-preview__content-iframe'
+							'block-editor-block-preview__content-iframe'
-					);
+						);
-					documentElement.style.position = 'absolute';
+						documentElement.style.position = 'absolute';
-					documentElement.style.width = '100%';
+						documentElement.style.width = '100%';
 
-					// Necessary for contentResizeListener to work.
+						// Necessary for contentResizeListener to work.
-					bodyElement.style.boxSizing = 'border-box';
+						bodyElement.style.boxSizing = 'border-box';
-					bodyElement.style.position = 'absolute';
+						bodyElement.style.position = 'absolute';
-					bodyElement.style.width = '100%';
+						bodyElement.style.width = '100%';
 
-					let navigationContainers: NodeListOf< HTMLDivElement >;
+						let navigationContainers: NodeListOf< HTMLDivElement >;
-					let siteTitles: NodeListOf< HTMLAnchorElement >;
+						let siteTitles: NodeListOf< HTMLAnchorElement >;
-					const onClickNavigation = ( event: MouseEvent ) => {
+						const onClickNavigation = ( event: MouseEvent ) => {
-						event.preventDefault();
+							event.preventDefault();
-						onClickNavigationItem( event );
+							onClickNavigationItem( event );
-					};
+						};
 
-					const onMouseMove = ( event: MouseEvent ) => {
+						const onMouseMove = ( event: MouseEvent ) => {
-						event.stopImmediatePropagation();
+							event.stopImmediatePropagation();
-					};
+						};
 
-					const possiblyRemoveAllListeners = () => {
+						const possiblyRemoveAllListeners = () => {
-						bodyElement.removeEventListener(
+							bodyElement.removeEventListener(
+								'mousemove',
+								onMouseMove,
+								false
+							);
+							if ( navigationContainers ) {
+								navigationContainers.forEach( ( element ) => {
+									element.removeEventListener(
+										'click',
+										onClickNavigation
+									);
+								} );
+							}
+
+							if ( siteTitles ) {
+								siteTitles.forEach( ( element ) => {
+									element.removeEventListener(
+										'click',
+										onClickNavigation
+									);
+								} );
+							}
+						};
+
+						const enableNavigation = () => {
+							// Remove contenteditable and inert attributes from editable elements so that users can click on navigation links.
+							bodyElement
+								.querySelectorAll(
+									'.block-editor-rich-text__editable[contenteditable="true"]'
+								)
+								.forEach( ( element ) => {
+									element.removeAttribute(
+										'contenteditable'
+									);
+								} );
+
+							bodyElement
+								.querySelectorAll( '*[inert="true"]' )
+								.forEach( ( element ) => {
+									element.removeAttribute( 'inert' );
+								} );
+
+							possiblyRemoveAllListeners();
+							navigationContainers = bodyElement.querySelectorAll(
+								'.wp-block-navigation__container'
+							);
+							navigationContainers.forEach( ( element ) => {
+								element.addEventListener(
+									'click',
+									onClickNavigation,
+									true
+								);
+							} );
+
+							siteTitles = bodyElement.querySelectorAll(
+								'.wp-block-site-title a'
+							);
+							siteTitles.forEach( ( element ) => {
+								element.addEventListener(
+									'click',
+									onClickNavigation,
+									true
+								);
+							} );
+						};
+
+						const onChange = () => {
+							// Get the current logo block client ID from DOM and set it in the logo block context. This is used for the logo settings. See: ./sidebar/sidebar-navigation-screen-logo.tsx
+							// Ideally, we should be able to get the logo block client ID from the block editor store but it is not available.
+							// We should update this code once the there is a selector in the block editor store that can be used to get the logo block client ID.
+							const siteLogo = bodyElement.querySelector(
+								'.wp-block-site-logo'
+							);
+
+							const blockClientId = siteLogo
+								? siteLogo.getAttribute( 'data-block' )
+								: null;
+
+							setLogoBlock( {
+								clientId: blockClientId,
+								isLoading: false,
+							} );
+
+							if ( isNavigable ) {
+								enableNavigation();
+							}
+						};
+
+						// Stop mousemove event listener to disable block tool insertion feature.
+						bodyElement.addEventListener(
 							'mousemove',
 							onMouseMove,
-							false
+							true
-						);
-						if ( navigationContainers ) {
-							navigationContainers.forEach( ( element ) => {
-								element.removeEventListener(
-									'click',
-									onClickNavigation
-								);
-							} );
-						}
-
-						if ( siteTitles ) {
-							siteTitles.forEach( ( element ) => {
-								element.removeEventListener(
-									'click',
-									onClickNavigation
-								);
-							} );
-						}
-					};
-
-					const onChange = () => {
-						// Remove contenteditable and inert attributes from editable elements so that users can click on navigation links.
-						bodyElement
-							.querySelectorAll(
-								'.block-editor-rich-text__editable[contenteditable="true"]'
-							)
-							.forEach( ( element ) => {
-								element.removeAttribute( 'contenteditable' );
-							} );
-
-						bodyElement
-							.querySelectorAll( '*[inert="true"]' )
-							.forEach( ( element ) => {
-								element.removeAttribute( 'inert' );
-							} );
-
-						possiblyRemoveAllListeners();
-						navigationContainers = bodyElement.querySelectorAll(
-							'.wp-block-navigation__container'
-						);
-						navigationContainers.forEach( ( element ) => {
-							element.addEventListener(
-								'click',
-								onClickNavigation,
-								true
-							);
-						} );
-
-						siteTitles = bodyElement.querySelectorAll(
-							'.wp-block-site-title a'
-						);
-						siteTitles.forEach( ( element ) => {
-							element.addEventListener(
-								'click',
-								onClickNavigation,
-								true
-							);
-						} );
-
-						// Get the current logo block client ID from DOM and set it in the logo block context. This is used for the logo settings. See: ./sidebar/sidebar-navigation-screen-logo.tsx
-						// Ideally, we should be able to get the logo block client ID from the block editor store but it is not available.
-						// We should update this code once the there is a selector in the block editor store that can be used to get the logo block client ID.
-						const siteLogo = bodyElement.querySelector(
-							'.wp-block-site-logo'
 						);
 
-						const blockClientId = siteLogo
+						const observer = new window.MutationObserver(
-							? siteLogo.getAttribute( 'data-block' )
+							onChange
-							: null;
+						);
 
-						setLogoBlock( {
+						observer.observe( bodyElement, {
-							clientId: blockClientId,
+							attributes: true,
-							isLoading: false,
+							characterData: false,
+							subtree: true,
+							childList: true,
 						} );
-					};
 
-					// Stop mousemove event listener to disable block tool insertion feature.
+						return () => {
-					bodyElement.addEventListener(
+							observer.disconnect();
-						'mousemove',
+							possiblyRemoveAllListeners();
-						onMouseMove,
+							setLogoBlock( {
-						true
+								clientId: null,
-					);
+								isLoading: true,
-
+							} );
-					const observer = new window.MutationObserver( onChange );
+						};
-
+					},
-					observer.observe( bodyElement, {
+					[ isNavigable ]
-						attributes: true,
+				) }
-						characterData: false,
-						subtree: true,
-						childList: true,
-					} );
-
-					return () => {
-						observer.disconnect();
-						possiblyRemoveAllListeners();
-						setLogoBlock( {
-							clientId: null,
-							isLoading: true,
-						} );
-					};
-				}, [] ) }
 			>
 				<EditorStyles styles={ settings.styles } />
 				<style>

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

@@ -123,6 +123,7 @@ export const BlockEditor = ( {} ) => {
 					blocks={ blocks }
 					settings={ settings }
 					additionalStyles={ '' }
+					isNavigable={ false }
 					onClickNavigationItem={ onClickNavigationItem }
 					// Don't use sub registry so that we can get the logo block from the main registry on the logo sidebar navigation screen component.
 					useSubRegistry={ false }

plugins/woocommerce/changelog/update-disable-cys-frame-navigation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+CYS: Make the frame not navigable for the MVP