Apply the editor styles to the Site Editor page (#20982)

Co-Authored-By: Andrés <[email protected]>

lib/edit-site-page.php

@@ -36,6 +36,55 @@ function gutenberg_is_edit_site_page( $page ) {
 	return in_array( $page, $allowed_pages, true );
 }
 
+/**
+ * Load editor styles (this is copied form edit-form-blocks.php).
+ * Ideally the code is extracted into a reusable function.
+ *
+ * @return array Editor Styles Setting.
+ */
+function gutenberg_get_editor_styles() {
+	global $editor_styles;
+
+	//
+	// Ideally the code is extracted into a reusable function.
+	$styles = array(
+		array(
+			'css' => file_get_contents(
+				ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
+			),
+		),
+	);
+
+	/* translators: Use this to specify the CSS font family for the default font. */
+	$locale_font_family = esc_html_x( 'Noto Serif', 'CSS Font Family for Editor Font', 'gutenberg' );
+	$styles[]           = array(
+		'css' => "body { font-family: '$locale_font_family' }",
+	);
+
+	if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
+		foreach ( $editor_styles as $style ) {
+			if ( preg_match( '~^(https?:)?//~', $style ) ) {
+				$response = wp_remote_get( $style );
+				if ( ! is_wp_error( $response ) ) {
+					$styles[] = array(
+						'css' => wp_remote_retrieve_body( $response ),
+					);
+				}
+			} else {
+				$file = get_theme_file_path( $style );
+				if ( is_file( $file ) ) {
+					$styles[] = array(
+						'css'     => file_get_contents( $file ),
+						'baseURL' => get_theme_file_uri( $style ),
+					);
+				}
+			}
+		}
+	}
+
+	return $styles;
+}
+
 /**
  * Initialize the Gutenberg Edit Site Page.
  *
@@ -152,6 +201,7 @@ function gutenberg_edit_site_init( $hook ) {
 	$settings['templateType']    = 'wp_template';
 	$settings['templateIds']     = array_values( $template_ids );
 	$settings['templatePartIds'] = array_values( $template_part_ids );
+	$settings['styles']          = gutenberg_get_editor_styles();
 
 	// This is so other parts of the code can hook their own settings.
 	// Example: Global Styles.

packages/block-editor/src/components/editor-styles/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { compact, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import transformStyles from '../../utils/transform-styles';
+
+function EditorStyles( { styles } ) {
+	useEffect( () => {
+		const updatedStyles = transformStyles(
+			styles,
+			'.editor-styles-wrapper'
+		);
+
+		const nodes = map( compact( updatedStyles ), ( updatedCSS ) => {
+			const node = document.createElement( 'style' );
+			node.innerHTML = updatedCSS;
+			document.body.appendChild( node );
+
+			return node;
+		} );
+
+		return () =>
+			nodes.forEach( ( node ) => document.body.removeChild( node ) );
+	}, [ styles ] );
+
+	return null;
+}
+
+export default EditorStyles;

packages/block-editor/src/components/index.js

@@ -72,6 +72,7 @@ export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as CopyHandler } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';

packages/block-editor/src/components/index.native.js

@@ -44,6 +44,7 @@ export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { Block as __experimentalBlock } from './block-list/block-wrapper';
 

packages/edit-site/src/components/editor/index.js

@@ -18,6 +18,7 @@ import { EntityProvider } from '@wordpress/core-data';
 import {
 	__experimentalEditorSkeleton as EditorSkeleton,
 	__experimentalFullscreenMode as FullscreenMode,
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -61,6 +62,7 @@ function Editor( { settings: _settings } ) {
 
 	return template ? (
 		<>
+			<EditorStyles styles={ settings.styles } />
 			<FullscreenMode isActive={ isFullscreenActive } />
 			<SlotFillProvider>
 				<DropZoneProvider>

packages/editor/src/components/provider/index.js

@@ -12,7 +12,10 @@ import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { EntityProvider } from '@wordpress/core-data';
-import { BlockEditorProvider, transformStyles } from '@wordpress/block-editor';
+import {
+	BlockEditorProvider,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -134,23 +137,6 @@ class EditorProvider extends Component {
 
 	componentDidMount() {
 		this.props.updateEditorSettings( this.props.settings );
-
-		if ( ! this.props.settings.styles ) {
-			return;
-		}
-
-		const updatedStyles = transformStyles(
-			this.props.settings.styles,
-			'.editor-styles-wrapper'
-		);
-
-		map( updatedStyles, ( updatedCSS ) => {
-			if ( updatedCSS ) {
-				const node = document.createElement( 'style' );
-				node.innerHTML = updatedCSS;
-				document.body.appendChild( node );
-			}
-		} );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -197,27 +183,30 @@ class EditorProvider extends Component {
 		);
 
 		return (
-			<EntityProvider kind="root" type="site">
-				<EntityProvider
-					kind="postType"
-					type={ post.type }
-					id={ post.id }
-				>
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ resetEditorBlocksWithoutUndoLevel }
-						onChange={ resetEditorBlocks }
-						selectionStart={ selectionStart }
-						selectionEnd={ selectionEnd }
-						settings={ editorSettings }
-						useSubRegistry={ false }
+			<>
+				<EditorStyles styles={ settings.styles } />
+				<EntityProvider kind="root" type="site">
+					<EntityProvider
+						kind="postType"
+						type={ post.type }
+						id={ post.id }
 					>
-						{ children }
-						<ReusableBlocksButtons />
-						<ConvertToGroupButtons />
-					</BlockEditorProvider>
+						<BlockEditorProvider
+							value={ blocks }
+							onInput={ resetEditorBlocksWithoutUndoLevel }
+							onChange={ resetEditorBlocks }
+							selectionStart={ selectionStart }
+							selectionEnd={ selectionEnd }
+							settings={ editorSettings }
+							useSubRegistry={ false }
+						>
+							{ children }
+							<ReusableBlocksButtons />
+							<ConvertToGroupButtons />
+						</BlockEditorProvider>
+					</EntityProvider>
 				</EntityProvider>
-			</EntityProvider>
+			</>
 		);
 	}
 }