@wordpress/block-library 9.23.0 → 9.25.0

package/src/comment-date/edit.js

@@ -12,9 +12,18 @@ import {
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
+} from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Renders the `core/comment-date` block on the editor.
  *
@@ -34,6 +43,8 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	let [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
 	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
 		'root',
@@ -43,21 +54,45 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<DateFormatPicker
-					format={ format }
-					defaultFormat={ siteFormat }
-					onChange={ ( nextFormat ) =>
-						setAttributes( { format: nextFormat } )
-					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						format: undefined,
+						isLink: true,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Date format' ) }
+					hasValue={ () => format !== undefined }
+					onDeselect={ () => setAttributes( { format: undefined } ) }
+					isShownByDefault
+				>
+					<DateFormatPicker
+						format={ format }
+						defaultFormat={ siteFormat }
+						onChange={ ( nextFormat ) =>
+							setAttributes( { format: nextFormat } )
+						}
+					/>
+				</ToolsPanelItem>
+
+				<ToolsPanelItem
 					label={ __( 'Link to comment' ) }
-					onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					checked={ isLink }
-				/>
-			</PanelBody>
+					hasValue={ () => ! isLink }
+					onDeselect={ () => setAttributes( { isLink: true } ) }
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to comment' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/comment-edit-link/edit.js

@@ -12,9 +12,18 @@ import {
 	InspectorControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function Edit( {
 	attributes: { linkTarget, textAlign },
 	setAttributes,
@@ -25,6 +34,8 @@ export default function Edit( {
 		} ),
 	} );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const blockControls = (
 		<BlockControls group="block">
 			<AlignmentControl
@@ -37,18 +48,35 @@ export default function Edit( {
 	);
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						linkTarget: '_self',
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
 					label={ __( 'Open in new tab' ) }
-					onChange={ ( value ) =>
-						setAttributes( {
-							linkTarget: value ? '_blank' : '_self',
-						} )
+					isShownByDefault
+					hasValue={ () => linkTarget === '_blank' }
+					onDeselect={ () =>
+						setAttributes( { linkTarget: '_self' } )
 					}
-					checked={ linkTarget === '_blank' }
-				/>
-			</PanelBody>
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/comments/edit/comments-inspector-controls.js

@@ -17,7 +17,6 @@ const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 export default function CommentsInspectorControls( {
 	attributes: { tagName },
 	setAttributes,
-	clientId,
 } ) {
 	return (
 		<InspectorControls>
@@ -27,7 +26,6 @@ export default function CommentsInspectorControls( {
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
-					clientId={ clientId }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<section>', value: 'section' },

package/src/comments-pagination/edit.js

@@ -10,12 +10,16 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const TEMPLATE = [
 	[ 'core/comments-pagination-previous' ],
@@ -45,6 +49,7 @@ export default function QueryPaginationEdit( {
 	}, [] );
 
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
@@ -73,14 +78,29 @@ export default function QueryPaginationEdit( {
 		<>
 			{ hasNextPreviousBlocks && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<CommentsPaginationArrowControls
-							value={ paginationArrow }
-							onChange={ ( value ) => {
-								setAttributes( { paginationArrow: value } );
-							} }
-						/>
-					</PanelBody>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						dropdownMenuProps={ dropdownMenuProps }
+						resetAll={ () =>
+							setAttributes( { paginationArrow: 'none' } )
+						}
+					>
+						<ToolsPanelItem
+							label={ __( 'Arrow' ) }
+							hasValue={ () => paginationArrow !== 'none' }
+							onDeselect={ () =>
+								setAttributes( { paginationArrow: 'none' } )
+							}
+							isShownByDefault
+						>
+							<CommentsPaginationArrowControls
+								value={ paginationArrow }
+								onChange={ ( value ) => {
+									setAttributes( { paginationArrow: value } );
+								} }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<div { ...innerBlocksProps } />

package/src/comments-title/edit.js

@@ -16,12 +16,21 @@ import {
 } from '@wordpress/block-editor';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function Edit( {
 	attributes: {
 		textAlign,
@@ -53,6 +62,8 @@ export default function Edit( {
 		return getSettings().__experimentalDiscussionSettings;
 	} );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	useEffect( () => {
 		if ( isSiteEditor ) {
 			// Match the number of comments that will be shown in the comment-template/edit.js placeholder
@@ -111,24 +122,51 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						showPostTitle: true,
+						showCommentsCount: true,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
 					label={ __( 'Show post title' ) }
-					checked={ showPostTitle }
-					onChange={ ( value ) =>
-						setAttributes( { showPostTitle: value } )
+					isShownByDefault
+					hasValue={ () => ! showPostTitle }
+					onDeselect={ () =>
+						setAttributes( { showPostTitle: true } )
 					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Show post title' ) }
+						checked={ showPostTitle }
+						onChange={ ( value ) =>
+							setAttributes( { showPostTitle: value } )
+						}
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
 					label={ __( 'Show comments count' ) }
-					checked={ showCommentsCount }
-					onChange={ ( value ) =>
-						setAttributes( { showCommentsCount: value } )
+					isShownByDefault
+					hasValue={ () => ! showCommentsCount }
+					onDeselect={ () =>
+						setAttributes( { showCommentsCount: true } )
 					}
-				/>
-			</PanelBody>
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Show comments count' ) }
+						checked={ showCommentsCount }
+						onChange={ ( value ) =>
+							setAttributes( { showCommentsCount: value } )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/details/block.json

@@ -15,7 +15,8 @@
 		"summary": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "summary"
+			"selector": "summary",
+			"role": "content"
 		},
 		"name": {
 			"type": "string",

package/src/details/edit.js

@@ -6,20 +6,26 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	TextControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { withIgnoreIMEEvents } = unlock( componentsPrivateApis );
 
 const TEMPLATE = [
 	[
@@ -30,7 +36,7 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsEdit( { attributes, setAttributes } ) {
+function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	const { name, showContent, summary, allowedBlocks, placeholder } =
 		attributes;
 	const blockProps = useBlockProps();
@@ -42,6 +48,27 @@ function DetailsEdit( { attributes, setAttributes } ) {
 	const [ isOpen, setIsOpen ] = useState( showContent );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	// Check if the inner blocks are selected.
+	const hasSelectedInnerBlock = useSelect(
+		( select ) =>
+			select( blockEditorStore ).hasSelectedInnerBlock( clientId, true ),
+		[ clientId ]
+	);
+
+	const handleSummaryKeyDown = ( event ) => {
+		if ( event.key === 'Enter' && ! event.shiftKey ) {
+			setIsOpen( ( prevIsOpen ) => ! prevIsOpen );
+			event.preventDefault();
+		}
+	};
+
+	// Prevent spacebar from toggling <details> while typing.
+	const handleSummaryKeyUp = ( event ) => {
+		if ( event.key === ' ' ) {
+			event.preventDefault();
+		}
+	};
+
 	return (
 		<>
 			<InspectorControls>
@@ -93,13 +120,18 @@ function DetailsEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<details
 				{ ...innerBlocksProps }
-				open={ isOpen }
+				open={ isOpen || hasSelectedInnerBlock }
 				onToggle={ ( event ) => setIsOpen( event.target.open ) }
 			>
-				<summary>
+				<summary
+					onKeyDown={ withIgnoreIMEEvents( handleSummaryKeyDown ) }
+					onKeyUp={ handleSummaryKeyUp }
+				>
 					<RichText
 						identifier="summary"
-						aria-label={ __( 'Write summary' ) }
+						aria-label={ __(
+							'Write summary. Press Enter to expand or collapse the details.'
+						) }
 						placeholder={ placeholder || __( 'Write summary…' ) }
 						withoutInteractiveFormatting
 						value={ summary }

package/src/embed/edit.js

@@ -118,11 +118,9 @@ const EmbedEdit = ( props ) => {
 			responsive
 		);
 
-	const toggleResponsive = () => {
-		const { allowResponsive, className } = attributes;
+	function toggleResponsive( newAllowResponsive ) {
+		const { className } = attributes;
 		const { html } = preview;
-		const newAllowResponsive = ! allowResponsive;
-
 		setAttributes( {
 			allowResponsive: newAllowResponsive,
 			className: getClassNames(
@@ -131,7 +129,7 @@ const EmbedEdit = ( props ) => {
 				responsive && newAllowResponsive
 			),
 		} );
-	};
+	}
 
 	useEffect( () => {
 		if ( preview?.html || ! cannotEmbed || ! hasResolved ) {

package/src/embed/embed-controls.js

@@ -4,13 +4,19 @@
 import { __ } from '@wordpress/i18n';
 import {
 	ToolbarButton,
-	PanelBody,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { edit } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 function getResponsiveHelp( checked ) {
 	return checked
 		? __(
@@ -28,37 +34,53 @@ const EmbedControls = ( {
 	allowResponsive,
 	toggleResponsive,
 	switchBackToURLInput,
-} ) => (
-	<>
-		<BlockControls>
-			<ToolbarGroup>
-				{ showEditButton && (
-					<ToolbarButton
-						className="components-toolbar__control"
-						label={ __( 'Edit URL' ) }
-						icon={ edit }
-						onClick={ switchBackToURLInput }
-					/>
-				) }
-			</ToolbarGroup>
-		</BlockControls>
-		{ themeSupportsResponsive && blockSupportsResponsive && (
-			<InspectorControls>
-				<PanelBody
-					title={ __( 'Media settings' ) }
-					className="blocks-responsive"
-				>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Resize for smaller devices' ) }
-						checked={ allowResponsive }
-						help={ getResponsiveHelp }
-						onChange={ toggleResponsive }
-					/>
-				</PanelBody>
-			</InspectorControls>
-		) }
-	</>
-);
+} ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					{ showEditButton && (
+						<ToolbarButton
+							className="components-toolbar__control"
+							label={ __( 'Edit URL' ) }
+							icon={ edit }
+							onClick={ switchBackToURLInput }
+						/>
+					) }
+				</ToolbarGroup>
+			</BlockControls>
+			{ themeSupportsResponsive && blockSupportsResponsive && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Media settings' ) }
+						resetAll={ () => {
+							toggleResponsive( true );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
+							label={ __( 'Media settings' ) }
+							isShownByDefault
+							hasValue={ () => ! allowResponsive }
+							onDeselect={ () => {
+								toggleResponsive( ! allowResponsive );
+							} }
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Resize for smaller devices' ) }
+								checked={ allowResponsive }
+								help={ getResponsiveHelp }
+								onChange={ toggleResponsive }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				</InspectorControls>
+			) }
+		</>
+	);
+};
 
 export default EmbedControls;