Add Site Editor and PHP changes from Gutenberg 10.1 - 11.9

[noisysocks]

Still very much a WIP. We can't properly finish this until Gutenberg 11.9 RC is released on Friday and its packages are published to npm on Monday. It's also likely that many things will be broken until Core-54335 and Core-54336 are committed.

I put this PR together by running git diff wp/5.8 wp/trunk **/*.php in the Gutenberg repo and copying in changes one file at at a time. I skipped changes that I believe will form a part of Core-54335 and Core-54336.

To do:

• Add changes from lib/blocks.php.
• Add style loading changes. @aristath
• Add site editor wp-admin page and link to it in the sidebar.
• Add navigation CPT.
• Update with changes published to npm from Gutenberg 11.9 RC.
• Add newer PHP changes.
• Remove TODO comments.
• Smoke test.
• Run phpunit tests, fix failures.

To do after commit:

• Run tests/gutenberg/run.js, fix failures.
• Hide Customize link etc. from menu bar for FSE themes.
• Add Navigation PHP. (Recent changes from lib/navigation.php, tests in phpunit/navigation-test.php.)
• Un-comment sourcemap validation from Gruntfile.js.
• Add test for get_block_editor_theme_styles().
• Remove unnecessary migration from navigation.php Add Site Editor and PHP changes from Gutenberg 10.1 - 11.9 #1804 (comment)
• Remove unnecessary code from navigation-area.php Add Site Editor and PHP changes from Gutenberg 10.1 - 11.9 #1804 (comment)
• Fix edit-site stylesheet in plugin.

Trac ticket: https://core.trac.wordpress.org/ticket/54337

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[noisysocks]

@aristath: Could you please help me patch Core with the changes below? I'm unsure where in Core they need to go. I suspect much of it can be simplified. They come from WordPress/gutenberg#31239 and WordPress/gutenberg#32510.

diff --git a/lib/blocks.php b/lib/blocks.php
index 14a8811abe..d0f6dede5a 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -194,6 +205,50 @@ function gutenberg_register_core_block_assets( $block_name ) {
 		wp_register_style( "wp-block-{$block_name}", false );
 	}
 
+	// If the current theme supports wp-block-styles, dequeue the full stylesheet
+	// and instead attach each block's theme-styles to their block styles stylesheet.
+	if ( current_theme_supports( 'wp-block-styles' ) ) {
+
+		// Dequeue the full stylesheet.
+		// Make sure this only runs once, it doesn't need to run for every block.
+		static $stylesheet_removed;
+		if ( ! $stylesheet_removed ) {
+			add_action(
+				'wp_enqueue_scripts',
+				function() {
+					wp_dequeue_style( 'wp-block-library-theme' );
+				}
+			);
+			$stylesheet_removed = true;
+		}
+
+		// Get the path to the block's stylesheet.
+		$theme_style_path = is_rtl()
+			? "build/block-library/blocks/$block_name/theme-rtl.css"
+			: "build/block-library/blocks/$block_name/theme.css";
+
+		// If the file exists, enqueue it.
+		if ( file_exists( gutenberg_dir_path() . $theme_style_path ) ) {
+
+			if ( file_exists( gutenberg_dir_path() . $style_path ) ) {
+				// If there is a main stylesheet for this block, append the theme styles to main styles.
+				wp_add_inline_style(
+					"wp-block-{$block_name}",
+					file_get_contents( gutenberg_dir_path() . $theme_style_path )
+				);
+			} else {
+				// If there is no main stylesheet for this block, register theme style.
+				wp_register_style(
+					"wp-block-{$block_name}",
+					gutenberg_url( $theme_style_path ),
+					array(),
+					$default_version
+				);
+				wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path );
+			}
+		}
+	}
+
 	if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) {
 		wp_deregister_style( "wp-block-{$block_name}-editor" );
 		wp_register_style(
@@ -460,4 +516,114 @@ function gutenberg_migrate_old_typography_shape( $metadata ) {
 	return $metadata;
 }
 
-add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );
+if ( ! function_exists( 'wp_migrate_old_typography_shape' ) ) {
+	add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );
+}
+
+if ( ! function_exists( 'wp_enqueue_block_style' ) ) {
+	/**
+	 * Enqueue a stylesheet for a specific block.
+	 *
+	 * If the theme has opted-in to separate-styles loading,
+	 * then the stylesheet will be enqueued on-render,
+	 * otherwise when the block inits.
+	 *
+	 * @param string $block_name The block-name, including namespace.
+	 * @param array  $args       An array of arguments [handle,src,deps,ver,media].
+	 *
+	 * @return void
+	 */
+	function wp_enqueue_block_style( $block_name, $args ) {
+		$args = wp_parse_args(
+			$args,
+			array(
+				'handle' => '',
+				'src'    => '',
+				'deps'   => array(),
+				'ver'    => false,
+				'media'  => 'all',
+			)
+		);
+
+		/**
+		 * Callback function to register and enqueue styles.
+		 *
+		 * @param string $content When the callback is used for the render_block filter,
+		 *                        the content needs to be returned so the function parameter
+		 *                        is to ensure the content exists.
+		 *
+		 * @return string
+		 */
+		$callback = function( $content ) use ( $args ) {
+			// Register the stylesheet.
+			if ( ! empty( $args['src'] ) ) {
+				wp_register_style( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['media'] );
+			}
+
+			// Add `path` data if provided.
+			if ( isset( $args['path'] ) ) {
+				wp_style_add_data( $args['handle'], 'path', $args['path'] );
+
+				// Get the RTL file path.
+				$rtl_file_path = str_replace( '.css', '-rtl.css', $args['path'] );
+
+				// Add RTL stylesheet.
+				if ( file_exists( $rtl_file_path ) ) {
+					wp_style_add_data( $args['hanle'], 'rtl', 'replace' );
+
+					if ( is_rtl() ) {
+						wp_style_add_data( $args['handle'], 'path', $rtl_file_path );
+					}
+				}
+			}
+
+			// Enqueue the stylesheet.
+			wp_enqueue_style( $args['handle'] );
+
+			return $content;
+		};
+
+		$hook = did_action( 'wp_enqueue_scripts' ) ? 'wp_footer' : 'wp_enqueue_scripts';
+		if ( wp_should_load_separate_core_block_assets() ) {
+			$hook = "render_block_$block_name";
+		}
+
+		// Enqueue assets in the frontend.
+		add_filter( $hook, $callback );
+
+		// Enqueue assets in the editor.
+		add_action( 'enqueue_block_assets', $callback );
+	}
+}
+
+/**
+ * Allow multiple block styles.
+ *
+ * @param array $metadata Metadata for registering a block type.
+ *
+ * @return array
+ */
+function gutenberg_multiple_block_styles( $metadata ) {
+	foreach ( array( 'style', 'editorStyle' ) as $key ) {
+		if ( ! empty( $metadata[ $key ] ) && is_array( $metadata[ $key ] ) ) {
+			$default_style = array_shift( $metadata[ $key ] );
+			foreach ( $metadata[ $key ] as $handle ) {
+				$args = array( 'handle' => $handle );
+				if ( 0 === strpos( $handle, 'file:' ) && isset( $metadata['file'] ) ) {
+					$style_path = remove_block_asset_path_prefix( $handle );
+					$args       = array(
+						'handle' => sanitize_key( "{$metadata['name']}-{$style_path}" ),
+						'src'    => plugins_url( $style_path, $metadata['file'] ),
+					);
+				}
+
+				wp_enqueue_block_style( $metadata['name'], $args );
+			}
+
+			// Only return the 1st item in the array.
+			$metadata[ $key ] = $default_style;
+		}
+	}
+	return $metadata;
+}
+add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' );

[aristath]

@aristath: Could you please help me patch Core with the changes below? I'm unsure where in Core they need to go. I suspect much of it can be simplified. They come from WordPress/gutenberg#31239 and WordPress/gutenberg#32510.

PR: noisysocks#1
This includes both commits, properly backported for core.

The only thing that needs to be done now is to actually include the theme.css, files (including .min & RTL variants) for blocks. Unfortunately I have no idea how to do that, @noisysocks do you know how to do that?

[noisysocks]

The only thing that needs to be done now is to actually include the theme.css, files (including .min & RTL variants) for blocks. Unfortunately I have no idea how to do that, @noisysocks do you know how to do that?

I think this already works? I see code in tools/webpack/blocks.js which should copy all .css files and I see build/wp-includes/blocks/table/theme.min.css and build/wp-includes/blocks/table/theme-rtl.min.css after I run grunt build.

wordpress-develop/tools/webpack/blocks.js

Lines 116 to 117 in 4a67a97

	from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
	to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),

[gziolo]

Are we sure that this filter should be included in WordPress core? It looks like it's covering some deprecated version from the Gutenberg plugin. It also raises the question of whether deprecated versions like the one from the Navigation Link block should be backported to WordPress core.

[noisysocks]

We'll have to fix this in the Gutenberg plugin cc. @talldan @adamziel

[talldan]

First time seeing this function. I had a look at the git blame and it seems like @jorgefilipecosta would be the person to ask about it - WordPress/gutenberg#27555.

[gziolo]

provides_context is already defined in block.json. This PHP file isn't necessary. Everything could be handled through block.json file.

[noisysocks]

We'll have to fix this in the Gutenberg plugin cc. @talldan @adamziel

[noisysocks]

I'm having Docker issues while running tests/gutenberg/run.js. I gave this branch a rough smoke test though and things seem okay bar a few issues to do with styling and the Navigation block. I'm going to commit this now so that it's in before the feature freeze and then we can work on fixing issues as follow-up commits.

[noisysocks]

To confirm, here are the follow up tasks:

• Run tests/gutenberg/run.js, fix failures.
• Hide Customize link etc. from menu bar for FSE themes.
• Add Navigation PHP. (Recent changes from lib/navigation.php, tests in phpunit/navigation-test.php.)
• Un-comment sourcemap validation from Gruntfile.js.
• Add test for get_block_editor_theme_styles().
• Remove unnecessary migration from navigation.php Add Site Editor and PHP changes from Gutenberg 10.1 - 11.9 #1804 (comment)
• Remove unnecessary code from navigation-area.php Add Site Editor and PHP changes from Gutenberg 10.1 - 11.9 #1804 (comment)
• Fix edit-site stylesheet in plugin.