Avoid CSS delay

WordPress · Aug 30, 2022 · ea821aa · ea821aa
1 parent d047221
commit ea821aa
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -480,7 +480,7 @@ function( $settings ) {
 		// so we need to make an exception.
 		$settings['__unstableResolvedContentStyles'] = gutenberg_resolve_dependencies(
 			wp_styles(),
-			$settings['__experimentalContentStyles']
+			isset( $settings['__experimentalContentStyles'] ) ? $settings['__experimentalContentStyles'] : array()
 		);
 		return $settings;
 	},

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -13,7 +13,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import transformStyles from '../../utils/transform-styles';
+import transformStyles, { transformStyle } from '../../utils/transform-styles';
 
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 extend( [ namesPlugin, a11yPlugin ] );
@@ -106,8 +106,16 @@ function PrefixedStyle( { tagName, href, id, rel, media, textContent } ) {
 		}
 	}
 
+	const transformedStyle = useMemo(
+		() =>
+			textContent
+				? transformStyle( { css: textContent }, EDITOR_STYLES_SELECTOR )
+				: '',
+		[ textContent ]
+	);
+
 	if ( TagName === 'style' ) {
-		return <TagName { ...{ id, onLoad } }>{ textContent }</TagName>;
+		return <TagName { ...{ id, onLoad } }>{ transformedStyle }</TagName>;
 	}
 
 	return <TagName { ...{ href, id, rel, media, onLoad } } />;

diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
@@ -15,6 +15,21 @@ import traverse from './traverse';
 import urlRewrite from './transforms/url-rewrite';
 import wrap from './transforms/wrap';
 
+export function transformStyle( { css, baseURL }, wrapperClassName ) {
+	const transforms = [];
+	if ( wrapperClassName ) {
+		transforms.push( wrap( wrapperClassName ) );
+	}
+	if ( baseURL ) {
+		transforms.push( urlRewrite( baseURL ) );
+	}
+	if ( transforms.length ) {
+		return traverse( css, compose( transforms ) );
+	}
+
+	return css;
+}
+
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
@@ -23,20 +38,9 @@ import wrap from './transforms/wrap';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {
-	return map( styles, ( { css, baseURL } ) => {
-		const transforms = [];
-		if ( wrapperClassName ) {
-			transforms.push( wrap( wrapperClassName ) );
-		}
-		if ( baseURL ) {
-			transforms.push( urlRewrite( baseURL ) );
-		}
-		if ( transforms.length ) {
-			return traverse( css, compose( transforms ) );
-		}
-
-		return css;
-	} );
+	return map( styles, ( style ) =>
+		transformStyle( style, wrapperClassName )
+	);
 };
 
 export default transformStyles;
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-editor-style.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-editor-style.test.js
@@ -35,8 +35,9 @@ describe( 'iframed editor styles', () => {
 
 		await openDocumentSettingsSidebar();
 		await clickButton( 'Page' );
-		await clickButton( 'Template' );
-		await clickButton( 'New' );
+		await page.click( 'button[aria-label^="Select template"]' );
+		await page.waitForSelector( 'button[aria-label="Add template"]' );
+		await page.click( 'button[aria-label="Add template"]' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( 'Iframed Test' );