@wordpress/block-library 8.11.0 → 8.12.0

package/src/navigation-link/edit.js

@@ -15,7 +15,6 @@ import {
 	ToolbarButton,
 	Tooltip,
 	ToolbarGroup,
-	KeyboardShortcuts,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
@@ -340,7 +339,7 @@ export default function NavigationLinkEdit( {
 	function onKeyDown( event ) {
 		if (
 			isKeyboardEvent.primary( event, 'k' ) ||
-			( ! url && event.keyCode === ENTER )
+			( ( ! url || isDraft || isInvalid ) && event.keyCode === ENTER )
 		) {
 			setIsLinkOpen( true );
 		}
@@ -553,13 +552,6 @@ export default function NavigationLinkEdit( {
 							) }
 							{ ( isInvalid || isDraft ) && (
 								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
-									<KeyboardShortcuts
-										shortcuts={ {
-											enter: () =>
-												isSelected &&
-												setIsLinkOpen( true ),
-										} }
-									/>
 									<Tooltip
 										position="top center"
 										text={ tooltipText }

package/src/navigation-link/hooks.js

@@ -4,7 +4,7 @@
 import {
 	category,
 	page,
-	postContent,
+	postList,
 	tag,
 	customPostType,
 } from '@wordpress/icons';
@@ -12,7 +12,7 @@ import {
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
-			return postContent;
+			return postList;
 		case 'page':
 			return page;
 		case 'tag':

package/src/navigation-link/link-ui.js

@@ -9,7 +9,7 @@ import {
 	BlockIcon,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { switchToBlockType } from '@wordpress/blocks';
@@ -154,11 +154,17 @@ export function LinkUI( props ) {
 	}
 
 	const { label, url, opensInNewTab, type, kind } = props.link;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
+
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
+	const link = useMemo(
+		() => ( {
+			url,
+			opensInNewTab,
+			title: label && stripHTML( label ),
+		} ),
+		[ label, opensInNewTab, url ]
+	);
 
 	return (
 		<Popover

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -27,10 +27,10 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="https://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
+          d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12zM7 11h2V9H7v2zm0 4h2v-2H7v2zm3-4h7V9h-7v2zm0 4h7v-2h-7v2z"
         />
       </SVG>,
       "isActive": [Function],

package/src/navigation-submenu/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation-submenu",
 	"title": "Submenu",
 	"category": "design",

package/src/nextpage/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/nextpage",
 	"title": "Page Break",
 	"category": "design",

package/src/nextpage/edit.native.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import Hr from 'react-native-hr';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ export function NextPageEdit( {
 			accessibilityStates={ accessibilityState }
 			onAccessibilityTap={ onFocus }
 		>
-			<Hr
+			<HorizontalRule
 				text={ customText }
 				marginLeft={ 0 }
 				marginRight={ 0 }

package/src/page-list/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/page-list",
 	"title": "Page List",
 	"category": "widgets",

package/src/page-list-item/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/page-list-item",
 	"title": "Page List Item",
 	"category": "widgets",

package/src/page-list-item/index.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * Server-side rendering of the `core/page-list-item` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Registers the `core/page-list-item` block on server.
+ */
+function register_block_core_page_list_item() {
+	register_block_type_from_metadata( __DIR__ . '/page-list-item' );
+}
+add_action( 'init', 'register_block_core_page_list_item' );

package/src/paragraph/block.json

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

package/src/pattern/block.json

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

package/src/post-author/block.json

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

package/src/post-author-biography/block.json

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

package/src/post-author-name/block.json

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

package/src/post-comment/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/post-comment",
 	"title": "Post Comment (deprecated)",

package/src/post-comments-count/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/post-comments-count",
 	"title": "Post Comments Count",

package/src/post-comments-form/block.json

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

package/src/post-comments-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/post-comments-link",
 	"title": "Post Comments Link",

package/src/post-content/block.json

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

package/src/post-content/edit.js

@@ -9,8 +9,12 @@ import {
 	__experimentalUseHasRecursion as useHasRecursion,
 	Warning,
 } from '@wordpress/block-editor';
-import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
-
+import {
+	useEntityProp,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -45,12 +49,28 @@ function EditableContent( { context = {} } ) {
 		{ id: postId }
 	);
 
+	const entityRecord = useSelect(
+		( select ) => {
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+		},
+		[ postType, postId ]
+	);
+
+	const hasInnerBlocks = !! entityRecord?.content?.raw || blocks?.length;
+
+	const initialInnerBlocks = [ [ 'core/paragraph' ] ];
+
 	const props = useInnerBlocksProps(
 		useBlockProps( { className: 'entry-content' } ),
 		{
 			value: blocks,
 			onInput,
 			onChange,
+			template: ! hasInnerBlocks ? initialInnerBlocks : undefined,
 		}
 	);
 	return <div { ...props } />;

package/src/post-date/block.json

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

package/src/post-excerpt/block.json

@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-excerpt",
-	"title": "Post Excerpt",
+	"title": "Excerpt",
 	"category": "theme",
-	"description": "Display a post's excerpt.",
+	"description": "Display the excerpt.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {

package/src/post-excerpt/edit.js

@@ -109,16 +109,7 @@ export default function PostExcerptEditor( {
 					/>
 				</BlockControls>
 				<div { ...blockProps }>
-					<p>
-						{ __(
-							'This is the Post Excerpt block, it will display the excerpt from single posts.'
-						) }
-					</p>
-					<p>
-						{ __(
-							'If there are any Custom Post Types with support for excerpts, the Post Excerpt block can display the excerpts of those entries as well.'
-						) }
-					</p>
+					<p>{ __( 'This block will display the excerpt.' ) }</p>
 				</div>
 			</>
 		);
@@ -128,7 +119,7 @@ export default function PostExcerptEditor( {
 			<div { ...blockProps }>
 				<Warning>
 					{ __(
-						'There is no excerpt because this is a protected post.'
+						'The content is currently protected and does not have the available excerpt.'
 					) }
 				</Warning>
 			</div>
@@ -195,14 +186,14 @@ export default function PostExcerptEditor( {
 	const excerptContent = isEditable ? (
 		<RichText
 			className={ excerptClassName }
-			aria-label={ __( 'Post excerpt text' ) }
+			aria-label={ __( 'Excerpt text' ) }
 			value={
 				isSelected
 					? rawOrRenderedExcerpt
 					: ( ! isTrimmed
 							? rawOrRenderedExcerpt
 							: trimmedExcerpt + ELLIPSIS ) ||
-					  __( 'No post excerpt found' )
+					  __( 'No excerpt found' )
 			}
 			onChange={ setExcerpt }
 			tagName="p"
@@ -210,7 +201,7 @@ export default function PostExcerptEditor( {
 	) : (
 		<p className={ excerptClassName }>
 			{ ! isTrimmed
-				? rawOrRenderedExcerpt || __( 'No post excerpt found' )
+				? rawOrRenderedExcerpt || __( 'No excerpt found' )
 				: trimmedExcerpt + ELLIPSIS }
 		</p>
 	);

package/src/post-excerpt/index.php

@@ -31,7 +31,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	}
 
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
-	$filter_excerpt_more = function( $more ) use ( $more_text ) {
+	$filter_excerpt_more = static function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
 	};
 	/**
@@ -87,7 +87,7 @@ if ( is_admin() ||
 	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
 	add_filter(
 		'excerpt_length',
-		function() {
+		static function() {
 			return 100;
 		},
 		PHP_INT_MAX

package/src/post-featured-image/block.json

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

package/src/post-navigation-link/block.json

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

package/src/post-template/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-template",
 	"title": "Post Template",
 	"category": "theme",
@@ -20,9 +20,7 @@
 		"html": false,
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"__experimentalLayout": {
-			"allowEditing": false
-		},
+		"__experimentalLayout": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -43,6 +41,14 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"spacing": {
+			"blockGap": {
+				"__experimentalDefault": "1.25em"
+			},
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		}
 	},
 	"style": "wp-block-post-template",

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",