Block editor: pass assets through block_editor_settings_all

lib/client-assets.php

@@ -298,6 +298,15 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-block-editor', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-block-editor-styles',
+		gutenberg_url( 'build/block-editor/editor-styles.css' ),
+		array(),
+		$version
+	);
+	$styles->add_data( 'wp-block-editor-styles', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-editor',
@@ -311,7 +320,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' );
@@ -345,32 +354,11 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-format-library', 'rtl', 'replace' );
 
-	$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',
 		gutenberg_url( 'build/block-library/reset.css' ),
-		array( 'common', 'forms' ), // Make sure the reset is loaded after the default WP Adminn styles.
+		array(),
 		$version
 	);
 	$styles->add_data( 'wp-reset-editor-styles', 'rtl', 'replace' );
@@ -388,7 +376,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-blocks',
 		gutenberg_url( 'build/block-library/editor.css' ),
-		$wp_edit_blocks_dependencies,
+		array(),
 		$version
 	);
 	$styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' );
@@ -710,17 +698,29 @@ function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings )
 /**
  * Sets the editor styles to be consumed by JS.
  */
-function gutenberg_extend_block_editor_styles_html() {
+function gutenberg_get_block_editor_assets() {
 	global $pagenow;
 
 	$script_handles = array();
 	$style_handles  = array(
-		'wp-block-editor',
+		'wp-block-editor-styles',
 		'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';
@@ -742,39 +742,73 @@ function gutenberg_extend_block_editor_styles_html() {
 		}
 	}
 
-	$style_handles = array_unique( $style_handles );
-	$done          = wp_styles()->done;
+	$style_handles  = array_unique( $style_handles );
+	$script_handles = array_unique( $script_handles );
+
+	return array(
+		'styles'  => $style_handles,
+		'scripts' => $script_handles,
+	);
+}
+
+/**
+ * Resolves WP dependency handles for both styles and scripts to HTML.
+ * To do: ideally this should be a list of URLs and inline styles/scripts.
+ *
+ * @param array $assets WP dependency handles.
+ *
+ * @return array HTML for both styles and scripts
+ */
+function gutenberg_resolve_assets( $assets ) {
+	$done = wp_styles()->done;
 
 	ob_start();
 
 	// We do not need reset styles for the iframed editor.
-	wp_styles()->done = array( 'wp-reset-editor-styles' );
-	wp_styles()->do_items( $style_handles );
+	wp_styles()->done = array();
+	wp_styles()->do_items( $assets['styles'] );
 	wp_styles()->done = $done;
 
 	$styles = ob_get_clean();
 
-	$script_handles = array_unique( $script_handles );
-	$done           = wp_scripts()->done;
+	$done = wp_scripts()->done;
 
 	ob_start();
 
 	wp_scripts()->done = array();
-	wp_scripts()->do_items( $script_handles );
+	wp_scripts()->do_items( $assets['scripts'] );
 	wp_scripts()->done = $done;
 
 	$scripts = ob_get_clean();
 
-	$editor_assets = wp_json_encode(
-		array(
-			'styles'  => $styles,
-			'scripts' => $scripts,
-		)
+	return array(
+		'styles'  => $styles,
+		'scripts' => $scripts,
 	);
-
-	echo "<script>window.__editorAssets = $editor_assets</script>";
 }
-add_action( 'admin_footer-appearance_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' );
-add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' );
-add_action( 'admin_footer-post-new.php', 'gutenberg_extend_block_editor_styles_html' );
-add_action( 'admin_footer-widgets.php', 'gutenberg_extend_block_editor_styles_html' );
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		$assets = gutenberg_get_block_editor_assets();
+
+		if ( $settings['assets'] ) {
+			$settings['assets']['styles']  = array_merge( $settings['assets']['styles'], $assets['styles'] );
+			$settings['assets']['scripts'] = array_merge( $settings['assets']['scripts'], $assets['scripts'] );
+		} else {
+			$settings['assets'] = $assets;
+		}
+
+		return $settings;
+	},
+	9
+);
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		$settings['resolvedAssets'] = gutenberg_resolve_assets( $settings['assets'] );
+		return $settings;
+	},
+	100
+);

packages/block-editor/README.md

@@ -514,6 +514,19 @@ _Related_
 
 Undocumented declaration.
 
+### Placeholder
+
+Placeholder for use in blocks. Creates an admin styling context and a tabbing
+context in the block editor's writing flow.
+
+_Parameters_
+
+-   _props_ `Object`:
+
+_Returns_
+
+-   `WPComponent`: The component
+
 ### PlainText
 
 _Related_

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -62,6 +62,7 @@ function useInitialPosition( clientId ) {
 export function useFocusFirstElement( clientId ) {
 	const ref = useRef();
 	const initialPosition = useInitialPosition( clientId );
+	const isMounting = useRef( true );
 
 	useEffect( () => {
 		if ( initialPosition === undefined || initialPosition === null ) {
@@ -79,16 +80,25 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
-		// Find all tabbables within node.
-		const textInputs = focus.tabbable
-			.find( ref.current )
-			.filter( ( node ) => isTextField( node ) );
+		let target = ref.current;
 
 		// If reversed (e.g. merge via backspace), use the last in the set of
 		// tabbables.
 		const isReverse = -1 === initialPosition;
-		const target =
-			( isReverse ? last : first )( textInputs ) || ref.current;
+
+		// Find all text fields or placeholders within the block.
+		const candidates = focus.tabbable
+			.find( target )
+			.filter(
+				( node ) =>
+					isTextField( node ) ||
+					( isMounting.current &&
+						node.classList.contains(
+							'wp-block-editor-placeholder'
+						) )
+			);
+
+		target = ( isReverse ? last : first )( candidates ) || target;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
 			ref.current.focus();
@@ -98,5 +108,9 @@ export function useFocusFirstElement( clientId ) {
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition ] );
 
+	useEffect( () => {
+		isMounting.current = false;
+	}, [] );
+
 	return ref;
 }

packages/block-editor/src/components/block-preview/auto.js

@@ -25,8 +25,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		contentResizeListener,
 		{ height: contentHeight },
 	] = useResizeObserver();
-	const styles = useSelect( ( select ) => {
-		return select( store ).getSettings().styles;
+	const { styles, assets } = useSelect( ( select ) => {
+		const settings = select( store ).getSettings();
+		return { styles: settings.styles, assets: settings.resolvedAssets };
 	}, [] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
@@ -45,7 +46,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 				} }
 			>
 				<Iframe
-					head={ <EditorStyles styles={ styles } /> }
+					head={
+						<EditorStyles styles={ styles } assets={ assets } />
+					}
+					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {
 							ownerDocument: { documentElement },

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

@@ -7,9 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Placeholder } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { layout } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import Placeholder from '../placeholder';
+
 function BlockVariationPicker( {
 	icon = layout,
 	label = __( 'Choose variation' ),

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>
 			) ) }