wip

WordPress · Nov 2, 2021 · 20d8ed2 · 20d8ed2
1 parent 6db6247
commit 20d8ed2
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 42 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -311,7 +311,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-nux' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -348,24 +348,9 @@ function gutenberg_register_packages_styles( $styles ) {
 	$wp_edit_blocks_dependencies = array(
 		'wp-components',
 		'wp-editor',
-		// This need to be added before the block library styles,
-		// The block library styles override the "reset" styles.
-		'wp-reset-editor-styles',
-		'wp-block-library',
 		'wp-reusable-blocks',
 	);
 
-	// Only load the default layout and margin styles for themes without theme.json file.
-	if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
-		$wp_edit_blocks_dependencies[] = 'wp-editor-classic-layout-styles';
-	}
-
-	global $editor_styles;
-	if ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 ) {
-		// Include opinionated block styles if no $editor_styles are declared, so the editor never appears broken.
-		$wp_edit_blocks_dependencies[] = 'wp-block-library-theme';
-	}
-
 	gutenberg_override_style(
 		$styles,
 		'wp-reset-editor-styles',
@@ -717,10 +702,21 @@ function gutenberg_get_block_editor_assets() {
 	$style_handles  = array(
 		'wp-block-editor',
 		'wp-block-library',
-		'wp-block-library-theme',
 		'wp-edit-blocks',
+		'wp-reset-editor-styles',
 	);
 
+	// Only load the default layout and margin styles for themes without theme.json file.
+	if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
+		$style_handles[] = 'wp-editor-classic-layout-styles';
+	}
+
+	global $editor_styles;
+	if ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 ) {
+		// Include opinionated block styles if no $editor_styles are declared, so the editor never appears broken.
+		$style_handles[] = 'wp-block-library-theme';
+	}
+
 	if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
 		$style_handles[] = 'wp-widgets';
 		$style_handles[] = 'wp-edit-widgets';
@@ -745,8 +741,6 @@ function gutenberg_get_block_editor_assets() {
 	$style_handles  = array_unique( $style_handles );
 	$script_handles = array_unique( $script_handles );
 
-	$script_handles = array_diff( $script_handles, array( 'wp-reset-editor-styles' ) );
-
 	return array(
 		'styles'  => $style_handles,
 		'scripts' => $script_handles,

diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
@@ -46,7 +46,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 				} }
 			>
 				<Iframe
-					head={ <EditorStyles styles={ styles } /> }
+					head={
+						<EditorStyles styles={ styles } assets={ assets } />
+					}
 					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -66,7 +66,53 @@ function useDarkThemeBodyClassName( styles ) {
 	);
 }
 
-export default function EditorStyles( { styles } ) {
+function useParsedAssets( html ) {
+	return useMemo( () => {
+		const doc = document.implementation.createHTMLDocument( '' );
+		doc.body.innerHTML = html;
+		return Array.from( doc.body.children );
+	}, [ html ] );
+}
+
+function PrefixedStyle( { tagName, href, id, rel, media, textContent } ) {
+	const TagName = tagName.toLowerCase();
+
+	function onLoad( event ) {
+		const { sheet } = event.target;
+		const { cssRules } = sheet;
+
+		let index = 0;
+
+		for ( const rule of cssRules ) {
+			const { type, STYLE_RULE, selectorText, cssText } = rule;
+
+			if ( type !== STYLE_RULE ) {
+				continue;
+			}
+
+			if ( selectorText.includes( EDITOR_STYLES_SELECTOR ) ) {
+				return;
+			}
+
+			sheet.deleteRule( index );
+			sheet.insertRule(
+				'html :where(.editor-styles-wrapper) ' + cssText,
+				index
+			);
+
+			index++;
+		}
+	}
+
+	if ( TagName === 'style' ) {
+		return <TagName { ...{ id, onLoad } }>{ textContent }</TagName>;
+	}
+
+	return <TagName { ...{ href, id, rel, media, onLoad } } />;
+}
+
+export default function EditorStyles( { styles, assets } ) {
+	const _styles = useParsedAssets( assets.styles );
 	const transformedStyles = useMemo(
 		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
 		[ styles ]
@@ -77,6 +123,21 @@ export default function EditorStyles( { styles } ) {
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
 			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			{ _styles.map(
+				( { tagName, href, id, rel, media, textContent } ) => (
+					<PrefixedStyle
+						key={ id }
+						{ ...{
+							tagName,
+							href,
+							id,
+							rel,
+							media,
+							textContent,
+						} }
+					/>
+				)
+			) }
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -171,7 +171,6 @@ function Iframe(
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( assets.styles );
 	const scripts = useParsedAssets( assets.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -239,23 +238,6 @@ function Iframe(
 	head = (
 		<>
 			<style>{ 'body{margin:0}' }</style>
-			{ styles.map(
-				( { tagName, href, id, rel, media, textContent } ) => {
-					const TagName = tagName.toLowerCase();
-
-					if ( TagName === 'style' ) {
-						return (
-							<TagName { ...{ id } } key={ id }>
-								{ textContent }
-							</TagName>
-						);
-					}
-
-					return (
-						<TagName { ...{ href, id, rel, media } } key={ id } />
-					);
-				}
-			) }
 			{ head }
 		</>
 	);

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -52,11 +52,12 @@ function MaybeIframe( {
 	style,
 } ) {
 	const ref = useMouseMoveTypingReset();
+	const editorStyles = <EditorStyles styles={ styles } assets={ assets } />;
 
 	if ( ! shouldIframe ) {
 		return (
 			<>
-				<EditorStyles styles={ styles } />
+				{ editorStyles }
 				<WritingFlow
 					ref={ contentRef }
 					className="editor-styles-wrapper"
@@ -71,7 +72,7 @@ function MaybeIframe( {
 
 	return (
 		<Iframe
-			head={ <EditorStyles styles={ styles } /> }
+			head={ editorStyles }
 			assets={ assets }
 			ref={ ref }
 			contentRef={ contentRef }

diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
@@ -129,7 +129,10 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 				style={ enableResizing ? undefined : deviceStyles }
 				head={
 					<>
-						<EditorStyles styles={ settings.styles } />
+						<EditorStyles
+							styles={ settings.styles }
+							assets={ settings.resolvedAssets }
+						/>
 						<style>{
 							// Forming a "block formatting context" to prevent margin collapsing.
 							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context