@wordpress/block-library 9.16.0 → 9.17.0

package/src/group/edit.js

@@ -18,6 +18,7 @@ import { View } from '@wordpress/primitives';
  * Internal dependencies
  */
 import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
+import { htmlElementMessages } from '../utils/messages';
 
 /**
  * Render inspector controls for the Group block.
@@ -29,26 +30,6 @@ import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
  * @return {JSX.Element}                The control group.
  */
 function GroupEditControls( { tagName, onSelectTagName } ) {
-	const htmlElementMessages = {
-		header: __(
-			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-		),
-		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."
-		),
-		article: __(
-			'The <article> element should represent a self-contained, syndicatable portion of the document.'
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-		footer: __(
-			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-		),
-	};
 	return (
 		<InspectorControls group="advanced">
 			<SelectControl

package/src/home-link/edit.js

@@ -51,12 +51,6 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 					aria-label={ __( 'Home link text' ) }
 					placeholder={ __( 'Add home link' ) }
 					withoutInteractiveFormatting
-					allowedFormats={ [
-						'core/bold',
-						'core/italic',
-						'core/image',
-						'core/strikethrough',
-					] }
 				/>
 			</a>
 		</div>

package/src/latest-comments/edit.js

@@ -4,13 +4,19 @@
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	Disabled,
-	PanelBody,
 	RangeControl,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import ServerSideRender from '@wordpress/server-side-render';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Minimum number of comments a user can show using this block.
  *
@@ -36,49 +42,103 @@ export default function LatestComments( { attributes, setAttributes } ) {
 		},
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							commentsToShow: 5,
+							displayAvatar: true,
+							displayDate: true,
+							displayExcerpt: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => ! displayAvatar }
 						label={ __( 'Display avatar' ) }
-						checked={ displayAvatar }
-						onChange={ () =>
-							setAttributes( { displayAvatar: ! displayAvatar } )
+						onDeselect={ () =>
+							setAttributes( { displayAvatar: true } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display avatar' ) }
+							checked={ displayAvatar }
+							onChange={ () =>
+								setAttributes( {
+									displayAvatar: ! displayAvatar,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => ! displayDate }
 						label={ __( 'Display date' ) }
-						checked={ displayDate }
-						onChange={ () =>
-							setAttributes( { displayDate: ! displayDate } )
+						onDeselect={ () =>
+							setAttributes( { displayDate: true } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display date' ) }
+							checked={ displayDate }
+							onChange={ () =>
+								setAttributes( { displayDate: ! displayDate } )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => ! displayExcerpt }
 						label={ __( 'Display excerpt' ) }
-						checked={ displayExcerpt }
-						onChange={ () =>
-							setAttributes( {
-								displayExcerpt: ! displayExcerpt,
-							} )
+						onDeselect={ () =>
+							setAttributes( { displayExcerpt: true } )
 						}
-					/>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display excerpt' ) }
+							checked={ displayExcerpt }
+							onChange={ () =>
+								setAttributes( {
+									displayExcerpt: ! displayExcerpt,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => commentsToShow !== 5 }
 						label={ __( 'Number of comments' ) }
-						value={ commentsToShow }
-						onChange={ ( value ) =>
-							setAttributes( { commentsToShow: value } )
+						onDeselect={ () =>
+							setAttributes( { commentsToShow: 5 } )
 						}
-						min={ MIN_COMMENTS }
-						max={ MAX_COMMENTS }
-						required
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Number of comments' ) }
+							value={ commentsToShow }
+							onChange={ ( value ) =>
+								setAttributes( { commentsToShow: value } )
+							}
+							min={ MIN_COMMENTS }
+							max={ MAX_COMMENTS }
+							required
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<Disabled>
 				<ServerSideRender

package/src/latest-posts/constants.js

@@ -1,3 +1,4 @@
 export const MIN_EXCERPT_LENGTH = 10;
 export const MAX_EXCERPT_LENGTH = 100;
 export const MAX_POSTS_COLUMNS = 6;
+export const DEFAULT_EXCERPT_LENGTH = 55;

package/src/latest-posts/edit.js

@@ -17,6 +17,8 @@ import {
 	ToolbarGroup,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
@@ -49,7 +51,9 @@ import {
 	MIN_EXCERPT_LENGTH,
 	MAX_EXCERPT_LENGTH,
 	MAX_POSTS_COLUMNS,
+	DEFAULT_EXCERPT_LENGTH,
 } from './constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /**
  * Module Constants
@@ -77,6 +81,8 @@ function getFeaturedImageDetails( post, size ) {
 
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const instanceId = useInstanceId( LatestPostsEdit );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const {
 		postsToShow,
 		order,
@@ -227,68 +233,137 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const hasPosts = !! latestPosts?.length;
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Post content' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Post content' ) }
+				resetAll={ () =>
+					setAttributes( {
+						displayPostContent: false,
+						displayPostContentRadio: 'excerpt',
+						excerptLength: DEFAULT_EXCERPT_LENGTH,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! displayPostContent }
 					label={ __( 'Post content' ) }
-					checked={ displayPostContent }
-					onChange={ ( value ) =>
-						setAttributes( { displayPostContent: value } )
+					onDeselect={ () =>
+						setAttributes( { displayPostContent: false } )
 					}
-				/>
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Post content' ) }
+						checked={ displayPostContent }
+						onChange={ ( value ) =>
+							setAttributes( { displayPostContent: value } )
+						}
+					/>
+				</ToolsPanelItem>
 				{ displayPostContent && (
-					<RadioControl
+					<ToolsPanelItem
+						hasValue={ () => displayPostContentRadio !== 'excerpt' }
 						label={ __( 'Show' ) }
-						selected={ displayPostContentRadio }
-						options={ [
-							{ label: __( 'Excerpt' ), value: 'excerpt' },
-							{
-								label: __( 'Full post' ),
-								value: 'full_post',
-							},
-						] }
-						onChange={ ( value ) =>
+						onDeselect={ () =>
 							setAttributes( {
-								displayPostContentRadio: value,
+								displayPostContentRadio: 'excerpt',
 							} )
 						}
-					/>
+						isShownByDefault
+					>
+						<RadioControl
+							label={ __( 'Show' ) }
+							selected={ displayPostContentRadio }
+							options={ [
+								{ label: __( 'Excerpt' ), value: 'excerpt' },
+								{
+									label: __( 'Full post' ),
+									value: 'full_post',
+								},
+							] }
+							onChange={ ( value ) =>
+								setAttributes( {
+									displayPostContentRadio: value,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
 				) }
 				{ displayPostContent &&
 					displayPostContentRadio === 'excerpt' && (
-						<RangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+						<ToolsPanelItem
+							hasValue={ () =>
+								excerptLength !== DEFAULT_EXCERPT_LENGTH
+							}
 							label={ __( 'Max number of words' ) }
-							value={ excerptLength }
-							onChange={ ( value ) =>
-								setAttributes( { excerptLength: value } )
+							onDeselect={ () =>
+								setAttributes( {
+									excerptLength: DEFAULT_EXCERPT_LENGTH,
+								} )
 							}
-							min={ MIN_EXCERPT_LENGTH }
-							max={ MAX_EXCERPT_LENGTH }
-						/>
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Max number of words' ) }
+								value={ excerptLength }
+								onChange={ ( value ) =>
+									setAttributes( { excerptLength: value } )
+								}
+								min={ MIN_EXCERPT_LENGTH }
+								max={ MAX_EXCERPT_LENGTH }
+							/>
+						</ToolsPanelItem>
 					) }
-			</PanelBody>
+			</ToolsPanel>
 
-			<PanelBody title={ __( 'Post meta' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Post meta' ) }
+				resetAll={ () =>
+					setAttributes( {
+						displayAuthor: false,
+						displayPostDate: false,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! displayAuthor }
 					label={ __( 'Display author name' ) }
-					checked={ displayAuthor }
-					onChange={ ( value ) =>
-						setAttributes( { displayAuthor: value } )
+					onDeselect={ () =>
+						setAttributes( { displayAuthor: false } )
 					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Display author name' ) }
+						checked={ displayAuthor }
+						onChange={ ( value ) =>
+							setAttributes( { displayAuthor: value } )
+						}
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => !! displayPostDate }
 					label={ __( 'Display post date' ) }
-					checked={ displayPostDate }
-					onChange={ ( value ) =>
-						setAttributes( { displayPostDate: value } )
+					onDeselect={ () =>
+						setAttributes( { displayPostDate: false } )
 					}
-				/>
-			</PanelBody>
-
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Display post date' ) }
+						checked={ displayPostDate }
+						onChange={ ( value ) =>
+							setAttributes( { displayPostDate: value } )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 			<PanelBody title={ __( 'Featured image' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom

package/src/list/test/edit.native.js

@@ -50,7 +50,7 @@ describe( 'List block', () => {
 		await triggerBlockListLayout( listBlock );
 
 		// Get List item
-		const listItemBlock = await getBlock( screen, 'List item' );
+		const listItemBlock = await getBlock( screen, 'List Item' );
 		fireEvent.press( listItemBlock );
 
 		expect( listItemBlock ).toBeVisible();
@@ -75,7 +75,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -124,7 +124,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 2/
+			/List Item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 		await triggerBlockListLayout( firstNestedLevelBlock );
@@ -159,7 +159,7 @@ describe( 'List block', () => {
 
 		// Select Second List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
-			/List item Block\. Row 2/
+			/List Item Block\. Row 2/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -169,7 +169,7 @@ describe( 'List block', () => {
 
 		// Await recently indented list item layout
 		const [ listItemBlock1 ] = screen.getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		await triggerBlockListLayout( listItemBlock1 );
 
@@ -203,7 +203,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 		await triggerBlockListLayout( firstNestedLevelBlock );
@@ -217,7 +217,7 @@ describe( 'List block', () => {
 
 		// Select nested List Item block
 		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -500,7 +500,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
@@ -560,7 +560,7 @@ describe( 'List block', () => {
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
+			/List Item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 

package/src/list-item/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/list-item",
-	"title": "List item",
+	"title": "List Item",
 	"category": "text",
 	"parent": [ "core/list" ],
 	"allowedBlocks": [ "core/list" ],

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-link/edit.js

@@ -14,7 +14,6 @@ import {
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
-	Tooltip,
 	ToolbarGroup,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
@@ -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>
 							) }
 						</>