Improve CYS assembler hub performance (#41453)

* Use custome iframe to improve iframe loading performance

* Add loadStyles and loadScripts props

* Fix sidebar pattern rerendering issue

* Add changelog

* Fix prop name

* Fix isScrollable

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

@@ -53,6 +53,9 @@ export type ScaledBlockPreviewProps = {
 	isScrollable?: boolean;
 	autoScale?: boolean;
 	setLogoBlockContext?: boolean;
+	CustomIframeComponent?: React.ComponentType<
+		Parameters< typeof Iframe >[ 0 ]
+	>;
 };
 
 function ScaledBlockPreview( {
@@ -65,6 +68,7 @@ function ScaledBlockPreview( {
 	isScrollable = true,
 	autoScale = true,
 	setLogoBlockContext = false,
+	CustomIframeComponent = Iframe,
 }: ScaledBlockPreviewProps ) {
 	const [ contentHeight, setContentHeight ] = useState< number | null >(
 		null
@@ -241,7 +245,7 @@ function ScaledBlockPreview( {
 						: {}
 				}
 			>
-				<Iframe
+				<CustomIframeComponent
 					aria-hidden
 					scrolling={ isScrollable ? 'yes' : 'no' }
 					tabIndex={ -1 }
@@ -322,7 +326,7 @@ function ScaledBlockPreview( {
 						fontFamilies={ externalFontFamilies }
 						onLoad={ noop }
 					/>
-				</Iframe>
+				</CustomIframeComponent>
 			</div>
 		</DisabledProvider>
 	);

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

@@ -25,6 +25,7 @@ import { useEditorBlocks } from './hooks/use-editor-blocks';
 import { useScrollOpacity } from './hooks/use-scroll-opacity';
 import { CustomizeStoreContext } from './';
 import { HighlightedBlockContext } from './context/highlighted-block-context';
+import Iframe from './iframe';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -163,12 +164,19 @@ export const BlockEditor = ( {} ) => {
 					settings={ settings }
 					additionalStyles={ additionalStyles }
 					isNavigable={ false }
-					isScrollable={ currentState !== 'transitionalScreen' }
+					isScrollable={
+						// Disable scrollable for transitional screen
+						! (
+							typeof currentState === 'object' &&
+							currentState.transitionalScreen === 'transitional'
+						)
+					}
 					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 }
 					autoScale={ false }
 					setLogoBlockContext={ true }
+					CustomIframeComponent={ Iframe }
 				/>
 			</div>
 		</div>

plugins/woocommerce-admin/client/customize-store/assembler-hub/block-pattern-list.jsx

@@ -21,6 +21,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import BlockPreview from './block-preview';
+import Iframe from './iframe';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -74,6 +75,7 @@ function BlockPattern( { pattern, onClick, onHover, composite, showTooltip } ) {
 							settings={ settings }
 							isScrollable={ false }
 							autoScale={ true }
+							CustomIframeComponent={ Iframe }
 						/>
 						{ ! showTooltip && (
 							<div className="block-editor-block-patterns-list__item-title">

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-patterns.ts

@@ -6,7 +6,7 @@
 import { useSelect } from '@wordpress/data';
 // @ts-ignore No types for this exist yet.
 import { store as coreStore } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import { BlockInstance, parse } from '@wordpress/blocks';
 /**
  * Internal dependencies
@@ -51,34 +51,44 @@ export const usePatterns = () => {
 
 export const usePatternsByCategory = ( category: string ) => {
 	const { blockPatterns, isLoading } = usePatterns();
-	const { attributes } = useLogoAttributes();
+	const { attributes, isAttributesLoading } = useLogoAttributes();
+	const [ currentLogoWidth, setCurrentLogoWidth ] = useState(
+		attributes.width
+	);
 
-	const patternsByCategory: PatternWithBlocks[] = useMemo( () => {
-		return ( blockPatterns || [] )
-			.filter( ( pattern: Pattern ) =>
-				pattern.categories?.includes( category )
-			)
-			.map( ( pattern: Pattern ) => {
-				const content = setLogoWidth(
-					pattern.content,
-					attributes.width
-				);
+	useEffect( () => {
+		if ( isAttributesLoading ) {
+			return;
+		}
 
-				return {
-					...pattern,
+		setCurrentLogoWidth( attributes.width );
+	}, [ isAttributesLoading, attributes.width, currentLogoWidth ] );
+
+	const patternsByCategory = useMemo( () => {
+		return ( blockPatterns || [] ).filter( ( pattern: Pattern ) =>
+			pattern.categories?.includes( category )
+		);
+	}, [ blockPatterns, category ] );
+
+	const patternsWithBlocks = useMemo( () => {
+		return patternsByCategory.map( ( pattern: Pattern ) => {
+			const content = setLogoWidth( pattern.content, currentLogoWidth );
+
+			return {
+				...pattern,
+				content,
+				// Set the logo width to the current logo width so that user changes are not lost.
+
+				blocks: parse(
 					content,
-					// Set the logo width to the current logo width so that user changes are not lost.
+					// @ts-ignore - Passing options is valid, but not in the type.
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				),
+			};
+		} );
+	}, [ patternsByCategory, currentLogoWidth ] );
 
-					blocks: parse(
-						content,
-						// @ts-ignore - Passing options is valid, but not in the type.
-						{
-							__unstableSkipMigrationLogs: true,
-						}
-					),
-				};
-			} );
-	}, [ blockPatterns, category, attributes ] );
-
-	return { isLoading, patterns: patternsByCategory };
+	return { isLoading, patterns: patternsWithBlocks };
 };

plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx

@@ -33,10 +33,21 @@ function Iframe( {
 	expand = false,
 	readonly,
 	forwardedRef: ref,
+	loadStyles = true,
+	loadScripts = false,
 	...props
 } ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
+	const { resolvedAssets } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			resolvedAssets: settings.__unstableResolvedAssets,
+		};
+	}, [] );
+	const { styles = '', scripts = '' } = resolvedAssets;
+
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const setRef = useRefEffect( ( node ) => {
@@ -56,7 +67,8 @@ function Iframe( {
 	<head>
 		<script>window.frameElement._load()</script>
 		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
-
+		${ loadStyles ? styles : '' }
+		${ loadScripts ? scripts : '' }
 	</head>
 	<body>
 		<script>document.currentScript.parentElement.remove()</script>

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/global-styles-variation-iframe/index.tsx

@@ -18,7 +18,7 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
  * Internal dependencies
  */
 import './style.scss';
-import Iframe from '../iframe';
+import Iframe from '../../../iframe';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
@@ -71,6 +71,7 @@ export const GlobalStylesVariationIframe = ( {
 				visibility: width ? 'visible' : 'hidden',
 			} }
 			tabIndex={ -1 }
+			loadStyles={ false }
 			contentRef={ useRefEffect( ( bodyElement ) => {
 				// Disable moving focus to the writing flow wrapper if the focus disappears
 				// See https://github.com/WordPress/gutenberg/blob/aa8e1c52c7cb497e224a479673e584baaca97113/packages/block-editor/src/components/writing-flow/use-tab-nav.js#L136

plugins/woocommerce/changelog/perf-cys-iframe-loading

@@ -0,0 +1,4 @@
+Significance: patch
+Type: performance
+
+Improve CYS assembler hub performance