@wordpress/block-library 9.24.0 → 9.25.0

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/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;

package/src/file/inspector.js

@@ -3,10 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	PanelBody,
 	RangeControl,
 	SelectControl,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 
@@ -14,6 +15,7 @@ import { InspectorControls } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { MIN_PREVIEW_HEIGHT, MAX_PREVIEW_HEIGHT } from './edit';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function FileBlockInspector( {
 	hrefs,
@@ -28,6 +30,7 @@ export default function FileBlockInspector( {
 	changePreviewHeight,
 } ) {
 	const { href, textLinkHref, attachmentPage } = hrefs;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	let linkDestinationOptions = [ { value: href, label: __( 'URL' ) } ];
 	if ( attachmentPage ) {
@@ -41,58 +44,109 @@ export default function FileBlockInspector( {
 		<>
 			<InspectorControls>
 				{ href.endsWith( '.pdf' ) && (
-					<PanelBody title={ __( 'PDF settings' ) }>
-						<ToggleControl
-							__nextHasNoMarginBottom
+					<ToolsPanel
+						label={ __( 'PDF settings' ) }
+						resetAll={ () => {
+							changeDisplayPreview( true );
+							changePreviewHeight( 600 );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
 							label={ __( 'Show inline embed' ) }
-							help={
-								displayPreview
-									? __(
-											"Note: Most phone and tablet browsers won't display embedded PDFs."
-									  )
-									: null
-							}
-							checked={ !! displayPreview }
-							onChange={ changeDisplayPreview }
-						/>
-						{ displayPreview && (
-							<RangeControl
+							isShownByDefault
+							hasValue={ () => ! displayPreview }
+							onDeselect={ () => changeDisplayPreview( true ) }
+						>
+							<ToggleControl
 								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Height in pixels' ) }
-								min={ MIN_PREVIEW_HEIGHT }
-								max={ Math.max(
-									MAX_PREVIEW_HEIGHT,
-									previewHeight
-								) }
-								value={ previewHeight }
-								onChange={ changePreviewHeight }
+								label={ __( 'Show inline embed' ) }
+								help={
+									displayPreview
+										? __(
+												"Note: Most phone and tablet browsers won't display embedded PDFs."
+										  )
+										: null
+								}
+								checked={ !! displayPreview }
+								onChange={ changeDisplayPreview }
 							/>
+						</ToolsPanelItem>
+						{ displayPreview && (
+							<ToolsPanelItem
+								label={ __( 'Height in pixels' ) }
+								isShownByDefault
+								hasValue={ () => previewHeight !== 600 }
+								onDeselect={ () => changePreviewHeight( 600 ) }
+							>
+								<RangeControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Height in pixels' ) }
+									min={ MIN_PREVIEW_HEIGHT }
+									max={ Math.max(
+										MAX_PREVIEW_HEIGHT,
+										previewHeight
+									) }
+									value={ previewHeight }
+									onChange={ changePreviewHeight }
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
-				<PanelBody title={ __( 'Settings' ) }>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						changeLinkDestinationOption( href );
+						changeOpenInNewWindow( false );
+						changeShowDownloadButton( true );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Link to' ) }
-						value={ textLinkHref }
-						options={ linkDestinationOptions }
-						onChange={ changeLinkDestinationOption }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => textLinkHref !== href }
+						onDeselect={ () => changeLinkDestinationOption( href ) }
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Link to' ) }
+							value={ textLinkHref }
+							options={ linkDestinationOptions }
+							onChange={ changeLinkDestinationOption }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						checked={ openInNewWindow }
-						onChange={ changeOpenInNewWindow }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => !! openInNewWindow }
+						onDeselect={ () => changeOpenInNewWindow( false ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							checked={ openInNewWindow }
+							onChange={ changeOpenInNewWindow }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Show download button' ) }
-						checked={ showDownloadButton }
-						onChange={ changeShowDownloadButton }
-					/>
-				</PanelBody>
+						isShownByDefault
+						hasValue={ () => ! showDownloadButton }
+						onDeselect={ () => changeShowDownloadButton( true ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show download button' ) }
+							checked={ showDownloadButton }
+							onChange={ changeShowDownloadButton }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 		</>
 	);