@wordpress/block-library 9.16.0 → 9.17.0

package/src/search/edit.js

@@ -25,12 +25,13 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	ResizableBox,
-	PanelBody,
-	__experimentalVStack as VStack,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
@@ -54,6 +55,7 @@ import {
 	MIN_WIDTH,
 	isPercentageUnit,
 } from './utils.js';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 // Used to calculate border radius adjustment to avoid "fat" corners when
 // button is placed inside wrapper.
@@ -370,6 +372,7 @@ export default function SearchEdit( {
 			</>
 		);
 	};
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const controls = (
 		<>
@@ -408,79 +411,101 @@ export default function SearchEdit( {
 			</BlockControls>
 
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<VStack
-						className="wp-block-search__inspector-controls"
-						spacing={ 4 }
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							width: undefined,
+							widthUnit: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => !! width }
+						label={ __( 'Width' ) }
+						onDeselect={ () => {
+							setAttributes( {
+								width: undefined,
+								widthUnit: undefined,
+							} );
+						} }
+						isShownByDefault
 					>
-						<UnitControl
-							__next40pxDefaultSize
-							label={ __( 'Width' ) }
-							id={ unitControlInputId } // unused, kept for backwards compatibility
-							min={
-								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
-							}
-							max={
-								isPercentageUnit( widthUnit ) ? 100 : undefined
-							}
-							step={ 1 }
-							onChange={ ( newWidth ) => {
-								const parsedNewWidth =
-									newWidth === ''
-										? undefined
-										: parseInt( newWidth, 10 );
-								setAttributes( {
-									width: parsedNewWidth,
-								} );
-							} }
-							onUnitChange={ ( newUnit ) => {
-								setAttributes( {
-									width:
-										'%' === newUnit
-											? PC_WIDTH_DEFAULT
-											: PX_WIDTH_DEFAULT,
-									widthUnit: newUnit,
-								} );
-							} }
-							__unstableInputWidth="80px"
-							value={ `${ width }${ widthUnit }` }
-							units={ units }
-						/>
-						<ToggleGroupControl
-							label={ __( 'Percentage Width' ) }
-							value={
-								PERCENTAGE_WIDTHS.includes( width ) &&
-								widthUnit === '%'
-									? width
-									: undefined
-							}
-							hideLabelFromVision
-							onChange={ ( newWidth ) => {
-								setAttributes( {
-									width: newWidth,
-									widthUnit: '%',
-								} );
-							} }
-							isBlock
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
-						>
-							{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
-								return (
-									<ToggleGroupControlOption
-										key={ widthValue }
-										value={ widthValue }
-										label={ sprintf(
-											/* translators: Percentage value. */
-											__( '%d%%' ),
-											widthValue
-										) }
-									/>
-								);
-							} ) }
-						</ToggleGroupControl>
-					</VStack>
-				</PanelBody>
+						<VStack>
+							<UnitControl
+								__next40pxDefaultSize
+								label={ __( 'Width' ) }
+								id={ unitControlInputId } // Unused, kept for backwards compatibility
+								min={
+									isPercentageUnit( widthUnit )
+										? 0
+										: MIN_WIDTH
+								}
+								max={
+									isPercentageUnit( widthUnit )
+										? 100
+										: undefined
+								}
+								step={ 1 }
+								onChange={ ( newWidth ) => {
+									const parsedNewWidth =
+										newWidth === ''
+											? undefined
+											: parseInt( newWidth, 10 );
+									setAttributes( {
+										width: parsedNewWidth,
+									} );
+								} }
+								onUnitChange={ ( newUnit ) => {
+									setAttributes( {
+										width:
+											'%' === newUnit
+												? PC_WIDTH_DEFAULT
+												: PX_WIDTH_DEFAULT,
+										widthUnit: newUnit,
+									} );
+								} }
+								__unstableInputWidth="80px"
+								value={ `${ width }${ widthUnit }` }
+								units={ units }
+							/>
+							<ToggleGroupControl
+								label={ __( 'Percentage Width' ) }
+								value={
+									PERCENTAGE_WIDTHS.includes( width ) &&
+									widthUnit === '%'
+										? width
+										: undefined
+								}
+								hideLabelFromVision
+								onChange={ ( newWidth ) => {
+									setAttributes( {
+										width: newWidth,
+										widthUnit: '%',
+									} );
+								} }
+								isBlock
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+							>
+								{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
+									return (
+										<ToggleGroupControlOption
+											key={ widthValue }
+											value={ widthValue }
+											label={ sprintf(
+												/* translators: Percentage value. */
+												__( '%d%%' ),
+												widthValue
+											) }
+										/>
+									);
+								} ) }
+							</ToggleGroupControl>
+						</VStack>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 		</>
 	);

package/src/separator/edit.js

@@ -19,12 +19,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-
-const htmlElementMessages = {
-	div: __(
-		'The <div> element should only be used if the separator is a design element that should not be announced.'
-	),
-};
+import { htmlElementMessages } from '../utils/messages';
 
 export default function SeparatorEdit( { attributes, setAttributes } ) {
 	const { backgroundColor, opacity, style, tagName } = attributes;

package/src/spacer/controls.js

@@ -24,6 +24,7 @@ import { View } from '@wordpress/primitives';
  */
 import { unlock } from '../lock-unlock';
 import { MIN_SPACER_SIZE } from './constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const { useSpacingSizes } = unlock( blockEditorPrivateApis );
 
@@ -43,10 +44,6 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 		defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },
 	} );
 
-	const handleOnChange = ( unprocessedValue ) => {
-		onChange( unprocessedValue.all );
-	};
-
 	// Force the unit to update to `px` when the Spacer is being resized.
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( value );
@@ -56,23 +53,24 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 
 	return (
 		<>
-			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+			{ spacingSizes?.length < 2 ? (
 				<UnitControl
 					id={ inputId }
 					isResetValueOnUnitChange
 					min={ MIN_SPACER_SIZE }
-					onChange={ handleOnChange }
+					onChange={ onChange }
 					value={ computedValue }
 					units={ units }
 					label={ label }
 					__next40pxDefaultSize
 				/>
-			) }
-			{ spacingSizes?.length > 0 && (
+			) : (
 				<View className="tools-panel-item-spacing">
 					<SpacingSizesControl
 						values={ { all: computedValue } }
-						onChange={ handleOnChange }
+						onChange={ ( { all } ) => {
+							onChange( all );
+						} }
 						label={ label }
 						sides={ [ 'all' ] }
 						units={ units }
@@ -93,6 +91,8 @@ export default function SpacerControls( {
 	width,
 	isResizing,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<InspectorControls>
 			<ToolsPanel
@@ -103,6 +103,7 @@ export default function SpacerControls( {
 						height: '100px',
 					} );
 				} }
+				dropdownMenuProps={ dropdownMenuProps }
 			>
 				{ orientation === 'horizontal' && (
 					<ToolsPanelItem

package/src/spacer/edit.js

@@ -16,7 +16,7 @@ import {
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -124,6 +124,9 @@ const SpacerEdit = ( {
 	const onResizeStart = () => toggleSelection( false );
 	const onResizeStop = () => toggleSelection( true );
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
 	const handleOnVerticalResizeStop = ( newHeight ) => {
 		onResizeStop();
 
@@ -256,11 +259,19 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
+		// To avoid interfering with undo/redo operations any changes in this
+		// effect must not make history and should be preceded by
+		// `__unstableMarkNextChangeAsNotPersistent()`.
+		const setAttributesCovertly = ( nextAttributes ) => {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( nextAttributes );
+		};
+
 		if (
 			isFlexLayout &&
 			selfStretch !== 'fill' &&
 			selfStretch !== 'fit' &&
-			! flexSize
+			flexSize === undefined
 		) {
 			if ( inheritedOrientation === 'horizontal' ) {
 				// If spacer is moving from a vertical container to a horizontal container,
@@ -269,7 +280,7 @@ const SpacerEdit = ( {
 					getCustomValueFromPreset( width, spacingSizes ) ||
 					getCustomValueFromPreset( height, spacingSizes ) ||
 					'100px';
-				setAttributes( {
+				setAttributesCovertly( {
 					width: '0px',
 					style: {
 						...blockStyle,
@@ -285,7 +296,7 @@ const SpacerEdit = ( {
 					getCustomValueFromPreset( height, spacingSizes ) ||
 					getCustomValueFromPreset( width, spacingSizes ) ||
 					'100px';
-				setAttributes( {
+				setAttributesCovertly( {
 					height: '0px',
 					style: {
 						...blockStyle,
@@ -301,26 +312,16 @@ const SpacerEdit = ( {
 			isFlexLayout &&
 			( selfStretch === 'fill' || selfStretch === 'fit' )
 		) {
-			if ( inheritedOrientation === 'horizontal' ) {
-				setAttributes( {
-					width: undefined,
-				} );
-			} else {
-				setAttributes( {
-					height: undefined,
-				} );
-			}
+			setAttributesCovertly(
+				inheritedOrientation === 'horizontal'
+					? { width: undefined }
+					: { height: undefined }
+			);
 		} else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) {
-			if ( inheritedOrientation === 'horizontal' ) {
-				setAttributes( {
-					width: flexSize,
-				} );
-			} else {
-				setAttributes( {
-					height: flexSize,
-				} );
-			}
-			setAttributes( {
+			setAttributesCovertly( {
+				...( inheritedOrientation === 'horizontal'
+					? { width: flexSize }
+					: { height: flexSize } ),
 				style: {
 					...blockStyle,
 					layout: {
@@ -342,6 +343,7 @@ const SpacerEdit = ( {
 		setAttributes,
 		spacingSizes,
 		width,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
 	return (

package/src/template-part/edit/advanced-controls.js

@@ -10,27 +10,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { TemplatePartImportControls } from './import-controls';
-
-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.).'
-	),
-};
+import { htmlElementMessages } from '../../utils/messages';
 
 export function TemplatePartAdvancedControls( {
 	tagName,

package/src/utils/messages.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const htmlElementMessages = {
+	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."
+	),
+	div: __(
+		'The <div> element should only be used if the block is a design element with no semantic meaning.'
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+	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.'
+	),
+	nav: __(
+		'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+};

package/src/video/edit-common-settings.js

@@ -125,7 +125,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 					/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
 					label={ __( 'Play inline' ) }
 					onChange={ toggleFactory.playsInline }
-					checked={ playsInline }
+					checked={ !! playsInline }
 					help={ __(
 						'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
 					) }