@wordpress/block-library 9.16.0 → 9.17.0

package/build-style/navigation-link/editor.css

@@ -163,6 +163,9 @@
   background-repeat: repeat-x;
   padding-bottom: 0.1em;
 }
+.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-invalid span, .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-draft span {
+  --wp-underline-color: var(--wp--preset--color--vivid-red);
+}
 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;
 }

package/build-style/paragraph/editor-rtl.css

@@ -113,4 +113,8 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
   rotate: 180deg;
+}
+
+.is-zoomed-out .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
+  opacity: 0;
 }

package/build-style/paragraph/editor.css

@@ -113,4 +113,8 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
   rotate: 180deg;
+}
+
+.is-zoomed-out .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
+  opacity: 0;
 }

package/build-style/post-featured-image/editor-rtl.css

@@ -192,7 +192,7 @@
   width: 100%;
 }
 .wp-block-post-featured-image > a {
-  cursor: default;
+  pointer-events: none;
 }
 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,

package/build-style/post-featured-image/editor.css

@@ -192,7 +192,7 @@
   width: 100%;
 }
 .wp-block-post-featured-image > a {
-  cursor: default;
+  pointer-events: none;
 }
 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.16.0",
+	"version": "9.17.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.16.0",
-		"@wordpress/api-fetch": "^7.16.0",
-		"@wordpress/autop": "^4.16.0",
-		"@wordpress/blob": "^4.16.0",
-		"@wordpress/block-editor": "^14.11.0",
-		"@wordpress/blocks": "^14.5.0",
-		"@wordpress/components": "^29.2.0",
-		"@wordpress/compose": "^7.16.0",
-		"@wordpress/core-data": "^7.16.0",
-		"@wordpress/data": "^10.16.0",
-		"@wordpress/date": "^5.16.0",
-		"@wordpress/deprecated": "^4.16.0",
-		"@wordpress/dom": "^4.16.0",
-		"@wordpress/element": "^6.16.0",
-		"@wordpress/escape-html": "^3.16.0",
-		"@wordpress/hooks": "^4.16.0",
-		"@wordpress/html-entities": "^4.16.0",
-		"@wordpress/i18n": "^5.16.0",
-		"@wordpress/icons": "^10.16.0",
-		"@wordpress/interactivity": "^6.16.0",
-		"@wordpress/interactivity-router": "^2.16.0",
-		"@wordpress/keyboard-shortcuts": "^5.16.0",
-		"@wordpress/keycodes": "^4.16.0",
-		"@wordpress/notices": "^5.16.0",
-		"@wordpress/patterns": "^2.16.0",
-		"@wordpress/primitives": "^4.16.0",
-		"@wordpress/private-apis": "^1.16.0",
-		"@wordpress/reusable-blocks": "^5.16.0",
-		"@wordpress/rich-text": "^7.16.0",
-		"@wordpress/server-side-render": "^5.16.0",
-		"@wordpress/url": "^4.16.0",
-		"@wordpress/viewport": "^6.16.0",
-		"@wordpress/wordcount": "^4.16.0",
+		"@wordpress/a11y": "^4.17.0",
+		"@wordpress/api-fetch": "^7.17.0",
+		"@wordpress/autop": "^4.17.0",
+		"@wordpress/blob": "^4.17.0",
+		"@wordpress/block-editor": "^14.12.0",
+		"@wordpress/blocks": "^14.6.0",
+		"@wordpress/components": "^29.3.0",
+		"@wordpress/compose": "^7.17.0",
+		"@wordpress/core-data": "^7.17.0",
+		"@wordpress/data": "^10.17.0",
+		"@wordpress/date": "^5.17.0",
+		"@wordpress/deprecated": "^4.17.0",
+		"@wordpress/dom": "^4.17.0",
+		"@wordpress/element": "^6.17.0",
+		"@wordpress/escape-html": "^3.17.0",
+		"@wordpress/hooks": "^4.17.0",
+		"@wordpress/html-entities": "^4.17.0",
+		"@wordpress/i18n": "^5.17.0",
+		"@wordpress/icons": "^10.17.0",
+		"@wordpress/interactivity": "^6.17.0",
+		"@wordpress/interactivity-router": "^2.17.0",
+		"@wordpress/keyboard-shortcuts": "^5.17.0",
+		"@wordpress/keycodes": "^4.17.0",
+		"@wordpress/notices": "^5.17.0",
+		"@wordpress/patterns": "^2.17.0",
+		"@wordpress/primitives": "^4.17.0",
+		"@wordpress/private-apis": "^1.17.0",
+		"@wordpress/reusable-blocks": "^5.17.0",
+		"@wordpress/rich-text": "^7.17.0",
+		"@wordpress/server-side-render": "^5.17.0",
+		"@wordpress/url": "^4.17.0",
+		"@wordpress/viewport": "^6.17.0",
+		"@wordpress/wordcount": "^4.17.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f48b9f56629e400891abb5ae491504de475237ff"
+	"gitHead": "68a831c3178197fe87db284d4b94e5743bfb6b6c"
 }

package/src/archives/edit.js

@@ -61,7 +61,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						<ToolsPanelItem
 							label={ __( 'Show label' ) }
 							isShownByDefault
-							hasValue={ () => showLabel }
+							hasValue={ () => ! showLabel }
 							onDeselect={ () =>
 								setAttributes( { showLabel: false } )
 							}
@@ -102,7 +102,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					<ToolsPanelItem
 						label={ __( 'Group by' ) }
 						isShownByDefault
-						hasValue={ () => !! type }
+						hasValue={ () => type !== 'monthly' }
 						onDeselect={ () =>
 							setAttributes( { type: 'monthly' } )
 						}

package/src/categories/edit.js

@@ -7,12 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	Placeholder,
 	SelectControl,
 	Spinner,
 	ToggleControl,
 	VisuallyHidden,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
@@ -25,6 +26,11 @@ import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function CategoriesEdit( {
 	attributes: {
 		displayAsDropdown,
@@ -180,72 +186,154 @@ export default function CategoriesEdit( {
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<TagName { ...blockProps }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							taxonomy: 'category',
+							displayAsDropdown: false,
+							showHierarchy: false,
+							showPostCounts: false,
+							showOnlyTopLevel: false,
+							showEmpty: false,
+							showLabel: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
 					{ Array.isArray( taxonomies ) && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+						<ToolsPanelItem
+							hasValue={ () => {
+								return taxonomySlug !== 'category';
+							} }
 							label={ __( 'Taxonomy' ) }
-							options={ taxonomies.map( ( t ) => ( {
-								label: t.name,
-								value: t.slug,
-							} ) ) }
-							value={ taxonomySlug }
-							onChange={ ( selectedTaxonomy ) =>
-								setAttributes( {
-									taxonomy: selectedTaxonomy,
-								} )
-							}
-						/>
+							onDeselect={ () => {
+								setAttributes( { taxonomy: 'category' } );
+							} }
+							isShownByDefault
+						>
+							<SelectControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Taxonomy' ) }
+								options={ taxonomies.map( ( t ) => ( {
+									label: t.name,
+									value: t.slug,
+								} ) ) }
+								value={ taxonomySlug }
+								onChange={ ( selectedTaxonomy ) =>
+									setAttributes( {
+										taxonomy: selectedTaxonomy,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
+						hasValue={ () => !! displayAsDropdown }
 						label={ __( 'Display as dropdown' ) }
-						checked={ displayAsDropdown }
-						onChange={ toggleAttribute( 'displayAsDropdown' ) }
-					/>
-					{ displayAsDropdown && (
+						onDeselect={ () =>
+							setAttributes( { displayAsDropdown: false } )
+						}
+						isShownByDefault
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							className="wp-block-categories__indentation"
-							label={ __( 'Show label' ) }
-							checked={ showLabel }
-							onChange={ toggleAttribute( 'showLabel' ) }
+							label={ __( 'Display as dropdown' ) }
+							checked={ displayAsDropdown }
+							onChange={ toggleAttribute( 'displayAsDropdown' ) }
 						/>
+					</ToolsPanelItem>
+					{ displayAsDropdown && (
+						<ToolsPanelItem
+							hasValue={ () => ! showLabel }
+							label={ __( 'Show label' ) }
+							onDeselect={ () =>
+								setAttributes( { showLabel: true } )
+							}
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								className="wp-block-categories__indentation"
+								label={ __( 'Show label' ) }
+								checked={ showLabel }
+								onChange={ toggleAttribute( 'showLabel' ) }
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
+						hasValue={ () => !! showPostCounts }
 						label={ __( 'Show post counts' ) }
-						checked={ showPostCounts }
-						onChange={ toggleAttribute( 'showPostCounts' ) }
-					/>
-					{ isHierarchicalTaxonomy && (
+						onDeselect={ () =>
+							setAttributes( { showPostCounts: false } )
+						}
+						isShownByDefault
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Show only top level terms' ) }
-							checked={ showOnlyTopLevel }
-							onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+							label={ __( 'Show post counts' ) }
+							checked={ showPostCounts }
+							onChange={ toggleAttribute( 'showPostCounts' ) }
 						/>
+					</ToolsPanelItem>
+					{ isHierarchicalTaxonomy && (
+						<ToolsPanelItem
+							hasValue={ () => !! showOnlyTopLevel }
+							label={ __( 'Show only top level terms' ) }
+							onDeselect={ () =>
+								setAttributes( { showOnlyTopLevel: false } )
+							}
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show only top level terms' ) }
+								checked={ showOnlyTopLevel }
+								onChange={ toggleAttribute(
+									'showOnlyTopLevel'
+								) }
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
+						hasValue={ () => !! showEmpty }
 						label={ __( 'Show empty terms' ) }
-						checked={ showEmpty }
-						onChange={ toggleAttribute( 'showEmpty' ) }
-					/>
-					{ isHierarchicalTaxonomy && ! showOnlyTopLevel && (
+						onDeselect={ () =>
+							setAttributes( { showEmpty: false } )
+						}
+						isShownByDefault
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Show hierarchy' ) }
-							checked={ showHierarchy }
-							onChange={ toggleAttribute( 'showHierarchy' ) }
+							label={ __( 'Show empty terms' ) }
+							checked={ showEmpty }
+							onChange={ toggleAttribute( 'showEmpty' ) }
 						/>
+					</ToolsPanelItem>
+					{ isHierarchicalTaxonomy && ! showOnlyTopLevel && (
+						<ToolsPanelItem
+							hasValue={ () => !! showHierarchy }
+							label={ __( 'Show hierarchy' ) }
+							onDeselect={ () =>
+								setAttributes( { showHierarchy: false } )
+							}
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show hierarchy' ) }
+								checked={ showHierarchy }
+								onChange={ toggleAttribute( 'showHierarchy' ) }
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ isResolving && (
 				<Placeholder icon={ pin } label={ __( 'Terms' ) }>

package/src/comments/edit/comments-inspector-controls.js

@@ -5,18 +5,15 @@ import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { htmlElementMessages } from '../../utils/messages';
+
 export default function CommentsInspectorControls( {
 	attributes: { tagName },
 	setAttributes,
 } ) {
-	const htmlElementMessages = {
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-	};
 	return (
 		<InspectorControls>
 			<InspectorControls group="advanced">

package/src/comments-pagination/block.json

@@ -18,6 +18,11 @@
 			"default": "none"
 		}
 	},
+	"example": {
+		"attributes": {
+			"paginationArrow": "none"
+		}
+	},
 	"providesContext": {
 		"comments/paginationArrow": "paginationArrow"
 	},

package/src/cover/edit/inspector-controls.js

@@ -36,6 +36,7 @@ import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
+import { htmlElementMessages } from '../../utils/messages';
 
 const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -183,27 +184,6 @@ export default function CoverInspectorControls( {
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
-	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.).'
-		),
-	};
-
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (

package/src/details/block.json

@@ -17,8 +17,17 @@
 			"source": "rich-text",
 			"selector": "summary"
 		},
+		"name": {
+			"type": "string",
+			"source": "attribute",
+			"attribute": "name",
+			"selector": ".wp-block-details"
+		},
 		"allowedBlocks": {
 			"type": "array"
+		},
+		"placeholder": {
+			"type": "string"
 		}
 	},
 	"supports": {

package/src/details/edit.js

@@ -8,6 +8,7 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import {
+	TextControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -30,7 +31,8 @@ const TEMPLATE = [
 ];
 
 function DetailsEdit( { attributes, setAttributes } ) {
-	const { showContent, summary, allowedBlocks } = attributes;
+	const { name, showContent, summary, allowedBlocks, placeholder } =
+		attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -75,6 +77,20 @@ function DetailsEdit( { attributes, setAttributes } ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name attribute' ) }
+					value={ name || '' }
+					onChange={ ( newName ) =>
+						setAttributes( { name: newName } )
+					}
+					help={ __(
+						'Enables multiple Details blocks with the same name attribute to be connected, with only one open at a time.'
+					) }
+				/>
+			</InspectorControls>
 			<details { ...innerBlocksProps } open={ isOpen }>
 				<summary
 					onClick={ ( event ) => {
@@ -85,7 +101,7 @@ function DetailsEdit( { attributes, setAttributes } ) {
 					<RichText
 						identifier="summary"
 						aria-label={ __( 'Write summary' ) }
-						placeholder={ __( 'Write summary…' ) }
+						placeholder={ placeholder || __( 'Write summary…' ) }
 						allowedFormats={ [] }
 						withoutInteractiveFormatting
 						value={ summary }

package/src/details/save.js

@@ -4,12 +4,16 @@
 import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { showContent } = attributes;
+	const { name, showContent } = attributes;
 	const summary = attributes.summary ? attributes.summary : 'Details';
 	const blockProps = useBlockProps.save();
 
 	return (
-		<details { ...blockProps } open={ showContent }>
+		<details
+			{ ...blockProps }
+			name={ name || undefined }
+			open={ showContent }
+		>
 			<summary>
 				<RichText.Content value={ summary } />
 			</summary>

package/src/embed/transforms.js

@@ -7,6 +7,7 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import metadata from './block.json';
+import { removeAspectRatioClasses } from './util';
 
 const { name: EMBED_BLOCK } = metadata;
 
@@ -33,13 +34,14 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			isMatch: ( { url } ) => !! url,
-			transform: ( { url, caption } ) => {
+			transform: ( { url, caption, className } ) => {
 				let value = `<a href="${ url }">${ url }</a>`;
 				if ( caption?.trim() ) {
 					value += `<br />${ caption }`;
 				}
 				return createBlock( 'core/paragraph', {
 					content: value,
+					className: removeAspectRatioClasses( className ),
 				} );
 			},
 		},

package/src/form/variations.js

@@ -61,7 +61,7 @@ const variations = [
 	},
 	{
 		name: 'wp-privacy-form',
-		title: __( 'Experimental privacy request form' ),
+		title: __( 'Experimental Privacy Request Form' ),
 		keywords: [ 'GDPR' ],
 		description: __( 'A form to request data exports and/or deletion.' ),
 		attributes: {

package/src/gallery/editor.scss

@@ -117,10 +117,6 @@
 		opacity: 0.3;
 	}
 
-	.is-selected .block-library-gallery-item__inline-menu {
-		display: inline-flex;
-	}
-
 	.block-editor-media-placeholder {
 		margin: 0;
 		height: 100%;
@@ -131,58 +127,6 @@
 	}
 }
 
-.block-library-gallery-item__inline-menu {
-	display: none;
-	position: absolute;
-	top: -2px;
-	margin: $grid-unit-10;
-	z-index: z-index(".block-library-gallery-item__inline-menu");
-	border-radius: $radius-small;
-	background: $white;
-	border: $border-width solid $gray-900;
-
-	@media not (prefers-reduced-motion) {
-		transition: box-shadow 0.2s ease-out;
-	}
-
-	&:hover {
-		box-shadow: $elevation-x-small;
-	}
-
-	@include break-small() {
-		// Use smaller buttons to fit when there are many columns.
-		.columns-7 &,
-		.columns-8 & {
-			padding: $grid-unit-05 * 0.5;
-		}
-	}
-
-	.components-button.has-icon {
-		&:not(:focus) {
-			border: none;
-			box-shadow: none;
-		}
-
-		@include break-small() {
-			// Use smaller buttons to fit when there are many columns.
-			.columns-7 &,
-			.columns-8 & {
-				padding: 0;
-				width: inherit;
-				height: inherit;
-			}
-		}
-	}
-
-	&.is-left {
-		left: -2px;
-	}
-
-	&.is-right {
-		right: -2px;
-	}
-}
-
 .wp-block-gallery ul.blocks-gallery-grid {
 	padding: 0;
 	// Some themes give all <ul> default margin instead of padding.