@wordpress/block-library 9.24.0 → 9.26.0

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

package/src/list/ordered-list-settings.js

@@ -8,70 +8,180 @@ import {
 	PanelBody,
 	ToggleControl,
 	SelectControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
 
-const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
-	<InspectorControls>
-		<PanelBody title={ __( 'Settings' ) }>
-			<SelectControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'List style' ) }
-				options={ [
-					{
-						label: __( 'Numbers' ),
-						value: 'decimal',
-					},
-					{
-						label: __( 'Uppercase letters' ),
-						value: 'upper-alpha',
-					},
-					{
-						label: __( 'Lowercase letters' ),
-						value: 'lower-alpha',
-					},
-					{
-						label: __( 'Uppercase Roman numerals' ),
-						value: 'upper-roman',
-					},
-					{
-						label: __( 'Lowercase Roman numerals' ),
-						value: 'lower-roman',
-					},
-				] }
-				value={ type }
-				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
-			/>
-			<TextControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'Start value' ) }
-				type="number"
-				onChange={ ( value ) => {
-					const int = parseInt( value, 10 );
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
+const LIST_STYLE_OPTIONS = [
+	{
+		label: __( 'Numbers' ),
+		value: 'decimal',
+	},
+	{
+		label: __( 'Uppercase letters' ),
+		value: 'upper-alpha',
+	},
+	{
+		label: __( 'Lowercase letters' ),
+		value: 'lower-alpha',
+	},
+	{
+		label: __( 'Uppercase Roman numerals' ),
+		value: 'upper-roman',
+	},
+	{
+		label: __( 'Lowercase Roman numerals' ),
+		value: 'lower-roman',
+	},
+];
+
+const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	return (
+		<InspectorControls>
+			{ Platform.isNative ? (
+				<PanelBody title={ __( 'Settings' ) }>
+					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'List style' ) }
+						options={ LIST_STYLE_OPTIONS }
+						value={ type }
+						onChange={ ( newValue ) =>
+							setAttributes( { type: newValue } )
+						}
+					/>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Start value' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const int = parseInt( value, 10 );
+
+							setAttributes( {
+								// It should be possible to unset the value,
+								// e.g. with an empty string.
+								start: isNaN( int ) ? undefined : int,
+							} );
+						} }
+						value={
+							Number.isInteger( start )
+								? start.toString( 10 )
+								: ''
+						}
+						step="1"
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Reverse order' ) }
+						checked={ reversed || false }
+						onChange={ ( value ) => {
+							setAttributes( {
+								// Unset the attribute if not reversed.
+								reversed: value || undefined,
+							} );
+						} }
+					/>
+				</PanelBody>
+			) : (
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							type: undefined,
+							start: undefined,
+							reversed: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'List style' ) }
+						isShownByDefault
+						hasValue={ () => !! type }
+						onDeselect={ () =>
+							setAttributes( {
+								type: undefined,
+							} )
+						}
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'List style' ) }
+							options={ LIST_STYLE_OPTIONS }
+							value={ type || 'decimal' }
+							onChange={ ( newValue ) =>
+								setAttributes( { type: newValue } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Start value' ) }
+						isShownByDefault
+						hasValue={ () => !! start }
+						onDeselect={ () =>
+							setAttributes( {
+								start: undefined,
+							} )
+						}
+					>
+						<TextControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Start value' ) }
+							type="number"
+							onChange={ ( value ) => {
+								const int = parseInt( value, 10 );
 
-					setAttributes( {
-						// It should be possible to unset the value,
-						// e.g. with an empty string.
-						start: isNaN( int ) ? undefined : int,
-					} );
-				} }
-				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
-				step="1"
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={ __( 'Reverse order' ) }
-				checked={ reversed || false }
-				onChange={ ( value ) => {
-					setAttributes( {
-						// Unset the attribute if not reversed.
-						reversed: value || undefined,
-					} );
-				} }
-			/>
-		</PanelBody>
-	</InspectorControls>
-);
+								setAttributes( {
+									// It should be possible to unset the value,
+									// e.g. with an empty string.
+									start: isNaN( int ) ? undefined : int,
+								} );
+							} }
+							value={
+								Number.isInteger( start )
+									? start.toString( 10 )
+									: ''
+							}
+							step="1"
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Reverse order' ) }
+						isShownByDefault
+						hasValue={ () => !! reversed }
+						onDeselect={ () =>
+							setAttributes( {
+								reversed: undefined,
+							} )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Reverse order' ) }
+							checked={ reversed || false }
+							onChange={ ( value ) => {
+								setAttributes( {
+									// Unset the attribute if not reversed.
+									reversed: value || undefined,
+								} );
+							} }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
+		</InspectorControls>
+	);
+};
 
 export default OrderedListSettings;