@wordpress/block-library 9.16.0 → 9.18.0

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

@@ -50,7 +50,7 @@ describe( 'List block', () => {
 		await triggerBlockListLayout( listBlock );
 
 		// Get List item
-		const listItemBlock = await getBlock( screen, 'List item' );
+		const listItemBlock = await getBlock( screen, 'List Item' );
 		fireEvent.press( listItemBlock );
 
 		expect( listItemBlock ).toBeVisible();
@@ -75,7 +75,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -124,7 +124,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 2/
+			/List Item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 		await triggerBlockListLayout( firstNestedLevelBlock );
@@ -159,7 +159,7 @@ describe( 'List block', () => {
 
 		// Select Second List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
-			/List item Block\. Row 2/
+			/List Item Block\. Row 2/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -169,7 +169,7 @@ describe( 'List block', () => {
 
 		// Await recently indented list item layout
 		const [ listItemBlock1 ] = screen.getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		await triggerBlockListLayout( listItemBlock1 );
 
@@ -203,7 +203,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 		await triggerBlockListLayout( firstNestedLevelBlock );
@@ -217,7 +217,7 @@ describe( 'List block', () => {
 
 		// Select nested List Item block
 		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -500,7 +500,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -560,7 +560,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 

package/src/list-item/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/list-item",
-	"title": "List item",
+	"title": "List Item",
 	"category": "text",
 	"parent": [ "core/list" ],
 	"allowedBlocks": [ "core/list" ],

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -47,7 +47,7 @@ function useConvertClassicToBlockMenu(
 			} catch ( err ) {
 				throw new Error(
 					sprintf(
-						// translators: %s: the name of a menu (e.g. Header navigation).
+						// translators: %s: The name of a menu (e.g. Header menu).
 						__( `Unable to fetch classic menu "%s" from API.` ),
 						menuName
 					),
@@ -61,7 +61,7 @@ function useConvertClassicToBlockMenu(
 			if ( classicMenuItems === null ) {
 				throw new Error(
 					sprintf(
-						// translators: %s: the name of a menu (e.g. Header navigation).
+						// translators: %s: The name of a menu (e.g. Header menu).
 						__( `Unable to fetch classic menu "%s" from API.` ),
 						menuName
 					)
@@ -98,7 +98,7 @@ function useConvertClassicToBlockMenu(
 			} catch ( err ) {
 				throw new Error(
 					sprintf(
-						// translators: %s: the name of a menu (e.g. Header navigation).
+						// translators: %s: The name of a menu (e.g. Header menu).
 						__( `Unable to create Navigation Menu "%s".` ),
 						menuName
 					),
@@ -155,7 +155,7 @@ function useConvertClassicToBlockMenu(
 					if ( throwOnError ) {
 						throw new Error(
 							sprintf(
-								// translators: %s: the name of a menu (e.g. Header navigation).
+								// translators: %s: The name of a menu (e.g. Header menu).
 								__( `Unable to create Navigation Menu "%s".` ),
 								menuName
 							),

package/src/navigation/edit/use-generate-default-navigation-title.js

@@ -50,12 +50,12 @@ export default function useGenerateDefaultNavigationTitle( clientId ) {
 
 		const title = area
 			? sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( '%s navigation' ),
+					// translators: %s: the name of a menu (e.g. Header menu).
+					__( '%s menu' ),
 					area
 			  )
-			: // translators: 'navigation' as in website navigation.
-			  __( 'Navigation' );
+			: // translators: 'menu' as in website navigation menu.
+			  __( 'Menu' );
 
 		// Determine how many menus start with the automatic title.
 		const matchingMenuTitleCount = [

package/src/navigation/index.php

@@ -241,11 +241,12 @@ class WP_Navigation_Block_Renderer {
 			// it encounters whitespace. This code strips it.
 			$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
-			// Run Block Hooks algorithm to inject hooked blocks.
-			$markup         = block_core_navigation_insert_hooked_blocks( $blocks, $navigation_post );
-			$root_nav_block = parse_blocks( $markup )[0];
-
-			$blocks = isset( $root_nav_block['innerBlocks'] ) ? $root_nav_block['innerBlocks'] : $blocks;
+			// Re-serialize, and run Block Hooks algorithm to inject hooked blocks.
+			// TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call
+			// before the parse_blocks() call further above, to avoid the extra serialization/parsing.
+			$markup = serialize_blocks( $blocks );
+			$markup = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post );
+			$blocks = parse_blocks( $markup );
 
 			// TODO - this uses the full navigation block attributes for the
 			// context which could be refined.
@@ -1077,12 +1078,11 @@ function block_core_navigation_get_fallback_blocks() {
 
 		// Run Block Hooks algorithm to inject hooked blocks.
 		// We have to run it here because we need the post ID of the Navigation block to track ignored hooked blocks.
-		$markup = block_core_navigation_insert_hooked_blocks( $fallback_blocks, $navigation_post );
-		$blocks = parse_blocks( $markup );
-
-		if ( isset( $blocks[0]['innerBlocks'] ) ) {
-			$fallback_blocks = $blocks[0]['innerBlocks'];
-		}
+		// TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call
+		// before the parse_blocks() call further above, to avoid the extra serialization/parsing.
+		$markup          = serialize_blocks( $fallback_blocks );
+		$markup          = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post );
+		$fallback_blocks = parse_blocks( $markup );
 	}
 
 	/**
@@ -1436,61 +1436,3 @@ function block_core_navigation_get_most_recently_published_navigation() {
 
 	return null;
 }
-
-/**
- * Mock a parsed block for the Navigation block given its inner blocks and the `wp_navigation` post object.
- * The `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is queried to add the `metadata.ignoredHookedBlocks` attribute.
- *
- * @since 6.5.0
- *
- * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
- * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
- *
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_mock_parsed_block( $inner_blocks, $post ) {
-	$attributes = array();
-
-	if ( isset( $post->ID ) ) {
-		$ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true );
-		if ( ! empty( $ignored_hooked_blocks ) ) {
-			$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
-			$attributes['metadata'] = array(
-				'ignoredHookedBlocks' => $ignored_hooked_blocks,
-			);
-		}
-	}
-
-	$mock_anchor_parent_block = array(
-		'blockName'    => 'core/navigation',
-		'attrs'        => $attributes,
-		'innerBlocks'  => $inner_blocks,
-		'innerContent' => array_fill( 0, count( $inner_blocks ), null ),
-	);
-
-	return $mock_anchor_parent_block;
-}
-
-/**
- * Insert hooked blocks into a Navigation block.
- *
- * Given a Navigation block's inner blocks and its corresponding `wp_navigation` post object,
- * this function inserts hooked blocks into it, and returns the serialized inner blocks in a
- * mock Navigation block wrapper.
- *
- * If there are any hooked blocks that need to be inserted as the Navigation block's first or last
- * children, the `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is checked to see if any
- * of those hooked blocks should be exempted from insertion.
- *
- * @since 6.5.0
- *
- * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
- * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
- * @return string Serialized inner blocks in mock Navigation block wrapper, with hooked blocks inserted, if any.
- */
-function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) {
-	$mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post );
-
-	$mock_navigation_block_markup = serialize_block( $mock_navigation_block );
-	return apply_block_hooks_to_content( $mock_navigation_block_markup, $post, 'insert_hooked_blocks' );
-}

package/src/navigation-link/edit.js

@@ -14,7 +14,6 @@ import {
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
-	Tooltip,
 	ToolbarGroup,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
@@ -490,10 +489,6 @@ export default function NavigationLinkEdit( {
 	const placeholderText = `(${
 		isInvalid ? __( 'Invalid' ) : __( 'Draft' )
 	})`;
-	const tooltipText =
-		isInvalid || isDraft
-			? __( 'This item has been deleted, or is a draft' )
-			: __( 'This item is missing a link' );
 
 	return (
 		<>
@@ -533,9 +528,7 @@ export default function NavigationLinkEdit( {
 					{ /* eslint-enable */ }
 					{ ! url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
-							<Tooltip text={ tooltipText }>
-								<span>{ missingText }</span>
-							</Tooltip>
+							<span>{ missingText }</span>
 						</div>
 					) : (
 						<>
@@ -578,27 +571,30 @@ export default function NavigationLinkEdit( {
 							{ ( isInvalid ||
 								isDraft ||
 								isLabelFieldFocused ) && (
-								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
-									<Tooltip text={ tooltipText }>
-										<span
-											aria-label={ __(
-												'Navigation link text'
-											) }
-										>
-											{
-												// Some attributes are stored in an escaped form. It's a legacy issue.
-												// Ideally they would be stored in a raw, unescaped form.
-												// Unescape is used here to "recover" the escaped characters
-												// so they display without encoding.
-												// See `updateAttributes` for more details.
-												`${ decodeEntities( label ) } ${
-													isInvalid || isDraft
-														? placeholderText
-														: ''
-												}`.trim()
-											}
-										</span>
-									</Tooltip>
+								<div
+									className={ clsx(
+										'wp-block-navigation-link__placeholder-text',
+										'wp-block-navigation-link__label',
+										{
+											'is-invalid': isInvalid,
+											'is-draft': isDraft,
+										}
+									) }
+								>
+									<span>
+										{
+											// Some attributes are stored in an escaped form. It's a legacy issue.
+											// Ideally they would be stored in a raw, unescaped form.
+											// Unescape is used here to "recover" the escaped characters
+											// so they display without encoding.
+											// See `updateAttributes` for more details.
+											`${ decodeEntities( label ) } ${
+												isInvalid || isDraft
+													? placeholderText
+													: ''
+											}`.trim()
+										}
+									</span>
 								</div>
 							) }
 						</>

package/src/navigation-link/editor.scss

@@ -80,24 +80,33 @@
 	background-image: none !important;
 
 	// Draw a wavy underline.
-	.wp-block-navigation-link__placeholder-text span {
-		$blur: 10%;
-		$width: 6%;
-		$stop1: 30%;
-		$stop2: 64%;
-
-		--wp-underline-color: var(--wp-admin-theme-color);
-
-		background-image:
-			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
-			linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
-		background-position: 0 100%;
-		background-size: 6px 3px;
-		background-repeat: repeat-x;
-
-		// Since applied to a span, it doesn't change the footprint of the item,
-		// but it does vertically shift the underline to better align.
-		padding-bottom: 0.1em;
+	.wp-block-navigation-link__placeholder-text {
+		span {
+			$blur: 10%;
+			$width: 6%;
+			$stop1: 30%;
+			$stop2: 64%;
+
+			--wp-underline-color: var(--wp-admin-theme-color);
+
+			background-image:
+				linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
+				linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
+			background-position: 0 100%;
+			background-size: 6px 3px;
+			background-repeat: repeat-x;
+
+			// Since applied to a span, it doesn't change the footprint of the item,
+			// but it does vertically shift the underline to better align.
+			padding-bottom: 0.1em;
+		}
+
+		&.is-invalid,
+		&.is-draft {
+			span {
+				--wp-underline-color: #{$alert-red};
+			}
+		}
 	}
 
 	// This needs extra specificity.

package/src/navigation-submenu/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { page, addSubmenu } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -37,6 +38,12 @@ export const settings = {
 		return label;
 	},
 	edit,
+	example: {
+		attributes: {
+			label: _x( 'About', 'Example link text for Navigation Submenu' ),
+			type: 'page',
+		},
+	},
 	save,
 	transforms,
 };

package/src/navigation-submenu/index.php

@@ -82,7 +82,6 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
 	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
@@ -99,11 +98,29 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] &&
 		$show_submenu_indicators;
 
+	$classes = array(
+		'wp-block-navigation-item',
+	);
+	$classes = array_merge(
+		$classes,
+		$font_sizes['css_classes']
+	);
+	if ( $has_submenu ) {
+		$classes[] = 'has-child';
+	}
+	if ( $open_on_click ) {
+		$classes[] = 'open-on-click';
+	}
+	if ( $open_on_hover_and_click ) {
+		$classes[] = 'open-on-hover-click';
+	}
+	if ( $is_active ) {
+		$classes[] = 'current-menu-item';
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
-			( $open_on_click ? ' open-on-click' : '' ) . ( $open_on_hover_and_click ? ' open-on-hover-click' : '' ) .
-			( $is_active ? ' current-menu-item' : '' ),
+			'class' => implode( ' ', $classes ),
 			'style' => $style_attribute,
 		)
 	);

package/src/page-list/edit.js

@@ -322,58 +322,60 @@ export default function PageListEdit( {
 
 	return (
 		<>
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( { parentPageID: 0 } );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					{ pagesTree.length > 0 && (
-						<ToolsPanelItem
-							label={ __( 'Parent Page' ) }
-							hasValue={ () => parentPageID !== 0 }
-							onDeselect={ () =>
-								setAttributes( { parentPageID: 0 } )
-							}
-							isShownByDefault
-						>
-							<ComboboxControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								className="editor-page-attributes__parent"
-								label={ __( 'Parent' ) }
-								value={ parentPageID }
-								options={ pagesTree }
-								onChange={ ( value ) =>
-									setAttributes( {
-										parentPageID: value ?? 0,
-									} )
+			{ ( pagesTree.length > 0 || allowConvertToLinks ) && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( { parentPageID: 0 } );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						{ pagesTree.length > 0 && (
+							<ToolsPanelItem
+								label={ __( 'Parent Page' ) }
+								hasValue={ () => parentPageID !== 0 }
+								onDeselect={ () =>
+									setAttributes( { parentPageID: 0 } )
 								}
-								help={ __(
-									'Choose a page to show only its subpages.'
-								) }
-							/>
-						</ToolsPanelItem>
-					) }
-
-					{ allowConvertToLinks && (
-						<div style={ { gridColumn: '1 / -1' } }>
-							<p>{ convertDescription }</p>
-							<Button
-								__next40pxDefaultSize
-								variant="primary"
-								accessibleWhenDisabled
-								disabled={ ! hasResolvedPages }
-								onClick={ convertToNavigationLinks }
+								isShownByDefault
 							>
-								{ __( 'Edit' ) }
-							</Button>
-						</div>
-					) }
-				</ToolsPanel>
-			</InspectorControls>
+								<ComboboxControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									className="editor-page-attributes__parent"
+									label={ __( 'Parent' ) }
+									value={ parentPageID }
+									options={ pagesTree }
+									onChange={ ( value ) =>
+										setAttributes( {
+											parentPageID: value ?? 0,
+										} )
+									}
+									help={ __(
+										'Choose a page to show only its subpages.'
+									) }
+								/>
+							</ToolsPanelItem>
+						) }
+
+						{ allowConvertToLinks && (
+							<div style={ { gridColumn: '1 / -1' } }>
+								<p>{ convertDescription }</p>
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									accessibleWhenDisabled
+									disabled={ ! hasResolvedPages }
+									onClick={ convertToNavigationLinks }
+								>
+									{ __( 'Edit' ) }
+								</Button>
+							</div>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
+			) }
 			{ allowConvertToLinks && (
 				<>
 					<BlockControls group="other">

package/src/paragraph/edit.js

@@ -20,16 +20,13 @@ import {
 	useBlockProps,
 	useSettings,
 	useBlockEditingMode,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
-import { unlock } from '../lock-unlock';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
@@ -111,11 +108,7 @@ function ParagraphBlock( {
 	isSelected: isSingleSelected,
 	name,
 } ) {
-	const isZoomOut = useSelect( ( select ) =>
-		unlock( select( blockEditorStore ) ).isZoomOut()
-	);
-
-	const { align, content, direction, dropCap } = attributes;
+	const { align, content, direction, dropCap, placeholder } = attributes;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {
@@ -125,12 +118,6 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 	const blockEditingMode = useBlockEditingMode();
-	let { placeholder } = attributes;
-	if ( isZoomOut ) {
-		placeholder = '';
-	} else if ( ! placeholder ) {
-		placeholder = __( 'Type / to choose a block' );
-	}
 
 	return (
 		<>
@@ -182,10 +169,8 @@ function ParagraphBlock( {
 						: __( 'Block: Paragraph' )
 				}
 				data-empty={ RichText.isEmpty( content ) }
-				placeholder={ placeholder }
-				data-custom-placeholder={
-					placeholder && ! isZoomOut ? true : undefined
-				}
+				placeholder={ placeholder || __( 'Type / to choose a block' ) }
+				data-custom-placeholder={ placeholder ? true : undefined }
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
 			/>

package/src/paragraph/editor.scss

@@ -22,3 +22,10 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
 	rotate: 180deg;
 }
+
+// Hide the placeholder when the editor is in zoomed out mode.
+.is-zoomed-out .block-editor-block-list__block[data-empty="true"] {
+	[data-rich-text-placeholder] {
+		opacity: 0;
+	}
+}

package/src/pattern/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/pattern",
-	"title": "Pattern placeholder",
+	"title": "Pattern Placeholder",
 	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {

package/src/post-content/block.json

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