@wordpress/block-library 9.15.0 → 9.16.0

package/src/query/edit/inspector-controls/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	TextControl,
 	SelectControl,
 	RangeControl,
@@ -187,110 +186,171 @@ export default function QueryInspectorControls( props ) {
 	return (
 		<>
 			{ showSettingsPanel && (
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setQuery( {
+							postType: 'post',
+							order: 'desc',
+							orderBy: 'date',
+							sticky: '',
+							inherit: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
 					{ showInheritControl && (
-						<ToggleGroupControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
+						<ToolsPanelItem
+							hasValue={ () => ! inherit }
 							label={ __( 'Query type' ) }
-							isBlock
-							onChange={ ( value ) => {
-								setQuery( { inherit: value === 'default' } );
-							} }
-							help={
-								inherit
-									? __(
-											'Display a list of posts or custom post types based on the current template.'
-									  )
-									: __(
-											'Display a list of posts or custom post types based on specific criteria.'
-									  )
-							}
-							value={ !! inherit ? 'default' : 'custom' }
+							onDeselect={ () => setQuery( { inherit: true } ) }
+							isShownByDefault
 						>
-							<ToggleGroupControlOption
-								value="default"
-								label={ __( 'Default' ) }
-							/>
-							<ToggleGroupControlOption
-								value="custom"
-								label={ __( 'Custom' ) }
-							/>
-						</ToggleGroupControl>
-					) }
-					{ showPostTypeControl &&
-						( postTypesSelectOptions.length > 2 ? (
-							<SelectControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								options={ postTypesSelectOptions }
-								value={ postType }
-								label={ postTypeControlLabel }
-								onChange={ onPostTypeChange }
-								help={ postTypeControlHelp }
-							/>
-						) : (
 							<ToggleGroupControl
-								__nextHasNoMarginBottom
 								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Query type' ) }
 								isBlock
-								value={ postType }
-								label={ postTypeControlLabel }
-								onChange={ onPostTypeChange }
-								help={ postTypeControlHelp }
+								onChange={ ( value ) => {
+									setQuery( {
+										inherit: value === 'default',
+									} );
+								} }
+								help={
+									inherit
+										? __(
+												'Display a list of posts or custom post types based on the current template.'
+										  )
+										: __(
+												'Display a list of posts or custom post types based on specific criteria.'
+										  )
+								}
+								value={ !! inherit ? 'default' : 'custom' }
 							>
-								{ postTypesSelectOptions.map( ( option ) => (
-									<ToggleGroupControlOption
-										key={ option.value }
-										value={ option.value }
-										label={ option.label }
-									/>
-								) ) }
+								<ToggleGroupControlOption
+									value="default"
+									label={ __( 'Default' ) }
+								/>
+								<ToggleGroupControlOption
+									value="custom"
+									label={ __( 'Custom' ) }
+								/>
 							</ToggleGroupControl>
-						) ) }
+						</ToolsPanelItem>
+					) }
 
-					{ showColumnsControl && (
-						<>
-							<RangeControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Columns' ) }
-								value={ displayLayout.columns }
-								onChange={ ( value ) =>
-									setDisplayLayout( {
-										columns: value,
-									} )
-								}
-								min={ 2 }
-								max={ Math.max( 6, displayLayout.columns ) }
-							/>
-							{ displayLayout.columns > 6 && (
-								<Notice
-									status="warning"
-									isDismissible={ false }
+					{ showPostTypeControl && (
+						<ToolsPanelItem
+							hasValue={ () => postType !== 'post' }
+							label={ postTypeControlLabel }
+							onDeselect={ () => onPostTypeChange( 'post' ) }
+							isShownByDefault
+						>
+							{ postTypesSelectOptions.length > 2 ? (
+								<SelectControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									options={ postTypesSelectOptions }
+									value={ postType }
+									label={ postTypeControlLabel }
+									onChange={ onPostTypeChange }
+									help={ postTypeControlHelp }
+								/>
+							) : (
+								<ToggleGroupControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									isBlock
+									value={ postType }
+									label={ postTypeControlLabel }
+									onChange={ onPostTypeChange }
+									help={ postTypeControlHelp }
 								>
-									{ __(
-										'This column count exceeds the recommended amount and may cause visual breakage.'
+									{ postTypesSelectOptions.map(
+										( option ) => (
+											<ToggleGroupControlOption
+												key={ option.value }
+												value={ option.value }
+												label={ option.label }
+											/>
+										)
 									) }
-								</Notice>
+								</ToggleGroupControl>
 							) }
-						</>
+						</ToolsPanelItem>
 					) }
+
+					{ showColumnsControl && (
+						<ToolsPanelItem
+							hasValue={ () => displayLayout?.columns !== 2 }
+							label={ __( 'Columns' ) }
+							onDeselect={ () =>
+								setDisplayLayout( { columns: 2 } )
+							}
+							isShownByDefault
+						>
+							<>
+								<RangeControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Columns' ) }
+									value={ displayLayout.columns }
+									onChange={ ( value ) =>
+										setDisplayLayout( {
+											columns: value,
+										} )
+									}
+									min={ 2 }
+									max={ Math.max( 6, displayLayout.columns ) }
+								/>
+								{ displayLayout.columns > 6 && (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'This column count exceeds the recommended amount and may cause visual breakage.'
+										) }
+									</Notice>
+								) }
+							</>
+						</ToolsPanelItem>
+					) }
+
 					{ showOrderControl && (
-						<OrderControl
-							{ ...{ order, orderBy } }
-							onChange={ setQuery }
-						/>
+						<ToolsPanelItem
+							hasValue={ () =>
+								order !== 'desc' || orderBy !== 'date'
+							}
+							label={ __( 'Order by' ) }
+							onDeselect={ () =>
+								setQuery( { order: 'desc', orderBy: 'date' } )
+							}
+							isShownByDefault
+						>
+							<OrderControl
+								{ ...{ order, orderBy } }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
 					) }
+
 					{ showStickyControl && (
-						<StickyControl
-							value={ sticky }
-							onChange={ ( value ) =>
-								setQuery( { sticky: value } )
-							}
-						/>
+						<ToolsPanelItem
+							hasValue={ () => !! sticky }
+							label={ __( 'Sticky posts' ) }
+							onDeselect={ () => setQuery( { sticky: '' } ) }
+							isShownByDefault
+						>
+							<StickyControl
+								value={ sticky }
+								onChange={ ( value ) =>
+									setQuery( { sticky: value } )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			) }
 			{ ! inherit && showDisplayPanel && (
 				<ToolsPanel

package/src/query/editor.scss

@@ -1,24 +1,3 @@
-.block-library-query-toolbar__popover .components-popover__content {
-	min-width: 230px;
-
-	.block-library-query-toolbar__popover-number-control {
-		margin-bottom: $grid-unit-10;
-	}
-}
-
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-gap: $grid-unit-10;
-
-	.block-editor-block-patterns-list__list-item {
-		margin-bottom: 0;
-		.block-editor-block-preview__container {
-			max-height: 250px;
-		}
-	}
-}
-
 .block-library-query-pattern__selection-modal {
 
 	.block-editor-block-patterns-list {
@@ -45,22 +24,12 @@
 	}
 }
 
-.block-library-query-toolspanel__design {
-	.block-library-query-pattern__selection-content {
-		margin-top: $grid-unit-10;
-	}
-}
-
 .wp-block-query__enhanced-pagination-modal {
 	@include break-small() {
 		max-width: $break-mobile;
 	}
 }
 
-.wp-block-query__enhanced-pagination-notice {
-	margin: 0;
-}
-
 .block-editor-block-settings-menu__popover {
 	&.is-expanded {
 		overflow-y: scroll;

package/src/query/utils.js

@@ -81,7 +81,7 @@ export const getValueFromObjectPath = ( object, path ) => {
  *
  * @param {Object[]} entities The array of entities.
  * @param {string}   path     The path to map a `name` property from the entity.
- * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
+ * @return {IHasNameAndId[]} An array of entities that now implement the `IHasNameAndId` interface.
  */
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {

package/src/query-title/edit.js

@@ -14,13 +14,18 @@ import {
 	Warning,
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useArchiveLabel } from './use-archive-label';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
@@ -36,6 +41,7 @@ export default function QueryTitleEdit( {
 	setAttributes,
 } ) {
 	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
@@ -89,16 +95,35 @@ export default function QueryTitleEdit( {
 		titleElement = (
 			<>
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<ToggleControl
-							__nextHasNoMarginBottom
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () =>
+							setAttributes( {
+								showPrefix: true,
+							} )
+						}
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
+							hasValue={ () => ! showPrefix }
 							label={ __( 'Show archive type in title' ) }
-							onChange={ () =>
-								setAttributes( { showPrefix: ! showPrefix } )
+							onDeselect={ () =>
+								setAttributes( { showPrefix: true } )
 							}
-							checked={ showPrefix }
-						/>
-					</PanelBody>
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show archive type in title' ) }
+								onChange={ () =>
+									setAttributes( {
+										showPrefix: ! showPrefix,
+									} )
+								}
+								checked={ showPrefix }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 				<TagName { ...blockProps }>{ title }</TagName>
 			</>
@@ -109,18 +134,34 @@ export default function QueryTitleEdit( {
 		titleElement = (
 			<>
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<ToggleControl
-							__nextHasNoMarginBottom
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () =>
+							setAttributes( {
+								showSearchTerm: true,
+							} )
+						}
+					>
+						<ToolsPanelItem
+							hasValue={ () => ! showSearchTerm }
 							label={ __( 'Show search term in title' ) }
-							onChange={ () =>
-								setAttributes( {
-									showSearchTerm: ! showSearchTerm,
-								} )
+							onDeselect={ () =>
+								setAttributes( { showSearchTerm: true } )
 							}
-							checked={ showSearchTerm }
-						/>
-					</PanelBody>
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show search term in title' ) }
+								onChange={ () =>
+									setAttributes( {
+										showSearchTerm: ! showSearchTerm,
+									} )
+								}
+								checked={ showSearchTerm }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 
 				<TagName { ...blockProps }>

package/src/query-total/block.json

@@ -45,7 +45,13 @@
 			"radius": true,
 			"color": true,
 			"width": true,
-			"style": true
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-query-total"

package/src/quote/transforms.js

@@ -67,7 +67,7 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ '*' ],
 			isMatch: ( {}, blocks ) => {
-				// When a single block is selected make the tranformation
+				// When a single block is selected make the transformation
 				// available only to specific blocks that make sense.
 				if ( blocks.length === 1 ) {
 					return [

package/src/rss/block.json

@@ -46,6 +46,12 @@
 		"html": false,
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"color": {
+			"background": true,
+			"text": true,
+			"gradients": true,
+			"link": true
 		}
 	},
 	"editorStyle": "wp-block-rss-editor",

package/src/rss/edit.js

@@ -77,6 +77,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						<InputControl
 							__next40pxDefaultSize
 							label={ label }
+							type="url"
 							hideLabelFromVision
 							placeholder={ __( 'Enter URL here…' ) }
 							value={ feedURL }

package/src/search/edit.js

@@ -34,7 +34,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
@@ -470,7 +470,11 @@ export default function SearchEdit( {
 									<ToggleGroupControlOption
 										key={ widthValue }
 										value={ widthValue }
-										label={ `${ widthValue }%` }
+										label={ sprintf(
+											/* translators: Percentage value. */
+											__( '%d%%' ),
+											widthValue
+										) }
 									/>
 								);
 							} ) }

package/src/separator/deprecated.scss

@@ -1,5 +1,5 @@
 .wp-block-separator {
-	// V1 version of the block expects a default opactiy of 0.4 to be set.
+	// V1 version of the block expects a default opacity of 0.4 to be set.
 	&.has-css-opacity {
 		opacity: 0.4;
 	}

package/src/site-logo/edit.js

@@ -33,8 +33,6 @@ import {
 	BlockControls,
 	InspectorControls,
 	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadCheck,
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
@@ -347,29 +345,24 @@ const SiteLogo = ( {
 
 // This is a light wrapper around MediaReplaceFlow because the block has two
 // different MediaReplaceFlows, one for the inspector and one for the toolbar.
-function SiteLogoReplaceFlow( {
-	mediaURL,
-	onRemoveLogo,
-	...mediaReplaceProps
-} ) {
+function SiteLogoReplaceFlow( { mediaURL, ...mediaReplaceProps } ) {
 	return (
 		<MediaReplaceFlow
 			{ ...mediaReplaceProps }
 			mediaURL={ mediaURL }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			accept={ ACCEPT_MEDIA_STRING }
-			onReset={ onRemoveLogo }
 		/>
 	);
 }
 
-const InspectorLogoPreview = ( { mediaItemData = {}, itemGroupProps } ) => {
+const InspectorLogoPreview = ( { media, itemGroupProps } ) => {
 	const {
 		alt_text: alt,
 		source_url: logoUrl,
 		slug: logoSlug,
 		media_details: logoMediaDetails,
-	} = mediaItemData;
+	} = media ?? {};
 	const logoLabel = logoMediaDetails?.sizes?.full?.file || logoSlug;
 	return (
 		<ItemGroup { ...itemGroupProps } as="span">
@@ -506,6 +499,11 @@ export default function LogoEdit( {
 	};
 
 	const onFilesDrop = ( filesList ) => {
+		if ( filesList?.length > 1 ) {
+			onUploadError( __( 'Only one image can be used as a site logo.' ) );
+			return;
+		}
+
 		getSettings().mediaUpload( {
 			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList,
@@ -517,7 +515,6 @@ export default function LogoEdit( {
 				onInitialSelectLogo( image );
 			},
 			onError: onUploadError,
-			onRemoveLogo,
 		} );
 	};
 
@@ -526,7 +523,7 @@ export default function LogoEdit( {
 		name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),
 		onSelect: onSelectLogo,
 		onError: onUploadError,
-		onRemoveLogo,
+		onReset: onRemoveLogo,
 	};
 	const controls = canUserEdit && (
 		<BlockControls group="other">
@@ -599,50 +596,40 @@ export default function LogoEdit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Media' ) }>
 				<div className="block-library-site-logo__inspector-media-replace-container">
-					{ ! canUserEdit && !! logoUrl && (
+					{ ! canUserEdit ? (
 						<InspectorLogoPreview
-							mediaItemData={ mediaItemData }
+							media={ mediaItemData }
 							itemGroupProps={ {
 								isBordered: true,
 								className:
 									'block-library-site-logo__inspector-readonly-logo-preview',
 							} }
 						/>
-					) }
-					{ canUserEdit && !! logoUrl && (
-						<SiteLogoReplaceFlow
-							{ ...mediaReplaceFlowProps }
-							name={
-								<InspectorLogoPreview
-									mediaItemData={ mediaItemData }
-								/>
-							}
-							popoverProps={ {} }
-						/>
-					) }
-					{ canUserEdit && ! logoUrl && (
-						<MediaUploadCheck>
-							<MediaUpload
-								onSelect={ onInitialSelectLogo }
-								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								render={ ( { open } ) => (
-									<div className="block-library-site-logo__inspector-upload-container">
-										<Button
-											__next40pxDefaultSize
-											onClick={ open }
-											variant="secondary"
-										>
-											{ isLoading ? (
-												<Spinner />
-											) : (
-												__( 'Choose logo' )
-											) }
-										</Button>
-										<DropZone onFilesDrop={ onFilesDrop } />
-									</div>
+					) : (
+						<>
+							<SiteLogoReplaceFlow
+								{ ...mediaReplaceFlowProps }
+								name={
+									!! logoUrl ? (
+										<InspectorLogoPreview
+											media={ mediaItemData }
+										/>
+									) : (
+										__( 'Choose logo' )
+									)
+								}
+								renderToggle={ ( props ) => (
+									<Button { ...props } __next40pxDefaultSize>
+										{ temporaryURL ? (
+											<Spinner />
+										) : (
+											props.children
+										) }
+									</Button>
 								) }
 							/>
-						</MediaUploadCheck>
+							<DropZone onFilesDrop={ onFilesDrop } />
+						</>
 					) }
 				</div>
 			</PanelBody>