Merge branch 'trunk' into enhance/improve-tabs-focus

docs/getting-started/devenv/get-started-with-create-block.md

@@ -1,6 +1,6 @@
 # Get started with create-block
 
-Custom blocks for the Block Editor in WordPress are typically registered using plugins and are defined through a specific set of files. The [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package is an officially supported tool to scaffold the structure of files needed to create and register a block. It generates all the necessary code to start a project and integrates a modern JavaScript build setup (using [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts.md)) with no configuration required. 
+Custom blocks for the Block Editor in WordPress are typically registered using plugins and are defined through a specific set of files. The [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package is an officially supported tool to scaffold the structure of files needed to create and register a block. It generates all the necessary code to start a project and integrates a modern JavaScript build setup (using [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/)) with no configuration required. 
 
 The package is designed to help developers quickly set up a block development environment following WordPress best practices.
 

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

@@ -150,6 +150,19 @@ _Returns_
 
 -   `undefined< 'edit' >`: Current user object.
 
+### getDefaultTemplateId
+
+Returns the default template use to render a given query.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _query_ `TemplateQuery`: Query.
+
+_Returns_
+
+-   `string`: The default template id for the given query.
+
 ### getEditedEntityRecord
 
 Returns the specified entity record, merged with its edits.
@@ -648,6 +661,19 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveDefaultTemplateId
+
+Returns an action object used to set the template for a given query.
+
+_Parameters_
+
+-   _query_ `Object`: The lookup query.
+-   _templateId_ `string`: The resolved template id.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveEntityRecords
 
 Returns an action object used in signalling that entity records have been received.

lib/experimental/data-views.php

@@ -40,7 +40,7 @@ function _gutenberg_register_data_views_post_type() {
 		'wp_dataviews_type',
 		array( 'wp_dataviews' ),
 		array(
-			'public'            => true,
+			'public'            => false,
 			'hierarchical'      => false,
 			'labels'            => array(
 				'name'          => __( 'Dataview types', 'gutenberg' ),

packages/block-library/src/navigation/edit/overlay-menu-preview.js

@@ -20,7 +20,7 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 				__nextHasNoMarginBottom
 				label={ __( 'Show icon button' ) }
 				help={ __(
-					'Configure the visual appearance of the button opening the overlay menu.'
+					'Configure the visual appearance of the button that toggles the overlay menu.'
 				) }
 				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
 				checked={ hasIcon }

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

@@ -44,7 +44,11 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$block->block_type->supports['interactivity'] = true;
 
 			// Add a div to announce messages using `aria-live`.
-			$last_div_position = strripos( $content, '</div>' );
+			$html_tag = 'div';
+			if ( ! empty( $attributes['tagName'] ) ) {
+				$html_tag = esc_attr( $attributes['tagName'] );
+			}
+			$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
 			$content           = substr_replace(
 				$content,
 				'<div
@@ -57,7 +61,7 @@ class="wp-block-query__enhanced-pagination-animation"
 					data-wp-class--start-animation="selectors.core.query.startAnimation"
 					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
 				></div>',
-				$last_div_position,
+				$last_tag_position,
 				0
 			);
 		}

packages/components/CHANGELOG.md

@@ -7,8 +7,13 @@
 -   Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622))
 
 ### Experimental
+
 -   `Tabs`: Add `focusable` prop to the `Tabs.TabPanel` sub-component ([#55287](https://github.com/WordPress/gutenberg/pull/55287))
 
+### Enhancements
+
+-   `ToggleGroupControl`: Add opt-in prop for 40px default size ([#55789](https://github.com/WordPress/gutenberg/pull/55789)).
+
 ## 25.11.0 (2023-11-02)
 
 ### Enhancements

packages/components/src/toggle-group-control/toggle-group-control/component.tsx

@@ -31,6 +31,7 @@ function UnconnectedToggleGroupControl(
 ) {
 	const {
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -52,11 +53,16 @@ function UnconnectedToggleGroupControl(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.toggleGroupControl( { isBlock, isDeselectable, size } ),
+				styles.toggleGroupControl( {
+					isBlock,
+					isDeselectable,
+					size,
+					__next40pxDefaultSize,
+				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size ]
+		[ className, cx, isBlock, isDeselectable, size, __next40pxDefaultSize ]
 	);
 
 	const MainControl = isDeselectable

packages/components/src/toggle-group-control/toggle-group-control/styles.ts

@@ -14,7 +14,11 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
+	__next40pxDefaultSize,
+}: Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
+> & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
@@ -25,7 +29,7 @@ export const toggleGroupControl = ( {
 	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size ) }
+	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -53,13 +57,18 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
+	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
 ) => {
 	const heights = {
-		default: '36px',
+		default: '40px',
 		'__unstable-large': '40px',
 	};
 
+	if ( ! __next40pxDefaultSize ) {
+		heights.default = '36px';
+	}
+
 	return css`
 		min-height: ${ heights[ size ] };
 	`;

packages/components/src/toggle-group-control/types.ts

@@ -122,6 +122,12 @@ export type ToggleGroupControlProps = Pick<
 	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type ToggleGroupControlContextProps = {

packages/core-data/README.md

@@ -205,6 +205,19 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveDefaultTemplateId
+
+Returns an action object used to set the template for a given query.
+
+_Parameters_
+
+-   _query_ `Object`: The lookup query.
+-   _templateId_ `string`: The resolved template id.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveEntityRecords
 
 Returns an action object used in signalling that entity records have been received.
@@ -444,6 +457,19 @@ _Returns_
 
 -   `undefined< 'edit' >`: Current user object.
 
+### getDefaultTemplateId
+
+Returns the default template use to render a given query.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _query_ `TemplateQuery`: Query.
+
+_Returns_
+
+-   `string`: The default template id for the given query.
+
 ### getEditedEntityRecord
 
 Returns the specified entity record, merged with its edits.

packages/core-data/src/actions.js

@@ -908,3 +908,19 @@ export function receiveNavigationFallbackId( fallbackId ) {
 		fallbackId,
 	};
 }
+
+/**
+ * Returns an action object used to set the template for a given query.
+ *
+ * @param {Object} query      The lookup query.
+ * @param {string} templateId The resolved template id.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveDefaultTemplateId( query, templateId ) {
+	return {
+		type: 'RECEIVE_DEFAULT_TEMPLATE',
+		query,
+		templateId,
+	};
+}

packages/core-data/src/queried-data/reducer.js

@@ -56,10 +56,10 @@ export function getMergedItemIds( itemIds, nextItemIds, page, perPage ) {
 
 	for ( let i = 0; i < size; i++ ) {
 		// Preserve existing item ID except for subset of range of next items.
+		// We need to check against the possible maximum upper boundary because
+		// a page could recieve less items than what was previously stored.
 		const isInNextItemsRange =
-			i >= nextItemIdsStartIndex &&
-			i < nextItemIdsStartIndex + nextItemIds.length;
-
+			i >= nextItemIdsStartIndex && i < nextItemIdsStartIndex + perPage;
 		mergedItemIds[ i ] = isInNextItemsRange
 			? nextItemIds[ i - nextItemIdsStartIndex ]
 			: itemIds?.[ i ];

packages/core-data/src/queried-data/selectors.js

@@ -52,7 +52,9 @@ function getQueriedItemsUncached( state, query ) {
 		if ( Array.isArray( include ) && ! include.includes( itemId ) ) {
 			continue;
 		}
-
+		if ( itemId === undefined ) {
+			continue;
+		}
 		// Having a target item ID doesn't guarantee that this object has been queried.
 		if ( ! state.items[ context ]?.hasOwnProperty( itemId ) ) {
 			return null;

packages/core-data/src/queried-data/test/reducer.js

@@ -64,6 +64,17 @@ describe( 'getMergedItemIds', () => {
 
 		expect( result ).toEqual( [ 1, 3, 4 ] );
 	} );
+	it( 'should update a page properly if less items are provided than previously stored', () => {
+		let original = deepFreeze( [ 1, 2, 3 ] );
+		let result = getMergedItemIds( original, [ 1, 2 ], 1, 3 );
+
+		expect( result ).toEqual( [ 1, 2 ] );
+
+		original = deepFreeze( [ 1, 2, 3, 4, 5, 6 ] );
+		result = getMergedItemIds( original, [ 9 ], 2, 2 );
+
+		expect( result ).toEqual( [ 1, 2, 9, undefined, 5, 6 ] );
+	} );
 } );
 
 describe( 'itemIsComplete', () => {

packages/core-data/src/reducer.js

@@ -572,6 +572,26 @@ export function themeGlobalStyleRevisions( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer managing the template lookup per query.
+ *
+ * @param {Record<string, string>} state  Current state.
+ * @param {Object}                 action Dispatched action.
+ *
+ * @return {Record<string, string>} Updated state.
+ */
+export function defaultTemplates( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_DEFAULT_TEMPLATE':
+			return {
+				...state,
+				[ JSON.stringify( action.query ) ]: action.templateId,
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	terms,
 	users,
@@ -592,4 +612,5 @@ export default combineReducers( {
 	blockPatternCategories,
 	userPatternCategories,
 	navigationFallbackId,
+	defaultTemplates,
 } );

packages/core-data/src/resolvers.js

@@ -707,3 +707,14 @@ export const getNavigationFallbackId =
 			] );
 		}
 	};
+
+export const getDefaultTemplateId =
+	( query ) =>
+	async ( { dispatch } ) => {
+		const template = await apiFetch( {
+			path: addQueryArgs( '/wp/v2/templates/lookup', query ),
+		} );
+		if ( template ) {
+			dispatch.receiveDefaultTemplateId( query, template.id );
+		}
+	};

packages/core-data/src/selectors.ts

@@ -46,6 +46,7 @@ export interface State {
 	users: UserState;
 	navigationFallbackId: EntityRecordKey;
 	userPatternCategories: Array< UserPatternCategory >;
+	defaultTemplates: Record< string, string >;
 }
 
 type EntityRecordKey = string | number;
@@ -81,6 +82,12 @@ interface UserState {
 	byId: Record< EntityRecordKey, ET.User< 'edit' > >;
 }
 
+type TemplateQuery = {
+	slug?: string;
+	is_custom?: boolean;
+	ignore_empty?: boolean;
+};
+
 export interface UserPatternCategory {
 	id: number;
 	name: string;
@@ -1351,3 +1358,18 @@ export function getCurrentThemeGlobalStylesRevisions(
 
 	return state.themeGlobalStyleRevisions[ currentGlobalStylesId ];
 }
+
+/**
+ * Returns the default template use to render a given query.
+ *
+ * @param state Data state.
+ * @param query Query.
+ *
+ * @return The default template id for the given query.
+ */
+export function getDefaultTemplateId(
+	state: State,
+	query: TemplateQuery
+): string {
+	return state.defaultTemplates[ JSON.stringify( query ) ];
+}

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -47,7 +47,9 @@ export async function visitSiteEditor(
 	 * loading is done.
 	 */
 	await this.page
-		.locator( '.edit-site-canvas-loader' )
+		// Spinner was used instead of the progress bar in an earlier version of
+		// the site editor.
+		.locator( '.edit-site-canvas-loader, .edit-site-canvas-spinner' )
 		// Bigger timeout is needed for larger entities, for example the large
 		// post html fixture that we load for performance tests, which often
 		// doesn't make it under the default 10 seconds.

packages/e2e-test-utils-playwright/src/editor/click-block-options-menu-item.ts

@@ -12,8 +12,7 @@ import type { Editor } from './index';
 export async function clickBlockOptionsMenuItem( this: Editor, label: string ) {
 	await this.clickBlockToolbarButton( 'Options' );
 	await this.page
-		.locator(
-			`role=menu[name="Options"i] >> role=menuitem[name="${ label }"i]`
-		)
+		.getByRole( 'menu', { name: 'Options' } )
+		.getByRole( 'menuitem', { name: label } )
 		.click();
 }