@wordpress/block-library 9.16.0 → 9.17.0

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: var(--wp--preset--color--vivid-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,

package/src/post-date/edit.js

@@ -179,9 +179,7 @@ export default function PostDateEdit( {
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						hasValue={ () =>
-							format !== undefined && format !== siteFormat
-						}
+						hasValue={ () => !! format }
 						label={ __( 'Date Format' ) }
 						onDeselect={ () =>
 							setAttributes( { format: undefined } )

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

@@ -49,11 +49,6 @@ function getMediaSourceUrlBySizeSlug( media, slug ) {
 	);
 }
 
-const disabledClickProps = {
-	onClick: ( event ) => event.preventDefault(),
-	'aria-disabled': true,
-};
-
 export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
@@ -318,11 +313,7 @@ export default function PostFeaturedImageEdit( {
 				{ controls }
 				<div { ...blockProps }>
 					{ !! isLink ? (
-						<a
-							href={ postPermalink }
-							target={ linkTarget }
-							{ ...disabledClickProps }
-						>
+						<a href={ postPermalink } target={ linkTarget }>
 							{ placeholder() }
 						</a>
 					) : (
@@ -430,11 +421,7 @@ export default function PostFeaturedImageEdit( {
 			<figure { ...blockProps }>
 				{ /* If the featured image is linked, wrap in an <a /> tag to trigger any inherited link element styles */ }
 				{ !! isLink ? (
-					<a
-						href={ postPermalink }
-						target={ linkTarget }
-						{ ...disabledClickProps }
-					>
+					<a href={ postPermalink } target={ linkTarget }>
 						{ image }
 					</a>
 				) : (

package/src/post-featured-image/editor.scss

@@ -100,9 +100,9 @@
 
 	// When the Post Featured Image block is linked,
 	// it's wrapped with a disabled <a /> tag.
-	// Restore cursor style so it doesn't appear 'clickable'.
+	// Ensure that the link is not clickable.
 	> a {
-		cursor: default;
+		pointer-events: none;
 	}
 
 	// When the Post Featured Image block is linked,

package/src/post-navigation-link/variations.js

@@ -8,7 +8,7 @@ const variations = [
 	{
 		isDefault: true,
 		name: 'post-next',
-		title: __( 'Next post' ),
+		title: __( 'Next Post' ),
 		description: __(
 			'Displays the post link that follows the current post.'
 		),
@@ -24,7 +24,7 @@ const variations = [
 	},
 	{
 		name: 'post-previous',
-		title: __( 'Previous post' ),
+		title: __( 'Previous Post' ),
 		description: __(
 			'Displays the post link that precedes the current post.'
 		),

package/src/post-terms/edit.js

@@ -122,6 +122,7 @@ export default function PostTermsEdit( {
 								key={ postTerm.id }
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
+								rel="tag"
 							>
 								{ decodeEntities( postTerm.name ) }
 							</a>

package/src/post-time-to-read/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/post-time-to-read",
-	"title": "Time To Read",
+	"title": "Time to Read",
 	"category": "theme",
 	"description": "Show minutes required to finish reading the post.",
 	"textdomain": "default",

package/src/query/edit/query-content.js

@@ -23,6 +23,7 @@ import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
 import QueryToolbar from './query-toolbar';
+import { htmlElementMessages } from '../../utils/messages';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -132,17 +133,6 @@ export default function QueryContent( {
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
 		} );
-	const htmlElementMessages = {
-		main: __(
-			'The <main> element should be used for the primary content of your document only.'
-		),
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-	};
 
 	return (
 		<>

package/src/query-no-results/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/query-no-results",
-	"title": "No results",
+	"title": "No Results",
 	"category": "theme",
 	"description": "Contains the block elements used to render content when no query results are found.",
 	"ancestor": [ "core/query" ],

package/src/query-pagination-numbers/edit.js

@@ -67,7 +67,7 @@ export default function QueryPaginationNumbersEdit( {
 				>
 					<ToolsPanelItem
 						label={ __( 'Number of links' ) }
-						hasValue={ () => midSize !== undefined }
+						hasValue={ () => midSize !== 2 }
 						onDeselect={ () => setAttributes( { midSize: 2 } ) }
 						isShownByDefault
 					>

package/src/query-title/edit.js

@@ -141,6 +141,7 @@ export default function QueryTitleEdit( {
 								showSearchTerm: true,
 							} )
 						}
+						dropdownMenuProps={ dropdownMenuProps }
 					>
 						<ToolsPanelItem
 							hasValue={ () => ! showSearchTerm }

package/src/read-more/edit.js

@@ -6,31 +6,55 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function ReadMore( {
 	attributes: { content, linkTarget },
 	setAttributes,
 	insertBlocksAfter,
 } ) {
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => setAttributes( { linkTarget: '_self' } ) }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						onChange={ ( value ) =>
-							setAttributes( {
-								linkTarget: value ? '_blank' : '_self',
-							} )
+						isShownByDefault
+						hasValue={ () => linkTarget !== '_self' }
+						onDeselect={ () =>
+							setAttributes( { linkTarget: '_self' } )
 						}
-						checked={ linkTarget === '_blank' }
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<RichText
 				identifier="content"