@wordpress/block-library 10.4.0 → 10.5.0

package/build-style/style.css

@@ -423,7 +423,8 @@
 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
   text-align: center;
 }
-.wp-block-categories .wp-block-categories__label:not(.screen-reader-text) {
+
+:where(.wp-block-categories__label:not(.screen-reader-text)) {
   width: 100%;
   display: block;
 }
@@ -594,13 +595,6 @@
 .wp-block-post-comments .comment-body .commentmetadata {
   font-size: 0.875em;
 }
-.wp-block-post-comments .comment-form-comment label,
-.wp-block-post-comments .comment-form-author label,
-.wp-block-post-comments .comment-form-email label,
-.wp-block-post-comments .comment-form-url label {
-  display: block;
-  margin-bottom: 0.25em;
-}
 .wp-block-post-comments .comment-form textarea,
 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
   display: block;
@@ -636,6 +630,14 @@
   padding: calc(0.667em + 2px);
 }
 
+:where(.wp-block-post-comments .comment-form-comment label),
+:where(.wp-block-post-comments .comment-form-author label),
+:where(.wp-block-post-comments .comment-form-email label),
+:where(.wp-block-post-comments .comment-form-url label) {
+  display: block;
+  margin-bottom: 0.25em;
+}
+
 :where(.wp-block-post-comments input[type=submit]) {
   border: none;
 }
@@ -1311,35 +1313,35 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-blo
   text-decoration: none;
 }
 
-.wp-block-form-input__label {
+:where(.wp-block-form-input__label) {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label.is-label-inline {
+:where(.wp-block-form-input__label).is-label-inline {
   flex-direction: row;
   gap: 0.5em;
   align-items: center;
 }
-.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label).is-label-inline .wp-block-form-input__label-content {
   margin-bottom: 0.5em;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
+:where(.wp-block-form-input__label):has(input[type=checkbox]) .wp-block-form-input__label-content {
   margin: 0;
 }
-.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
+:where(.wp-block-form-input__label):has(.wp-block-form-input__label-content + input[type=checkbox]) {
   /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
   flex-direction: row-reverse;
 }
 
-.wp-block-form-input__label-content {
+:where(.wp-block-form-input__label-content) {
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -3941,12 +3943,6 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   box-sizing: border-box;
   width: 100%;
 }
-.wp-block-post-comments-form .comment-form-author label,
-.wp-block-post-comments-form .comment-form-email label,
-.wp-block-post-comments-form .comment-form-url label {
-  display: block;
-  margin-bottom: 0.25em;
-}
 .wp-block-post-comments-form .comment-form-cookies-consent {
   display: flex;
   gap: 0.25em;
@@ -3962,6 +3958,13 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-left: 0.5em;
 }
 
+:where(.wp-block-post-comments-form .comment-form-author label),
+:where(.wp-block-post-comments-form .comment-form-email label),
+:where(.wp-block-post-comments-form .comment-form-url label) {
+  display: block;
+  margin-bottom: 0.25em;
+}
+
 .wp-block-post-comments-count {
   box-sizing: border-box;
 }
@@ -4249,6 +4252,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-inline-end: auto;
 }
 
+:where(.wp-block-query-no-results) {
+  box-sizing: border-box;
+}
+
 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
   margin-inline-start: auto;
 }
@@ -4391,7 +4398,7 @@ ul.wp-block-rss.is-grid li {
   max-width: 100%;
 }
 
-.wp-block-search__label {
+:where(.wp-block-search__label) {
   width: 100%;
 }
 
@@ -5049,9 +5056,13 @@ ul.wp-block-rss.is-grid li {
   bottom: 0;
 }
 
-.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
+.wp-block-tab-panel:empty {
   display: none !important;
 }
+.wp-block-tab-panel[hidden] {
+  margin-block-start: 0;
+  padding: 0 !important;
+}
 
 .wp-block-table {
   overflow-x: auto;

package/build-style/tab-panel/style-rtl.css

@@ -1,3 +1,7 @@
-.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
+.wp-block-tab-panel:empty {
   display: none !important;
+}
+.wp-block-tab-panel[hidden] {
+  margin-block-start: 0;
+  padding: 0 !important;
 }

package/build-style/tab-panel/style.css

@@ -1,3 +1,7 @@
-.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
+.wp-block-tab-panel:empty {
   display: none !important;
+}
+.wp-block-tab-panel[hidden] {
+  margin-block-start: 0;
+  padding: 0 !important;
 }

package/build-style/theme-rtl.css

@@ -188,7 +188,7 @@
   border: none;
 }
 
-.wp-block-search .wp-block-search__label {
+:where(.wp-block-search .wp-block-search__label) {
   font-weight: bold;
 }
 

package/build-style/theme.css

@@ -188,7 +188,7 @@
   border: none;
 }
 
-.wp-block-search .wp-block-search__label {
+:where(.wp-block-search .wp-block-search__label) {
   font-weight: bold;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "10.4.0",
+	"version": "10.5.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -92,47 +92,47 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@arraypress/waveform-player": "^1.23.0",
-		"@wordpress/a11y": "^4.53.0",
-		"@wordpress/api-fetch": "^7.53.0",
-		"@wordpress/autop": "^4.53.0",
-		"@wordpress/base-styles": "^12.1.0",
-		"@wordpress/blob": "^4.53.0",
-		"@wordpress/block-editor": "^16.2.0",
-		"@wordpress/blocks": "^15.26.0",
-		"@wordpress/components": "^39.0.0",
-		"@wordpress/compose": "^8.6.0",
-		"@wordpress/core-data": "^7.53.0",
-		"@wordpress/data": "^10.53.0",
-		"@wordpress/date": "^5.53.0",
-		"@wordpress/deprecated": "^4.53.0",
-		"@wordpress/dom": "^4.53.0",
-		"@wordpress/element": "^8.5.0",
-		"@wordpress/escape-html": "^3.53.0",
-		"@wordpress/global-styles-engine": "^1.20.0",
-		"@wordpress/hooks": "^4.53.0",
-		"@wordpress/html-entities": "^4.53.0",
-		"@wordpress/i18n": "^6.26.0",
-		"@wordpress/icons": "^15.4.0",
-		"@wordpress/interactivity": "^6.53.0",
-		"@wordpress/interactivity-router": "^2.53.0",
-		"@wordpress/kebab-case": "^1.0.0",
-		"@wordpress/keyboard-shortcuts": "^5.53.0",
-		"@wordpress/keycodes": "^4.53.0",
-		"@wordpress/latex-to-mathml": "^1.21.0",
-		"@wordpress/notices": "^5.53.0",
-		"@wordpress/patterns": "^2.53.0",
-		"@wordpress/primitives": "^4.53.0",
-		"@wordpress/private-apis": "^1.53.0",
-		"@wordpress/reusable-blocks": "^5.53.0",
-		"@wordpress/rich-text": "^7.53.0",
-		"@wordpress/server-side-render": "^6.29.0",
-		"@wordpress/shortcode": "^4.53.0",
-		"@wordpress/ui": "^0.20.0",
-		"@wordpress/upload-media": "^0.38.0",
-		"@wordpress/url": "^4.53.0",
-		"@wordpress/viewport": "^6.53.0",
-		"@wordpress/wordcount": "^4.53.0",
+		"@arraypress/waveform-player": "^1.26.0",
+		"@wordpress/a11y": "^4.54.0",
+		"@wordpress/api-fetch": "^7.54.0",
+		"@wordpress/autop": "^4.54.0",
+		"@wordpress/base-styles": "^13.0.0",
+		"@wordpress/blob": "^4.54.0",
+		"@wordpress/block-editor": "^17.0.0",
+		"@wordpress/blocks": "^15.27.0",
+		"@wordpress/components": "^40.0.0",
+		"@wordpress/compose": "^8.7.0",
+		"@wordpress/core-data": "^7.54.0",
+		"@wordpress/data": "^10.54.0",
+		"@wordpress/date": "^5.54.0",
+		"@wordpress/deprecated": "^4.54.0",
+		"@wordpress/dom": "^4.54.0",
+		"@wordpress/element": "^8.6.0",
+		"@wordpress/escape-html": "^3.54.0",
+		"@wordpress/global-styles-engine": "^1.21.0",
+		"@wordpress/hooks": "^4.54.0",
+		"@wordpress/html-entities": "^4.54.0",
+		"@wordpress/i18n": "^6.27.0",
+		"@wordpress/icons": "^15.5.0",
+		"@wordpress/interactivity": "^6.54.0",
+		"@wordpress/interactivity-router": "^2.54.0",
+		"@wordpress/kebab-case": "^1.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.54.0",
+		"@wordpress/keycodes": "^4.54.0",
+		"@wordpress/latex-to-mathml": "^1.22.0",
+		"@wordpress/notices": "^5.54.0",
+		"@wordpress/patterns": "^2.54.0",
+		"@wordpress/primitives": "^4.54.0",
+		"@wordpress/private-apis": "^1.54.0",
+		"@wordpress/reusable-blocks": "^5.54.0",
+		"@wordpress/rich-text": "^7.54.0",
+		"@wordpress/server-side-render": "^6.30.0",
+		"@wordpress/shortcode": "^4.54.0",
+		"@wordpress/ui": "^0.21.0",
+		"@wordpress/upload-media": "^0.39.0",
+		"@wordpress/url": "^4.54.0",
+		"@wordpress/viewport": "^6.54.0",
+		"@wordpress/wordcount": "^4.54.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -165,5 +165,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "989764d42ff93e33684aaf0b96a5b7f3d9bbff52"
+	"gitHead": "5ef24f60261976bb198ad035db24bf81c1fb92b4"
 }

package/src/accordion/view.js

@@ -41,16 +41,13 @@ const { actions } = store(
 				}
 			},
 			openPanelByHash: () => {
-				if ( hashHandled || ! window.location?.hash?.length ) {
+				if ( hashHandled ) {
 					return;
 				}
 
 				const context = getContext();
 				const { id, accordionItems, autoclose } = context;
-				const hash = decodeURIComponent(
-					window.location.hash.slice( 1 )
-				);
-				const targetElement = window.document.getElementById( hash );
+				const targetElement = document.querySelector( ':target' );
 
 				if ( ! targetElement ) {
 					return;

package/src/accordion-heading/README.md

@@ -57,6 +57,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
+- **spacing**: `.wp-block-accordion-heading .wp-block-accordion-heading__toggle`
 - **typography**:
   - letterSpacing: `.wp-block-accordion-heading .wp-block-accordion-heading__toggle-title`
   - textDecoration: `.wp-block-accordion-heading .wp-block-accordion-heading__toggle-title`

package/src/accordion-heading/block.json

@@ -61,6 +61,7 @@
 		"lock": false
 	},
 	"selectors": {
+		"spacing": ".wp-block-accordion-heading .wp-block-accordion-heading__toggle",
 		"typography": {
 			"letterSpacing": ".wp-block-accordion-heading .wp-block-accordion-heading__toggle-title",
 			"textDecoration": ".wp-block-accordion-heading .wp-block-accordion-heading__toggle-title"

package/src/audio/edit.js

@@ -30,6 +30,19 @@ import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
+/**
+ * Renders the `core/audio` block on the editor.
+ *
+ * @param {Object}   props                   React props.
+ * @param {Object}   props.attributes        Block attributes: `blob`, `src`, `caption`, `id`, `autoplay`, `loop` and `preload`.
+ * @param {string}   props.className         Class name generated for the block.
+ * @param {Function} props.setAttributes     Callback for updating block attributes.
+ * @param {Function} props.onReplace         Callback for replacing this block with other blocks.
+ * @param {boolean}  props.isSelected        Whether the block is the only selected block.
+ * @param {Function} props.insertBlocksAfter Callback for inserting blocks after this one.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 function AudioEdit( {
 	attributes,
 	className,

package/src/avatar/edit.js

@@ -17,6 +17,17 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { useCommentAvatar, useUserAvatar } from './hooks';
 import UserControl from './user-control';
 
+/**
+ * Renders the inspector controls for the `core/avatar` block.
+ *
+ * @param {Object}   props               React props.
+ * @param {Function} props.setAttributes Callback for updating block attributes.
+ * @param {Object}   props.avatar        Avatar data returned by `useCommentAvatar` or `useUserAvatar`, with the `minSize` and `maxSize` bounds of the size control.
+ * @param {Object}   props.attributes    Block attributes: `size`, `isLink`, `linkTarget` and `userId`.
+ * @param {boolean}  props.selectUser    Whether to render the user selection control.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 const AvatarInspectorControls = ( {
 	setAttributes,
 	avatar,
@@ -115,6 +126,17 @@ const AvatarInspectorControls = ( {
 	);
 };
 
+/**
+ * Wraps the avatar image in a placeholder link when the block links to the user
+ * profile. The link is inert in the editor: it points at a fragment and its
+ * click handler prevents navigation.
+ *
+ * @param {Object}          props          React props.
+ * @param {React.ReactNode} props.children Avatar image to wrap.
+ * @param {boolean}         props.isLink   Whether to wrap the children in a link.
+ *
+ * @return {React.ReactNode} The children, wrapped in a link when `isLink` is true.
+ */
 const AvatarLinkWrapper = ( { children, isLink } ) =>
 	isLink ? (
 		<a
@@ -128,6 +150,19 @@ const AvatarLinkWrapper = ( { children, isLink } ) =>
 		children
 	);
 
+/**
+ * Renders the avatar image inside a `ResizableBox` so its size can be adjusted
+ * by dragging. Resizing keeps the aspect ratio and updates the `size` attribute.
+ *
+ * @param {Object}   props               React props.
+ * @param {Function} props.setAttributes Callback for updating block attributes.
+ * @param {Object}   props.attributes    Block attributes: `size` and `isLink`, plus the border support values read by `useBorderProps`.
+ * @param {Object}   props.avatar        Avatar data returned by `useCommentAvatar` or `useUserAvatar`, with the image `src` and `alt` and the `minSize` and `maxSize` resize bounds.
+ * @param {Object}   props.blockProps    Props returned by `useBlockProps`, applied to the wrapper element.
+ * @param {boolean}  props.isSelected    Whether the block is selected. Resize handles are only shown when it is.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 const ResizableAvatar = ( {
 	setAttributes,
 	attributes,
@@ -187,6 +222,20 @@ const ResizableAvatar = ( {
 		</div>
 	);
 };
+
+/**
+ * Renders the block for a comment author, resolving the avatar from the
+ * `commentId` context. The user selection control is not offered here because
+ * the author is determined by the comment.
+ *
+ * @param {Object}   props               React props.
+ * @param {Object}   props.attributes    Block attributes.
+ * @param {Object}   props.context       Inherited context, from which the comment ID is read.
+ * @param {Function} props.setAttributes Callback for updating block attributes.
+ * @param {boolean}  props.isSelected    Whether the block is selected.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 const CommentEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	const { commentId } = context;
 	const blockProps = useBlockProps();
@@ -210,6 +259,19 @@ const CommentEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	);
 };
 
+/**
+ * Renders the block for a user, resolving the avatar from the `userId`
+ * attribute when set, and otherwise from the author of the post identified by
+ * the `postType` and `postId` context.
+ *
+ * @param {Object}   props               React props.
+ * @param {Object}   props.attributes    Block attributes, from which the `userId` is read.
+ * @param {Object}   props.context       Inherited context, from which the post type and post ID are read.
+ * @param {Function} props.setAttributes Callback for updating block attributes.
+ * @param {boolean}  props.isSelected    Whether the block is selected.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	const { postId, postType } = context;
 	const avatar = useUserAvatar( {
@@ -238,6 +300,22 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	);
 };
 
+/**
+ * Renders the `core/avatar` block on the editor. All props are forwarded to
+ * either `CommentEdit` or `UserEdit`, depending on whether the block is used
+ * inside a comment.
+ *
+ * @param {Object}      props                     React props.
+ * @param {Object}      props.attributes          Block attributes.
+ * @param {Object}      props.context             Inherited context.
+ * @param {number|null} [props.context.commentId] The comment ID when the block is used inside a comment. `null` in the Site Editor, where no comment is resolved but the comment variant is still rendered.
+ * @param {string}      [props.context.postType]  The post type of the current post.
+ * @param {number}      [props.context.postId]    The ID of the current post.
+ * @param {Function}    props.setAttributes       Callback for updating block attributes.
+ * @param {boolean}     props.isSelected          Whether the block is selected.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 export default function Edit( props ) {
 	// Don't show the Comment Edit controls if we have a comment ID set, or if we're in the Site Editor (where it is `null`).
 	if ( props?.context?.commentId || props?.context?.commentId === null ) {

package/src/block/README.md

@@ -29,6 +29,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 - `customCSS`: `false`
+- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
 
 ## Context
 

package/src/block/block.json

@@ -27,6 +27,7 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
-		"customCSS": false
+		"customCSS": false,
+		"visibility": false
 	}
 }

package/src/categories/style.scss

@@ -14,8 +14,8 @@
 	&.wp-block-categories-dropdown.aligncenter {
 		text-align: center;
 	}
-	& .wp-block-categories__label:not(.screen-reader-text) {
-		width: 100%;
-		display: block;
-	}
+}
+:where(.wp-block-categories__label:not(.screen-reader-text)) {
+	width: 100%;
+	display: block;
 }

package/src/column/edit.js

@@ -55,6 +55,20 @@ function ColumnInspectorControls( { width, setAttributes } ) {
 	);
 }
 
+/**
+ * Renders the `core/column` block in the editor.
+ *
+ * @param {Object}         props                                Component props.
+ * @param {Object}         props.attributes                     Block attributes.
+ * @param {string}         [props.attributes.verticalAlignment] Vertical alignment of the column, one of `top`, `center`, `bottom` or `stretch`. Setting it resets the alignment on the parent Columns block.
+ * @param {string|number}  [props.attributes.width]             Column width, used as its `flex-basis`. A number is treated as a percentage, for content saved before the attribute became a CSS length.
+ * @param {string|boolean} [props.attributes.templateLock]      Template lock applied to the inner blocks, one of `all`, `insert`, `contentOnly` or `false`.
+ * @param {string[]}       [props.attributes.allowedBlocks]     Names of the blocks allowed as inner blocks, added by the `allowedBlocks` block support.
+ * @param {Function}       props.setAttributes                  Callback for updating block attributes.
+ * @param {string}         props.clientId                       Client ID of the block.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 function ColumnEdit( {
 	attributes: { verticalAlignment, width, templateLock, allowedBlocks },
 	setAttributes,
@@ -113,7 +127,7 @@ function ColumnEdit( {
 			templateLock,
 			allowedBlocks,
 			renderAppender: hasChildBlocks
-				? undefined
+				? false
 				: InnerBlocks.ButtonBlockAppender,
 		}
 	);

package/src/columns/edit.js

@@ -294,6 +294,24 @@ function Placeholder( { clientId, name, setAttributes } ) {
 	);
 }
 
+/**
+ * Renders the `core/columns` block in the editor.
+ *
+ * Until the block has inner blocks it renders a variation picker; afterwards it
+ * renders the columns container. Every prop is forwarded to whichever of the two
+ * is rendered.
+ *
+ * @param {Object}         props                                Component props.
+ * @param {string}         props.clientId                       Client ID of the block.
+ * @param {string}         props.name                           Block name, used to look up the variations offered by the picker.
+ * @param {Object}         props.attributes                     Block attributes.
+ * @param {string}         [props.attributes.verticalAlignment] Vertical alignment applied to the block and to every child Column block.
+ * @param {boolean}        [props.attributes.isStackedOnMobile] Whether the columns stack on small viewports. Defaults to `true`.
+ * @param {string|boolean} [props.attributes.templateLock]      Template lock applied to the inner blocks, one of `all`, `insert`, `contentOnly` or `false`.
+ * @param {Function}       props.setAttributes                  Callback for updating block attributes.
+ *
+ * @return {React.JSX.Element} React element.
+ */
 const ColumnsEdit = ( props ) => {
 	const { clientId } = props;
 	const hasInnerBlocks = useSelect(