@wordpress/block-library 8.13.0 → 8.15.0

package/src/page-list/edit.js

@@ -169,12 +169,6 @@ export default function PageListEdit( {
 		}, new Map() );
 	}, [ pages ] );
 
-	const convertToNavigationLinks = useConvertToNavigationLinks( {
-		clientId,
-		pages,
-		parentPageID,
-	} );
-
 	const blockProps = useBlockProps( {
 		className: classnames( 'wp-block-page-list', {
 			'has-text-color': !! context.textColor,
@@ -189,68 +183,71 @@ export default function PageListEdit( {
 		style: { ...context.style?.color },
 	} );
 
-	const getBlockList = ( parentId = parentPageID ) => {
-		const childPages = pagesByParentId.get( parentId );
+	const pagesTree = useMemo(
+		function makePagesTree( parentId = 0, level = 0 ) {
+			const childPages = pagesByParentId.get( parentId );
 
-		if ( ! childPages?.length ) {
-			return [];
-		}
-
-		return childPages.reduce( ( template, page ) => {
-			const hasChildren = pagesByParentId.has( page.id );
-			const pageProps = {
-				id: page.id,
-				label:
-					// translators: displayed when a page has an empty title.
-					page.title?.rendered?.trim() !== ''
-						? page.title?.rendered
-						: __( '(no title)' ),
-				title: page.title?.rendered,
-				link: page.url,
-				hasChildren,
-			};
-			let item = null;
-			const children = getBlockList( page.id );
-			item = createBlock( 'core/page-list-item', pageProps, children );
-			template.push( item );
-
-			return template;
-		}, [] );
-	};
+			if ( ! childPages?.length ) {
+				return [];
+			}
 
-	const makePagesTree = ( parentId = 0, level = 0 ) => {
-		const childPages = pagesByParentId.get( parentId );
+			return childPages.reduce( ( tree, page ) => {
+				const hasChildren = pagesByParentId.has( page.id );
+				const item = {
+					value: page.id,
+					label: '— '.repeat( level ) + page.title.rendered,
+					rawName: page.title.rendered,
+				};
+				tree.push( item );
+				if ( hasChildren ) {
+					tree.push( ...makePagesTree( page.id, level + 1 ) );
+				}
+				return tree;
+			}, [] );
+		},
+		[ pagesByParentId ]
+	);
 
-		if ( ! childPages?.length ) {
-			return [];
-		}
+	const blockList = useMemo(
+		function getBlockList( parentId = parentPageID ) {
+			const childPages = pagesByParentId.get( parentId );
 
-		return childPages.reduce( ( tree, page ) => {
-			const hasChildren = pagesByParentId.has( page.id );
-			const item = {
-				value: page.id,
-				label: '— '.repeat( level ) + page.title.rendered,
-				rawName: page.title.rendered,
-			};
-			tree.push( item );
-			if ( hasChildren ) {
-				tree.push( ...makePagesTree( page.id, level + 1 ) );
+			if ( ! childPages?.length ) {
+				return [];
 			}
-			return tree;
-		}, [] );
-	};
 
-	const pagesTree = useMemo( makePagesTree, [ pagesByParentId ] );
-
-	const blockList = useMemo( getBlockList, [
-		pagesByParentId,
-		parentPageID,
-	] );
+			return childPages.reduce( ( template, page ) => {
+				const hasChildren = pagesByParentId.has( page.id );
+				const pageProps = {
+					id: page.id,
+					label:
+						// translators: displayed when a page has an empty title.
+						page.title?.rendered?.trim() !== ''
+							? page.title?.rendered
+							: __( '(no title)' ),
+					title: page.title?.rendered,
+					link: page.url,
+					hasChildren,
+				};
+				let item = null;
+				const children = getBlockList( page.id );
+				item = createBlock(
+					'core/page-list-item',
+					pageProps,
+					children
+				);
+				template.push( item );
+
+				return template;
+			}, [] );
+		},
+		[ pagesByParentId, parentPageID ]
+	);
 
 	const {
 		isNested,
 		hasSelectedChild,
-		parentBlock,
+		parentClientId,
 		hasDraggedChild,
 		isChildOfNavigation,
 	} = useSelect(
@@ -258,7 +255,6 @@ export default function PageListEdit( {
 			const {
 				getBlockParentsByBlockName,
 				hasSelectedInnerBlock,
-				getBlockRootClientId,
 				hasDraggedInnerBlock,
 			} = select( blockEditorStore );
 			const blockParents = getBlockParentsByBlockName(
@@ -276,12 +272,19 @@ export default function PageListEdit( {
 				isChildOfNavigation: navigationBlockParents.length > 0,
 				hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
 				hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
-				parentBlock: getBlockRootClientId( clientId ),
+				parentClientId: navigationBlockParents[ 0 ],
 			};
 		},
 		[ clientId ]
 	);
 
+	const convertToNavigationLinks = useConvertToNavigationLinks( {
+		clientId,
+		pages,
+		parentClientId,
+		parentPageID,
+	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/page-list-item' ],
 		renderAppender: false,
@@ -297,12 +300,12 @@ export default function PageListEdit( {
 	useEffect( () => {
 		if ( hasSelectedChild || hasDraggedChild ) {
 			openModal();
-			selectBlock( parentBlock );
+			selectBlock( parentClientId );
 		}
 	}, [
 		hasSelectedChild,
 		hasDraggedChild,
-		parentBlock,
+		parentClientId,
 		selectBlock,
 		openModal,
 	] );

package/src/page-list/use-convert-to-navigation-links.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
@@ -116,28 +116,11 @@ export function convertToNavigationLinks( pages = [], parentPageID = null ) {
 export function useConvertToNavigationLinks( {
 	clientId,
 	pages,
+	parentClientId,
 	parentPageID,
 } ) {
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 
-	const { parentNavBlockClientId } = useSelect(
-		( select ) => {
-			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-				select( blockEditorStore );
-
-			const _selectedBlockClientId = getSelectedBlockClientId();
-
-			return {
-				parentNavBlockClientId: getBlockParentsByBlockName(
-					_selectedBlockClientId,
-					'core/navigation',
-					true
-				)[ 0 ],
-			};
-		},
-		[ clientId ]
-	);
-
 	return () => {
 		const navigationLinks = convertToNavigationLinks( pages, parentPageID );
 
@@ -145,6 +128,6 @@ export function useConvertToNavigationLinks( {
 		replaceBlock( clientId, navigationLinks );
 
 		// Select the Navigation block to reveal the changes.
-		selectBlock( parentNavBlockClientId );
+		selectBlock( parentClientId );
 	};
 }

package/src/paragraph/block.json

@@ -58,6 +58,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

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

@@ -32,6 +32,7 @@ exports[`Paragraph block should render without crashing and match snapshot 1`] =
     onSelectionChange={[Function]}
     placeholder="Start writing…"
     placeholderTextColor="gray"
+    selectionColor="black"
     triggerKeyCodes={[]}
     value=""
   />

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

@@ -639,4 +639,30 @@ describe( 'Paragraph block', () => {
 		);
 		expect( contrastCheckElement ).toBeDefined();
 	} );
+
+	it( 'should highlight text with selection', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Text color' ) );
+		fireEvent.press( await screen.findByLabelText( 'Tertiary' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <mark style="background-color:rgba(0, 0, 0, 0);color:#2411a4" class="has-inline-color has-tertiary-color">quick</mark> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );

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

@@ -16,6 +16,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

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

@@ -45,6 +45,7 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/post-template/index.php

@@ -97,11 +97,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-time-to-read/block.json

@@ -24,7 +24,11 @@
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/post-title/index.php

@@ -19,8 +19,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 +36,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/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/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-pagination-numbers/block.json

@@ -32,5 +32,5 @@
 			}
 		}
 	},
-	"editorStyle": "query-pagination-numbers-editor"
+	"editorStyle": "wp-block-query-pagination-numbers-editor"
 }

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/block.json

@@ -47,6 +47,7 @@
 		},
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

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/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,13 @@
 /**
  * Dynamically renders the `core/search` block.
  *
- * @param array $attributes The block attributes.
+ * @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 +72,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 ) );
+			}
 		}
 	}