Merge branch 'trunk' into update/welcome-guide-copy

docs/reference-guides/data/data-core-customize-widgets.md

@@ -10,6 +10,25 @@ Namespace: `core/customize-widgets`.
 
 Returns true if the inserter is opened.
 
+_Usage_
+
+```js
+import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { isInserterOpened } = useSelect(
+		( select ) => select( customizeWidgetsStore ),
+		[]
+	);
+
+	return isInserterOpened()
+		? __( 'Inserter is open' )
+		: __( 'Inserter is closed.' );
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
@@ -28,6 +47,32 @@ _Returns_
 
 Returns an action object used to open/close the inserter.
 
+_Usage_
+
+```js
+import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const ExampleComponent = () => {
+	const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	return (
+		<Button
+			onClick={ () => {
+				setIsInserterOpened( ! isOpen );
+				setIsOpen( ! isOpen );
+			} }
+		>
+			{ __( 'Open/close inserter' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.

lib/blocks.php

@@ -372,3 +372,31 @@ function gutenberg_register_legacy_social_link_blocks() {
 }
 
 add_action( 'init', 'gutenberg_register_legacy_social_link_blocks' );
+
+/**
+ * Migrate the legacy `sync_status` meta key (added 16.1) to the new `wp_pattern_sync_status` meta key (16.1.1).
+ *
+ * This filter is INTENTIONALLY left out of core as the meta key was fist introduced to core in 6.3 as `wp_pattern_sync_status`.
+ * see https://github.com/WordPress/gutenberg/pull/52232
+ *
+ * @param mixed  $value     The value to return, either a single metadata value or an array of values depending on the value of $single.
+ * @param int    $object_id ID of the object metadata is for.
+ * @param string $meta_key  Metadata key.
+ * @param bool   $single    Whether to return only the first value of the specified $meta_key.
+ */
+function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $single ) {
+	if ( 'wp_pattern_sync_status' !== $meta_key ) {
+		return $value;
+	}
+
+	$sync_status = get_post_meta( $object_id, 'sync_status', $single );
+
+	if ( $single && 'unsynced' === $sync_status ) {
+		return $sync_status;
+	} elseif ( isset( $sync_status[0] ) && 'unsynced' === $sync_status[0] ) {
+		return $sync_status;
+	}
+
+	return $value;
+}
+add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 );

lib/compat/wordpress-6.3/blocks.php

@@ -60,6 +60,7 @@ function gutenberg_rename_reusable_block_cpt_to_pattern( $args, $post_type ) {
 		$args['labels']['item_reverted_to_draft']   = __( 'Pattern reverted to draft.' );
 		$args['labels']['item_scheduled']           = __( 'Pattern scheduled.' );
 		$args['labels']['item_updated']             = __( 'Pattern updated.' );
+		$args['rest_controller_class']              = 'Gutenberg_REST_Blocks_Controller';
 	}
 
 	return $args;
@@ -89,7 +90,7 @@ function gutenberg_add_custom_fields_to_wp_block( $args, $post_type ) {
 add_filter( 'register_post_type_args', 'gutenberg_add_custom_fields_to_wp_block', 10, 2 );
 
 /**
- * Adds sync_status meta fields to the wp_block post type so an unsynced option can be added.
+ * Adds wp_pattern_sync_status meta fields to the wp_block post type so an unsynced option can be added.
  *
  * Note: This should be removed when the minimum required WP version is >= 6.3.
  *
@@ -101,39 +102,21 @@ function gutenberg_wp_block_register_post_meta() {
 	$post_type = 'wp_block';
 	register_post_meta(
 		$post_type,
-		'sync_status',
+		'wp_pattern_sync_status',
 		array(
 			'auth_callback'     => function() {
 				return current_user_can( 'edit_posts' );
 			},
-			'sanitize_callback' => 'gutenberg_wp_block_sanitize_post_meta',
+			'sanitize_callback' => 'sanitize_text_field',
 			'single'            => true,
 			'type'              => 'string',
 			'show_in_rest'      => array(
 				'schema' => array(
-					'type'       => 'string',
-					'properties' => array(
-						'sync_status' => array(
-							'type' => 'string',
-						),
-					),
+					'type' => 'string',
+					'enum' => array( 'partial', 'unsynced' ),
 				),
 			),
 		)
 	);
 }
-/**
- * Sanitizes the array of wp_block post meta sync_status string.
- *
- * Note: This should be removed when the minimum required WP version is >= 6.3.
- *
- * @see https://github.com/WordPress/gutenberg/pull/51144
- *
- * @param array $meta_value String to sanitize.
- *
- * @return array Sanitized string.
- */
-function gutenberg_wp_block_sanitize_post_meta( $meta_value ) {
-	return sanitize_text_field( $meta_value );
-}
 add_action( 'init', 'gutenberg_wp_block_register_post_meta' );

lib/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Reusable blocks REST API: WP_REST_Blocks_Controller class
+ *
+ * @package WordPress
+ * @subpackage REST_API
+ * @since 5.0.0
+ */
+
+/**
+ * Controller which provides a REST endpoint for the editor to read, create,
+ * edit and delete reusable blocks. Blocks are stored as posts with the wp_block
+ * post type.
+ *
+ * @since 5.0.0
+ *
+ * @see WP_REST_Posts_Controller
+ * @see WP_REST_Controller
+ */
+class Gutenberg_REST_Blocks_Controller extends WP_REST_Blocks_Controller {
+	/**
+	 * Filters a response based on the context defined in the schema.
+	 *
+	 * @since 5.0.0
+	 * @since 6.3 Adds the `wp_pattern_sync_status` property to the response.
+	 *
+	 * @param array  $data    Response data to filter.
+	 * @param string $context Context defined in the schema.
+	 * @return array Filtered response.
+	 */
+	public function filter_response_by_context( $data, $context ) {
+		$data = parent::filter_response_by_context( $data, $context );
+
+		/*
+		 * Remove `title.rendered` and `content.rendered` from the response. It
+		 * doesn't make sense for a reusable block to have rendered content on its
+		 * own, since rendering a block requires it to be inside a post or a page.
+		 */
+		unset( $data['title']['rendered'] );
+		unset( $data['content']['rendered'] );
+
+		// Add the core wp_pattern_sync_status meta as top level property to the response.
+		$data['wp_pattern_sync_status'] = isset( $data['meta']['wp_pattern_sync_status'] ) ? $data['meta']['wp_pattern_sync_status'] : '';
+		unset( $data['meta']['wp_pattern_sync_status'] );
+		return $data;
+	}
+}

lib/load.php

@@ -56,6 +56,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/compat/wordpress-6.3/navigation-block-preloading.php';
 	require_once __DIR__ . '/compat/wordpress-6.3/link-template.php';
 	require_once __DIR__ . '/compat/wordpress-6.3/block-patterns.php';
+	require_once __DIR__ . '/compat/wordpress-6.3/class-gutenberg-rest-blocks-controller.php';
 
 	// Experimental.
 	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {

packages/block-editor/README.md

@@ -680,6 +680,10 @@ _Related_
 
 Private @wordpress/block-editor APIs.
 
+### ReusableBlocksRenameHint
+
+Undocumented declaration.
+
 ### RichText
 
 _Related_

packages/block-editor/src/components/block-parent-selector/index.js

@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -24,14 +25,15 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
+	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const parents = getBlockParents( selectedBlockClientId );
@@ -41,11 +43,14 @@ export default function BlockParentSelector() {
 			const settings = getSettings();
 			return {
 				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				isVisible:
+					_firstParentClientId &&
+					getBlockEditingMode( _firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						_parentBlockType,
+						'__experimentalParentSelector',
+						true
+					),
 				isDistractionFree: settings.isDistractionFree,
 			};
 		},
@@ -66,7 +71,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -57,6 +57,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',

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

@@ -165,3 +165,8 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+
+/*
+ * The following rename hint component can be removed in 6.4.
+ */
+export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

packages/block-editor/src/components/inserter/reusable-block-rename-hint.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
+
+export default function ReusableBlocksRenameHint() {
+	const isReusableBlocksRenameHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const ref = useRef();
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! isReusableBlocksRenameHint ) {
+		return null;
+	}
+
+	return (
+		<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
+			<div className="reusable-blocks-menu-items__rename-hint-content">
+				{ __(
+					'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
+				) }
+			</div>
+			<Button
+				className="reusable-blocks-menu-items__rename-hint-dismiss"
+				icon={ close }
+				iconSize="16"
+				label={ __( 'Dismiss hint' ) }
+				onClick={ () => {
+					// Retain focus when dismissing the element.
+					const previousElement = focus.tabbable.findPrevious(
+						ref.current
+					);
+					previousElement?.focus();
+					setPreference( 'core', PREFERENCE_NAME, false );
+				} }
+				showTooltip={ false }
+			/>
+		</div>
+	);
+}

packages/block-editor/src/components/inserter/reusable-blocks-tab.js

@@ -13,6 +13,7 @@ import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import InserterNoResults from './no-results';
 import useBlockTypesState from './hooks/use-block-types-state';
+import ReusableBlocksRenameHint from './reusable-block-rename-hint';
 
 function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	const [ items, , , onSelectItem ] = useBlockTypesState(
@@ -54,6 +55,9 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 	return (
 		<>
+			<div className="block-editor-inserter__hint">
+				<ReusableBlocksRenameHint />
+			</div>
 			<ReusableBlocksList
 				onHover={ onHover }
 				onInsert={ onInsert }

packages/block-editor/src/components/inserter/style.scss

@@ -711,3 +711,31 @@ $block-inserter-tabs-height: 44px;
 		margin: 0;
 	}
 }
+
+.block-editor-inserter__hint {
+	margin: $grid-unit-20 $grid-unit-20 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+	align-items: top;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+	color: $gray-900;
+	display: flex;
+	flex-direction: row;
+	max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+	// The dismiss button has a lot of empty space through its padding.
+	// Apply margin to visually align the icon with the top of the text to its left.
+	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+	margin: 0;
+}