@wordpress/block-library 9.15.1 → 9.17.0

package/src/media-text/test/transforms.native.js

@@ -23,16 +23,16 @@ const initialHtmlWithVideo = `
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
 const blockTransformsWithImage = [
 	'Image',
 	'Cover',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 ];
 const blockTransformsWithVideo = [
 	'Video',
 	'Cover',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 ];
 
 setupCoreBlocks();
@@ -52,7 +52,9 @@ describe( `${ block } block transformations`, () => {
 					{
 						isMediaBlock: true,
 						hasInnerBlocks:
-							tranformsWithInnerBlocks.includes( blockTransform ),
+							transformsWithInnerBlocks.includes(
+								blockTransform
+							),
 					}
 				);
 				expect( newBlock ).toBeVisible();
@@ -88,7 +90,9 @@ describe( `${ block } block transformations`, () => {
 					{
 						isMediaBlock: true,
 						hasInnerBlocks:
-							tranformsWithInnerBlocks.includes( blockTransform ),
+							transformsWithInnerBlocks.includes(
+								blockTransform
+							),
 					}
 				);
 				expect( newBlock ).toBeVisible();

package/src/navigation/edit/index.js

@@ -142,24 +142,28 @@ function ColorTools( {
 						label: __( 'Text' ),
 						onColorChange: setTextColor,
 						resetAllFilter: () => setTextColor(),
+						clearable: true,
 					},
 					{
 						colorValue: backgroundColor.color,
 						label: __( 'Background' ),
 						onColorChange: setBackgroundColor,
 						resetAllFilter: () => setBackgroundColor(),
+						clearable: true,
 					},
 					{
 						colorValue: overlayTextColor.color,
 						label: __( 'Submenu & overlay text' ),
 						onColorChange: setOverlayTextColor,
 						resetAllFilter: () => setOverlayTextColor(),
+						clearable: true,
 					},
 					{
 						colorValue: overlayBackgroundColor.color,
 						label: __( 'Submenu & overlay background' ),
 						onColorChange: setOverlayBackgroundColor,
 						resetAllFilter: () => setOverlayBackgroundColor(),
+						clearable: true,
 					},
 				] }
 				panelId={ clientId }

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.js

@@ -3,6 +3,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import { navigation as icon } from '@wordpress/icons';
+import { select } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -52,6 +55,23 @@ export const settings = {
 	},
 	edit,
 	save,
+	__experimentalLabel: ( { ref } ) => {
+		if ( ! ref ) {
+			return;
+		}
+
+		const navigation = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_navigation',
+			ref
+		);
+
+		if ( ! navigation?.title ) {
+			return;
+		}
+
+		return decodeEntities( navigation.title );
+	},
 	deprecated,
 };
 

package/src/navigation/style.scss

@@ -166,7 +166,9 @@ $navigation-icon-size: 24px;
 
 		// Hide until hover or focus within.
 		opacity: 0;
-		transition: opacity 0.1s linear;
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 		visibility: hidden;
 
 		// Don't take up space when the menu is collapsed.
@@ -502,9 +504,10 @@ button.wp-block-navigation-item__content {
 		background-color: inherit;
 
 		// Animation.
-		animation: overlay-menu__fade-in-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+		@media not (prefers-reduced-motion) {
+			animation: overlay-menu__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+		}
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);

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';
@@ -157,7 +156,7 @@ function getMissingText( type ) {
 /*
  * Warning, this duplicated in
  * packages/block-library/src/navigation-submenu/edit.js
- * Consider reuseing this components for both blocks.
+ * Consider reusing this components for both blocks.
  */
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 	const { label, url, description, title, rel } = attributes;
@@ -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: var(--wp--preset--color--vivid-red);
+			}
+		}
 	}
 
 	// This needs extra specificity.

package/src/navigation-link/link-ui.js

@@ -78,7 +78,7 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
-function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
+function LinkUIBlockInserter( { clientId, onBack } ) {
 	const { rootBlockClientId } = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -96,7 +96,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 		LinkControl,
 		`link-ui-block-inserter__title`
 	);
-	const dialogDescritionId = useInstanceId(
+	const dialogDescriptionId = useInstanceId(
 		LinkControl,
 		`link-ui-block-inserter__description`
 	);
@@ -110,13 +110,13 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 			className="link-ui-block-inserter"
 			role="dialog"
 			aria-labelledby={ dialogTitleId }
-			aria-describedby={ dialogDescritionId }
+			aria-describedby={ dialogDescriptionId }
 			ref={ focusOnMountRef }
 		>
 			<VisuallyHidden>
 				<h2 id={ dialogTitleId }>{ __( 'Add block' ) }</h2>
 
-				<p id={ dialogDescritionId }>
+				<p id={ dialogDescriptionId }>
 					{ __( 'Choose a block to add to your Navigation.' ) }
 				</p>
 			</VisuallyHidden>
@@ -140,7 +140,6 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 				prioritizePatterns={ false }
 				selectBlockOnInsert
 				hasSearch={ false }
-				onSelect={ onSelectBlock }
 			/>
 		</div>
 	);
@@ -198,15 +197,11 @@ function UnforwardedLinkUI( props, ref ) {
 		LinkUI,
 		`link-ui-link-control__title`
 	);
-	const dialogDescritionId = useInstanceId(
+	const dialogDescriptionId = useInstanceId(
 		LinkUI,
 		`link-ui-link-control__description`
 	);
 
-	// Selecting a block should close the popover and also remove the (previously) automatically inserted
-	// link block so that the newly selected block can be inserted in its place.
-	const { onClose: onSelectBlock } = props;
-
 	return (
 		<Popover
 			ref={ ref }
@@ -219,12 +214,12 @@ function UnforwardedLinkUI( props, ref ) {
 				<div
 					role="dialog"
 					aria-labelledby={ dialogTitleId }
-					aria-describedby={ dialogDescritionId }
+					aria-describedby={ dialogDescriptionId }
 				>
 					<VisuallyHidden>
 						<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
 
-						<p id={ dialogDescritionId }>
+						<p id={ dialogDescriptionId }>
 							{ __(
 								'Search for and add a link to your Navigation.'
 							) }
@@ -287,7 +282,6 @@ function UnforwardedLinkUI( props, ref ) {
 						setAddingBlock( false );
 						setFocusAddBlockButton( true );
 					} }
-					onSelectBlock={ onSelectBlock }
 				/>
 			) }
 		</Popover>

package/src/navigation-submenu/edit.js

@@ -276,7 +276,7 @@ export default function NavigationSubmenuEdit( {
 			// as it shares the CMD+K shortcut.
 			// See https://github.com/WordPress/gutenberg/pull/59845.
 			event.preventDefault();
-			// If we don't stop propogation, this event bubbles up to the parent submenu item
+			// If we don't stop propagation, this event bubbles up to the parent submenu item
 			event.stopPropagation();
 			setIsLinkOpen( true );
 			setOpenedBy( ref.current );

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

@@ -52,6 +52,17 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"color": {
+			"text": true,
+			"background": true,
+			"link": true,
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,

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
 			/>