@wordpress/block-library 9.24.0 → 9.25.0

package/src/list/ordered-list-settings.js

@@ -8,70 +8,180 @@ import {
 	PanelBody,
 	ToggleControl,
 	SelectControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
 
-const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
-	<InspectorControls>
-		<PanelBody title={ __( 'Settings' ) }>
-			<SelectControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'List style' ) }
-				options={ [
-					{
-						label: __( 'Numbers' ),
-						value: 'decimal',
-					},
-					{
-						label: __( 'Uppercase letters' ),
-						value: 'upper-alpha',
-					},
-					{
-						label: __( 'Lowercase letters' ),
-						value: 'lower-alpha',
-					},
-					{
-						label: __( 'Uppercase Roman numerals' ),
-						value: 'upper-roman',
-					},
-					{
-						label: __( 'Lowercase Roman numerals' ),
-						value: 'lower-roman',
-					},
-				] }
-				value={ type }
-				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
-			/>
-			<TextControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'Start value' ) }
-				type="number"
-				onChange={ ( value ) => {
-					const int = parseInt( value, 10 );
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
+const LIST_STYLE_OPTIONS = [
+	{
+		label: __( 'Numbers' ),
+		value: 'decimal',
+	},
+	{
+		label: __( 'Uppercase letters' ),
+		value: 'upper-alpha',
+	},
+	{
+		label: __( 'Lowercase letters' ),
+		value: 'lower-alpha',
+	},
+	{
+		label: __( 'Uppercase Roman numerals' ),
+		value: 'upper-roman',
+	},
+	{
+		label: __( 'Lowercase Roman numerals' ),
+		value: 'lower-roman',
+	},
+];
+
+const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	return (
+		<InspectorControls>
+			{ Platform.isNative ? (
+				<PanelBody title={ __( 'Settings' ) }>
+					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'List style' ) }
+						options={ LIST_STYLE_OPTIONS }
+						value={ type }
+						onChange={ ( newValue ) =>
+							setAttributes( { type: newValue } )
+						}
+					/>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Start value' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const int = parseInt( value, 10 );
+
+							setAttributes( {
+								// It should be possible to unset the value,
+								// e.g. with an empty string.
+								start: isNaN( int ) ? undefined : int,
+							} );
+						} }
+						value={
+							Number.isInteger( start )
+								? start.toString( 10 )
+								: ''
+						}
+						step="1"
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Reverse order' ) }
+						checked={ reversed || false }
+						onChange={ ( value ) => {
+							setAttributes( {
+								// Unset the attribute if not reversed.
+								reversed: value || undefined,
+							} );
+						} }
+					/>
+				</PanelBody>
+			) : (
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							type: undefined,
+							start: undefined,
+							reversed: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'List style' ) }
+						isShownByDefault
+						hasValue={ () => !! type }
+						onDeselect={ () =>
+							setAttributes( {
+								type: undefined,
+							} )
+						}
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'List style' ) }
+							options={ LIST_STYLE_OPTIONS }
+							value={ type || 'decimal' }
+							onChange={ ( newValue ) =>
+								setAttributes( { type: newValue } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Start value' ) }
+						isShownByDefault
+						hasValue={ () => !! start }
+						onDeselect={ () =>
+							setAttributes( {
+								start: undefined,
+							} )
+						}
+					>
+						<TextControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Start value' ) }
+							type="number"
+							onChange={ ( value ) => {
+								const int = parseInt( value, 10 );
 
-					setAttributes( {
-						// It should be possible to unset the value,
-						// e.g. with an empty string.
-						start: isNaN( int ) ? undefined : int,
-					} );
-				} }
-				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
-				step="1"
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={ __( 'Reverse order' ) }
-				checked={ reversed || false }
-				onChange={ ( value ) => {
-					setAttributes( {
-						// Unset the attribute if not reversed.
-						reversed: value || undefined,
-					} );
-				} }
-			/>
-		</PanelBody>
-	</InspectorControls>
-);
+								setAttributes( {
+									// It should be possible to unset the value,
+									// e.g. with an empty string.
+									start: isNaN( int ) ? undefined : int,
+								} );
+							} }
+							value={
+								Number.isInteger( start )
+									? start.toString( 10 )
+									: ''
+							}
+							step="1"
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Reverse order' ) }
+						isShownByDefault
+						hasValue={ () => !! reversed }
+						onDeselect={ () =>
+							setAttributes( {
+								reversed: undefined,
+							} )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Reverse order' ) }
+							checked={ reversed || false }
+							onChange={ ( value ) => {
+								setAttributes( {
+									// Unset the attribute if not reversed.
+									reversed: value || undefined,
+								} );
+							} }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
+		</InspectorControls>
+	);
+};
 
 export default OrderedListSettings;

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

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

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.