@wordpress/block-library 8.10.0 → 8.11.0

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

@@ -32,7 +32,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,
@@ -54,56 +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 }
 					__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,
+					} }
 				/>
-			);
-	}
-
-	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 }
-						__unstableOnSplitAtEnd={ onSplitAtEnd }
-					/>
-				</TagName>
-			) : (
-				<TagName { ...blockProps }>
-					<a
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						onClick={ ( event ) => event.preventDefault() }
-						dangerouslySetInnerHTML={ {
-							__html: fullTitle?.rendered,
-						} }
-					/>
-				</TagName>
-			);
+			</TagName>
+		);
 	}
 
 	return (

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

@@ -126,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/social-link/edit.js

@@ -6,11 +6,15 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { useDispatch } from '@wordpress/data';
+
 import {
 	InspectorControls,
 	URLPopover,
 	URLInput,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
@@ -32,40 +36,60 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
-} ) => (
-	<URLPopover anchor={ popoverAnchor } onClose={ () => setPopover( false ) }>
-		<form
-			className="block-editor-url-popover__link-editor"
-			onSubmit={ ( event ) => {
-				event.preventDefault();
-				setPopover( false );
-			} }
+	clientId,
+} ) => {
+	const { removeBlock } = useDispatch( blockEditorStore );
+	return (
+		<URLPopover
+			anchor={ popoverAnchor }
+			onClose={ () => setPopover( false ) }
 		>
-			<div className="block-editor-url-input">
-				<URLInput
-					__nextHasNoMarginBottom
-					value={ url }
-					onChange={ ( nextURL ) =>
-						setAttributes( { url: nextURL } )
-					}
-					placeholder={ __( 'Enter address' ) }
-					disableSuggestions={ true }
+			<form
+				className="block-editor-url-popover__link-editor"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					setPopover( false );
+				} }
+			>
+				<div className="block-editor-url-input">
+					<URLInput
+						__nextHasNoMarginBottom
+						value={ url }
+						onChange={ ( nextURL ) =>
+							setAttributes( { url: nextURL } )
+						}
+						placeholder={ __( 'Enter address' ) }
+						disableSuggestions={ true }
+						onKeyDown={ ( event ) => {
+							if (
+								!! url ||
+								event.defaultPrevented ||
+								! [ BACKSPACE, DELETE ].includes(
+									event.keyCode
+								)
+							) {
+								return;
+							}
+							removeBlock( clientId );
+						} }
+					/>
+				</div>
+				<Button
+					icon={ keyboardReturn }
+					label={ __( 'Apply' ) }
+					type="submit"
 				/>
-			</div>
-			<Button
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
-			/>
-		</form>
-	</URLPopover>
-);
+			</form>
+		</URLPopover>
+	);
+};
 
 const SocialLinkEdit = ( {
 	attributes,
 	context,
 	isSelected,
 	setAttributes,
+	clientId,
 } ) => {
 	const { url, service, label, rel } = attributes;
 	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
@@ -143,6 +167,7 @@ const SocialLinkEdit = ( {
 							setAttributes={ setAttributes }
 							setPopover={ setPopover }
 							popoverAnchor={ popoverAnchor }
+							clientId={ clientId }
 						/>
 					) }
 				</Button>

package/src/template-part/edit/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,10 @@ export default function TemplatePartEdit( {
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isResolved: hasResolvedEntity,
-				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
+				isMissing:
+					hasResolvedEntity &&
+					( ! entityRecord ||
+						Object.keys( entityRecord ).length === 0 ),
 				area: _area,
 			};
 		},

package/src/template-part/edit/utils/hooks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies

package/src/template-part/index.php

@@ -143,14 +143,14 @@ function render_block_core_template_part( $attributes ) {
 	}
 
 	// Run through the actions that are typically taken on the_content.
+	$content                       = shortcode_unautop( $content );
+	$content                       = do_shortcode( $content );
 	$seen_ids[ $template_part_id ] = true;
 	$content                       = do_blocks( $content );
 	unset( $seen_ids[ $template_part_id ] );
 	$content = wptexturize( $content );
 	$content = convert_smilies( $content );
-	$content = shortcode_unautop( $content );
 	$content = wp_filter_content_tags( $content, "template_part_{$area}" );
-	$content = do_shortcode( $content );
 
 	// Handle embeds for block template parts.
 	global $wp_embed;

package/src/utils/interactivity/directives.js

@@ -3,6 +3,10 @@
  */
 import { useContext, useMemo, useEffect } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
+/**
+ * Internal dependencies
+ */
+import { createPortal } from './portals.js';
 
 /**
  * Internal dependencies
@@ -49,9 +53,20 @@ export default () => {
 			}, [ context, inheritedValue ] );
 
 			return <Provider value={ value }>{ children }</Provider>;
-		}
+		},
+		{ priority: 5 }
 	);
 
+	// data-wp-body
+	directive( 'body', ( { props: { children }, context: inherited } ) => {
+		const { Provider } = inherited;
+		const inheritedValue = useContext( inherited );
+		return createPortal(
+			<Provider value={ inheritedValue }>{ children }</Provider>,
+			document.body
+		);
+	} );
+
 	// data-wp-effect.[name]
 	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
 		const contextValue = useContext( context );
@@ -140,16 +155,22 @@ export default () => {
 					} );
 					element.props[ attribute ] = result;
 
+					// This seems necessary because Preact doesn't change the attributes
+					// on the hydration, so we have to do it manually. It doesn't need
+					// deps because it only needs to do it the first time.
 					useEffect( () => {
-						// This seems necessary because Preact doesn't change the attributes
-						// on the hydration, so we have to do it manually. It doesn't need
-						// deps because it only needs to do it the first time.
-						if ( result === false ) {
+						// aria- and data- attributes have no boolean representation.
+						// A `false` value is different from the attribute not being
+						// present, so we can't remove it.
+						// We follow Preact's logic: https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L131C24-L136
+						if ( result === false && attribute[ 4 ] !== '-' ) {
 							element.ref.current.removeAttribute( attribute );
 						} else {
 							element.ref.current.setAttribute(
 								attribute,
-								result === true ? '' : result
+								result === true && attribute[ 4 ] !== '-'
+									? ''
+									: result
 							);
 						}
 					}, [] );