@wordpress/block-library 8.10.0 → 8.12.0

package/src/post-template/edit.js

@@ -10,14 +10,16 @@ import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
+	BlockControls,
 	BlockContextProvider,
 	__experimentalUseBlockPreview as useBlockPreview,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Spinner } from '@wordpress/components';
+import { Spinner, ToolbarGroup } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { list, grid } from '@wordpress/icons';
 
 const TEMPLATE = [
 	[ 'core/post-title' ],
@@ -70,6 +72,7 @@ function PostTemplateBlockPreview( {
 const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
 
 export default function PostTemplateEdit( {
+	setAttributes,
 	clientId,
 	context: {
 		query: {
@@ -95,11 +98,13 @@ export default function PostTemplateEdit( {
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
-		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
 		previewPostType,
 	},
+	attributes: { layout },
 	__unstableLayoutClassNames,
 } ) {
+	const { type: layoutType, columnCount = 3 } = layout || {};
+
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
@@ -215,12 +220,9 @@ export default function PostTemplateEdit( {
 			} ) ),
 		[ posts ]
 	);
-	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
+
 	const blockProps = useBlockProps( {
-		className: classnames( __unstableLayoutClassNames, {
-			'is-flex-container': hasLayoutFlex,
-			[ `columns-${ columns }` ]: hasLayoutFlex,
-		} ),
+		className: classnames( __unstableLayoutClassNames ),
 	} );
 
 	if ( ! posts ) {
@@ -235,35 +237,67 @@ export default function PostTemplateEdit( {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
+	const setDisplayLayout = ( newDisplayLayout ) =>
+		setAttributes( {
+			layout: { ...layout, ...newDisplayLayout },
+		} );
+
+	const displayLayoutControls = [
+		{
+			icon: list,
+			title: __( 'List view' ),
+			onClick: () => setDisplayLayout( { type: 'default' } ),
+			isActive: layoutType === 'default' || layoutType === 'constrained',
+		},
+		{
+			icon: grid,
+			title: __( 'Grid view' ),
+			onClick: () =>
+				setDisplayLayout( {
+					type: 'grid',
+					columnCount,
+				} ),
+			isActive: layoutType === 'grid',
+		},
+	];
+
 	// To avoid flicker when switching active block contexts, a preview is rendered
 	// for each block context, but the preview for the active block context is hidden.
 	// This ensures that when it is displayed again, the cached rendering of the
 	// block preview is used, instead of having to re-render the preview from scratch.
 	return (
-		<ul { ...blockProps }>
-			{ blockContexts &&
-				blockContexts.map( ( blockContext ) => (
-					<BlockContextProvider
-						key={ blockContext.postId }
-						value={ blockContext }
-					>
-						{ blockContext.postId ===
-						( activeBlockContextId ||
-							blockContexts[ 0 ]?.postId ) ? (
-							<PostTemplateInnerBlocks />
-						) : null }
-						<MemoizedPostTemplateBlockPreview
-							blocks={ blocks }
-							blockContextId={ blockContext.postId }
-							setActiveBlockContextId={ setActiveBlockContextId }
-							isHidden={
-								blockContext.postId ===
-								( activeBlockContextId ||
-									blockContexts[ 0 ]?.postId )
-							}
-						/>
-					</BlockContextProvider>
-				) ) }
-		</ul>
+		<>
+			<BlockControls>
+				<ToolbarGroup controls={ displayLayoutControls } />
+			</BlockControls>
+
+			<ul { ...blockProps }>
+				{ blockContexts &&
+					blockContexts.map( ( blockContext ) => (
+						<BlockContextProvider
+							key={ blockContext.postId }
+							value={ blockContext }
+						>
+							{ blockContext.postId ===
+							( activeBlockContextId ||
+								blockContexts[ 0 ]?.postId ) ? (
+								<PostTemplateInnerBlocks />
+							) : null }
+							<MemoizedPostTemplateBlockPreview
+								blocks={ blocks }
+								blockContextId={ blockContext.postId }
+								setActiveBlockContextId={
+									setActiveBlockContextId
+								}
+								isHidden={
+									blockContext.postId ===
+									( activeBlockContextId ||
+										blockContexts[ 0 ]?.postId )
+								}
+							/>
+						</BlockContextProvider>
+					) ) }
+			</ul>
+		</>
 	);
 }

package/src/post-template/index.php

@@ -85,17 +85,18 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		// This ensures that for the inner instances of the Post Template block, we do not render any block supports.
 		$block_instance['blockName'] = 'core/null';
 
+		$post_id              = get_the_ID();
+		$post_type            = get_post_type();
+		$filter_block_context = static function( $context ) use ( $post_id, $post_type ) {
+			$context['postType'] = $post_type;
+			$context['postId']   = $post_id;
+			return $context;
+		};
+		add_filter( 'render_block_context', $filter_block_context );
 		// Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
 		// `render_callback` and ensure that no wrapper markup is included.
-		$block_content = (
-			new WP_Block(
-				$block_instance,
-				array(
-					'postType' => get_post_type(),
-					'postId'   => get_the_ID(),
-				)
-			)
-		)->render( array( 'dynamic' => false ) );
+		$block_content = ( new WP_Block( $block_instance ) )->render( array( 'dynamic' => false ) );
+		remove_filter( 'render_block_context', $filter_block_context );
 
 		// Wrap the render inner blocks in a `li` element with the appropriate post classes.
 		$post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );

package/src/post-template/style.scss

@@ -9,7 +9,7 @@
 	&.wp-block-post-template {
 		background: none;
 	}
-
+	// These rules no longer apply but should be kept for backwards compatibility.
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;
@@ -30,3 +30,10 @@
 		}
 	}
 }
+
+@media ( max-width: $break-small ) {
+	// Temporary specificity bump until "wp-container" layout specificity is revisited.
+	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
+		grid-template-columns: 1fr;
+	}
+}

package/src/post-terms/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-terms",
 	"title": "Post Terms",
 	"category": "theme",

package/src/post-time-to-read/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/post-time-to-read",
 	"title": "Time To Read",

package/src/post-title/block.json

@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-title",
-	"title": "Post Title",
+	"title": "Title",
 	"category": "theme",
 	"description": "Displays the title of a post, page, or any other content-type.",
 	"textdomain": "default",

package/src/post-title/edit.js

@@ -12,6 +12,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	PlainText,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -23,6 +24,9 @@ import { useEntityProp } from '@wordpress/core-data';
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 import { useCanEditEntity } from '../utils/hooks';
+import { unlock } from '../private-apis';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
@@ -32,7 +36,17 @@ export default function PostTitleEdit( {
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
+	/**
+	 * Hack: useCanEditEntity may trigger an OPTIONS request to the REST API via the canUser resolver.
+	 * However, when the Post Title is a descendant of a Query Loop block, the title cannot be edited.
+	 * In order to avoid these unnecessary requests, we call the hook without
+	 * the proper data, resulting in returning early without making them.
+	 */
+	const userCanEdit = useCanEditEntity(
+		'postType',
+		! isDescendentOfQueryLoop && postType,
+		postId
+	);
 	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
 		'postType',
 		postType,
@@ -48,80 +62,77 @@ export default function PostTitleEdit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
-	let titleElement = (
-		<TagName { ...blockProps }>{ __( 'Post Title' ) }</TagName>
-	);
+	let titleElement = <TagName { ...blockProps }>{ __( 'Title' ) }</TagName>;
 
 	if ( postType && postId ) {
-		titleElement =
-			userCanEdit && ! isDescendentOfQueryLoop ? (
+		titleElement = userCanEdit ? (
+			<PlainText
+				tagName={ TagName }
+				placeholder={ __( 'No Title' ) }
+				value={ rawTitle }
+				onChange={ setTitle }
+				__experimentalVersion={ 2 }
+				__unstableOnSplitAtEnd={ onSplitAtEnd }
+				{ ...blockProps }
+			/>
+		) : (
+			<TagName
+				{ ...blockProps }
+				dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
+			/>
+		);
+	}
+
+	if ( isLink && postType && postId ) {
+		titleElement = userCanEdit ? (
+			<TagName { ...blockProps }>
 				<PlainText
-					tagName={ TagName }
-					placeholder={ __( 'No Title' ) }
+					tagName="a"
+					href={ link }
+					target={ linkTarget }
+					rel={ rel }
+					placeholder={ ! rawTitle.length ? __( 'No Title' ) : null }
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
 					__unstableOnSplitAtEnd={ onSplitAtEnd }
-					{ ...blockProps }
 				/>
-			) : (
-				<TagName
-					{ ...blockProps }
-					dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
+			</TagName>
+		) : (
+			<TagName { ...blockProps }>
+				<a
+					href={ link }
+					target={ linkTarget }
+					rel={ rel }
+					onClick={ ( event ) => event.preventDefault() }
+					dangerouslySetInnerHTML={ {
+						__html: fullTitle?.rendered,
+					} }
 				/>
-			);
+			</TagName>
+		);
 	}
 
-	if ( isLink && postType && postId ) {
-		titleElement =
-			userCanEdit && ! isDescendentOfQueryLoop ? (
-				<TagName { ...blockProps }>
-					<PlainText
-						tagName="a"
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						placeholder={
-							! rawTitle.length ? __( 'No Title' ) : null
+	return (
+		<>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						selectedLevel={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
 						}
-						value={ rawTitle }
-						onChange={ setTitle }
-						__experimentalVersion={ 2 }
-						__unstableOnSplitAtEnd={ onSplitAtEnd }
 					/>
-				</TagName>
-			) : (
-				<TagName { ...blockProps }>
-					<a
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						onClick={ ( event ) => event.preventDefault() }
-						dangerouslySetInnerHTML={ {
-							__html: fullTitle?.rendered,
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
 						} }
 					/>
-				</TagName>
-			);
-	}
-
-	return (
-		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl

package/src/preformatted/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/preformatted",
 	"title": "Preformatted",
 	"category": "text",

package/src/pullquote/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/pullquote",
 	"title": "Pullquote",
 	"category": "text",

package/src/query/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query",
 	"title": "Query Loop",
 	"category": "theme",
@@ -32,12 +32,6 @@
 			"type": "string",
 			"default": "div"
 		},
-		"displayLayout": {
-			"type": "object",
-			"default": {
-				"type": "list"
-			}
-		},
 		"namespace": {
 			"type": "string"
 		}

package/src/query/deprecated.js

@@ -126,6 +126,84 @@ 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',
+			},
+		};
+	}
+};
+
+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 +238,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 />;
@@ -221,7 +300,16 @@ const v2 = {
 		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();
@@ -291,7 +379,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 );
@@ -355,26 +454,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,
+		__experimentalLayout: 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

@@ -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 ) }