@wordpress/block-library 8.10.0 → 8.12.0

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/navigation-submenu/edit.js

@@ -422,8 +422,11 @@ export default function NavigationSubmenuEdit( {
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
 						} }
-						label={ __( 'Link title' ) }
+						label={ __( 'Title attribute' ) }
 						autoComplete="off"
+						help={ __(
+							'Additional information to help clarify the purpose of the link.'
+						) }
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
@@ -431,8 +434,11 @@ export default function NavigationSubmenuEdit( {
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
 						} }
-						label={ __( 'Link rel' ) }
+						label={ __( 'Rel attribute' ) }
 						autoComplete="off"
+						help={ __(
+							'The relationship of the linked URL as space-separated link types.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>

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",
@@ -13,6 +13,10 @@
 	"attributes": {
 		"slug": {
 			"type": "string"
+		},
+		"syncStatus": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "full", "partial" ]
 		}
 	}
 }

package/src/pattern/edit.js

@@ -1,46 +1,83 @@
 /**
  * WordPress dependencies
  */
+import { cloneBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
 const PatternEdit = ( { attributes, clientId } ) => {
-	const selectedPattern = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__experimentalGetParsedPattern(
-				attributes.slug
-			),
-		[ attributes.slug ]
+	const { slug, syncStatus } = attributes;
+	const { selectedPattern, innerBlocks } = useSelect(
+		( select ) => {
+			return {
+				selectedPattern:
+					select( blockEditorStore ).__experimentalGetParsedPattern(
+						slug
+					),
+				innerBlocks:
+					select( blockEditorStore ).getBlock( clientId )
+						?.innerBlocks,
+			};
+		},
+		[ slug, clientId ]
 	);
-
-	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const {
+		replaceBlocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.
-	// This change won't be saved.
-	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
-		if ( selectedPattern?.blocks ) {
+		if ( selectedPattern?.blocks && ! innerBlocks?.length ) {
 			// We batch updates to block list settings to avoid triggering cascading renders
 			// for each container block included in a tree and optimize initial render.
 			// Since the above uses microtasks, we need to use a microtask here as well,
 			// because nested pattern blocks cannot be inserted if the parent block supports
 			// inner blocks but doesn't have blockSettings in the state.
 			window.queueMicrotask( () => {
+				// Clone blocks from the pattern before insertion to ensure they receive
+				// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.
+				const clonedBlocks = selectedPattern.blocks.map( ( block ) =>
+					cloneBlock( block )
+				);
 				__unstableMarkNextChangeAsNotPersistent();
-				replaceBlocks( clientId, selectedPattern.blocks );
+				if ( syncStatus === 'partial' ) {
+					replaceInnerBlocks( clientId, clonedBlocks );
+					return;
+				}
+				replaceBlocks( clientId, clonedBlocks );
 			} );
 		}
-	}, [ clientId, selectedPattern?.blocks ] );
+	}, [
+		clientId,
+		selectedPattern?.blocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		innerBlocks,
+		syncStatus,
+		replaceBlocks,
+	] );
+
+	const blockProps = useBlockProps( {
+		className: slug?.replace( '/', '-' ),
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		templateLock: syncStatus === 'partial' ? 'contentOnly' : false,
+	} );
 
-	const props = useBlockProps();
+	if ( syncStatus !== 'partial' ) {
+		return <div { ...blockProps } />;
+	}
 
-	return <div { ...props } />;
+	return <div { ...innerBlocksProps } />;
 };
 
 export default PatternEdit;

package/src/pattern/index.js

@@ -3,13 +3,14 @@
  */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
-import PatternEdit from './edit';
+import PatternEditV1 from './v1/edit';
+import PatternEditV2 from './edit';
 
 const { name } = metadata;
 export { metadata, name };
 
-export const settings = {
-	edit: PatternEdit,
-};
+export const settings = window?.__experimentalEnablePatternEnhancements
+	? { edit: PatternEditV2 }
+	: { edit: PatternEditV1 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/pattern/index.php

@@ -33,12 +33,25 @@ function render_block_core_pattern( $attributes ) {
 
 	$slug     = $attributes['slug'];
 	$registry = WP_Block_Patterns_Registry::get_instance();
+
 	if ( ! $registry->is_registered( $slug ) ) {
 		return '';
 	}
 
 	$pattern = $registry->get_registered( $slug );
-	return do_blocks( $pattern['content'] );
+
+	// Currently all existing blocks should be returned here without a wp-block-pattern wrapper
+	// as the syncStatus attribute is only used if the gutenberg-pattern-enhancements experiment
+	// is enabled.
+	if ( ! isset( $attributes['syncStatus'] ) ) {
+		return do_blocks( $pattern['content'] );
+	}
+
+	$block_classnames = 'wp-block-pattern ' . str_replace( '/', '-', $attributes['slug'] );
+	$classnames       = isset( $attributes['className'] ) ? $attributes['className'] . ' ' . $block_classnames : $block_classnames;
+	$wrapper          = '<div class="' . esc_attr( $classnames ) . '">%s</div>';
+
+	return sprintf( $wrapper, do_blocks( $pattern['content'] ) );
 }
 
 add_action( 'init', 'register_block_core_pattern' );

package/src/pattern/v1/edit.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+const PatternEdit = ( { attributes, clientId } ) => {
+	const selectedPattern = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetParsedPattern(
+				attributes.slug
+			),
+		[ attributes.slug ]
+	);
+
+	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Run this effect when the component loads.
+	// This adds the Pattern's contents to the post.
+	// This change won't be saved.
+	// It will continue to pull from the pattern file unless changes are made to its respective template part.
+	useEffect( () => {
+		if ( selectedPattern?.blocks ) {
+			// We batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// Since the above uses microtasks, we need to use a microtask here as well,
+			// because nested pattern blocks cannot be inserted if the parent block supports
+			// inner blocks but doesn't have blockSettings in the state.
+			window.queueMicrotask( () => {
+				// Clone blocks from the pattern before insertion to ensure they receive
+				// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.
+				const clonedBlocks = selectedPattern.blocks.map( ( block ) =>
+					cloneBlock( block )
+				);
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceBlocks( clientId, clonedBlocks );
+			} );
+		}
+	}, [
+		clientId,
+		selectedPattern?.blocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlocks,
+	] );
+
+	const props = useBlockProps();
+
+	return <div { ...props } />;
+};
+
+export default PatternEdit;

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-form/style.scss

@@ -45,7 +45,9 @@
 
 	.comment-form {
 		textarea,
-		input:not([type="submit"]):not([type="checkbox"]) {
+		// Make sure to not set display block on hidden input fields, to prevent
+		// the Safari bug experienced in https://github.com/WordPress/gutenberg/issues/50830
+		input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]) {
 			display: block;
 			box-sizing: border-box;
 			width: 100%;

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