@wordpress/block-library 9.15.1 → 9.17.0

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,35 @@ export default function QueryTitleEdit( {
 		titleElement = (
 			<>
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<ToggleControl
-							__nextHasNoMarginBottom
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () =>
+							setAttributes( {
+								showSearchTerm: true,
+							} )
+						}
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<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/read-more/edit.js

@@ -6,31 +6,55 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function ReadMore( {
 	attributes: { content, linkTarget },
 	setAttributes,
 	insertBlocksAfter,
 } ) {
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<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 !== '_self' }
+						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>
 			<RichText
 				identifier="content"

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

@@ -25,16 +25,17 @@ 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';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
@@ -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,75 +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={ `${ 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/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/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/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>

package/src/site-logo/editor.scss

@@ -108,17 +108,16 @@
 	}
 }
 
-.block-library-site-logo__inspector-upload-container {
+.block-library-site-logo__inspector-media-replace-container {
+	// Ensure the dropzone is positioned to the size of the item.
 	position: relative;
+
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
 	// zone, we hide it for now.
 	.components-drop-zone__content-icon {
 		display: none;
 	}
-}
 
-.block-library-site-logo__inspector-upload-container,
-.block-library-site-logo__inspector-media-replace-container {
 	button.components-button {
 		color: $gray-900;
 		box-shadow: inset 0 0 0 1px $gray-400;
@@ -144,9 +143,7 @@
 		text-align: start;
 		text-align-last: center;
 	}
-}
 
-.block-library-site-logo__inspector-media-replace-container {
 	.components-dropdown {
 		display: block;
 	}

package/src/social-link/index.php

@@ -42,9 +42,9 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 
 	/**
 	 * Prepend URL with https:// if it doesn't appear to contain a scheme
-	 * and it's not a relative link starting with //.
+	 * and it's not a relative link or a fragment.
 	 */
-	if ( ! parse_url( $url, PHP_URL_SCHEME ) && ! str_starts_with( $url, '//' ) ) {
+	if ( ! parse_url( $url, PHP_URL_SCHEME ) && ! str_starts_with( $url, '//' ) && ! str_starts_with( $url, '#' ) ) {
 		$url = 'https://' . $url;
 	}
 

package/src/social-links/edit.js

@@ -269,6 +269,7 @@ export function SocialLinksEdit( props ) {
 										isShownByDefault: true,
 										resetAllFilter,
 										enableAlpha: true,
+										clearable: true,
 									},
 								] }
 								panelId={ clientId }