Merge branch 'trunk' into rnmobile/integration-test-button-radius

docs/how-to-guides/themes/theme-json.md

@@ -169,6 +169,7 @@ The settings section has the following structure:
 	"settings": {
 		"color": {
 			"custom": true,
+			"customDuotone": true,
 			"customGradient": true,
 			"duotone": [],
 			"gradients": [],
@@ -220,6 +221,7 @@ The settings section has the following structure:
 		},
 		"color": {
 			"custom": true,
+			"customDuotone": true,
 			"customGradient": true,
 			"duotone": [],
 			"gradients": [],

docs/reference-guides/filters/block-filters.md

@@ -339,48 +339,57 @@ wp.blocks.getBlockTypes().forEach( function ( blockType ) {
 
 ## Hiding blocks from the inserter
 
-On the server, you can filter the list of blocks shown in the inserter using the `allowed_block_types` filter. You can return either true (all block types supported), false (no block types supported), or an array of block type names to allow. You can also use the second provided param `$post` to filter block types based on its content.
+### `allowed_block_types_all`
+
+_**Note:** Before WordPress 5.8 known as `allowed_block_types`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
+
+On the server, you can filter the list of blocks shown in the inserter using the `allowed_block_types_all` filter. You can return either true (all block types supported), false (no block types supported), or an array of block type names to allow. You can also use the second provided param `$editor_context` to filter block types based on its content.
 
 ```php
 <?php
 // my-plugin.php
 
-function my_plugin_allowed_block_types( $allowed_block_types, $post ) {
-	if ( $post->post_type !== 'post' ) {
-		return $allowed_block_types;
+function filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		return array( 'core/paragraph', 'core/heading' );
 	}
-	return array( 'core/paragraph' );
+	return $allowed_block_types;
 }
 
-add_filter( 'allowed_block_types', 'my_plugin_allowed_block_types', 10, 2 );
+add_filter( 'allowed_block_types_all', 'filter_allowed_block_types_when_post_provided', 10, 2 );
 ```
 
 ## Managing block categories
 
-It is possible to filter the list of default block categories using the `block_categories` filter. You can do it on the server by implementing a function which returns a list of categories. It is going to be used during blocks registration and to group blocks in the inserter. You can also use the second provided param `$post` to generate a different list depending on the post's content.
+### `block_categories_all`
+
+_**Note:** Before WordPress 5.8 known as `block_categories`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
+
+It is possible to filter the list of default block categories using the `block_categories_all` filter. You can do it on the server by implementing a function which returns a list of categories. It is going to be used during blocks registration and to group blocks in the inserter. You can also use the second provided param `$editor_context` to filter the based on its content.
 
 ```php
 <?php
 // my-plugin.php
 
-function my_plugin_block_categories( $categories, $post ) {
-	if ( $post->post_type !== 'post' ) {
-		return $categories;
-	}
-	return array_merge(
-		$categories,
-		array(
+function filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		array_push(
+			$block_categories,
 			array(
-				'slug' => 'my-category',
-				'title' => __( 'My category', 'my-plugin' ),
-				'icon'  => 'wordpress',
-			),
-		)
-	);
+				'slug'  => 'custom-category',
+				'title' => __( 'Custom Category', 'custom-plugin' ),
+				'icon'  => null,
+			)
+		);
+	}
+	return $block_categories;
 }
-add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
+
+add_filter( 'block_categories_all', 'filter_block_categories_when_post_provided', 10, 2 );
 ```
 
+### `wp.blocks.updateCategory`
+
 You can also display an icon with your block category by setting an `icon` attribute. The value can be the slug of a [WordPress Dashicon](https://developer.wordpress.org/resource/dashicons/).
 
 You can also set a custom icon in SVG format. To do so, the icon should be rendered and set on the frontend, so it can make use of WordPress SVG, allowing mobile compatibility and making the icon more accessible.

docs/reference-guides/filters/editor-filters.md

@@ -64,13 +64,51 @@ addFilter(
 
 ## Editor settings
 
-### `block_editor_settings`
+### `block_editor_settings_all`
+
+_**Note:** Before WordPress 5.8 known as `block_editor_settings`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
 
 This is a PHP filter which is applied before sending settings to the WordPress block editor.
 
-You may find details about this filter [on its WordPress Code Reference page](https://developer.wordpress.org/reference/hooks/block_editor_settings/).
+You may find details about this filter [on its WordPress Code Reference page](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/).
+
+The filter will send any setting to the initialized Editor, which means any editor setting that is used to configure the editor at initialiation can be filtered by a PHP WordPress plugin before being sent.
+
+_Example:_
+
+```php
+<?php
+// my-plugin.php
+
+function filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		$editor_settings['maxUploadFileSize'] = 12345;
+	}
+	return $editor_settings;
+}
+
+add_filter( 'block_editor_settings_all', 'filter_block_editor_settings_when_post_provided', 10, 2 );
+```
+
+#### `block_editor_rest_api_preload_paths`
+
+Filters the array of REST API paths that will be used to preloaded common data to use with the block editor.
+
+_Example:_
+
+```php
+<?php
+// my-plugin.php
 
-The filter will send any setting to the initialized Editor, which means any editor setting that is used to configure the editor at initialisation can be filtered by a PHP WordPress plugin before being sent.
+function filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		array_push( $preload_paths, array( '/wp/v2/blocks', 'OPTIONS' ) );
+	}
+	return $preload_paths;
+}
+
+add_filter( 'block_editor_rest_api_preload_paths', 'filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );
+```
 
 ### Available default editor settings
 
@@ -88,9 +126,11 @@ If set to false the user will not be able to switch between visual and code edit
 
 ### Block Directory
 
-The Block Directory enables installing new block plugins from [WordPress.org.](https://wordpress.org/plugins/browse/block/) It can be disabled by removing the actions that enqueue it. In WordPress core, the function is `wp_enqueue_editor_block_directory_assets`, and Gutenberg uses `gutenberg_enqueue_block_editor_assets_block_directory`. To remove the feature, use [`remove_action`,](https://developer.wordpress.org/reference/functions/remove_action/) like this:
+The Block Directory enables installing new block plugins from [WordPress.org.](https://wordpress.org/plugins/browse/block/) It can be disabled by removing the actions that enqueue it. In WordPress core, the function is `wp_enqueue_editor_block_directory_assets`. To remove the feature, use [`remove_action`,](https://developer.wordpress.org/reference/functions/remove_action/) like this:
 
 ```php
+<?php
+// my-plugin.php
+
 remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
-remove_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_block_editor_assets_block_directory' );
 ```

lib/class-wp-theme-json-gutenberg.php

@@ -85,14 +85,18 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'color'      => array(
 			'custom'         => null,
+			'customDuotone'  => null,
 			'customGradient' => null,
 			'duotone'        => null,
 			'gradients'      => null,
 			'link'           => null,
 			'palette'        => null,
 		),
 		'custom'     => null,
-		'layout'     => null,
+		'layout'     => array(
+			'contentSize' => null,
+			'wideSize'    => null,
+		),
 		'spacing'    => array(
 			'customMargin'  => null,
 			'customPadding' => null,

lib/experimental-default-theme.json

@@ -169,8 +169,9 @@
 				}
 			],
 			"custom": true,
-			"link": false,
-			"customGradient": true
+			"customDuotone": true,
+			"customGradient": true,
+			"link": false
 		},
 		"typography": {
 			"dropCap": true,

packages/block-editor/src/components/duotone-control/duotone-picker-popover.js

@@ -11,6 +11,7 @@ function DuotonePickerPopover( {
 	duotonePalette,
 	colorPalette,
 	disableCustomColors,
+	disableCustomDuotone,
 } ) {
 	return (
 		<Popover
@@ -23,6 +24,7 @@ function DuotonePickerPopover( {
 					colorPalette={ colorPalette }
 					duotonePalette={ duotonePalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 					value={ value }
 					onChange={ onChange }
 				/>

packages/block-editor/src/components/duotone-control/index.js

@@ -15,15 +15,12 @@ function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
+	disableCustomDuotone,
 	value,
 	onChange,
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	if ( ! duotonePalette ) {
-		return null;
-	}
-
 	const onToggle = () => {
 		setIsOpen( ( prev ) => ! prev );
 	};
@@ -55,6 +52,7 @@ function DuotoneControl( {
 					duotonePalette={ duotonePalette }
 					colorPalette={ colorPalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 				/>
 			) }
 		</>

packages/block-editor/src/hooks/duotone.js

@@ -21,6 +21,8 @@ import {
 	useSetting,
 } from '../components';
 
+const EMPTY_ARRAY = [];
+
 /**
  * Convert a list of colors to an object of R, G, and B values.
  *
@@ -124,15 +126,23 @@ function DuotonePanel( { attributes, setAttributes } ) {
 	const style = attributes?.style;
 	const duotone = style?.color?.duotone;
 
-	const duotonePalette = useSetting( 'color.duotone' );
-	const colorPalette = useSetting( 'color.palette' );
+	const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;
+	const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const disableCustomColors = ! useSetting( 'color.custom' );
+	const disableCustomDuotone =
+		! useSetting( 'color.customDuotone' ) ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
+	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
+		return null;
+	}
 
 	return (
 		<BlockControls group="block">
 			<DuotoneControl
 				duotonePalette={ duotonePalette }
 				colorPalette={ colorPalette }
+				disableCustomDuotone={ disableCustomDuotone }
 				disableCustomColors={ disableCustomColors }
 				value={ duotone }
 				onChange={ ( newDuotone ) => {

packages/block-library/src/editor.scss

@@ -42,7 +42,6 @@
 @import "./social-links/editor.scss";
 @import "./spacer/editor.scss";
 @import "./table/editor.scss";
-@import "./tag-cloud/editor.scss";
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";

packages/block-library/src/latest-posts/style.scss

@@ -43,7 +43,6 @@
 .wp-block-latest-posts__post-date,
 .wp-block-latest-posts__post-author {
 	display: block;
-	color: #555;
 	font-size: 0.8125em;
 }
 

packages/block-library/src/post-terms/block.json

@@ -11,6 +11,10 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"separator": {
+			"type": "string",
+			"default": ", "
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
@@ -24,5 +28,6 @@
 			"lineHeight": true,
 			"fontSize": true
 		}
-	}
+	},
+	"style": "wp-block-post-terms"
 }

packages/block-library/src/post-terms/edit.js

@@ -8,11 +8,12 @@ import classnames from 'classnames';
  */
 import {
 	AlignmentToolbar,
+	InspectorAdvancedControls,
 	BlockControls,
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Spinner } from '@wordpress/components';
+import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -27,7 +28,7 @@ export default function PostTermsEdit( {
 	context,
 	setAttributes,
 } ) {
-	const { term, textAlign } = attributes;
+	const { term, textAlign, separator } = attributes;
 	const { postId, postType } = context;
 
 	const selectedTerm = useSelect(
@@ -78,6 +79,17 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
+			<InspectorAdvancedControls>
+				<TextControl
+					autoComplete="off"
+					label={ __( 'Separator' ) }
+					value={ separator || '' }
+					onChange={ ( nextValue ) => {
+						setAttributes( { separator: nextValue } );
+					} }
+					help={ __( 'Enter character(s) used to separate terms.' ) }
+				/>
+			</InspectorAdvancedControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
 				{ ! isLoading &&
@@ -92,7 +104,15 @@ export default function PostTermsEdit( {
 								{ postTerm.name }
 							</a>
 						) )
-						.reduce( ( prev, curr ) => [ prev, ' | ', curr ] ) }
+						.reduce( ( prev, curr ) => (
+							<>
+								{ prev }
+								<span className="wp-block-post-terms__separator">
+									{ separator || ' ' }
+								</span>
+								{ curr }
+							</>
+						) ) }
 				{ ! isLoading &&
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||