@wordpress/block-library 8.9.0 → 8.11.0

package/src/pattern/block.json

@@ -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-name/edit.js

@@ -69,7 +69,7 @@ function PostAuthorNameEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }

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-featured-image/edit.js

@@ -97,7 +97,7 @@ export default function PostFeaturedImageEdit( {
 		} ) );
 
 	const blockProps = useBlockProps( {
-		style: { width, height, aspectRatio, maxWidth: '100%' },
+		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
 

package/src/post-featured-image/index.php

@@ -92,7 +92,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! $height && ! $width && ! $aspect_ratio ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height . 'max-width:100%;' ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
 	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }

package/src/post-featured-image/overlay.js

@@ -45,6 +45,10 @@ const Overlay = ( {
 		...borderProps.style,
 	};
 
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ !! dimRatio && (

package/src/post-terms/index.php

@@ -64,8 +64,8 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 function register_block_core_post_terms() {
 	$taxonomies = get_taxonomies(
 		array(
-			'public'       => true,
-			'show_in_rest' => true,
+			'publicly_queryable' => true,
+			'show_in_rest'       => true,
 		),
 		'objects'
 	);

package/src/post-title/edit.js

@@ -15,6 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp } from '@wordpress/core-data';
 
 /**
@@ -27,10 +28,21 @@ export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
+	insertBlocksAfter,
 } ) {
 	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,
@@ -38,6 +50,9 @@ export default function PostTitleEdit( {
 		postId
 	);
 	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
+	const onSplitAtEnd = () => {
+		insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+	};
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -49,54 +64,52 @@ export default function PostTitleEdit( {
 	);
 
 	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 }
-					{ ...blockProps }
+					__unstableOnSplitAtEnd={ onSplitAtEnd }
 				/>
-			) : (
-				<TagName
-					{ ...blockProps }
-					dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
+			</TagName>
+		) : (
+			<TagName { ...blockProps }>
+				<a
+					href={ link }
+					target={ linkTarget }
+					rel={ rel }
+					onClick={ ( event ) => event.preventDefault() }
+					dangerouslySetInnerHTML={ {
+						__html: fullTitle?.rendered,
+					} }
 				/>
-			);
-	}
-
-	if ( isLink && postType && postId ) {
-		titleElement =
-			userCanEdit && ! isDescendentOfQueryLoop ? (
-				<TagName { ...blockProps }>
-					<PlainText
-						tagName="a"
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						placeholder={
-							! rawTitle.length ? __( 'No Title' ) : null
-						}
-						value={ rawTitle }
-						onChange={ setTitle }
-						__experimentalVersion={ 2 }
-					/>
-				</TagName>
-			) : (
-				<TagName { ...blockProps }>
-					<a
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						onClick={ ( event ) => event.preventDefault() }
-						dangerouslySetInnerHTML={ {
-							__html: fullTitle?.rendered,
-						} }
-					/>
-				</TagName>
-			);
+			</TagName>
+		);
 	}
 
 	return (
@@ -116,7 +129,7 @@ export default function PostTitleEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Make title a link' ) }

package/src/preformatted/edit.native.js

@@ -28,12 +28,10 @@ export default function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
-	const hasBaseColors =
-		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		hasBaseColors &&
+		style?.baseColors?.color &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];

package/src/quote/test/__snapshots__/transforms.native.js.snap

@@ -28,7 +28,7 @@ exports[`Quote block transforms to Pullquote block 1`] = `
 <!-- /wp:pullquote -->"
 `;
 
-exports[`Quote block transforms unwraps content 1`] = `
+exports[`Quote block transforms ungroups block 1`] = `
 "<!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph -->

package/src/quote/test/transforms.native.js

@@ -36,14 +36,13 @@ describe( `${ block } block transforms`, () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'unwraps content', async () => {
+	it( 'ungroups block', async () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const { getByText } = screen;
 		fireEvent.press( getBlock( screen, block ) );
 
 		await openBlockActionsMenu( screen );
-		fireEvent.press( getByText( 'Transform block…' ) );
-		fireEvent.press( getByText( 'Unwrap' ) );
+		fireEvent.press( getByText( 'Ungroup' ) );
 
 		// The first block created is the content of the Paragraph block.
 		const paragraph = getBlock( screen, 'Paragraph', 0 );
@@ -59,8 +58,7 @@ describe( `${ block } block transforms`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const transformOptions = await getBlockTransformOptions(
 			screen,
-			block,
-			{ canUnwrap: true }
+			block
 		);
 		expect( transformOptions ).toHaveLength( blockTransforms.length );
 	} );

package/src/quote/transforms.js

@@ -21,12 +21,6 @@ const transforms = {
 				);
 			},
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/group' ],
-			transform: ( { anchor }, innerBlocks ) =>
-				createBlock( 'core/quote', { anchor }, innerBlocks ),
-		},
 		{
 			type: 'prefix',
 			prefix: '>',
@@ -132,20 +126,16 @@ const transforms = {
 						: innerBlocks
 				),
 		},
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( { citation }, innerBlocks ) =>
-				citation
-					? [
-							...innerBlocks,
-							createBlock( 'core/paragraph', {
-								content: citation,
-							} ),
-					  ]
-					: innerBlocks,
-		},
 	],
+	ungroup: ( { citation }, innerBlocks ) =>
+		citation
+			? [
+					...innerBlocks,
+					createBlock( 'core/paragraph', {
+						content: citation,
+					} ),
+			  ]
+			: innerBlocks,
 };
 
 export default transforms;

package/src/read-more/edit.js

@@ -19,7 +19,7 @@ export default function ReadMore( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }

package/src/search/edit.js

@@ -115,10 +115,15 @@ export default function SearchEdit( {
 
 	const colorProps = useColorProps( attributes );
 	const fluidTypographySettings = useSetting( 'typography.fluid' );
-	const typographyProps = useTypographyProps(
-		attributes,
-		fluidTypographySettings
-	);
+	const layout = useSetting( 'layout' );
+	const typographyProps = useTypographyProps( attributes, {
+		typography: {
+			fluid: fluidTypographySettings,
+		},
+		layout: {
+			wideSize: layout?.wideSize,
+		},
+	} );
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;

package/src/search/editor.scss

@@ -12,6 +12,7 @@
 		border-radius: initial;
 		display: flex;
 		align-items: center;
+		justify-content: center;
 	}
 
 	&__components-button-group {

package/src/site-logo/editor.scss

@@ -138,7 +138,8 @@
 	}
 
 	img {
-		width: $grid-unit-50 * 0.5;
+		width: 20px;
+		min-width: 20px;
 		aspect-ratio: 1;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 		border-radius: 50% !important;

package/src/site-title/edit/index.js

@@ -109,7 +109,7 @@ export default function SiteTitleEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Make title link to home' ) }