@wordpress/block-library 8.14.0 → 8.16.0

package/src/pattern/edit.js

@@ -9,6 +9,11 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
 const PatternEdit = ( { attributes, clientId } ) => {
 	const selectedPattern = useSelect(
 		( select ) =>
@@ -20,6 +25,10 @@ const PatternEdit = ( { attributes, clientId } ) => {
 
 	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
+	const { setBlockEditingMode } = unlock( useDispatch( blockEditorStore ) );
+	const { getBlockRootClientId, getBlockEditingMode } = unlock(
+		useSelect( blockEditorStore )
+	);
 
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.
@@ -33,13 +42,22 @@ const PatternEdit = ( { attributes, clientId } ) => {
 			// because nested pattern blocks cannot be inserted if the parent block supports
 			// inner blocks but doesn't have blockSettings in the state.
 			window.queueMicrotask( () => {
+				const rootClientId = getBlockRootClientId( clientId );
 				// 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 )
 				);
+				const rootEditingMode = getBlockEditingMode( rootClientId );
+				// Temporarily set the root block to default mode to allow replacing the pattern.
+				// This could happen when the page is disabling edits of non-content blocks.
+				__unstableMarkNextChangeAsNotPersistent();
+				setBlockEditingMode( rootClientId, 'default' );
 				__unstableMarkNextChangeAsNotPersistent();
 				replaceBlocks( clientId, clonedBlocks );
+				// Restore the root block's original mode.
+				__unstableMarkNextChangeAsNotPersistent();
+				setBlockEditingMode( rootClientId, rootEditingMode );
 			} );
 		}
 	}, [
@@ -47,6 +65,9 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		selectedPattern?.blocks,
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceBlocks,
+		getBlockEditingMode,
+		setBlockEditingMode,
+		getBlockRootClientId,
 	] );
 
 	const props = useBlockProps();

package/src/pattern/index.php

@@ -22,6 +22,8 @@ function register_block_core_pattern() {
 /**
  * Renders the `core/pattern` block on the server.
  *
+ * @since 6.3.0 Backwards compatibility: blocks with no `syncStatus` attribute do not receive block wrapper.
+ *
  * @param array $attributes Block attributes.
  *
  * @return string Returns the output of the pattern.
@@ -39,7 +41,17 @@ function render_block_core_pattern( $attributes ) {
 	}
 
 	$pattern = $registry->get_registered( $slug );
-	return do_blocks( $pattern['content'] );
+	$content = $pattern['content'];
+
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( $gutenberg_experiments && ! empty( $gutenberg_experiments['gutenberg-auto-inserting-blocks'] ) ) {
+		// TODO: In the long run, we'd likely want to have a filter in the `WP_Block_Patterns_Registry` class
+		// instead to allow us plugging in code like this.
+		$blocks  = parse_blocks( $content );
+		$content = gutenberg_serialize_blocks( $blocks );
+	}
+
+	return do_blocks( $content );
 }
 
 add_action( 'init', 'register_block_core_pattern' );

package/src/post-template/index.php

@@ -34,6 +34,8 @@ function block_core_post_template_uses_featured_image( $inner_blocks ) {
 /**
  * Renders the `core/post-template` block on the server.
  *
+ * @since 6.3.0 Changed render_block_context priority to `1`.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -97,11 +99,13 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 			$context['postId']   = $post_id;
 			return $context;
 		};
-		add_filter( 'render_block_context', $filter_block_context );
+
+		// Use an early priority to so that other 'render_block_context' filters have access to the values.
+		add_filter( 'render_block_context', $filter_block_context, 1 );
 		// 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 ) )->render( array( 'dynamic' => false ) );
-		remove_filter( 'render_block_context', $filter_block_context );
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
 
 		// 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-title/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-title` block on the server.
  *
+ * @since 6.3.0 Omitting the $post argument from the `get_the_title`.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -19,8 +21,11 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post  = get_post( $block->context['postId'] );
-	$title = get_the_title( $post );
+	/**
+	 * The `$post` argument is intentionally omitted so that changes are reflected when previewing a post.
+	 * See: https://github.com/WordPress/gutenberg/pull/37622#issuecomment-1000932816.
+	 */
+	$title = get_the_title();
 
 	if ( ! $title ) {
 		return '';
@@ -33,7 +38,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 
 	$classes = array();

package/src/preformatted/block.json

@@ -25,6 +25,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/preformatted/style.scss

@@ -1,7 +1,10 @@
 .wp-block-preformatted {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	white-space: pre-wrap;
 }
 
-.wp-block-preformatted.has-background {
+// Add low specificity default padding when a background is used.
+:where(.wp-block-preformatted.has-background) {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -39,6 +39,7 @@ exports[`Preformatted should match snapshot when content is empty 1`] = `
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
+      selectionColor="black"
       triggerKeyCodes={[]}
       value=""
     />
@@ -85,6 +86,7 @@ exports[`Preformatted should match snapshot when content is not empty 1`] = `
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
+      selectionColor="black"
       triggerKeyCodes={[]}
       value="<pre>Hello World!</pre>"
     />

package/src/pullquote/test/edit.native.js

@@ -5,6 +5,7 @@ import {
 	addBlock,
 	getBlock,
 	initializeEditor,
+	selectRangeInRichText,
 	setupCoreBlocks,
 	getEditorHtml,
 	fireEvent,
@@ -45,10 +46,13 @@ describe( 'Pullquote', () => {
 
 		const citationTextInput =
 			within( citationBlock ).getByPlaceholderText( 'Add citation' );
-		typeInRichText( citationTextInput, 'A person', {
-			finalSelectionStart: 2,
-			finalSelectionEnd: 2,
+		typeInRichText( citationTextInput, 'A person' );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
 		} );
+		selectRangeInRichText( citationTextInput, 2 );
 		fireEvent( citationTextInput, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -59,7 +63,11 @@ describe( 'Pullquote', () => {
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:pullquote -->
 		<figure class="wp-block-pullquote"><blockquote><p>A great statement.<br>Again</p><cite>A <br>person</cite></blockquote></figure>
-		<!-- /wp:pullquote -->"
+		<!-- /wp:pullquote -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
 	` );
 	} );
 } );

package/src/query-pagination/edit.js

@@ -34,20 +34,23 @@ export default function QueryPaginationEdit( {
 	setAttributes,
 	clientId,
 } ) {
-	const hasNextPreviousBlocks = useSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
-		const innerBlocks = getBlocks( clientId );
-		/**
-		 * Show the `paginationArrow` and `showLabel` controls only if a
-		 * `QueryPaginationNext/Previous` block exists.
-		 */
-		return innerBlocks?.find( ( innerBlock ) => {
-			return [
-				'core/query-pagination-next',
-				'core/query-pagination-previous',
-			].includes( innerBlock.name );
-		} );
-	}, [] );
+	const hasNextPreviousBlocks = useSelect(
+		( select ) => {
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( clientId );
+			/**
+			 * Show the `paginationArrow` and `showLabel` controls only if a
+			 * `QueryPaginationNext/Previous` block exists.
+			 */
+			return innerBlocks?.find( ( innerBlock ) => {
+				return [
+					'core/query-pagination-next',
+					'core/query-pagination-previous',
+				].includes( innerBlock.name );
+			} );
+		},
+		[ clientId ]
+	);
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,

package/src/query-title/edit.js

@@ -13,9 +13,11 @@ import {
 	useBlockProps,
 	Warning,
 	HeadingLevelDropdown,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
@@ -23,6 +25,18 @@ export default function QueryTitleEdit( {
 	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
 	setAttributes,
 } ) {
+	const { archiveTypeTitle, archiveNameLabel } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const {
+			__experimentalArchiveTitleNameLabel,
+			__experimentalArchiveTitleTypeLabel,
+		} = getSettings();
+		return {
+			archiveTypeTitle: __experimentalArchiveTitleTypeLabel,
+			archiveNameLabel: __experimentalArchiveTitleNameLabel,
+		};
+	} );
+
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
 		className: classnames( 'wp-block-query-title__placeholder', {
@@ -40,6 +54,38 @@ export default function QueryTitleEdit( {
 
 	let titleElement;
 	if ( type === 'archive' ) {
+		let title;
+		if ( archiveTypeTitle ) {
+			if ( showPrefix ) {
+				if ( archiveNameLabel ) {
+					title = sprintf(
+						/* translators: 1: Archive type title e.g: "Category", 2: Label of the archive e.g: "Shoes" */
+						__( '%1$s: %2$s' ),
+						archiveTypeTitle,
+						archiveNameLabel
+					);
+				} else {
+					title = sprintf(
+						/* translators: %s: Archive type title e.g: "Category", "Tag"... */
+						__( '%s: Name' ),
+						archiveTypeTitle
+					);
+				}
+			} else if ( archiveNameLabel ) {
+				title = archiveNameLabel;
+			} else {
+				title = sprintf(
+					/* translators: %s: Archive type title e.g: "Category", "Tag"... */
+					__( '%s name' ),
+					archiveTypeTitle
+				);
+			}
+		} else {
+			title = showPrefix
+				? __( 'Archive type: Name' )
+				: __( 'Archive title' );
+		}
+
 		titleElement = (
 			<>
 				<InspectorControls>
@@ -54,11 +100,7 @@ export default function QueryTitleEdit( {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<TagName { ...blockProps }>
-					{ showPrefix
-						? __( 'Archive type: Name' )
-						: __( 'Archive title' ) }
-				</TagName>
+				<TagName { ...blockProps }>{ title }</TagName>
 			</>
 		);
 	}

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

@@ -22,6 +22,16 @@ exports[`Quote block transforms to Group block 1`] = `
 <!-- /wp:group -->"
 `;
 
+exports[`Quote block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Quote block transforms to Pullquote block 1`] = `
 "<!-- wp:pullquote -->
 <figure class="wp-block-pullquote"><blockquote><p>"This will make running your own blog a viable alternative again."</p><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote></figure>

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

@@ -5,6 +5,7 @@ import {
 	addBlock,
 	getBlock,
 	initializeEditor,
+	selectRangeInRichText,
 	setupCoreBlocks,
 	getEditorHtml,
 	fireEvent,
@@ -62,10 +63,13 @@ describe( 'Quote', () => {
 		typeInRichText( quoteTextInput, 'Again.' );
 		const citationTextInput =
 			within( citationBlock ).getByPlaceholderText( 'Add citation' );
-		typeInRichText( citationTextInput, 'A person', {
-			finalSelectionStart: 2,
-			finalSelectionEnd: 2,
+		typeInRichText( citationTextInput, 'A person' );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
 		} );
+		selectRangeInRichText( citationTextInput, 2 );
 		fireEvent( citationTextInput, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -82,7 +86,11 @@ describe( 'Quote', () => {
 		<!-- wp:paragraph -->
 		<p>Again.</p>
 		<!-- /wp:paragraph --><cite>A <br>person</cite></blockquote>
-		<!-- /wp:quote -->"
+		<!-- /wp:quote -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
 	` );
 	} );
 } );

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

@@ -21,7 +21,11 @@ const initialHtml = `
 <!-- /wp:quote -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Pullquote', ...transformsWithInnerBlocks ];
+const blockTransforms = [
+	'Pullquote',
+	'Paragraph',
+	...transformsWithInnerBlocks,
+];
 
 setupCoreBlocks();
 

package/src/quote/transforms.js

@@ -109,6 +109,19 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( { citation }, innerBlocks ) =>
+				citation
+					? [
+							...innerBlocks,
+							createBlock( 'core/paragraph', {
+								content: citation,
+							} ),
+					  ]
+					: innerBlocks,
+		},
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],

package/src/rss/edit.js

@@ -116,6 +116,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }
 						onChange={ ( value ) =>
@@ -146,6 +147,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					{ displayExcerpt && (
 						<RangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -159,6 +161,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					{ blockLayout === 'grid' && (
 						<RangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Columns' ) }
 							value={ columns }
 							onChange={ ( value ) =>

package/src/search/block.json

@@ -90,6 +90,7 @@
 		},
 		"html": false
 	},
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-search-editor",
 	"style": "wp-block-search"
 }

package/src/search/edit.js

@@ -97,8 +97,8 @@ export default function SearchEdit( {
 	);
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
-	useEffect( () => {
-		if ( ! insertedInNavigationBlock ) return;
+
+	if ( insertedInNavigationBlock ) {
 		// This side-effect should not create an undo level.
 		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( {
@@ -106,7 +106,8 @@ export default function SearchEdit( {
 			buttonUseIcon: true,
 			buttonPosition: 'button-inside',
 		} );
-	}, [ insertedInNavigationBlock ] );
+	}
+
 	const borderRadius = style?.border?.radius;
 	const borderProps = useBorderProps( attributes );
 

package/src/search/index.php

@@ -8,11 +8,15 @@
 /**
  * Dynamically renders the `core/search` block.
  *
- * @param array $attributes The block attributes.
+ * @since 6.3.0 Using block.json `viewScript` to register script, and update `view_script_handles()` only when needed.
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string The search block markup.
  */
-function render_block_core_search( $attributes ) {
+function render_block_core_search( $attributes, $content, $block ) {
 	// Older versions of the Search block defaulted the label and buttonText
 	// attributes to `__( 'Search' )` meaning that many posts contain `<!--
 	// wp:search /-->`. Support these by defaulting an undefined label and
@@ -70,10 +74,26 @@ function render_block_core_search( $attributes ) {
 		$input->set_attribute( 'id', $input_id );
 		$input->set_attribute( 'value', get_search_query() );
 		$input->set_attribute( 'placeholder', $attributes['placeholder'] );
-		if ( 'button-only' === $button_position && 'expand-searchfield' === $button_behavior ) {
+
+		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
+		if ( $is_expandable_searchfield ) {
 			$input->set_attribute( 'aria-hidden', 'true' );
 			$input->set_attribute( 'tabindex', '-1' );
-			wp_enqueue_script( 'wp-block--search-view', plugins_url( 'search/view.min.js', __FILE__ ) );
+		}
+
+		// If the script already exists, there is no point in removing it from viewScript.
+		$view_js_file = 'wp-block-search-view';
+		if ( ! wp_script_is( $view_js_file ) ) {
+			$script_handles = $block->block_type->view_script_handles;
+
+			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+			if ( ! $is_expandable_searchfield && in_array( $view_js_file, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+			}
+			// If the script is needed, but it was previously removed, add it again.
+			if ( $is_expandable_searchfield && ! in_array( $view_js_file, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+			}
 		}
 	}
 
@@ -120,8 +140,10 @@ function render_block_core_search( $attributes ) {
 			$button->add_class( implode( ' ', $button_classes ) );
 			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
 				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
+				$button->set_attribute( 'data-toggled-aria-label', __( 'Submit Search' ) );
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
 				$button->set_attribute( 'aria-expanded', 'false' );
+				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}