@wordpress/block-library 9.24.0 → 9.26.0

package/src/navigation/edit/index.js

@@ -31,10 +31,12 @@ import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	PanelBody,
-	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalVStack as VStack,
+	ToggleControl,
 	Button,
 	Spinner,
 	Notice,
@@ -72,6 +74,7 @@ import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 
 function ColorTools( {
 	textColor,
@@ -591,11 +594,25 @@ function Navigation( {
 		`overlay-menu-preview`
 	);
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display' ) }>
+					<ToolsPanel
+						label={ __( 'Display' ) }
+						resetAll={ () => {
+							setAttributes( {
+								showSubmenuIcon: true,
+								openSubmenusOnClick: false,
+								overlayMenu: 'mobile',
+								hasIcon: true,
+								icon: 'handle',
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isResponsive && (
 							<>
 								<Button
@@ -623,88 +640,134 @@ function Navigation( {
 										</>
 									) }
 								</Button>
-								<div id={ overlayMenuPreviewId }>
-									{ overlayMenuPreview && (
+								{ overlayMenuPreview && (
+									<VStack
+										id={ overlayMenuPreviewId }
+										spacing={ 4 }
+										style={ {
+											gridColumn: 'span 2',
+										} }
+									>
 										<OverlayMenuPreview
 											setAttributes={ setAttributes }
 											hasIcon={ hasIcon }
 											icon={ icon }
 											hidden={ ! overlayMenuPreview }
 										/>
-									) }
-								</div>
+									</VStack>
+								) }
 							</>
 						) }
-						<ToggleGroupControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
+
+						<ToolsPanelItem
+							hasValue={ () => overlayMenu !== 'mobile' }
 							label={ __( 'Overlay Menu' ) }
-							aria-label={ __( 'Configure overlay menu' ) }
-							value={ overlayMenu }
-							help={ __(
-								'Collapses the navigation options in a menu icon opening an overlay.'
-							) }
-							onChange={ ( value ) =>
-								setAttributes( { overlayMenu: value } )
+							onDeselect={ () =>
+								setAttributes( { overlayMenu: 'mobile' } )
 							}
-							isBlock
+							isShownByDefault
 						>
-							<ToggleGroupControlOption
-								value="never"
-								label={ __( 'Off' ) }
-							/>
-							<ToggleGroupControlOption
-								value="mobile"
-								label={ __( 'Mobile' ) }
-							/>
-							<ToggleGroupControlOption
-								value="always"
-								label={ __( 'Always' ) }
-							/>
-						</ToggleGroupControl>
+							<ToggleGroupControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Overlay Menu' ) }
+								aria-label={ __( 'Configure overlay menu' ) }
+								value={ overlayMenu }
+								help={ __(
+									'Collapses the navigation options in a menu icon opening an overlay.'
+								) }
+								onChange={ ( value ) =>
+									setAttributes( { overlayMenu: value } )
+								}
+								isBlock
+							>
+								<ToggleGroupControlOption
+									value="never"
+									label={ __( 'Off' ) }
+								/>
+								<ToggleGroupControlOption
+									value="mobile"
+									label={ __( 'Mobile' ) }
+								/>
+								<ToggleGroupControlOption
+									value="always"
+									label={ __( 'Always' ) }
+								/>
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+
 						{ hasSubmenus && (
 							<>
-								<h3>{ __( 'Submenus' ) }</h3>
-								<ToggleControl
-									__nextHasNoMarginBottom
-									checked={ openSubmenusOnClick }
-									onChange={ ( value ) => {
-										setAttributes( {
-											openSubmenusOnClick: value,
-											...( value && {
-												showSubmenuIcon: true,
-											} ), // Make sure arrows are shown when we toggle this on.
-										} );
-									} }
+								<h3 className="wp-block-navigation__submenu-header">
+									{ __( 'Submenus' ) }
+								</h3>
+								<ToolsPanelItem
+									hasValue={ () => openSubmenusOnClick }
 									label={ __( 'Open on click' ) }
-								/>
-
-								<ToggleControl
-									__nextHasNoMarginBottom
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
+									onDeselect={ () =>
 										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									disabled={ attributes.openSubmenusOnClick }
+											openSubmenusOnClick: false,
+											showSubmenuIcon: true,
+										} )
+									}
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+								</ToolsPanelItem>
+
+								<ToolsPanelItem
+									hasValue={ () => ! showSubmenuIcon }
 									label={ __( 'Show arrow' ) }
-								/>
+									onDeselect={ () =>
+										setAttributes( {
+											showSubmenuIcon: true,
+										} )
+									}
+									isDisabled={
+										attributes.openSubmenusOnClick
+									}
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</ToolsPanelItem>
 
 								{ submenuAccessibilityNotice && (
-									<div>
-										<Notice
-											spokenMessage={ null }
-											status="warning"
-											isDismissible={ false }
-										>
-											{ submenuAccessibilityNotice }
-										</Notice>
-									</div>
+									<Notice
+										spokenMessage={ null }
+										status="warning"
+										isDismissible={ false }
+										className="wp-block-navigation__submenu-accessibility-notice"
+									>
+										{ submenuAccessibilityNotice }
+									</Notice>
 								) }
 							</>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			<InspectorControls group="color">

package/src/navigation/edit/overlay-menu-preview.js

@@ -5,6 +5,7 @@ import {
 	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -16,36 +17,52 @@ import OverlayMenuIcon from './overlay-menu-icon';
 export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 	return (
 		<>
-			<ToggleControl
-				__nextHasNoMarginBottom
+			<ToolsPanelItem
 				label={ __( 'Show icon button' ) }
-				help={ __(
-					'Configure the visual appearance of the button that toggles the overlay menu.'
-				) }
-				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
-				checked={ hasIcon }
-			/>
+				isShownByDefault
+				hasValue={ () => ! hasIcon }
+				onDeselect={ () => setAttributes( { hasIcon: true } ) }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Show icon button' ) }
+					help={ __(
+						'Configure the visual appearance of the button that toggles the overlay menu.'
+					) }
+					onChange={ ( value ) =>
+						setAttributes( { hasIcon: value } )
+					}
+					checked={ hasIcon }
+				/>
+			</ToolsPanelItem>
 
-			<ToggleGroupControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				className="wp-block-navigation__overlay-menu-icon-toggle-group"
+			<ToolsPanelItem
 				label={ __( 'Icon' ) }
-				value={ icon }
-				onChange={ ( value ) => setAttributes( { icon: value } ) }
-				isBlock
+				isShownByDefault
+				hasValue={ () => icon !== 'handle' }
+				onDeselect={ () => setAttributes( { icon: 'handle' } ) }
 			>
-				<ToggleGroupControlOption
-					value="handle"
-					aria-label={ __( 'handle' ) }
-					label={ <OverlayMenuIcon icon="handle" /> }
-				/>
-				<ToggleGroupControlOption
-					value="menu"
-					aria-label={ __( 'menu' ) }
-					label={ <OverlayMenuIcon icon="menu" /> }
-				/>
-			</ToggleGroupControl>
+				<ToggleGroupControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					className="wp-block-navigation__overlay-menu-icon-toggle-group"
+					label={ __( 'Icon' ) }
+					value={ icon }
+					onChange={ ( value ) => setAttributes( { icon: value } ) }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="handle"
+						aria-label={ __( 'handle' ) }
+						label={ <OverlayMenuIcon icon="handle" /> }
+					/>
+					<ToggleGroupControlOption
+						value="menu"
+						aria-label={ __( 'menu' ) }
+						label={ <OverlayMenuIcon icon="menu" /> }
+					/>
+				</ToggleGroupControl>
+			</ToolsPanelItem>
 		</>
 	);
 }

package/src/navigation/editor.scss

@@ -569,7 +569,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	height: $grid-unit-40 * 2 !important;
 
-	margin-bottom: $grid-unit-15;
+	grid-column: span 2;
 
 	&.open {
 		box-shadow: inset 0 0 0 $border-width $gray-200;
@@ -637,7 +637,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	margin-left: 24px;
 }
 
-.wp-block-navigation__overlay-menu-icon-toggle-group {
-	// Counteract the margin added by the block inspector.
-	margin-bottom: $grid-unit-20;
+.editor-sidebar__panel .wp-block-navigation__submenu-header {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.wp-block-navigation__submenu-accessibility-notice {
+	grid-column: span 2;
 }

package/src/navigation/style.scss

@@ -310,6 +310,14 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation-submenu__toggle {
 	cursor: pointer;
+
+	// Rotate submenu icon when open.
+	&[aria-expanded="true"] {
+		+ .wp-block-navigation__submenu-icon > svg,
+		> svg {
+			transform: rotate(180deg);
+		}
+	}
 }
 
 // When set to open on click, a button element is used.

package/src/navigation-link/block.json

@@ -35,6 +35,9 @@
 		"url": {
 			"type": "string"
 		},
+		"title": {
+			"type": "string"
+		},
 		"kind": {
 			"type": "string"
 		},

package/src/navigation-link/edit.js

@@ -42,6 +42,7 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -175,8 +176,20 @@ function getMissingText( type ) {
  */
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 	const { label, url, description, rel } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	return (
-		<ToolsPanel label={ __( 'Settings' ) }>
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				setAttributes( {
+					label: '',
+					url: '',
+					description: '',
+					rel: '',
+				} );
+			} }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
 			<ToolsPanelItem
 				hasValue={ () => !! label }
 				label={ __( 'Text' ) }

package/src/navigation-link/index.php

@@ -249,6 +249,10 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		$html .= ' rel="nofollow"';
 	}
 
+	if ( isset( $attributes['title'] ) ) {
+		$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
+	}
+
 	// End appending HTML attributes to anchor tag.
 
 	// Start anchor tag content.

package/src/navigation-link/transforms.js

@@ -115,12 +115,13 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/buttons' ],
-			transform: ( { label, url, rel, opensInNewTab } ) => {
+			transform: ( { label, url, rel, title, opensInNewTab } ) => {
 				return createBlock( 'core/buttons', {}, [
 					createBlock( 'core/button', {
 						text: label,
 						url,
 						rel,
+						title,
 						linkTarget: opensInNewTab ? '_blank' : undefined,
 					} ),
 				] );

package/src/navigation-link/update-attributes.js

@@ -19,6 +19,7 @@ import { safeDecodeURI } from '@wordpress/url';
  * @property {number}               [id]            A post or term id.
  * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
  * @property {string}               [url]           Link href.
+ * @property {string}               [title]         Link title attribute.
  */
 /**
  * Link Control onChange handler that updates block attributes when a setting is changed.

package/src/navigation-submenu/block.json

@@ -30,6 +30,9 @@
 		"url": {
 			"type": "string"
 		},
+		"title": {
+			"type": "string"
+		},
 		"kind": {
 			"type": "string"
 		},

package/src/navigation-submenu/index.php

@@ -169,6 +169,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html .= ' rel="nofollow"';
 		}
 
+		if ( isset( $attributes['title'] ) ) {
+			$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
+		}
+
 		$html .= '>';
 		// End appending HTML attributes to anchor tag.
 

package/src/post-author/edit.js

@@ -15,15 +15,20 @@ import {
 } from '@wordpress/block-editor';
 import {
 	ComboboxControl,
-	PanelBody,
 	SelectControl,
 	ToggleControl,
-	__experimentalVStack as VStack,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const minimumUsersForCombobox = 25;
 
 const AUTHORS_QUERY = {
@@ -38,6 +43,8 @@ function PostAuthorEdit( {
 	setAttributes,
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const { authorId, authorDetails, authors, supportsAuthor } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getUser, getUsers, getPostType } =
@@ -61,8 +68,15 @@ function PostAuthorEdit( {
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
-		attributes;
+	const {
+		textAlign,
+		showAvatar,
+		showBio,
+		byline,
+		isLink,
+		linkTarget,
+		avatarSize,
+	} = attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
 	if ( authorDetails?.avatar_urls ) {
@@ -114,13 +128,21 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<VStack
-						spacing={ 4 }
-						className="wp-block-post-author__inspector-settings"
-					>
-						{ showAuthorControl &&
-							( ( showCombobox && (
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							avatarSize: 48,
+							showAvatar: true,
+							isLink: false,
+							linkTarget: '_self',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ showAuthorControl && (
+						<div style={ { gridColumn: '1 / -1' } }>
+							{ ( showCombobox && (
 								<ComboboxControl
 									__next40pxDefaultSize
 									__nextHasNoMarginBottom
@@ -139,21 +161,42 @@ function PostAuthorEdit( {
 									options={ authorOptions }
 									onChange={ handleSelect }
 								/>
-							) ) }
+							) }
+						</div>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show avatar' ) }
+						isShownByDefault
+						hasValue={ () => ! showAvatar }
+						onDeselect={ () =>
+							setAttributes( { showAvatar: true } )
+						}
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show avatar' ) }
 							checked={ showAvatar }
 							onChange={ () =>
-								setAttributes( { showAvatar: ! showAvatar } )
+								setAttributes( {
+									showAvatar: ! showAvatar,
+								} )
 							}
 						/>
-						{ showAvatar && (
+					</ToolsPanelItem>
+					{ showAvatar && (
+						<ToolsPanelItem
+							label={ __( 'Avatar size' ) }
+							isShownByDefault
+							hasValue={ () => avatarSize !== 48 }
+							onDeselect={ () =>
+								setAttributes( { avatarSize: 48 } )
+							}
+						>
 							<SelectControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Avatar size' ) }
-								value={ attributes.avatarSize }
+								value={ avatarSize }
 								options={ avatarSizes }
 								onChange={ ( size ) => {
 									setAttributes( {
@@ -161,15 +204,31 @@ function PostAuthorEdit( {
 									} );
 								} }
 							/>
-						) }
+						</ToolsPanelItem>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show bio' ) }
+						isShownByDefault
+						hasValue={ () => !! showBio }
+						onDeselect={ () =>
+							setAttributes( { showBio: undefined } )
+						}
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show bio' ) }
-							checked={ showBio }
+							checked={ !! showBio }
 							onChange={ () =>
 								setAttributes( { showBio: ! showBio } )
 							}
 						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Link author name to author page' ) }
+						isShownByDefault
+						hasValue={ () => !! isLink }
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Link author name to author page' ) }
@@ -178,7 +237,16 @@ function PostAuthorEdit( {
 								setAttributes( { isLink: ! isLink } )
 							}
 						/>
-						{ isLink && (
+					</ToolsPanelItem>
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Link target' ) }
+							isShownByDefault
+							hasValue={ () => linkTarget !== '_self' }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -189,9 +257,9 @@ function PostAuthorEdit( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
-						) }
-					</VStack>
-				</PanelBody>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			</InspectorControls>
 
 			<BlockControls group="block">
@@ -207,12 +275,8 @@ function PostAuthorEdit( {
 				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
-							width={ attributes.avatarSize }
-							src={
-								authorDetails.avatar_urls[
-									attributes.avatarSize
-								]
-							}
+							width={ avatarSize }
+							src={ authorDetails.avatar_urls[ avatarSize ] }
 							alt={ authorDetails.name }
 						/>
 					</div>