Merge branch 'trunk' into add/scripts-playwright

WordPress · Aug 31, 2023 · ab5ca23 · ab5ca23
2 parents 6d77805 + 3c27042
commit ab5ca23
Show file tree

Hide file tree

Showing 388 changed files with 5,388 additions and 1,988 deletions.
diff --git a/bin/plugin/commands/packages.js b/bin/plugin/commands/packages.js
@@ -150,6 +150,7 @@ async function runNpmReleaseBranchSyncStep( pluginReleaseBranch, config ) {
 		 */
 		await repo
 			.raw( 'rm', '-r', '.' )
+			.fetch( 'origin', pluginReleaseBranch, [ '--depth=1' ] )
 			.raw( 'checkout', `origin/${ pluginReleaseBranch }`, '--', '.' );
 
 		const { commit: commitHash } = await repo.commit(

diff --git a/changelog.txt b/changelog.txt
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -5,7 +5,7 @@ The following guide is for setting up your local environment to contribute to th
 ## Prerequisites
 
 -   Node.js
-    Gutenberg is a JavaScript project and requires [Node.js](https://nodejs.org/). The project is built using Node.js v14, and npm v6. See the [LTS release schedule](https://github.com/nodejs/Release#release-schedule) for details.
+    Gutenberg is a JavaScript project and requires [Node.js](https://nodejs.org/). The project is built using Node.js v16, and npm v8. See the [LTS release schedule](https://github.com/nodejs/Release#release-schedule) for details.
 
 We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) since it is the easiest way to install and manage node for macOS, Linux, and Windows 10 using WSL2. See [our Development Tools guide](/docs/getting-started/devenv/README.md#development-tools) or the Nodejs site for additional installation instructions.
 

diff --git a/docs/contributors/versions-in-wordpress.md b/docs/contributors/versions-in-wordpress.md
@@ -6,6 +6,7 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 15.2-16.1          | 6.3.1             |
 | 15.2-16.1          | 6.3               |
 | 14.2-15.1          | 6.2               |
 | 13.1-14.1          | 6.1.1             |

diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
@@ -165,7 +165,7 @@ If you see the error: `Host is already in use by another container`
 
 Docker is just one method to run a local WordPress environment. Block development and extending WordPress is done using normal plugins, so any WordPress environment can be used. Here are some alternatives that you can consider which do not require installing Docker.
 
--   [Local](https://localwp.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
+-   [Local](https://localwp.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`. When working with gutenberg it is recommended to place your install in your own gutenberg folder. This avoids potential issue with the build processes.
 
 -   [WampServer](http://www.wampserver.com/en/) or [MAMP](https://www.mamp.info/) environments, both are quite similar to Local, combining a web server, PHP, and database. However these tools are not WordPress specific, so if you are not already using them, Local might be an easier option.
 

diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
@@ -278,16 +278,14 @@ With these components available, you can define the `<Editor>` component.
 
 function Editor( { settings } ) {
 	return (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<div className="getdavesbe-block-editor-layout">
-					<Notices />
-					<Header />
-					<Sidebar />
-					<BlockEditor settings={ settings } />
-				</div>
-			</DropZoneProvider>
-		</SlotFillProvider>
+		<DropZoneProvider>
+			<div className="getdavesbe-block-editor-layout">
+				<Notices />
+				<Header />
+				<Sidebar />
+				<BlockEditor settings={ settings } />
+			</div>
+		</DropZoneProvider>
 	);
 }
 ```
@@ -296,8 +294,6 @@ In this process, the core of the editor's layout is being scaffolded, along with
 
 Let's examine these in more detail:
 
--   `<SlotFillProvider>` – Enables the use of the ["Slot/Fill"
-    pattern](/docs/reference-guides/slotfills/README.md) through the component tree
 -   `<DropZoneProvider>` – Enables the use of [dropzones for drag and drop functionality](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/drop-zone)
 -   `<Notices>` – Provides a "snack bar" Notice that will be rendered if any messages are dispatched to the `core/notices` store
 -   `<Header>` – Renders the static title "Standalone Block Editor" at the top of the editor UI

diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
@@ -601,6 +601,16 @@ PHP file to use when rendering the block type on the server to show on the front
 -   `$content` (`string`): The block default content.
 -   `$block` (`WP_Block`): The block instance.
 
+An example implementation of the `render.php` file defined with `render` could look like:
+
+```php
+<div <?php echo get_block_wrapper_attributes(); ?>>
+	<?php echo esc_html( $attributes['label'] ); ?>
+</div>
+```
+
+_Note: This file loads for every instance of the block type when rendering the page HTML on the server. Accounting for that is essential when declaring functions or classes in the file. The simplest way to avoid the risk of errors is to consume that shared logic from another file._
+
 ## Assets
 
 ### `WPDefinedPath`

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -302,7 +302,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, ariaLabel, color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, tagName, templateLock
 
 ## Heading
@@ -665,7 +665,7 @@ An advanced block that allows displaying post types based on different query par
 -	**Name:** core/query
 -	**Category:** theme
 -	**Supports:** align (full, wide), layout, ~~html~~
--	**Attributes:** namespace, query, queryId, tagName
+-	**Attributes:** enhancedPagination, namespace, query, queryId, tagName
 
 ## No results
 
@@ -705,7 +705,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
 -	**Category:** theme
 -	**Parent:** core/query-pagination
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:** midSize
 
 ## Previous Page
 

diff --git a/docs/reference-guides/data/data-core-blocks.md b/docs/reference-guides/data/data-core-blocks.md
@@ -712,6 +712,10 @@ The actions in this package shouldn't be used directly. Instead, use the functio
 
 <!-- START TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.js) -->
 
-Nothing to document.
+### reapplyBlockTypeFilters
+
+Signals that all block types should be computed again. It uses stored unprocessed block types and all the most recent list of registered filters.
+
+It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late.
 
 <!-- END TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md
@@ -490,6 +490,10 @@ _Parameters_
 
 -   _mode_ `string`: The editor mode.
 
+### toggleDistractionFree
+
+Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
+
 ### toggleEditorPanelEnabled
 
 Returns an action object used to enable or disable a panel in the editor.

diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
@@ -408,6 +408,10 @@ _Returns_
 
 Undocumented declaration.
 
+### toggleDistractionFree
+
+Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
+
 ### toggleFeature
 
 Dispatches an action that toggles a feature flag.

diff --git a/gutenberg.php b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.1
  * Requires PHP: 7.0
- * Version: 16.5.0
+ * Version: 16.6.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php
@@ -16,10 +16,14 @@ function gutenberg_register_colors_support( $block_type ) {
 	$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
 	$has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
 	$has_link_colors_support       = _wp_array_get( $color_support, array( 'link' ), false );
+	$has_button_colors_support     = _wp_array_get( $color_support, array( 'button' ), false );
+	$has_heading_colors_support    = _wp_array_get( $color_support, array( 'heading' ), false );
 	$has_color_support             = $has_text_colors_support ||
 		$has_background_colors_support ||
 		$has_gradients_support ||
-		$has_link_colors_support;
+		$has_link_colors_support ||
+		$has_button_colors_support ||
+		$has_heading_colors_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();

diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
@@ -23,34 +23,79 @@ function gutenberg_get_elements_class_name( $block ) {
  * @return string                Filtered block content.
  */
 function gutenberg_render_elements_support( $block_content, $block ) {
-	if ( ! $block_content ) {
+	if ( ! $block_content || empty( $block['attrs'] ) ) {
 		return $block_content;
 	}
 
-	$block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+
+	$element_color_properties = array(
+		'button'  => array(
+			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
+			'paths' => array(
+				'style.elements.button.color.text',
+				'style.elements.button.color.background',
+				'style.elements.button.color.gradient',
+			),
+		),
+		'link'    => array(
+			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
+			'paths' => array(
+				'style.elements.link.color.text',
+				'style.elements.link.:hover.color.text',
+			),
+		),
+		'heading' => array(
+			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
+			'paths' => array(
+				'style.elements.heading.color.text',
+				'style.elements.heading.color.background',
+				'style.elements.heading.color.gradient',
+				'style.elements.h1.color.text',
+				'style.elements.h1.color.background',
+				'style.elements.h1.color.gradient',
+				'style.elements.h2.color.text',
+				'style.elements.h2.color.background',
+				'style.elements.h2.color.gradient',
+				'style.elements.h3.color.text',
+				'style.elements.h3.color.background',
+				'style.elements.h3.color.gradient',
+				'style.elements.h4.color.text',
+				'style.elements.h4.color.background',
+				'style.elements.h4.color.gradient',
+				'style.elements.h5.color.text',
+				'style.elements.h5.color.background',
+				'style.elements.h5.color.gradient',
+				'style.elements.h6.color.text',
+				'style.elements.h6.color.background',
+				'style.elements.h6.color.gradient',
+			),
+		),
+	);
+
+	$skip_all_element_color_serialization = $element_color_properties['button']['skip'] &&
+		$element_color_properties['link']['skip'] &&
+		$element_color_properties['heading']['skip'];
 
-	if ( $skip_link_color_serialization ) {
+	if ( $skip_all_element_color_serialization ) {
 		return $block_content;
 	}
 
-	$link_color = null;
-	if ( ! empty( $block['attrs'] ) ) {
-		$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
-	}
+	$element_colors_set = 0;
+
+	foreach ( $element_color_properties as $element_config ) {
+		if ( $element_config['skip'] ) {
+			continue;
+		}
 
-	$hover_link_color = null;
-	if ( ! empty( $block['attrs'] ) ) {
-		$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
+		foreach ( $element_config['paths'] as $path ) {
+			if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
+				$element_colors_set++;
+			}
+		}
 	}
 
-	/*
-	* For now we only care about link colors.
-	* This code in the future when we have a public API
-	* should take advantage of WP_Theme_JSON_Gutenberg::compute_style_properties
-	* and work for any element and style.
-	*/
-	if ( null === $link_color && null === $hover_link_color ) {
+	if ( ! $element_colors_set ) {
 		return $block_content;
 	}
 
@@ -80,33 +125,84 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
 	$element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
 
-	/*
-	* For now we only care about link color.
-	*/
-	$skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+	if ( ! $element_block_styles ) {
+		return null;
+	}
 
-	if ( $skip_link_color_serialization ) {
+	$skip_link_color_serialization         = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+	$skip_heading_color_serialization      = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
+	$skip_button_color_serialization       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
+	$skips_all_element_color_serialization = $skip_link_color_serialization &&
+		$skip_heading_color_serialization &&
+		$skip_button_color_serialization;
+
+	if ( $skips_all_element_color_serialization ) {
 		return null;
 	}
-	$class_name        = gutenberg_get_elements_class_name( $block );
-	$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
-
-	gutenberg_style_engine_get_styles(
-		$link_block_styles,
-		array(
-			'selector' => ".$class_name a",
-			'context'  => 'block-supports',
-		)
+
+	$class_name = gutenberg_get_elements_class_name( $block );
+
+	$element_types = array(
+		'button'  => array(
+			'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
+			'skip'     => $skip_button_color_serialization,
+		),
+		'link'    => array(
+			'selector'       => ".$class_name a",
+			'hover_selector' => ".$class_name a:hover",
+			'skip'           => $skip_link_color_serialization,
+		),
+		'heading' => array(
+			'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
+			'skip'     => $skip_heading_color_serialization,
+			'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
+		),
 	);
 
-	if ( isset( $link_block_styles[':hover'] ) ) {
-		gutenberg_style_engine_get_styles(
-			$link_block_styles[':hover'],
-			array(
-				'selector' => ".$class_name a:hover",
-				'context'  => 'block-supports',
-			)
-		);
+	foreach ( $element_types as $element_type => $element_config ) {
+		if ( $element_config['skip'] ) {
+			continue;
+		}
+
+		$element_style_object = _wp_array_get( $element_block_styles, array( $element_type ), null );
+
+		// Process primary element type styles.
+		if ( $element_style_object ) {
+			gutenberg_style_engine_get_styles(
+				$element_style_object,
+				array(
+					'selector' => $element_config['selector'],
+					'context'  => 'block-supports',
+				)
+			);
+
+			if ( isset( $element_style_object[':hover'] ) ) {
+				gutenberg_style_engine_get_styles(
+					$element_style_object[':hover'],
+					array(
+						'selector' => $element_config['hover_selector'],
+						'context'  => 'block-supports',
+					)
+				);
+			}
+		}
+
+		// Process related elements e.g. h1-h6 for headings.
+		if ( isset( $element_config['elements'] ) ) {
+			foreach ( $element_config['elements'] as $element ) {
+				$element_style_object = _wp_array_get( $element_block_styles, array( $element ), null );
+
+				if ( $element_style_object ) {
+					gutenberg_style_engine_get_styles(
+						$element_style_object,
+						array(
+							'selector' => ".$class_name $element",
+							'context'  => 'block-supports',
+						)
+					);
+				}
+			}
+		}
 	}
 
 	return null;