@wordpress/block-library 8.11.0 → 8.12.1

package/src/query/deprecated.js

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
@@ -126,6 +126,86 @@ const migrateColors = ( attributes, innerBlocks ) => {
 const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
 	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
 
+const migrateToConstrainedLayout = ( attributes ) => {
+	const { layout = null } = attributes;
+	if ( ! layout ) {
+		return attributes;
+	}
+	const { inherit = null, contentSize = null, ...newLayout } = layout;
+
+	if ( inherit || contentSize ) {
+		return {
+			...attributes,
+			layout: {
+				...newLayout,
+				contentSize,
+				type: 'constrained',
+			},
+		};
+	}
+
+	return attributes;
+};
+
+const findPostTemplateBlock = ( innerBlocks = [] ) => {
+	let foundBlock = null;
+	for ( const block of innerBlocks ) {
+		if ( block.name === 'core/post-template' ) {
+			foundBlock = block;
+			break;
+		} else if ( block.innerBlocks.length ) {
+			foundBlock = findPostTemplateBlock( block.innerBlocks );
+		}
+	}
+	return foundBlock;
+};
+
+const replacePostTemplateBlock = ( innerBlocks = [], replacementBlock ) => {
+	innerBlocks.forEach( ( block, index ) => {
+		if ( block.name === 'core/post-template' ) {
+			innerBlocks.splice( index, 1, replacementBlock );
+		} else if ( block.innerBlocks.length ) {
+			block.innerBlocks = replacePostTemplateBlock(
+				block.innerBlocks,
+				replacementBlock
+			);
+		}
+	} );
+	return innerBlocks;
+};
+
+const migrateDisplayLayout = ( attributes, innerBlocks ) => {
+	const { displayLayout = null, ...newAttributes } = attributes;
+	if ( ! displayLayout ) {
+		return [ attributes, innerBlocks ];
+	}
+	const postTemplateBlock = findPostTemplateBlock( innerBlocks );
+	if ( ! postTemplateBlock ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	const { type, columns } = displayLayout;
+
+	// Convert custom displayLayout values to canonical layout types.
+	const updatedLayoutType = type === 'flex' ? 'grid' : 'default';
+
+	const newPostTemplateBlock = createBlock(
+		'core/post-template',
+		{
+			...postTemplateBlock.attributes,
+			layout: {
+				type: updatedLayoutType,
+				...( columns && { columnCount: columns } ),
+			},
+		},
+		postTemplateBlock.innerBlocks
+	);
+	return [
+		newAttributes,
+		replacePostTemplateBlock( innerBlocks, newPostTemplateBlock ),
+	];
+};
+
 // Version with NO wrapper `div` element.
 const v1 = {
 	attributes: {
@@ -160,13 +240,14 @@ const v1 = {
 	supports: {
 		html: false,
 	},
-	migrate( attributes ) {
+	migrate( attributes, innerBlocks ) {
 		const withTaxQuery = migrateToTaxQuery( attributes );
 		const { layout, ...restWithTaxQuery } = withTaxQuery;
-		return {
+		const newAttributes = {
 			...restWithTaxQuery,
 			displayLayout: withTaxQuery.layout,
 		};
+		return migrateDisplayLayout( newAttributes, innerBlocks );
 	},
 	save() {
 		return <InnerBlocks.Content />;
@@ -215,13 +296,22 @@ const v2 = {
 			gradients: true,
 			link: true,
 		},
-		__experimentalLayout: true,
+		layout: true,
 	},
 	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
 		categoryIds || tagIds,
 	migrate( attributes, innerBlocks ) {
 		const withTaxQuery = migrateToTaxQuery( attributes );
-		return migrateColors( withTaxQuery, innerBlocks );
+		const [ withColorAttributes, withColorInnerBlocks ] = migrateColors(
+			withTaxQuery,
+			innerBlocks
+		);
+		const withConstrainedLayoutAttributes =
+			migrateToConstrainedLayout( withColorAttributes );
+		return migrateDisplayLayout(
+			withConstrainedLayoutAttributes,
+			withColorInnerBlocks
+		);
 	},
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
@@ -279,7 +369,7 @@ const v3 = {
 				text: true,
 			},
 		},
-		__experimentalLayout: true,
+		layout: true,
 	},
 	isEligible( attributes ) {
 		const { style, backgroundColor, gradient, textColor } = attributes;
@@ -291,7 +381,18 @@ const v3 = {
 			style?.elements?.link
 		);
 	},
-	migrate: migrateColors,
+	migrate( attributes, innerBlocks ) {
+		const [ withColorAttributes, withColorInnerBlocks ] = migrateColors(
+			attributes,
+			innerBlocks
+		);
+		const withConstrainedLayoutAttributes =
+			migrateToConstrainedLayout( withColorAttributes );
+		return migrateDisplayLayout(
+			withConstrainedLayoutAttributes,
+			withColorInnerBlocks
+		);
+	},
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
 		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
@@ -347,7 +448,7 @@ const v4 = {
 				text: true,
 			},
 		},
-		__experimentalLayout: true,
+		layout: true,
 	},
 	save( { attributes: { tagName: Tag = 'div' } } ) {
 		const blockProps = useBlockProps.save();
@@ -355,26 +456,72 @@ const v4 = {
 		return <Tag { ...innerBlocksProps } />;
 	},
 	isEligible: ( { layout } ) =>
-		! layout ||
-		layout.inherit ||
-		( layout.contentSize && layout.type !== 'constrained' ),
-	migrate: ( attributes ) => {
-		const { layout = null } = attributes;
-		if ( ! layout ) {
-			return attributes;
-		}
-		if ( layout.inherit || layout.contentSize ) {
-			return {
-				...attributes,
-				layout: {
-					...layout,
-					type: 'constrained',
-				},
-			};
-		}
+		layout?.inherit ||
+		( layout?.contentSize && layout?.type !== 'constrained' ),
+	migrate( attributes, innerBlocks ) {
+		const withConstrainedLayoutAttributes =
+			migrateToConstrainedLayout( attributes );
+		return migrateDisplayLayout(
+			withConstrainedLayoutAttributes,
+			innerBlocks
+		);
+	},
+};
+
+const v5 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
+				taxQuery: null,
+				parents: [],
+			},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
+		},
+		namespace: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		layout: true,
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+	isEligible: ( { displayLayout } ) => {
+		return !! displayLayout;
 	},
+	migrate: migrateDisplayLayout,
 };
 
-const deprecated = [ v4, v3, v2, v1 ];
+const deprecated = [ v5, v4, v3, v2, v1 ];
 
 export default deprecated;

package/src/query/edit/inspector-controls/index.js

@@ -28,7 +28,7 @@ import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import CreateNewPostLink from './create-new-post-link';
-import { unlock } from '../../../private-apis';
+import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
@@ -101,7 +101,7 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
-	const showColumnsControl = displayLayout?.type === 'flex';
+	const showColumnsControl = false;
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =
@@ -169,7 +169,9 @@ export default function QueryInspectorControls( props ) {
 									label={ __( 'Columns' ) }
 									value={ displayLayout.columns }
 									onChange={ ( value ) =>
-										setDisplayLayout( { columns: value } )
+										setDisplayLayout( {
+											columns: value,
+										} )
 									}
 									min={ 2 }
 									max={ Math.max( 6, displayLayout.columns ) }

package/src/query/edit/query-content.js

@@ -13,6 +13,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -35,6 +36,7 @@ export default function QueryContent( {
 		query,
 		displayLayout,
 		tagName: TagName = 'div',
+		query: { inherit } = {},
 	} = attributes;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -45,9 +47,12 @@ export default function QueryContent( {
 	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
+		const { getEntityRecord, canUser } = select( coreStore );
+		const settingPerPage = canUser( 'read', 'settings' )
+			? +getEntityRecord( 'root', 'site' )?.posts_per_page
+			: +getSettings().postsPerPage;
 		return {
-			postsPerPage:
-				+getSettings().postsPerPage || DEFAULTS_POSTS_PER_PAGE,
+			postsPerPage: settingPerPage || DEFAULTS_POSTS_PER_PAGE,
 		};
 	}, [] );
 	// There are some effects running where some initialization logic is
@@ -61,14 +66,18 @@ export default function QueryContent( {
 	// would cause to override previous wanted changes.
 	useEffect( () => {
 		const newQuery = {};
-		if ( ! query.perPage && postsPerPage ) {
+		// When we inherit from global query always need to set the `perPage`
+		// based on the reading settings.
+		if ( inherit && query.perPage !== postsPerPage ) {
+			newQuery.perPage = postsPerPage;
+		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage ] );
+	}, [ query.perPage, postsPerPage, inherit ] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -107,7 +116,6 @@ export default function QueryContent( {
 					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
-					setDisplayLayout={ updateDisplayLayout }
 					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>

package/src/query/edit/query-toolbar.js

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { settings, list, grid } from '@wordpress/icons';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,9 +18,8 @@ import { settings, list, grid } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query, displayLayout },
+	attributes: { query },
 	setQuery,
-	setDisplayLayout,
 	openPatternSelectionModal,
 	name,
 	clientId,
@@ -30,24 +29,7 @@ export default function QueryToolbar( {
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
 	);
-	const displayLayoutControls = [
-		{
-			icon: list,
-			title: __( 'List view' ),
-			onClick: () => setDisplayLayout( { type: 'list' } ),
-			isActive: displayLayout?.type === 'list',
-		},
-		{
-			icon: grid,
-			title: __( 'Grid view' ),
-			onClick: () =>
-				setDisplayLayout( {
-					type: 'flex',
-					columns: displayLayout?.columns || 3,
-				} ),
-			isActive: displayLayout?.type === 'flex',
-		},
-	];
+
 	return (
 		<>
 			{ ! query.inherit && (
@@ -144,7 +126,6 @@ export default function QueryToolbar( {
 					</ToolbarButton>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);
 }

package/src/query-no-results/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-no-results",
 	"title": "No results",
 	"category": "theme",
@@ -9,7 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
-		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/query-pagination/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination",
 	"title": "Pagination",
 	"category": "theme",
@@ -11,14 +11,18 @@
 		"paginationArrow": {
 			"type": "string",
 			"default": "none"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"usesContext": [ "queryId", "query" ],
 	"providesContext": {
-		"paginationArrow": "paginationArrow"
+		"paginationArrow": "paginationArrow",
+		"showLabel": "showLabel"
 	},
 	"supports": {
-		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,
@@ -31,7 +35,7 @@
 				"link": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {

package/src/query-pagination/edit.js

@@ -10,11 +10,13 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
+import { QueryPaginationLabelControl } from './query-pagination-label-control';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -28,7 +30,7 @@ const ALLOWED_BLOCKS = [
 ];
 
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow },
+	attributes: { paginationArrow, showLabel },
 	setAttributes,
 	clientId,
 } ) {
@@ -36,7 +38,7 @@ export default function QueryPaginationEdit( {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
 		/**
-		 * Show the `paginationArrow` control only if a
+		 * Show the `paginationArrow` and `showLabel` controls only if a
 		 * `QueryPaginationNext/Previous` block exists.
 		 */
 		return innerBlocks?.find( ( innerBlock ) => {
@@ -51,6 +53,12 @@ export default function QueryPaginationEdit( {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
 	} );
+	// Always show label text if paginationArrow is set to 'none'.
+	useEffect( () => {
+		if ( paginationArrow === 'none' && ! showLabel ) {
+			setAttributes( { showLabel: true } );
+		}
+	}, [ paginationArrow, setAttributes, showLabel ] );
 	return (
 		<>
 			{ hasNextPreviousBlocks && (
@@ -62,6 +70,14 @@ export default function QueryPaginationEdit( {
 								setAttributes( { paginationArrow: value } );
 							} }
 						/>
+						{ paginationArrow !== 'none' && (
+							<QueryPaginationLabelControl
+								value={ showLabel }
+								onChange={ ( value ) => {
+									setAttributes( { showLabel: value } );
+								} }
+							/>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			) }

package/src/query-pagination/query-pagination-label-control.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '@wordpress/components';
+
+export function QueryPaginationLabelControl( { value, onChange } ) {
+	return (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			label={ __( 'Show label text' ) }
+			help={ __(
+				'Toggle off to hide the label text, e.g. "Next Page".'
+			) }
+			onChange={ onChange }
+			checked={ value === true }
+		/>
+	);
+}

package/src/query-pagination-next/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-next",
 	"title": "Next Page",
 	"category": "theme",
@@ -12,9 +12,8 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-pagination-next/edit.js

@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -22,16 +22,18 @@ export default function QueryPaginationNextEdit( {
 			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
 		>
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Next page link' ) }
-				placeholder={ __( 'Next Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Next page link' ) }
+					placeholder={ __( 'Next Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+			) }
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }

package/src/query-pagination-next/index.php

@@ -20,10 +20,15 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Next Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, true );
 
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
@@ -31,7 +36,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 		add_filter( 'next_posts_link_attributes', $filter_link_attributes );

package/src/query-pagination-numbers/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-numbers",
 	"title": "Page Numbers",
 	"category": "theme",
@@ -9,7 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/query-pagination-previous/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-previous",
 	"title": "Previous Page",
 	"category": "theme",
@@ -12,9 +12,8 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {