@wordpress/block-library 9.24.0 → 9.25.0

package/src/form/edit.js

@@ -9,12 +9,18 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { TextControl, SelectControl, PanelBody } from '@wordpress/components';
+import {
+	SelectControl,
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import {
 	formSubmissionNotificationSuccess,
 	formSubmissionNotificationError,
@@ -51,6 +57,17 @@ const TEMPLATE = [
 ];
 
 const Edit = ( { attributes, setAttributes, clientId } ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const resetAllSettings = () => {
+		setAttributes( {
+			submissionMethod: 'email',
+			email: undefined,
+			action: undefined,
+			method: 'post',
+		} );
+	};
+
 	const { action, method, email, submissionMethod } = attributes;
 	const blockProps = useBlockProps();
 
@@ -75,58 +92,86 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<SelectControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					dropdownMenuProps={ dropdownMenuProps }
+					label={ __( 'Settings' ) }
+					resetAll={ resetAllSettings }
+				>
+					<ToolsPanelItem
+						hasValue={ () => submissionMethod !== 'email' }
 						label={ __( 'Submissions method' ) }
-						options={ [
-							// TODO: Allow plugins to add their own submission methods.
-							{
-								label: __( 'Send email' ),
-								value: 'email',
-							},
-							{
-								label: __( '- Custom -' ),
-								value: 'custom',
-							},
-						] }
-						value={ submissionMethod }
-						onChange={ ( value ) =>
-							setAttributes( { submissionMethod: value } )
-						}
-						help={
-							submissionMethod === 'custom'
-								? __(
-										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
-								  )
-								: __(
-										'Select the method to use for form submissions.'
-								  )
+						onDeselect={ () =>
+							setAttributes( {
+								submissionMethod: 'email',
+							} )
 						}
-					/>
-					{ submissionMethod === 'email' && (
-						<TextControl
+						isShownByDefault
+					>
+						<SelectControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
-							autoComplete="off"
+							label={ __( 'Submissions method' ) }
+							options={ [
+								// TODO: Allow plugins to add their own submission methods.
+								{
+									label: __( 'Send email' ),
+									value: 'email',
+								},
+								{
+									label: __( '- Custom -' ),
+									value: 'custom',
+								},
+							] }
+							value={ submissionMethod }
+							onChange={ ( value ) =>
+								setAttributes( { submissionMethod: value } )
+							}
+							help={
+								submissionMethod === 'custom'
+									? __(
+											'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
+									  )
+									: __(
+											'Select the method to use for form submissions.'
+									  )
+							}
+						/>
+					</ToolsPanelItem>
+					{ submissionMethod === 'email' && (
+						<ToolsPanelItem
+							hasValue={ () => !! email }
 							label={ __( 'Email for form submissions' ) }
-							value={ email }
-							required
-							onChange={ ( value ) => {
-								setAttributes( { email: value } );
+							onDeselect={ () =>
 								setAttributes( {
-									action: `mailto:${ value }`,
-								} );
-								setAttributes( { method: 'post' } );
-							} }
-							help={ __(
-								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
-							) }
-							type="email"
-						/>
+									email: undefined,
+									action: undefined,
+									method: 'post',
+								} )
+							}
+							isShownByDefault
+						>
+							<TextControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								autoComplete="off"
+								label={ __( 'Email for form submissions' ) }
+								value={ email || '' }
+								required
+								onChange={ ( value ) => {
+									setAttributes( { email: value } );
+									setAttributes( {
+										action: `mailto:${ value }`,
+									} );
+									setAttributes( { method: 'post' } );
+								} }
+								help={ __(
+									'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
+								) }
+								type="email"
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">

package/src/form-input/edit.js

@@ -14,14 +14,24 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
-import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
-
+import {
+	TextControl,
+	CheckboxControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 function InputFieldBlock( { attributes, setAttributes, className } ) {
 	const { type, name, label, inlineLabel, required, placeholder, value } =
 		attributes;
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const ref = useRef();
 	const TagName = type === 'textarea' ? 'textarea' : 'input';
 
@@ -38,30 +48,58 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		<>
 			{ 'hidden' !== type && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								inlineLabel: false,
+								required: false,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ 'checkbox' !== type && (
+							<ToolsPanelItem
+								label={ __( 'Inline label' ) }
+								hasValue={ () => !! inlineLabel }
+								onDeselect={ () =>
+									setAttributes( { inlineLabel: false } )
+								}
+								isShownByDefault
+							>
+								<CheckboxControl
+									__nextHasNoMarginBottom
+									label={ __( 'Inline label' ) }
+									checked={ inlineLabel }
+									onChange={ ( newVal ) => {
+										setAttributes( {
+											inlineLabel: newVal,
+										} );
+									} }
+								/>
+							</ToolsPanelItem>
+						) }
+
+						<ToolsPanelItem
+							label={ __( 'Required' ) }
+							hasValue={ () => !! required }
+							onDeselect={ () =>
+								setAttributes( { required: false } )
+							}
+							isShownByDefault
+						>
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={ __( 'Inline label' ) }
-								checked={ inlineLabel }
+								label={ __( 'Required' ) }
+								checked={ required }
 								onChange={ ( newVal ) => {
 									setAttributes( {
-										inlineLabel: newVal,
+										required: newVal,
 									} );
 								} }
 							/>
-						) }
-						<CheckboxControl
-							__nextHasNoMarginBottom
-							label={ __( 'Required' ) }
-							checked={ required }
-							onChange={ ( newVal ) => {
-								setAttributes( {
-									required: newVal,
-								} );
-							} }
-						/>
-					</PanelBody>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<InspectorControls group="advanced">

package/src/gallery/style.scss

@@ -58,6 +58,7 @@ figure.wp-block-gallery.has-nested-images {
 			content: "";
 			height: 100%;
 			max-height: 40%;
+			pointer-events: none;
 
 			// Blur the background under the gradient scrim.
 			backdrop-filter: blur(3px);

package/src/latest-posts/edit.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	Placeholder,
 	QueryControls,
 	RadioControl,
@@ -328,131 +327,240 @@ function Controls( { attributes, setAttributes, postCount } ) {
 					/>
 				</ToolsPanelItem>
 			</ToolsPanel>
-			<PanelBody title={ __( 'Featured image' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Featured image' ) }
+				resetAll={ () =>
+					setAttributes( {
+						displayFeaturedImage: false,
+						featuredImageAlign: undefined,
+						featuredImageSizeSlug: 'thumbnail',
+						featuredImageSizeWidth: null,
+						featuredImageSizeHeight: null,
+						addLinkToFeaturedImage: false,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! displayFeaturedImage }
 					label={ __( 'Display featured image' ) }
-					checked={ displayFeaturedImage }
-					onChange={ ( value ) =>
-						setAttributes( { displayFeaturedImage: value } )
+					onDeselect={ () =>
+						setAttributes( { displayFeaturedImage: false } )
 					}
-				/>
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Display featured image' ) }
+						checked={ displayFeaturedImage }
+						onChange={ ( value ) =>
+							setAttributes( { displayFeaturedImage: value } )
+						}
+					/>
+				</ToolsPanelItem>
 				{ displayFeaturedImage && (
 					<>
-						<ImageSizeControl
-							onChange={ ( value ) => {
-								const newAttrs = {};
-								if ( value.hasOwnProperty( 'width' ) ) {
-									newAttrs.featuredImageSizeWidth =
-										value.width;
-								}
-								if ( value.hasOwnProperty( 'height' ) ) {
-									newAttrs.featuredImageSizeHeight =
-										value.height;
-								}
-								setAttributes( newAttrs );
-							} }
-							slug={ featuredImageSizeSlug }
-							width={ featuredImageSizeWidth }
-							height={ featuredImageSizeHeight }
-							imageWidth={ defaultImageWidth }
-							imageHeight={ defaultImageHeight }
-							imageSizeOptions={ imageSizeOptions }
-							imageSizeHelp={ __(
-								'Select the size of the source image.'
-							) }
-							onChangeImage={ ( value ) =>
+						<ToolsPanelItem
+							hasValue={ () =>
+								featuredImageSizeSlug !== 'thumbnail' ||
+								featuredImageSizeWidth !== null ||
+								featuredImageSizeHeight !== null
+							}
+							label={ __( 'Image size' ) }
+							onDeselect={ () =>
 								setAttributes( {
-									featuredImageSizeSlug: value,
-									featuredImageSizeWidth: undefined,
-									featuredImageSizeHeight: undefined,
+									featuredImageSizeSlug: 'thumbnail',
+									featuredImageSizeWidth: null,
+									featuredImageSizeHeight: null,
 								} )
 							}
-						/>
-						<ToggleGroupControl
-							className="editor-latest-posts-image-alignment-control"
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+							isShownByDefault
+						>
+							<ImageSizeControl
+								onChange={ ( value ) => {
+									const newAttrs = {};
+									if ( value.hasOwnProperty( 'width' ) ) {
+										newAttrs.featuredImageSizeWidth =
+											value.width;
+									}
+									if ( value.hasOwnProperty( 'height' ) ) {
+										newAttrs.featuredImageSizeHeight =
+											value.height;
+									}
+									setAttributes( newAttrs );
+								} }
+								slug={ featuredImageSizeSlug }
+								width={ featuredImageSizeWidth }
+								height={ featuredImageSizeHeight }
+								imageWidth={ defaultImageWidth }
+								imageHeight={ defaultImageHeight }
+								imageSizeOptions={ imageSizeOptions }
+								imageSizeHelp={ __(
+									'Select the size of the source image.'
+								) }
+								onChangeImage={ ( value ) =>
+									setAttributes( {
+										featuredImageSizeSlug: value,
+										featuredImageSizeWidth: undefined,
+										featuredImageSizeHeight: undefined,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! featuredImageAlign }
 							label={ __( 'Image alignment' ) }
-							value={ featuredImageAlign || 'none' }
-							onChange={ ( value ) =>
+							onDeselect={ () =>
 								setAttributes( {
-									featuredImageAlign:
-										value !== 'none' ? value : undefined,
+									featuredImageAlign: undefined,
 								} )
 							}
+							isShownByDefault
 						>
-							{ imageAlignmentOptions.map(
-								( { value, icon, label } ) => {
-									return (
-										<ToggleGroupControlOptionIcon
-											key={ value }
-											value={ value }
-											icon={ icon }
-											label={ label }
-										/>
-									);
+							<ToggleGroupControl
+								className="editor-latest-posts-image-alignment-control"
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Image alignment' ) }
+								value={ featuredImageAlign || 'none' }
+								onChange={ ( value ) =>
+									setAttributes( {
+										featuredImageAlign:
+											value !== 'none'
+												? value
+												: undefined,
+									} )
 								}
-							) }
-						</ToggleGroupControl>
-						<ToggleControl
-							__nextHasNoMarginBottom
+							>
+								{ imageAlignmentOptions.map(
+									( { value, icon, label } ) => {
+										return (
+											<ToggleGroupControlOptionIcon
+												key={ value }
+												value={ value }
+												icon={ icon }
+												label={ label }
+											/>
+										);
+									}
+								) }
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! addLinkToFeaturedImage }
 							label={ __( 'Add link to featured image' ) }
-							checked={ addLinkToFeaturedImage }
-							onChange={ ( value ) =>
+							onDeselect={ () =>
 								setAttributes( {
-									addLinkToFeaturedImage: value,
+									addLinkToFeaturedImage: false,
 								} )
 							}
-						/>
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ ( value ) =>
+									setAttributes( {
+										addLinkToFeaturedImage: value,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					</>
 				) }
-			</PanelBody>
-			<PanelBody title={ __( 'Sorting and filtering' ) }>
-				<QueryControls
-					{ ...{ order, orderBy } }
-					numberOfItems={ postsToShow }
-					onOrderChange={ ( value ) =>
-						setAttributes( { order: value } )
-					}
-					onOrderByChange={ ( value ) =>
-						setAttributes( { orderBy: value } )
-					}
-					onNumberOfItemsChange={ ( value ) =>
-						setAttributes( { postsToShow: value } )
+			</ToolsPanel>
+
+			<ToolsPanel
+				label={ __( 'Sorting and filtering' ) }
+				resetAll={ () =>
+					setAttributes( {
+						order: 'desc',
+						orderBy: 'date',
+						postsToShow: 5,
+						categories: undefined,
+						selectedAuthor: undefined,
+						columns: 3,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () =>
+						order !== 'desc' ||
+						orderBy !== 'date' ||
+						postsToShow !== 5 ||
+						categories?.length > 0 ||
+						!! selectedAuthor
 					}
-					categorySuggestions={ categorySuggestions }
-					onCategoryChange={ selectCategories }
-					selectedCategories={ categories }
-					onAuthorChange={ ( value ) =>
+					label={ __( 'Sort and filter' ) }
+					onDeselect={ () =>
 						setAttributes( {
-							selectedAuthor:
-								'' !== value ? Number( value ) : undefined,
+							order: 'desc',
+							orderBy: 'date',
+							postsToShow: 5,
+							categories: undefined,
+							selectedAuthor: undefined,
 						} )
 					}
-					authorList={ authorList ?? [] }
-					selectedAuthorId={ selectedAuthor }
-				/>
+					isShownByDefault
+				>
+					<QueryControls
+						{ ...{ order, orderBy } }
+						numberOfItems={ postsToShow }
+						onOrderChange={ ( value ) =>
+							setAttributes( { order: value } )
+						}
+						onOrderByChange={ ( value ) =>
+							setAttributes( { orderBy: value } )
+						}
+						onNumberOfItemsChange={ ( value ) =>
+							setAttributes( { postsToShow: value } )
+						}
+						categorySuggestions={ categorySuggestions }
+						onCategoryChange={ selectCategories }
+						selectedCategories={ categories }
+						onAuthorChange={ ( value ) =>
+							setAttributes( {
+								selectedAuthor:
+									'' !== value ? Number( value ) : undefined,
+							} )
+						}
+						authorList={ authorList ?? [] }
+						selectedAuthorId={ selectedAuthor }
+					/>
+				</ToolsPanelItem>
 
 				{ postLayout === 'grid' && (
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+					<ToolsPanelItem
+						hasValue={ () => columns !== 3 }
 						label={ __( 'Columns' ) }
-						value={ columns }
-						onChange={ ( value ) =>
-							setAttributes( { columns: value } )
-						}
-						min={ 2 }
-						max={
-							! postCount
-								? MAX_POSTS_COLUMNS
-								: Math.min( MAX_POSTS_COLUMNS, postCount )
+						onDeselect={ () =>
+							setAttributes( {
+								columns: 3,
+							} )
 						}
-						required
-					/>
+						isShownByDefault
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Columns' ) }
+							value={ columns }
+							onChange={ ( value ) =>
+								setAttributes( { columns: value } )
+							}
+							min={ 2 }
+							max={
+								! postCount
+									? MAX_POSTS_COLUMNS
+									: Math.min( MAX_POSTS_COLUMNS, postCount )
+							}
+							required
+						/>
+					</ToolsPanelItem>
 				) }
-			</PanelBody>
+			</ToolsPanel>
 		</>
 	);
 }