@wordpress/block-library 9.23.0 → 9.25.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-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.
 

package/src/post-comments-count/index.js

@@ -9,6 +9,7 @@ import { postCommentsCount as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -16,6 +17,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/post-comments-count/transforms.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-comments-link' ],
+			transform: ( { textAlign } ) => {
+				return createBlock( 'core/post-comments-link', {
+					textAlign,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;

package/src/post-comments-form/style.scss

@@ -82,9 +82,4 @@
 			margin-left: 0.5em;
 		}
 	}
-
-	// Override the 100% width derived from the Button block
-	input[type="submit"] {
-		width: auto;
-	}
 }

package/src/post-comments-link/index.js

@@ -9,6 +9,7 @@ import { postCommentsCount as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -16,6 +17,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/post-comments-link/transforms.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-comments-count' ],
+			transform: ( { textAlign } ) => {
+				return createBlock( 'core/post-comments-count', {
+					textAlign,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;

package/src/post-excerpt/block.json

@@ -11,7 +11,8 @@
 			"type": "string"
 		},
 		"moreText": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showMoreOnNewLine": {
 			"type": "boolean",

package/src/post-excerpt/edit.js

@@ -15,6 +15,7 @@ import {
 	RichText,
 	Warning,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -41,6 +42,8 @@ export default function PostExcerptEditor( {
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [
@@ -220,14 +223,16 @@ export default function PostExcerptEditor( {
 	);
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( newAlign ) =>
-						setAttributes( { textAlign: newAlign } )
-					}
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( newAlign ) =>
+							setAttributes( { textAlign: newAlign } )
+						}
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/post-navigation-link/block.json

@@ -15,7 +15,8 @@
 			"default": "next"
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showTitle": {
 			"type": "boolean",

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

@@ -19,6 +19,7 @@ import {
 	BlockControls,
 	AlignmentToolbar,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -37,6 +38,8 @@ export default function PostNavigationLinkEdit( {
 	},
 	setAttributes,
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
@@ -176,14 +179,16 @@ export default function PostNavigationLinkEdit( {
 					) }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<div { ...blockProps }>
 				{ ! isNext && displayArrow && (
 					<span

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

@@ -6,34 +6,34 @@ import { next, previous } from '@wordpress/icons';
 
 const variations = [
 	{
-		isDefault: true,
-		name: 'post-next',
-		title: __( 'Next Post' ),
+		name: 'post-previous',
+		title: __( 'Previous Post' ),
 		description: __(
-			'Displays the post link that follows the current post.'
+			'Displays the post link that precedes the current post.'
 		),
-		icon: next,
-		attributes: { type: 'next' },
+		icon: previous,
+		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Next post' ),
+				label: __( 'Previous post' ),
 				arrow: 'arrow',
 			},
 		},
 	},
 	{
-		name: 'post-previous',
-		title: __( 'Previous Post' ),
+		isDefault: true,
+		name: 'post-next',
+		title: __( 'Next Post' ),
 		description: __(
-			'Displays the post link that precedes the current post.'
+			'Displays the post link that follows the current post.'
 		),
-		icon: previous,
-		attributes: { type: 'previous' },
+		icon: next,
+		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Previous post' ),
+				label: __( 'Next post' ),
 				arrow: 'arrow',
 			},
 		},