@wordpress/block-library 9.15.1 → 9.17.0

package/build-style/style.css

@@ -1617,7 +1617,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
   vertical-align: bottom;
   box-sizing: border-box;
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   .wp-block-image img.hide {
     visibility: hidden;
   }
@@ -1740,7 +1740,11 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
   text-align: center;
   padding: 0;
   border-radius: 4px;
-  transition: opacity 0.2s ease;
+}
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-container button {
+    transition: opacity 0.2s ease;
+  }
 }
 .wp-lightbox-container button:focus-visible {
   outline: 3px auto rgba(90, 90, 90, 0.25);
@@ -1834,18 +1838,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]) {
 }
 .wp-lightbox-overlay.active {
   visibility: visible;
-  animation: both turn-on-visibility 0.25s;
 }
-.wp-lightbox-overlay.active img {
-  animation: both turn-on-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active {
+    animation: both turn-on-visibility 0.25s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) {
-  animation: both turn-off-visibility 0.35s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.active img {
+    animation: both turn-on-visibility 0.35s;
+  }
 }
-.wp-lightbox-overlay.show-closing-animation:not(.active) img {
-  animation: both turn-off-visibility 0.25s;
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) {
+    animation: both turn-off-visibility 0.35s;
+  }
 }
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
+  .wp-lightbox-overlay.show-closing-animation:not(.active) img {
+    animation: both turn-off-visibility 0.25s;
+  }
+}
+@media not (prefers-reduced-motion) {
   .wp-lightbox-overlay.zoom.active {
     opacity: 1;
     visibility: visible;
@@ -2345,7 +2359,6 @@ ul {
   flex-direction: column;
   align-items: normal;
   opacity: 0;
-  transition: opacity 0.1s linear;
   visibility: hidden;
   width: 0;
   height: 0;
@@ -2353,6 +2366,11 @@ ul {
   left: -1px;
   top: 100%;
 }
+@media not (prefers-reduced-motion) {
+  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
+    transition: opacity 0.1s linear;
+  }
+}
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
@@ -2585,8 +2603,6 @@ button.wp-block-navigation-item__content {
   display: flex;
   flex-direction: column;
   background-color: inherit;
-  animation: overlay-menu__fade-in-animation 0.1s ease-out;
-  animation-fill-mode: forwards;
   padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
   padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
@@ -2594,10 +2610,10 @@ button.wp-block-navigation-item__content {
   overflow: auto;
   z-index: 100000;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-navigation__responsive-container.is-menu-open {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: overlay-menu__fade-in-animation 0.1s ease-out;
+    animation-fill-mode: forwards;
   }
 }
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
@@ -3575,20 +3591,17 @@ ul.wp-block-rss.is-grid li {
 .wp-block-social-link {
   display: block;
   border-radius: 9999px;
-  transition: transform 0.1s ease;
   height: auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .wp-block-social-link {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: transform 0.1s ease;
   }
 }
 .wp-block-social-link a {
   align-items: center;
   display: flex;
   line-height: 0;
-  transition: transform 0.1s ease;
 }
 .wp-block-social-link:hover {
   transform: scale(1.1);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.15.1",
+	"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.15.1",
-		"@wordpress/api-fetch": "^7.15.1",
-		"@wordpress/autop": "^4.15.0",
-		"@wordpress/blob": "^4.15.0",
-		"@wordpress/block-editor": "^14.10.1",
-		"@wordpress/blocks": "^14.4.1",
-		"@wordpress/components": "^29.1.1",
-		"@wordpress/compose": "^7.15.1",
-		"@wordpress/core-data": "^7.15.1",
-		"@wordpress/data": "^10.15.1",
-		"@wordpress/date": "^5.15.1",
-		"@wordpress/deprecated": "^4.15.1",
-		"@wordpress/dom": "^4.15.1",
-		"@wordpress/element": "^6.15.1",
-		"@wordpress/escape-html": "^3.15.0",
-		"@wordpress/hooks": "^4.15.0",
-		"@wordpress/html-entities": "^4.15.0",
-		"@wordpress/i18n": "^5.15.1",
-		"@wordpress/icons": "^10.15.1",
-		"@wordpress/interactivity": "^6.15.0",
-		"@wordpress/interactivity-router": "^2.15.1",
-		"@wordpress/keyboard-shortcuts": "^5.15.1",
-		"@wordpress/keycodes": "^4.15.1",
-		"@wordpress/notices": "^5.15.1",
-		"@wordpress/patterns": "^2.15.1",
-		"@wordpress/primitives": "^4.15.1",
-		"@wordpress/private-apis": "^1.15.0",
-		"@wordpress/reusable-blocks": "^5.15.1",
-		"@wordpress/rich-text": "^7.15.1",
-		"@wordpress/server-side-render": "^5.15.1",
-		"@wordpress/url": "^4.15.0",
-		"@wordpress/viewport": "^6.15.1",
-		"@wordpress/wordcount": "^4.15.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": "0d4503ecc364cf4ca16024673baf5a84dacf212f"
+	"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/audio/test/transforms.native.js

@@ -15,8 +15,8 @@ const initialHtml = `
 <figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
 <!-- /wp:audio -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'File', ...tranformsWithInnerBlocks ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'File', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 
@@ -25,7 +25,8 @@ describe( `${ block } block transformations`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const newBlock = await transformBlock( screen, block, blockTransform, {
 			isMediaBlock: false,
-			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
 		} );
 		expect( newBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/button/edit.js

@@ -14,7 +14,7 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
 	TextControl,
@@ -148,7 +148,11 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 							<ToggleGroupControlOption
 								key={ widthValue }
 								value={ widthValue }
-								label={ `${ widthValue }%` }
+								label={ sprintf(
+									/* translators: Percentage value. */
+									__( '%d%%' ),
+									widthValue
+								) }
 							/>
 						);
 					} ) }

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/columns/edit.js

@@ -242,7 +242,7 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	/**
 	 * Update all child Column blocks with a new vertical alignment setting
 	 * based on whatever alignment is passed in. This allows change to parent
-	 * to overide anything set on a individual column basis.
+	 * to override anything set on a individual column basis.
 	 *
 	 * @param {string} newVerticalAlignment The vertical alignment setting.
 	 */

package/src/columns/edit.native.js

@@ -287,7 +287,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 		/**
 		 * Update all child Column blocks with a new vertical alignment setting
 		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
+		 * to override anything set on a individual column basis.
 		 *
 		 * @param {string} verticalAlignment the vertical alignment setting
 		 */

package/src/comment-template/edit.js

@@ -168,7 +168,7 @@ const CommentTemplatePreview = ( {
 	};
 
 	// We have to hide the preview block if the `comment` props points to
-	// the curently active block!
+	// the currently active block!
 
 	// Or, to put it differently, every preview block is visible unless it is the
 	// currently active block - in this case we render its inner blocks.
@@ -222,7 +222,7 @@ const CommentsList = ( {
 						// "placeholder" and that the block is most likely being used in the
 						// site editor. In this case, we have to set the commentId to `null`
 						// because otherwise the (non-existent) comment with a negative ID
-						// would be reqested from the REST API.
+						// would be requested from the REST API.
 						commentId: commentId < 0 ? null : commentId,
 					} }
 				>

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/comments-pagination-next/block.json

@@ -12,11 +12,6 @@
 			"type": "string"
 		}
 	},
-	"example": {
-		"attributes": {
-			"label": "Comments Next Page"
-		}
-	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

package/src/comments-pagination-next/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { queryPaginationNext as icon } from '@wordpress/icons';
 
 /**
@@ -16,6 +17,11 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		attributes: {
+			label: __( 'Newer Comments' ),
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comments-pagination-previous/block.json

@@ -12,11 +12,6 @@
 			"type": "string"
 		}
 	},
-	"example": {
-		"attributes": {
-			"label": "Comments Previous Page"
-		}
-	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

package/src/comments-pagination-previous/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { queryPaginationPrevious as icon } from '@wordpress/icons';
 
 /**
@@ -16,6 +17,11 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		attributes: {
+			label: __( 'Older Comments' ),
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/deprecated.js

@@ -885,7 +885,7 @@ const v11 = {
 	migrate: migrateTag,
 };
 
-// Deprecation for blocks that renders fixed background as backgroud from the main block container.
+// Deprecation for blocks that renders fixed background as background from the main block container.
 const v10 = {
 	attributes: v8ToV11BlockAttributes,
 	supports: v7toV11BlockSupports,