From 57ed8ad7df013396dd0f0168d565e969baf0a123 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 7 Sep 2023 16:59:50 +0300 Subject: [PATCH 1/5] Perf: remove block assets enqueuing from editor document --- lib/client-assets.php | 8 +++-- .../src/components/block-canvas/index.js | 34 +++++++++++++++++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index c5b03b6833d03..9e6e689d9b1a3 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -284,7 +284,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-commands' ), + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-commands' ), $version ); $styles->add_data( 'wp-edit-post', 'rtl', 'replace' ); @@ -409,7 +409,7 @@ function gutenberg_register_packages_styles( $styles ) { $styles, 'wp-edit-site', gutenberg_url( 'build/edit-site/style.css' ), - array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-commands' ), + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-commands' ), $version ); $styles->add_data( 'wp-edit-site', 'rtl', 'replace' ); @@ -594,3 +594,7 @@ function gutenberg_register_vendor_scripts( $scripts ) { // Enqueue stored styles. add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' ); add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 ); + +// This action should be removed in core when backporting. +// https://github.com/WordPress/wordpress-develop/blob/362624176cba41a2dda57c3e89031aa6c3e4decf/src/wp-includes/default-filters.php#L573 +remove_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' ); diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js index 70d6bbad99e52..ea6c4cc80cbdf 100644 --- a/packages/block-editor/src/components/block-canvas/index.js +++ b/packages/block-editor/src/components/block-canvas/index.js @@ -2,6 +2,8 @@ * WordPress dependencies */ import { useMergeRefs } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -13,6 +15,37 @@ import WritingFlow from '../writing-flow'; import { useMouseMoveTypingReset } from '../observe-typing'; import { useClipboardHandler } from '../copy-handler'; import { useBlockSelectionClearer } from '../block-selection-clearer'; +import { store as blockEditorStore } from '../../store'; + +/** + * This component is for rendering block assets when the editor canvas is not + * iframed. It might include assets that have already been enqueued for the + * editor, so we need to filter them out. + */ +function UnIframedBlockAssets() { + const blockAssets = + useSelect( ( select ) => { + return select( blockEditorStore ).getSettings() + .__unstableResolvedAssets; + }, [] ) || {}; + const { styles: _styles = '', scripts: _scripts = '' } = blockAssets; + const assetsHtml = _styles + _scripts; + const filteredAssetsHtml = useMemo( () => { + const doc = document.implementation.createHTMLDocument( '' ); + doc.body.innerHTML = assetsHtml; + // Remove assets already enqueued in the editor document. + doc.querySelectorAll( '[id]' ).forEach( ( node ) => { + if ( document.getElementById( node.id ) ) { + node.remove(); + } + } ); + return doc.body.innerHTML; + }, [ assetsHtml ] ); + + return ( +
+ ); +} export function ExperimentalBlockCanvas( { shouldIframe = true, @@ -34,6 +67,7 @@ export function ExperimentalBlockCanvas( { if ( ! shouldIframe ) { return ( <> + Date: Thu, 7 Sep 2023 17:12:09 +0300 Subject: [PATCH 2/5] Add early returns --- .../src/components/block-canvas/index.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js index ea6c4cc80cbdf..a68189a6f9987 100644 --- a/packages/block-editor/src/components/block-canvas/index.js +++ b/packages/block-editor/src/components/block-canvas/index.js @@ -23,14 +23,14 @@ import { store as blockEditorStore } from '../../store'; * editor, so we need to filter them out. */ function UnIframedBlockAssets() { - const blockAssets = - useSelect( ( select ) => { - return select( blockEditorStore ).getSettings() - .__unstableResolvedAssets; - }, [] ) || {}; - const { styles: _styles = '', scripts: _scripts = '' } = blockAssets; + const blockAssets = useSelect( ( select ) => { + return select( blockEditorStore ).getSettings() + .__unstableResolvedAssets; + }, [] ); + const { styles: _styles = '', scripts: _scripts = '' } = blockAssets || {}; const assetsHtml = _styles + _scripts; const filteredAssetsHtml = useMemo( () => { + if ( ! assetsHtml ) return ''; const doc = document.implementation.createHTMLDocument( '' ); doc.body.innerHTML = assetsHtml; // Remove assets already enqueued in the editor document. @@ -42,6 +42,8 @@ function UnIframedBlockAssets() { return doc.body.innerHTML; }, [ assetsHtml ] ); + if ( ! filteredAssetsHtml ) return null; + return (
); From a679ec976971384728037b377275aa32ba21eec6 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 7 Sep 2023 17:15:07 +0300 Subject: [PATCH 3/5] PHP lint --- lib/client-assets.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 9e6e689d9b1a3..883ad0f9ea0f0 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -595,6 +595,8 @@ function gutenberg_register_vendor_scripts( $scripts ) { add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' ); add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 ); -// This action should be removed in core when backporting. -// https://github.com/WordPress/wordpress-develop/blob/362624176cba41a2dda57c3e89031aa6c3e4decf/src/wp-includes/default-filters.php#L573 +/* + * This action should be removed in core when backporting. + * See https://github.com/WordPress/wordpress-develop/blob/362624176cba41a2dda57c3e89031aa6c3e4decf/src/wp-includes/default-filters.php#L573. + */ remove_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' ); From f50d91f5f427dca29e4482f2d9de00d760fa4fbc Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 14 Sep 2023 17:24:01 +0300 Subject: [PATCH 4/5] Fix tests --- lib/client-assets.php | 39 +++++++++++++++++-- .../src/components/block-tools/style.scss | 14 +++++++ .../default-block-appender/content.scss | 14 ------- .../plugins/inner-blocks-allowed-blocks.php | 2 +- .../plugins/meta-attribute-block.php | 2 +- 5 files changed, 52 insertions(+), 19 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 883ad0f9ea0f0..2981523f98aa1 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -284,7 +284,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-commands' ), + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'wp-block-library', 'wp-commands' ), $version ); $styles->add_data( 'wp-edit-post', 'rtl', 'replace' ); @@ -369,6 +369,19 @@ function gutenberg_register_packages_styles( $styles ) { ); $styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' ); + // Essentially the same as wp-edit-blocks, but without dependencies. + // wp-edit-blocks is for use in the editor iframe, while + // wp-block-library-editor is for use outside the iframe. Editor styles are + // expected to be enqueued both inside and outside the iframe. + gutenberg_override_style( + $styles, + 'wp-block-library-editor', + gutenberg_url( 'build/block-library/editor.css' ), + array(), + $version + ); + $styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' ); + gutenberg_override_style( $styles, 'wp-nux', @@ -409,7 +422,7 @@ function gutenberg_register_packages_styles( $styles ) { $styles, 'wp-edit-site', gutenberg_url( 'build/edit-site/style.css' ), - array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-commands' ), + array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'wp-commands' ), $version ); $styles->add_data( 'wp-edit-site', 'rtl', 'replace' ); @@ -596,7 +609,27 @@ function gutenberg_register_vendor_scripts( $scripts ) { add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 ); /* - * This action should be removed in core when backporting. + * This action should be removed in core when backporting. We no longer want to + * enqueue all assets added through enqueue_block_assets, they are added + * separately to the editor through block editor settings. * See https://github.com/WordPress/wordpress-develop/blob/362624176cba41a2dda57c3e89031aa6c3e4decf/src/wp-includes/default-filters.php#L573. */ remove_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' ); + +/* + * We DO want to enqueue EDITOR scripts and styles. + */ +add_action( 'admin_enqueue_scripts', function() { + $block_registry = WP_Block_Type_Registry::get_instance(); + foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) { + // Editor styles. + foreach ( $block_type->editor_style_handles as $editor_style_handle ) { + wp_enqueue_style( $editor_style_handle ); + } + + // Editor scripts. + foreach ( $block_type->editor_script_handles as $editor_script_handle ) { + wp_enqueue_script( $editor_script_handle ); + } + } +} ); diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 796c513d6d7c2..3e0c6e5452932 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -78,6 +78,20 @@ } } +// The black plus that shows up on the right side of an empty paragraph block, or the initial appender +// that exists only on empty documents. +.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, +.block-editor-default-block-appender .block-editor-inserter { + position: absolute; + top: 0; + right: 0; + line-height: 0; + + &:disabled { + display: none; + } +} + .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { background: var(--wp-admin-theme-color); &:hover { diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss index 48aac077096c2..86541a73a260f 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/packages/block-editor/src/components/default-block-appender/content.scss @@ -60,20 +60,6 @@ } } -// The black plus that shows up on the right side of an empty paragraph block, or the initial appender -// that exists only on empty documents. -.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender .block-editor-inserter { - position: absolute; - top: 0; - right: 0; - line-height: 0; - - &:disabled { - display: none; - } -} - /** * Fixed position appender. diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php index 0cc7566f3e5f1..97f580c9725b1 100644 --- a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php +++ b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php @@ -24,4 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() { true ); } -add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' ); +add_action( 'enqueue_block_editor_assets', 'enqueue_inner_blocks_allowed_blocks_script' ); diff --git a/packages/e2e-tests/plugins/meta-attribute-block.php b/packages/e2e-tests/plugins/meta-attribute-block.php index 4513ebafde26a..30610bfe54117 100644 --- a/packages/e2e-tests/plugins/meta-attribute-block.php +++ b/packages/e2e-tests/plugins/meta-attribute-block.php @@ -49,4 +49,4 @@ function enqueue_test_meta_attribute_block() { true ); } -add_action( 'enqueue_block_assets', 'enqueue_test_meta_attribute_block' ); +add_action( 'enqueue_block_editor_assets', 'enqueue_test_meta_attribute_block' ); From 6a5437d81b850fa27d7d2bc2b2adebd1082fef6e Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 15 Sep 2023 13:09:45 +0300 Subject: [PATCH 5/5] Skip wp-block-library-editor-css in compat layer --- .../src/components/iframe/use-compatibility-styles.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js index eb738c7ebefdf..2ceb368871e05 100644 --- 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,12 @@ export function useCompatibilityStyles() { return accumulator; } + // This is the same stylesheet as wp-edit-block but without + // its dependencies, so we don't need to add it. + if ( ownerNode.id === 'wp-block-library-editor-css' ) { + return accumulator; + } + // Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs. if ( ! ownerNode.id ) { return accumulator;