Update @wordpress packages and add Site Editor from Gutenberg plugin into Core

[noisysocks]

• Update @wordpress packages with packages published from Gutenberg 11.9 RC.
• Add Site Editor to WP Admin. (See ​https://github.com/WordPress/gutenberg/issues/29630.)

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

To do:

• [ ] Add changes from lib/blocks.php.
• [ ] Add site editor wp-admin page and link to it in the sidebar.
• [ ] Add navigation CPT.
• [ ] Maybe: Add changes from lib/pwa.php.
• [ ] Update with changes published to npm from Gutenberg 11.9 RC.

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

@aristath: Could you please help me patch Core with the changes below? I'm unsure where in Core they need to go. They come from ​https://github.com/WordPress/gutenberg/pull/31239 and ​https://github.com/WordPress/gutenberg/pull/32510.

{{{diff
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( $argssrc? ) ) {
+ wp_register_style( $argshandle?, $argssrc?, $argsdeps?, $argsver?, $argsmedia? );
+ }
+
+ Add path data if provided.
+ if ( isset( $argspath? ) ) {
+ wp_style_add_data( $argshandle?, 'path', $argspath? );
+
+ Get the RTL file path.
+ $rtl_file_path = str_replace( '.css', '-rtl.css', $argspath? );
+
+ Add RTL stylesheet.
+ if ( file_exists( $rtl_file_path ) ) {
+ wp_style_add_data( $argshanle?, 'rtl', 'replace' );
+
+ if ( is_rtl() ) {
+ wp_style_add_data( $argshandle?, 'path', $rtl_file_path );
+ }
+ }
+ }
+
+ Enqueue the stylesheet.
+ wp_enqueue_style( $argshandle? );
+
+ 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( "{$metadataname?}-{$style_path}" ),
+ 'src' => plugins_url( $style_path, $metadatafile? ),
+ );
+ }
+
+ wp_enqueue_block_style( $metadataname?, $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: 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: ​https://github.com/noisysocks/wordpress-develop/pull/1
This includes both commits, properly backported for core.
The only thing that needs to be done for them is to make sure that the theme.css, files (including .min & RTL variants) get copied over as well. I think though that this will require a PR in Gutenberg so I'm taking a look at it now 👍

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.

​https://github.com/WordPress/wordpress-develop/blob/4a67a9774a3c1bfb8e9ce30ba05705c324d6fc97/tools/webpack/blocks.js#L116-L117

[youknowriad]

In 52042:

Block Editor: Update the WordPress Packages based on Gutenberg 11.9 RC1.

This brings the JS packages up to date and is the first step that will allow us
to include the other block editor updates for WordPress 5.9:
FSE infrastrucutre, site editor and global styles.

Props noisysocks.
See #54337.

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]

In 52069:

Add Site Editor and PHP changes from Gutenberg 10.1 - 11.9

• First pass at adding the site editor from the Gutenberg plugin to wp-admin/site-editor.php.
• Adds miscellaneous PHP changes from Gutenberg 10.1 - 11.9.

Follows [52042].
See #54337.
Props youknowriad, aristath, hellofromtonya, gziolo.

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.

A small follow-up to the site editor patch

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

[youknowriad]

In 52071:

Site Editor: Load as full screen by default.

To avoid UI jumps when loading the page, the site-editor.php page
is marked as full screen by default.
This also matches the behavior of the post editor.

See #54337.

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

Remove the incorrect use of text domain from core.

Introduced in changeset 52042.

[peterwilsoncc]

In 52089:

Block Editor: Update SVN props to ignore new asset files.

Update svn props to ignore additional CSS, JavaScript and source map files following the package updates preparing for WordPress 5.9.

Follow up to [52042], [52046], [52069].
See #54337, #53361.

[peterwilsoncc]

In 52090:

Block Editor: Update SVN props to ignore new asset files.

Update svn props to ignore additional CSS, JavaScript and source map files following the package updates preparing for WordPress 5.9.

Follow up to [52042], [52046], [52069] and [52089].
See #54337, #53361.

Update packages to include these bug fixes from Gutenberg:

• ​https://github.com/WordPress/gutenberg/pull/34742
• ​https://github.com/WordPress/gutenberg/pull/36146
• ​https://github.com/WordPress/gutenberg/pull/36206
• ​https://github.com/WordPress/gutenberg/pull/36006
• ​https://github.com/WordPress/gutenberg/pull/36290
• ​https://github.com/WordPress/gutenberg/pull/36301
• ​https://github.com/WordPress/gutenberg/pull/36326
• ​https://github.com/WordPress/gutenberg/pull/36336
• ​https://github.com/WordPress/gutenberg/pull/36192
• ​https://github.com/WordPress/gutenberg/pull/36264
• ​https://github.com/WordPress/gutenberg/pull/36292

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

[noisysocks]

In 52103:

Update @wordpress packages

Update packages to include these bug fixes from Gutenberg:

• Force remount LinkControl when moving between links within same richtext block
• Site Editor: Change ToolsMoreMenuGroup slot-fill name
• Respect fields param for global styles REST API requests.
• Try ensuring the item after post content clears floats
• Fix submenus not opening on click
• Apply i18n functions to Nav block menu drops when selecting existing Menu
• Gallery: Make sure the mobile warning notice only runs when images are added to a new block
• Prepare navigation php code for core patch
• Address deprecation issues from Buttons flex layout PR.
• Block Library: Fix incorrect attributes definitions
• Fix Navigation accessibility issues

See #54337.

[desrosj]

In 52106:

Posts, Post Types: Remove gutenberg text domain from post type strings.

Introduced in [52041], and [52069].

See #54336, #54337.

Copies navigation area infrastructure from lib/navigation.php in Gutenberg to Core.

I meant to include this ​https://github.com/WordPress/wordpress-develop/pull/1804 but I ran out of time on Tuesday 🙂

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

@anton-vlasenko @adamziel @talldan: I'm not 100% sure how to test this. Could you please give it a whirl?

[noisysocks]

In 52134:

Hide Customize from admin bar when using a block theme

Don't add the Customize link to the admin bar when a block theme is activated.

See #54337.

Need to add this new addition from lib/navigation.php:

{{{diff
diff --git a/lib/navigation.php b/lib/navigation.php
index 8a3587ae7d..5f69152724 100644
--- a/lib/navigation.php
+++ b/lib/navigation.php
@@ -56,6 +56,14 @@ function gutenberg_register_navigation_post_type() {

}
add_action( 'init', 'gutenberg_register_navigation_post_type' );

+/
+ * Disable "Post Attributes" for wp_navigation post type.
+ *
+ * The attributes are also conditionally enabled when a site has custom templates.
+ * Block Theme templates can be available for every post type.
+ */
+add_filter( 'theme_wp_navigation_templates', 'return_empty_array' );
+
}}}

Update packages to include these bug fixes from Gutenberg:

• ​https://github.com/WordPress/gutenberg/pull/36256
• ​https://github.com/WordPress/gutenberg/pull/36289
• ​https://github.com/WordPress/gutenberg/pull/36298
• ​https://github.com/WordPress/gutenberg/pull/36318
• ​https://github.com/WordPress/gutenberg/pull/36324
• ​https://github.com/WordPress/gutenberg/pull/36353
• ​https://github.com/WordPress/gutenberg/pull/36355
• ​https://github.com/WordPress/gutenberg/pull/36357
• ​https://github.com/WordPress/gutenberg/pull/36358
• ​https://github.com/WordPress/gutenberg/pull/36368
• ​https://github.com/WordPress/gutenberg/pull/36369
• ​https://github.com/WordPress/gutenberg/pull/36374
• ​https://github.com/WordPress/gutenberg/pull/36390

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

[noisysocks]

In 52135:

Update @wordpress packages

Update packages to include these bug fixes from Gutenberg:

• Group - Fix inner container regexes using fixed div tag
• Image block: Make sure the Image block border radius is inherited if the image is linked
• Navigation: Small fixes
• FSE: Add template_type guards
• Template Part Block: Add some guards
• Fix getEntityRecords to ensure resolution on REST API failure
• Ensure menus before map operation in Nav block
• Link editing: Account for link anchor no longer being present when generating unique link instance key
• Navigation: Hide post attributes meta box
• Fix failing tests and compatibility with 5.9.
• Fix missing <MainDashboardButton> slot fill in site editor
• Move WP_REST_Block_Navigation_Areas_Controller from Gutenberg to Core.
• Fix site editor reset styles in WP 5.9

See #54337.

Unit tests seem to be failing...

[noisysocks]

In 52143:

Update 'react' and 'react-dom'

Update 'react' and 'react-dom' packages to version 17.0.1. This is the version
expected by @wordpress components.

See #54337.

We will have to rename fse_navigation_areas in the plugin first as it is used by a block which means that the PHP code is copied as part of the build process. We will also have to include some migration code when doing this rename.

[noisysocks]

In 52145:

Editor: Add Navigation Area infrastructure

Copies Navigation Area infrastrucutre from lib/navigation.php in Gutenberg. This
allows a Navigation block to be associated with a particular area which persists
when switching theme.

Props antonvlasenko, mamaduka, spacedmonkey.
See #54337.

[TobiasBg]

@noisysocks: Can you maybe change the browserify URL to https again, like it was done in [52000]?

[noisysocks]

In 52155:

Editor: Fix incorrect access of ID field

Now that WP_Query is set to return 'ids', accessing $matching_posts[0]->ID is
incorrect.

Props spacedmonkey.
Follows [52145].
See #54337.

[noisysocks]

In 52156:

Build/Test Tools: Restore the https URL for browserify-aes

Follows [52143].
See #54337.
Props TobiasBg.

[noisysocks]

Sure thing @TobiasBg!

Various changes to make how we link to the Site Editor consistent with what's in the Gutenberg plugin.

• Add 'Edit site' to the top admin bar.
• Link to the Template and Template Part CPTs.
• Add deep link to the Global Styles UI.

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

[noisysocks]

In 52158:

Editor: Fix how the Site Editor is linked to

• Add 'Edit site' to the top admin bar.
• Link to the Template and Template Part CPTs.
• Add deep link to the Global Styles UI.

Follows [52069].
See #54337.

[sabernhardt]

editing add_query_args to add_query_arg

[sabernhardt]

I had a fatal error on add_query_args when I clicked the new toolbar Edit site link (r52145).

Also, is that link intentionally hidden on mobile (and iconless)?

[noisysocks]

In 52159:

Editor: Fix fatal call to add_query_args()

It should be add_query_arg(), not add_query_args().

Follows [52145].
See #54337.
Props sabernhardt.

[noisysocks]

I had a fatal error on add_query_args when I clicked the new toolbar Edit site link (r52145).

Thanks @sabernhardt. I've applied your patch.

Also, is that link intentionally hidden on mobile (and iconless)?

At this stage I'm just copying over exactly what's in the Gutenberg plugin. Could you please open up a new ticket to discuss this? That way we can loop in some design folks, etc.

Update packages to include these bug fixes from Gutenberg:

• ​https://github.com/WordPress/gutenberg/pull/36215
• ​https://github.com/WordPress/gutenberg/pull/36221
• ​https://github.com/WordPress/gutenberg/pull/36244
• ​https://github.com/WordPress/gutenberg/pull/36246
• ​https://github.com/WordPress/gutenberg/pull/36340
• ​https://github.com/WordPress/gutenberg/pull/36347
• ​https://github.com/WordPress/gutenberg/pull/36356
• ​https://github.com/WordPress/gutenberg/pull/36363
• ​https://github.com/WordPress/gutenberg/pull/36375
• ​https://github.com/WordPress/gutenberg/pull/36397
• ​https://github.com/WordPress/gutenberg/pull/36460
• ​https://github.com/WordPress/gutenberg/pull/36246
• ​https://github.com/WordPress/gutenberg/pull/36446
• ​https://github.com/WordPress/gutenberg/commit/3c935c4e878e8c15ed7574527d7d320f580fc1ac

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

@gziolo: There is an error in this branch when running grunt build. I think it may be due to ​https://github.com/WordPress/gutenberg/pull/36244. Do you know how to fix this?

[sabernhardt]

Thanks for the commit, and the toolbar link ticket is #54441.

[noisysocks]

In 52160:

Editor: Load iframed assets in Site Editor

Configure the Site Editor to load iframed block editor assets. This fixes some
styling issues in the Site Editor.

Follows [52069].
See #54337.

[walbo]

#54431 was marked as a duplicate.

[noisysocks]

In 52161:

Update @wordpress packages

Update packages to include these bug fixes from Gutenberg:

• Navigation: Fix click-button size, submenu directions, scrollbars.
• Group - Fix overzealous regex when restoring inner containers
• Babel Preset: Update Babel packages to 7.16 version
• theme.json: adds a setting property that enables some other ones
• Polish metabox container.
• Fix submenu justification and spacer orientation.
• Fix Gutenberg 11.8.2 in WordPress trunk
• Strip meta tags from pasted links in Chromium
• Hide visilibility and status for navigation posts
• Navigation: Refactor and simplify setup state.
• Nav block menu switcher - decode HTML entities and utilise accessible markup pattern
• Rename fse_navigation_area to wp_navigation_area
• theme.json: adds a setting property that enables some other ones
• Revert "theme.json: adds a setting property that enables some other ones"
• Skip flaky image block test
• WordPress/gutenberg@3c935c4
• React to any errors coming up in gutenberg_migrate_menu_to_navigation_post
• Return wp error from wp_insert_post
• Fix not transforming logical assignments for packages

See #54337.

[noisysocks]

With [52161] I'm happy with the overall state of trunk for WP 5.9 beta 1, so closing this ticket out. I'll create a new ticket to track the backporting of Gutenberg bug fixes during the 5.9 beta period. If anyone notices any bugs in trunk please create a ticket!

Thanks for the PR! Closing as this was fixed upstream in ​https://github.com/WordPress/gutenberg/pull/36500.

[youknowriad]

I just noticed the wp_is_block_template_theme function name, should it be just is_block_theme or wp_is_block_theme instead maybe? (not sure why the wp prefix is needed, and the "template" there doesn't sound correct, I think we've been calling them "block themes")

[peterwilsoncc]

wp_is_block_theme seems more appropriate.

I'd like to keep the wp_ prefix as having functions without a prefix has caused problems recently with clashes in PHP core.

There was a difference between the initialization of the site editor between Gutenberg plugin and Core. This PRs brings syncs both which fixes the template description in the site editor.

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

Testing instructions

• Open the site editor
• Click the template title
• The template description should be visible.

[youknowriad]

In 52336:

Site Editor: Render the template descriptions properly.

The initializaion of the editor was a bit different between Gutenberg and Core.
This brings them in sync which solves the missing descriptions from the template header
in the site editor.

See #54337.

Committed in https://core.trac.wordpress.org/changeset/52336

Thanks!

Thanks!