prep build 6/22

docs/getting-started/tutorial.md

@@ -33,7 +33,7 @@ If you don't have one or more of these items, the [Block Development Environment
 The first step in creating the Copyright Date Block is to scaffold the initial block structure using the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package.
 
 <div class="callout callout-info">
-	Review the <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/">Get started with create-block</a> documentation for an introduction to using this package.
+	Review the <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/">Get started with create-block</a> documentation for an introduction to using this package.
 </div>
 
 You can use `create-block` from just about any directory (folder) on your computer and then use `wp-env` to create a local WordPress development environment with your new block plugin installed and activated.

docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md

@@ -12,9 +12,14 @@ By registering your own block variation with some specific Query Loop block sett
 
 With the block variations API you can provide the default settings that make the most sense for your use-case.
 
+In order to have a Query Loop variation properly working, we'll need to:
+- Register the block variation for the `core/query` block with some default values
+- Define a layout for the block variation
+- Use the `namespace` attribute in the `isActive` block variation property
+
 Let's go on a journey, for example, of setting up a variation for a plugin which registers a `book` [custom post type](https://developer.wordpress.org/plugins/post-types/).
 
-### Offer sensible defaults
+### 1. Offer sensible defaults
 
 Your first step would be to create a variation which will be set up in such a way to provide a block variation which will display by default a list of books instead of blog posts. The full variation code will look something like this:
 
@@ -91,7 +96,9 @@ In this way, your block will show up just like any other block while the user is
 
 At this point, your custom variation will be virtually indistinguishable from a stand-alone block. Completely branded to your plugin, easy to discover and directly available to the user as a drop in.
 
-### Customize your variation layout
+However, your query loop variation won't work just yet — we still need to define a layout so that it can render properly.
+
+### 2. Customize your variation layout
 
 Please note that the Query Loop block supports `'block'` as a string in the `scope` property. In theory, that's to allow the variation to be picked up after inserting the block itself. Read more about the Block Variation Picker [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-variation-picker/README.md).
 
@@ -125,7 +132,7 @@ In order for a variation to be connected to another Query Loop variation we need
 
 For example, if we have a Query Loop variation exposed to the inserter(`scope: ['inserter']`) with the name `products`, we can connect a scoped `block` variation by setting its `namespace` attribute to `['products']`. If the user selects this variation after having clicked `Start blank`, the namespace attribute will be overridden by the main inserter variation.
 
-### Making Gutenberg recognize your variation
+### 3. Making Gutenberg recognize your variation
 
 There is one slight problem you might have realized after implementing this variation: while it is transparent to the user as they are inserting it, Gutenberg will still recognize the variation as a Query Loop block at its core and so, after its insertion, it will show up as a Query Loop block in the tree view of the editor, for instance.
 

docs/reference-guides/interactivity-api/api-reference.md

@@ -813,7 +813,8 @@ const { state } = store("myPlugin", {
 As mentioned above with [`wp-on`](#wp-on), [`wp-on-window`](#wp-on-window), and [`wp-on-document`](#wp-on-document), an async action should be used whenever the `async` versions of the aforementioned directives cannot be used due to the action requiring synchronous access to the `event` object. Synchronous access is reqired whenever the action needs to call `event.preventDefault()`, `event.stopPropagation()`, or `event.stopImmediatePropagation()`. To ensure that the action code does not contribute to a long task, you may manually yield to the main thread after calling the synchronous event API. For example:
 
 ```js
-function toMainThread() {
+// Note: In WordPress 6.6 this splitTask function is exported by @wordpress/interactivity.
+function splitTask() {
   return new Promise(resolve => {
     setTimeout(resolve, 0);
   });
@@ -823,7 +824,7 @@ store("myPlugin", {
   actions: {
     handleClick: function* (event) {
       event.preventDefault();
-      yield toMainThread();
+      yield splitTask();
       doTheWork();
     },
   },

lib/rest-api.php

@@ -42,13 +42,13 @@ function gutenberg_register_wp_rest_post_types_controller_fields() {
 			array(
 				'get_callback' => function ( $item ) {
 					$post_type = get_post_type_object( $item['slug'] );
-					if ( ! empty( $post_type ) && ! empty( $post_type->template ) ) {
-						return $post_type->template;
+					if ( ! empty( $post_type ) ) {
+						return $post_type->template ?? array();
 					}
 				},
 				'schema'       => array(
 					'type'        => 'array',
-					'description' => __( 'The block template associated with the post type, if it exists.', 'gutenberg' ),
+					'description' => __( 'The block template associated with the post type.', 'gutenberg' ),
 					'readonly'    => true,
 					'context'     => array( 'view', 'edit', 'embed' ),
 				),
@@ -60,14 +60,14 @@ function gutenberg_register_wp_rest_post_types_controller_fields() {
 			array(
 				'get_callback' => function ( $item ) {
 					$post_type = get_post_type_object( $item['slug'] );
-					if ( ! empty( $post_type ) && ! empty( $post_type->template_lock ) && false !== $post_type->template_lock ) {
-						return $post_type->template_lock;
+					if ( ! empty( $post_type ) ) {
+						return ! empty( $post_type->template_lock ) ? $post_type->template_lock : false;
 					}
 				},
 				'schema'       => array(
-					'type'        => 'string',
-					'enum'        => array( 'all', 'insert', 'contentOnly' ),
-					'description' => __( 'The template_lock associated with the post type, if any.', 'gutenberg' ),
+					'type'        => array( 'string', 'boolean' ),
+					'enum'        => array( 'all', 'insert', 'contentOnly', false ),
+					'description' => __( 'The template_lock associated with the post type, or false if none.', 'gutenberg' ),
 					'readonly'    => true,
 					'context'     => array( 'view', 'edit', 'embed' ),
 				),

packages/blocks/src/api/raw-handling/list-reducer.js

@@ -53,9 +53,6 @@ export default function listReducer( node ) {
 		if ( prevListItem ) {
 			prevListItem.appendChild( list );
 			parentList.removeChild( parentListItem );
-		} else {
-			parentList.parentNode.insertBefore( list, parentList );
-			parentList.parentNode.removeChild( parentList );
 		}
 	}
 

packages/blocks/src/api/raw-handling/test/list-reducer.js

@@ -41,12 +41,6 @@ describe( 'listReducer', () => {
 		expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( output );
 	} );
 
-	it( 'should remove empty list wrappers', () => {
-		const input = '<ul><li>\n<ul><li>test</li></ul>\n</li></ul>';
-		const output = '<ul><li>test</li></ul>';
-		expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( output );
-	} );
-
 	it( 'should not remove filled list wrappers', () => {
 		const input = '<ul><li>\ntest\n<ul><li>test</li></ul>\n</li></ul>';
 		expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( input );

packages/components/CHANGELOG.md

@@ -4,11 +4,13 @@
 
 ### Enhancements
 
--   DropZone: rewrite animation without depending on framer-motion. ([#62044](https://github.com/WordPress/gutenberg/pull/62044))
+-   `DropZone`: rewrite animation without depending on framer-motion. ([#62044](https://github.com/WordPress/gutenberg/pull/62044))
 
 ### Internal
 
--   CustomSelectControl: align unit tests for v1 and legacy v2 versions. ([#62706](https://github.com/WordPress/gutenberg/pull/62706))
+-   `CustomSelectControl`: align unit tests for v1 and legacy v2 versions. ([#62706](https://github.com/WordPress/gutenberg/pull/62706))
+-   `CustomSelectControlV2`: fix handling of extra option attributes in the `onChange` callbacks and when forwarding them to the option DOM elements. ([#62255](https://github.com/WordPress/gutenberg/pull/62255))
+-   `CustomSelectControlV2`: fix setting initial value and reacting to external controlled updates. ([#62733](https://github.com/WordPress/gutenberg/pull/62733))
 
 ## 28.1.0 (2024-06-15)
 

packages/components/src/custom-select-control-v2/legacy-component/index.tsx

@@ -14,7 +14,7 @@ import * as Styled from '../styles';
 
 function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	const {
-		__experimentalShowSelectedHint,
+		__experimentalShowSelectedHint = false,
 		__next40pxDefaultSize = false,
 		describedBy,
 		options,
@@ -27,7 +27,11 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
-			if ( ! onChange ) {
+			const nextOption = options.find(
+				( item ) => item.name === nextValue
+			);
+
+			if ( ! onChange || ! nextOption ) {
 				return;
 			}
 
@@ -42,18 +46,21 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				),
 				inputValue: '',
 				isOpen: state.open,
-				selectedItem: {
-					name: nextValue as string,
-					key: nextValue as string,
-				},
+				selectedItem: nextOption,
 				type: '',
 			};
 			onChange( changeObject );
 		},
+		value: value?.name,
+		// Setting the first option as a default value when no value is provided
+		// is already done natively by the underlying Ariakit component,
+		// but doing this explicitly avoids the `onChange` callback from firing
+		// on initial render, thus making this implementation closer to the v1.
+		defaultValue: options[ 0 ]?.name,
 	} );
 
 	const children = options.map(
-		( { name, key, __experimentalHint, ...rest } ) => {
+		( { name, key, __experimentalHint, style, className } ) => {
 			const withHint = (
 				<Styled.WithHintWrapper>
 					<span>{ name }</span>
@@ -68,7 +75,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 					key={ key }
 					value={ name }
 					children={ __experimentalHint ? withHint : name }
-					{ ...rest }
+					style={ style }
+					className={ className }
 				/>
 			);
 		}