Try: Avoid copying global style presets via the styles compatibility …

…hook
WordPress · Jul 14, 2023 · 4a1d38e · 4a1d38e
1 parent 7b68d0a
commit 4a1d38e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
@@ -32,15 +32,15 @@ export function LayoutStyle( { layout = {}, css, ...props } ) {
 
 	if ( layoutType ) {
 		if ( css ) {
-			return <style>{ css }</style>;
+			return <style data-global-style="preset">{ css }</style>;
 		}
 		const layoutStyle = layoutType.getLayoutStyle?.( {
 			hasBlockGapSupport,
 			layout,
 			...props,
 		} );
 		if ( layoutStyle ) {
-			return <style>{ layoutStyle }</style>;
+			return <style data-global-style="preset">{ layoutStyle }</style>;
 		}
 	}
 	return null;

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -96,7 +96,9 @@ export default function EditorStyles( { styles } ) {
 			     but this could be any element. */ }
 			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
 			{ transformedStyles.map( ( css, index ) => (
-				<style key={ index }>{ css }</style>
+				<style data-global-style="preset" key={ index }>
+					{ css }
+				</style>
 			) ) }
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
@@ -45,6 +45,11 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
+				// Don't try to add global style presets; they're directly rendered in iframe.
+				if ( ownerNode.dataset.globalStyle === 'preset' ) {
+					return accumulator;
+				}
+
 				function matchFromRules( _cssRules ) {
 					return Array.from( _cssRules ).find(
 						( {