Backport Beta 4 fixes to WordPress Core.

lib/block-patterns.php

@@ -91,8 +91,8 @@ function register_gutenberg_patterns() {
 			'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
 							<div class="wp-block-query">
 							<!-- wp:post-template -->
-							<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
-							<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
+							<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
+							<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
 							<!-- wp:post-excerpt {"wordCount":20} /-->
 							<!-- wp:post-date /--></div>
 							<!-- /wp:group -->
@@ -136,8 +136,8 @@ function register_gutenberg_patterns() {
 			'title'      => __( 'Offset', 'gutenberg' ),
 			'blockTypes' => array( 'core/query' ),
 			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
-							<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
+			'content'    => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
+							<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
 							<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
 							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
 							<div class="wp-block-query"><!-- wp:post-template -->
@@ -162,7 +162,7 @@ function register_gutenberg_patterns() {
 							<!-- /wp:post-template --></div>
 							<!-- /wp:query --></div>
 							<!-- /wp:column --></div>
-							<!-- /wp:columns --></main>
+							<!-- /wp:columns --></div>
 							<!-- /wp:group -->',
 		)
 	);

lib/blocks.php

@@ -133,7 +133,7 @@ function gutenberg_reregister_core_block_types() {
 				$registry->unregister( $metadata['name'] );
 			}
 
-			gutenberg_register_core_block_styles( $folder_name );
+			gutenberg_register_core_block_assets( $folder_name );
 			register_block_type_from_metadata( $block_json_file );
 		}
 
@@ -147,7 +147,7 @@ function gutenberg_reregister_core_block_types() {
 				if ( $registry->is_registered( $block_name ) ) {
 					$registry->unregister( $block_name );
 				}
-				gutenberg_register_core_block_styles( $block_name );
+				gutenberg_register_core_block_assets( $block_name );
 			}
 
 			require_once $blocks_dir . $file;
@@ -164,13 +164,39 @@ function gutenberg_reregister_core_block_types() {
  *
  * @return void
  */
-function gutenberg_register_core_block_styles( $block_name ) {
+function gutenberg_register_core_block_assets( $block_name ) {
+	$block_name = str_replace( 'core/', '', $block_name );
+
+	// When in production, use the plugin's version as the default asset version;
+	// else (for development or test) default to use the current time.
+	$default_version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
+	$script_suffix   = '.min.js';
+
+	$view_script_path = "build/block-library/blocks/$block_name/view$script_suffix";
+	if ( file_exists( gutenberg_dir_path() . $view_script_path ) ) {
+		$view_script_handle = "wp-block-{$block_name}-view";
+		wp_deregister_script( $view_script_handle );
+
+		// Replace suffix and extension with `.asset.php` to find the generated dependencies file.
+		$view_asset_file          = substr( $view_script_path, 0, -( strlen( $script_suffix ) ) ) . '.asset.php';
+		$view_asset               = file_exists( gutenberg_dir_path() . $view_asset_file )
+			? require( gutenberg_dir_path() . $view_asset_file )
+			: null;
+		$view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array();
+		$view_script_version      = isset( $view_asset['version'] ) ? $view_asset['version'] : $default_version;
+
+		wp_register_script(
+			$view_script_handle,
+			gutenberg_url( $view_script_path ),
+			$view_script_dependencies,
+			$view_script_version
+		);
+	}
+
 	if ( ! gutenberg_should_load_separate_block_assets() ) {
 		return;
 	}
 
-	$block_name = str_replace( 'core/', '', $block_name );
-
 	$style_path        = "build/block-library/blocks/$block_name/style.css";
 	$editor_style_path = "build/block-library/blocks/$block_name/style-editor.css";
 
@@ -180,7 +206,7 @@ function gutenberg_register_core_block_styles( $block_name ) {
 			"wp-block-{$block_name}",
 			gutenberg_url( $style_path ),
 			array(),
-			filemtime( gutenberg_dir_path() . $style_path )
+			$default_version
 		);
 		wp_style_add_data( "wp-block-{$block_name}", 'rtl', 'replace' );
 
@@ -196,7 +222,7 @@ function gutenberg_register_core_block_styles( $block_name ) {
 			"wp-block-{$block_name}-editor",
 			gutenberg_url( $editor_style_path ),
 			array(),
-			filemtime( gutenberg_dir_path() . $editor_style_path )
+			$default_version
 		);
 		wp_style_add_data( "wp-block-{$block_name}-editor", 'rtl', 'replace' );
 	} else {

lib/global-styles.php

@@ -184,12 +184,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 		unset( $settings['__experimentalFeatures']['typography']['customLineHeight'] );
 	}
 	if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
-		if ( ! is_array( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
-			$settings['enableCustomUnits'] = false;
-		} else {
-			$settings['enableCustomUnits'] = count( $settings['__experimentalFeatures']['spacing']['units'] ) > 0;
-		}
-		unset( $settings['__experimentalFeatures']['spacing']['units'] );
+		$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
 	}
 	if ( isset( $settings['__experimentalFeatures']['spacing']['customPadding'] ) ) {
 		$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['customPadding'];

packages/block-editor/src/components/button-block-appender/style.scss

@@ -40,6 +40,7 @@
 			background-color: $gray-900;
 			color: $white;
 			border-radius: $radius-block-ui;
+			flex: 1 0 auto;
 		}
 	}
 }

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

@@ -35,7 +35,7 @@ function useDarkThemeBodyClassName( styles ) {
 				// DOM, so calculate the background color by creating a fake
 				// wrapper.
 				const tempCanvas = ownerDocument.createElement( 'div' );
-				tempCanvas.classList.add( EDITOR_STYLES_SELECTOR );
+				tempCanvas.classList.add( 'editor-styles-wrapper' );
 				body.appendChild( tempCanvas );
 
 				backgroundColor = defaultView

packages/block-editor/src/components/rich-text/utils.js

@@ -5,7 +5,7 @@ import { regexp } from '@wordpress/shortcode';
 import deprecated from '@wordpress/deprecated';
 
 export function addActiveFormats( value, activeFormats ) {
-	if ( activeFormats.length ) {
+	if ( activeFormats?.length ) {
 		let index = value.formats.length;
 
 		while ( index-- ) {

packages/block-library/README.md

@@ -14,20 +14,20 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ## Building JavaScript for the browser
 
-If a `frontend.js` file is present in the block's directory, this file will be built along other assets, making it available to load from the browser.
+If a `view.js` file is present in the block's directory, this file will be built along other assets, making it available to load from the browser.
 
 This enables us to, for instance, load this file when the block is present on the page in two ways:
 
 1.  Using the block's `render_callback`:
 
 ```php
-function render_my_block() {
-	$script_path = __DIR__ . '/block-name/frontend.js';
+function render_block_my_block() {
+	$script_path = __DIR__ . '/my-block/view.js';
 
  	if ( file_exists( $script_path ) ) {
  		wp_enqueue_script(
- 			'my_block_frontend_script',
- 			plugins_url( 'frontend.js', $script_path ),
+ 			'wp-block-my-block-view',
+ 			plugins_url( 'view.js', $script_path ),
  			array(),
  			false,
  			true
@@ -36,10 +36,10 @@ function render_my_block() {
 }
 
 function register_block_my_block() {
-	register_block_type_from_metadata(
-		__DIR__ . '/block-name',
+	register_block_type(
+		__DIR__ . '/my-block',
 		array(
-			'render_callback' => 'render_my_block',
+			'render_callback' => 'render_block_my_block',
 		)
 	);
 }
@@ -51,21 +51,21 @@ add_action( 'init', 'register_block_my_block' );
 2.  Using the `render_block` filter:
 
 ```php
-function render_my_block() {
-	$script_path = __DIR__ . '/block-name/frontend.js';
+function render_block_my_block() {
+	$script_path = __DIR__ . '/my-block/view.js';
 
  	if ( file_exists( $script_path ) ) {
  		wp_enqueue_script(
- 			'my_block_frontend_script',
- 			plugins_url( 'frontend.js', $script_path ),
+ 			'wp-block-my-block-view',
+ 			plugins_url( 'view.js', $script_path ),
  			array(),
  			false,
  			true
  		);
  	}
 }
 
-apply_filter( 'render_block', 'render_my_block' );
+apply_filter( 'render_block', 'render_block_my_block' );
 ```
 
 ## API

packages/block-library/src/file/index.php

@@ -6,19 +6,17 @@
  */
 
 /**
- * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-library-file` script.
+ * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
  *
  * @param array $attributes The block attributes.
  * @param array $content    The block content.
  *
  * @return string Returns the block content.
  */
 function render_block_core_file( $attributes, $content ) {
-	if ( ! empty( $attributes['displayPreview'] ) ) {
-		// Check if it's already enqueued, so we don't add the inline script multiple times.
-		if ( ! wp_script_is( 'wp-block-library-file' ) ) {
-			wp_enqueue_script( 'wp-block-library-file', plugins_url( 'file/frontend.js', __FILE__ ) );
-		}
+	$should_load_view_script = ! empty( $attributes['displayPreview'] ) && ! wp_script_is( 'wp-block-file-view' );
+	if ( $should_load_view_script ) {
+		wp_enqueue_script( 'wp-block-file-view' );
 	}
 
 	return $content;

packages/block-library/src/image/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, omit, pick } from 'lodash';
+import { get, has, omit, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -71,6 +71,22 @@ const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
  */
 export const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
 
+/**
+ * Checks if WP generated default image size. Size generation is skipped
+ * when the image is smaller than the said size.
+ *
+ * @param {Object} image
+ * @param {string} defaultSize
+ *
+ * @return {boolean} Whether or not it has default image size.
+ */
+function hasDefaultSize( image, defaultSize ) {
+	return (
+		has( image, [ 'sizes', defaultSize, 'url' ] ) ||
+		has( image, [ 'media_details', 'sizes', defaultSize, 'source_url' ] )
+	);
+}
+
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -148,7 +164,11 @@ export function ImageEdit( {
 			additionalAttributes = {
 				width: undefined,
 				height: undefined,
-				sizeSlug: imageDefaultSize,
+				// Fallback to size "full" if there's no default image size.
+				// It means the image is smaller, and the block will use a full-size URL.
+				sizeSlug: hasDefaultSize( media, imageDefaultSize )
+					? imageDefaultSize
+					: 'full',
 			};
 		} else {
 			// Keep the same url when selecting the same file, so "Image Size"

packages/block-library/src/navigation/block.json

@@ -4,11 +4,7 @@
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links"
-	],
+	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",
 	"attributes": {
 		"orientation": {
@@ -56,10 +52,7 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,
 		"inserter": true,

packages/block-library/src/navigation/index.php

@@ -120,16 +120,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
-	$should_load_frontend_script = $attributes['isResponsive'] && ! wp_script_is( 'core_block_navigation_load_frontend_scripts' );
-
-	if ( $should_load_frontend_script ) {
-		wp_enqueue_script(
-			'core_block_navigation_load_frontend_scripts',
-			plugins_url( 'frontend.js', __DIR__ . '/navigation/frontend.js' ),
-			array(),
-			false,
-			true
-		);
+
+	$should_load_view_script = ! empty( $attributes['isResponsive'] ) && ! wp_script_is( 'wp-block-navigation-view' );
+	if ( $should_load_view_script ) {
+		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
 	if ( empty( $block->inner_blocks ) ) {

packages/block-library/src/table-of-contents/edit.js

@@ -22,7 +22,6 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 import { renderToString, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -61,7 +60,10 @@ export default function TableOfContentsEdit( {
 			listBlockExists: !! select( blocksStore ).getBlockType(
 				'core/list'
 			),
-			postContent: select( editorStore ).getEditedPostContent(),
+			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+			// Blocks can be loaded into a *non-post* block editor.
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			postContent: select( 'core/editor' ).getEditedPostContent(),
 		} ),
 		[]
 	);

packages/block-library/src/template-part/edit/advanced-controls.js

@@ -6,7 +6,6 @@ import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { InspectorAdvancedControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 
 export function TemplatePartAdvancedControls( {
 	tagName,
@@ -30,8 +29,11 @@ export function TemplatePartAdvancedControls( {
 	);
 
 	const { areaOptions } = useSelect( ( select ) => {
+		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+		// Blocks can be loaded into a *non-post* block editor.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const definedAreas = select(
-			editorStore
+			'core/editor'
 		).__experimentalGetDefaultTemplatePartAreas();
 		return {
 			areaOptions: definedAreas.map( ( { label, area: _area } ) => ( {

packages/block-library/src/template-part/edit/index.js

@@ -17,7 +17,6 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -89,7 +88,10 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
-			const defaultWrapperElement = select( editorStore )
+			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+			// Blocks can be loaded into a *non-post* block editor.
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			const defaultWrapperElement = select( 'core/editor' )
 				.__experimentalGetDefaultTemplatePartAreas()
 				.find( ( { area: value } ) => value === _area )?.area_tag;