@wordpress/block-library 8.11.0 → 8.12.1

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,11 +220,11 @@ export default function PostTemplateEdit( {
 			} ) ),
 		[ posts ]
 	);
-	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
+
 	const blockProps = useBlockProps( {
 		className: classnames( __unstableLayoutClassNames, {
-			'is-flex-container': hasLayoutFlex,
-			[ `columns-${ columns }` ]: hasLayoutFlex,
+			[ `columns-${ columnCount }` ]:
+				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
 		} ),
 	} );
 
@@ -235,35 +240,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

@@ -72,6 +72,11 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		$classnames .= ' has-link-color';
 	}
 
+	// Ensure backwards compatibility by flagging the number of columns via classname when using grid layout.
+	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) ) {
+		$classnames .= ' ' . sanitize_title( 'columns-' . $attributes['layout']['columnCount'] );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 
 	$content = '';
@@ -85,17 +90,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",
@@ -28,7 +28,6 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-terms/edit.js

@@ -69,10 +69,6 @@ export default function PostTermsEdit( {
 		} ),
 	} );
 
-	if ( ! hasPost || ! term ) {
-		return <div { ...blockProps }>{ blockInformation.title }</div>;
-	}
-
 	return (
 		<>
 			<BlockControls>
@@ -96,7 +92,7 @@ export default function PostTermsEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ isLoading && <Spinner /> }
+				{ isLoading && hasPost && <Spinner /> }
 				{ ! isLoading && hasPostTerms && ( isSelected || prefix ) && (
 					<RichText
 						allowedFormats={ ALLOWED_FORMATS }
@@ -111,7 +107,11 @@ export default function PostTermsEdit( {
 						tagName="span"
 					/>
 				) }
-				{ ! isLoading &&
+				{ ( ! hasPost || ! term ) && (
+					<span>{ blockInformation.title }</span>
+				) }
+				{ hasPost &&
+					! isLoading &&
 					hasPostTerms &&
 					postTerms
 						.map( ( postTerm ) => (
@@ -132,7 +132,8 @@ export default function PostTermsEdit( {
 								{ curr }
 							</>
 						) ) }
-				{ ! isLoading &&
+				{ hasPost &&
+					! isLoading &&
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||
 						__( 'Term items not found.' ) ) }

package/src/post-terms/hooks.js

@@ -16,9 +16,9 @@ export default function enhanceVariations( settings, name ) {
 	}
 	const variations = settings.variations.map( ( variation ) => ( {
 		...variation,
-		...( variationIconMap[ variation.name ] && {
-			icon: variationIconMap[ variation.name ],
-		} ),
+		...{
+			icon: variationIconMap[ variation.name ] ?? postCategories,
+		},
 	} ) );
 	return {
 		...settings,

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-time-to-read/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

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",
@@ -31,7 +31,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-title/edit.js

@@ -12,6 +12,8 @@ import {
 	InspectorControls,
 	useBlockProps,
 	PlainText,
+	HeadingLevelDropdown,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -21,8 +23,10 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 import { useCanEditEntity } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
@@ -30,7 +34,7 @@ export default function PostTitleEdit( {
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
 } ) {
-	const TagName = 0 === level ? 'p' : 'h' + level;
+	const TagName = 'h' + level;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	/**
 	 * Hack: useCanEditEntity may trigger an OPTIONS request to the REST API via the canUser resolver.
@@ -58,10 +62,9 @@ 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 ? (
@@ -114,20 +117,22 @@ export default function PostTitleEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						value={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl

package/src/post-title/index.php

@@ -28,7 +28,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
-		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
+		$tag_name = 'h' . $attributes['level'];
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {

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/preformatted/test/edit.native.js

@@ -24,24 +24,12 @@ import PreformattedEdit from '../edit';
 setupCoreBlocks();
 
 describe( 'Preformatted', () => {
-	it( 'renders without crashing', () => {
-		const screen = render(
-			<PreformattedEdit
-				attributes={ {} }
-				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ jest.fn() }
-			/>
-		);
-
-		expect( screen.container ).toBeDefined();
-	} );
-
 	it( 'should match snapshot when content is empty', () => {
 		const screen = render(
 			<PreformattedEdit
 				attributes={ {} }
 				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ ( styles1 ) => styles1 }
+				getStylesFromColorScheme={ jest.fn() }
 			/>
 		);
 		expect( screen.toJSON() ).toMatchSnapshot();

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"
 		}
@@ -49,9 +43,8 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
-		"__experimentalLayout": true
+		"layout": true
 	},
 	"editorStyle": "wp-block-query-editor"
 }