@wordpress/block-library 9.33.7 → 9.33.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.33.7",
+	"version": "9.33.9",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -86,11 +86,11 @@
 		"@wordpress/autop": "^4.33.1",
 		"@wordpress/base-styles": "^6.9.1",
 		"@wordpress/blob": "^4.33.1",
-		"@wordpress/block-editor": "^15.6.6",
+		"@wordpress/block-editor": "^15.6.8",
 		"@wordpress/blocks": "^15.6.2",
 		"@wordpress/components": "^30.6.4",
 		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.6",
+		"@wordpress/core-data": "^7.33.8",
 		"@wordpress/data": "^10.33.1",
 		"@wordpress/date": "^5.33.1",
 		"@wordpress/deprecated": "^4.33.1",
@@ -101,16 +101,16 @@
 		"@wordpress/html-entities": "^4.33.1",
 		"@wordpress/i18n": "^6.6.1",
 		"@wordpress/icons": "^11.0.1",
-		"@wordpress/interactivity": "^6.33.1",
-		"@wordpress/interactivity-router": "^2.33.1",
+		"@wordpress/interactivity": "^6.33.2",
+		"@wordpress/interactivity-router": "^2.33.2",
 		"@wordpress/keyboard-shortcuts": "^5.33.1",
 		"@wordpress/keycodes": "^4.33.1",
 		"@wordpress/latex-to-mathml": "^1.1.2",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.6",
+		"@wordpress/patterns": "^2.33.8",
 		"@wordpress/primitives": "^4.33.1",
 		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.6",
+		"@wordpress/reusable-blocks": "^5.33.8",
 		"@wordpress/rich-text": "^7.33.2",
 		"@wordpress/server-side-render": "^6.9.4",
 		"@wordpress/url": "^4.33.1",
@@ -133,5 +133,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e821b2ec0a90d60aa7cafc248ba049f13b4265b7"
+	"gitHead": "52db1c3ee45bd12b1e3dc65490edc6db5b9ab78f"
 }

package/src/accordion/style.scss

@@ -0,0 +1,4 @@
+.wp-block-accordion {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/accordion/view.js

@@ -3,7 +3,11 @@
  */
 import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 
-store(
+// Whether the hash has been handled for the current page load.
+// This is used to prevent the hash from being handled multiple times.
+let hashHandled = false;
+
+const { actions } = store(
 	'core/accordion',
 	{
 		state: {
@@ -75,15 +79,68 @@ store(
 					nextButton.focus();
 				}
 			} ),
+			openPanelByHash: () => {
+				if ( hashHandled || ! window.location?.hash?.length ) {
+					return;
+				}
+
+				const context = getContext();
+				const { id, accordionItems, autoclose } = context;
+				const hash = decodeURIComponent(
+					window.location.hash.slice( 1 )
+				);
+				const targetElement = window.document.getElementById( hash );
+
+				if ( ! targetElement ) {
+					return;
+				}
+
+				const panelElement = window.document.querySelector(
+					'.wp-block-accordion-panel[aria-labelledby="' + id + '"]'
+				);
+
+				if (
+					! panelElement ||
+					! panelElement.contains( targetElement )
+				) {
+					return;
+				}
+
+				hashHandled = true;
+
+				if ( autoclose ) {
+					accordionItems.forEach( ( item ) => {
+						item.isOpen = item.id === id;
+					} );
+				} else {
+					const targetItem = accordionItems.find(
+						( item ) => item.id === id
+					);
+
+					if ( targetItem ) {
+						targetItem.isOpen = true;
+					}
+				}
+
+				// Wait for the panel to be opened before scrolling to it.
+				window.setTimeout( () => {
+					targetElement.scrollIntoView();
+				}, 0 );
+			},
 		},
 		callbacks: {
 			initAccordionItems: () => {
 				const context = getContext();
-				const { id, openByDefault } = context;
-				context.accordionItems.push( {
+				const { id, openByDefault, accordionItems } = context;
+				accordionItems.push( {
 					id,
 					isOpen: openByDefault,
 				} );
+				actions.openPanelByHash();
+			},
+			hashChange: () => {
+				hashHandled = false;
+				actions.openPanelByHash();
 			},
 		},
 	},

package/src/accordion-heading/block.json

@@ -57,7 +57,7 @@
 			}
 		},
 		"shadow": true,
-		"blockVisibility": false,
+		"visibility": false,
 		"lock": false
 	},
 	"selectors": {

package/src/accordion-heading/deprecated.js

@@ -74,7 +74,7 @@ const v1 = {
 			},
 		},
 		shadow: true,
-		blockVisibility: false,
+		visibility: false,
 	},
 	save( { attributes } ) {
 		const { level, title, iconPosition, showIcon } = attributes;

package/src/accordion-heading/style.scss

@@ -1,12 +1,4 @@
-// In many classic themes, selectors like `.entry-content h1` are used,
-// potentially applying relatively high specificity (such as `0-1-1`) to
-// heading elements. To properly override those styles, use a selector
-// with a specificity of `0-2-0`.
-.wp-block-accordion-heading.wp-block-accordion-heading {
-	// Some themes may have an explicit width. Since it's unpredictable
-	// what CSS specificity should be used to override them, ensure 100%
-	// width using min-width instead.
-	min-width: 100%;
+.wp-block-accordion-heading {
 	// Some classic themes apply default margins to heading elements,
 	// so those styles need to be reset.
 	margin: 0;

package/src/accordion-item/index.php

@@ -36,6 +36,7 @@ function block_core_accordion_item_render( $attributes, $content ) {
 		$p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '", "openByDefault": ' . $open_by_default . ' }' );
 		$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
 		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionItems' );
+		$p->set_attribute( 'data-wp-on-window--hashchange', 'callbacks.hashChange' );
 
 		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-heading__toggle' ) ) ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );

package/src/accordion-item/style.scss

@@ -1,13 +1,6 @@
 .wp-block-accordion-item {
-	display: grid;
-	grid-template-rows: max-content 0fr;
-
-	&.is-open {
-		grid-template-rows: max-content 1fr;
-
-		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
-			transform: rotate(45deg);
-		}
+	&.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
+		transform: rotate(45deg);
 	}
 
 	/* Add transitions only for users who do not prefer reduced motion */

package/src/accordion-panel/block.json

@@ -50,7 +50,7 @@
 		"layout": {
 			"allowEditing": false
 		},
-		"blockVisibility": false,
+		"visibility": false,
 		"contentRole": true,
 		"allowedBlocks": true,
 		"lock": false

package/src/accordion-panel/style.scss

@@ -1,8 +1,4 @@
-// Some classic themes may use selectors like `.wp-block .wp-block`
-// and apply some kind of width to the blocks. To properly override
-// those styles, use a selector with a specificity of `0-2-0`.
-.wp-block-accordion-panel.wp-block-accordion-panel {
-	min-width: 100%;
+.wp-block-accordion-panel {
 
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
 	&[inert],

package/src/freeform/block.json

@@ -19,7 +19,7 @@
 		"lock": false,
 		"reusable": false,
 		"renaming": false,
-		"blockVisibility": false
+		"visibility": false
 	},
 	"editorStyle": "wp-block-freeform-editor"
 }

package/src/math/edit.js

@@ -14,6 +14,7 @@ import {
 } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -72,7 +73,8 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 					placement="bottom-start"
 					offset={ 8 }
 					anchor={ blockRef }
-					focusOnMount="firstContentElement"
+					focusOnMount={ false }
+					__unstableSlotName="__unstable-block-tools-after"
 				>
 					<div style={ { padding: '4px', minWidth: '300px' } }>
 						<VStack spacing={ 1 }>
@@ -96,6 +98,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setError( null );
 									} catch ( err ) {
 										setError( err.message );
+										speak( err.message );
 									}
 									setAttributes( {
 										mathML: newMathML,

package/src/missing/block.json

@@ -26,7 +26,7 @@
 		"lock": false,
 		"reusable": false,
 		"renaming": false,
-		"blockVisibility": false,
+		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/navigation-link/edit.js

@@ -8,9 +8,13 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InspectorControls,
@@ -26,13 +30,19 @@ import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs, usePrevious } from '@wordpress/compose';
+import { useMergeRefs, usePrevious, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { getColors } from '../navigation/edit/utils';
-import { Controls, LinkUI, updateAttributes, useEntityBinding } from './shared';
+import {
+	Controls,
+	LinkUI,
+	updateAttributes,
+	useEntityBinding,
+	MissingEntityHelpText,
+} from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -204,7 +214,7 @@ export default function NavigationLinkEdit( {
 	const ref = useRef();
 	const linkUIref = useRef();
 	const prevUrl = usePrevious( url );
-	const isNewLink = useRef( ! url );
+	const isNewLink = useRef( ! url && ! metadata?.bindings?.url );
 
 	const {
 		isAtMaxNesting,
@@ -394,6 +404,12 @@ export default function NavigationLinkEdit( {
 		}
 	}
 
+	const instanceId = useInstanceId( NavigationLinkEdit );
+	const hasMissingEntity = hasUrlBinding && ! isBoundEntityAvailable;
+	const missingEntityDescriptionId = hasMissingEntity
+		? sprintf( 'navigation-link-edit-%d-desc', instanceId )
+		: undefined;
+
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
 		className: clsx( 'wp-block-navigation-item', {
@@ -407,6 +423,8 @@ export default function NavigationLinkEdit( {
 			[ getColorClassName( 'background-color', backgroundColor ) ]:
 				!! backgroundColor,
 		} ),
+		'aria-describedby': missingEntityDescriptionId,
+		'aria-invalid': hasMissingEntity,
 		style: {
 			color: ! textColor && customTextColor,
 			backgroundColor: ! backgroundColor && customBackgroundColor,
@@ -482,6 +500,11 @@ export default function NavigationLinkEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
+				{ hasMissingEntity && (
+					<VisuallyHidden id={ missingEntityDescriptionId }>
+						<MissingEntityHelpText type={ type } kind={ kind } />
+					</VisuallyHidden>
+				) }
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }

package/src/navigation-link/shared/controls.js

@@ -221,7 +221,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 					} }
 					help={
 						hasUrlBinding && ! isBoundEntityAvailable ? (
-							<MissingEntityHelpText
+							<MissingEntityHelp
 								id={ helpTextId }
 								type={ attributes.type }
 								kind={ attributes.kind }
@@ -327,7 +327,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
  * @param {string} props.kind - The entity kind
  * @return {string} Help text for the bound URL
  */
-function BindingHelpText( { type, kind } ) {
+export function BindingHelpText( { type, kind } ) {
 	const entityType = getEntityTypeName( type, kind );
 	return sprintf(
 		/* translators: %s is the entity type (e.g., "page", "post", "category") */
@@ -340,27 +340,23 @@ function BindingHelpText( { type, kind } ) {
  * Component to display error help text for missing entity bindings.
  *
  * @param {Object} props      - Component props
- * @param {string} props.id   - ID for the help text element (for aria-describedby)
  * @param {string} props.type - The entity type
  * @param {string} props.kind - The entity kind
  * @return {JSX.Element} Error help text component
  */
-function MissingEntityHelpText( { id, type, kind } ) {
+export function MissingEntityHelpText( { type, kind } ) {
 	const entityType = getEntityTypeName( type, kind );
+	return sprintf(
+		/* translators: %s is the entity type (e.g., "page", "post", "category") */
+		__( 'Synced %s is missing. Please update or remove this link.' ),
+		entityType
+	);
+}
+
+function MissingEntityHelp( { id, type, kind } ) {
 	return (
-		<span
-			id={ id }
-			className="navigation-link-control__error-text"
-			role="alert"
-			aria-live="polite"
-		>
-			{ sprintf(
-				/* translators: %s is the entity type (e.g., "page", "post", "category") */
-				__(
-					'Synced %s is missing. Please update or remove this link.'
-				),
-				entityType
-			) }
+		<span id={ id } className="navigation-link-control__error-text">
+			<MissingEntityHelpText type={ type } kind={ kind } />
 		</span>
 	);
 }

package/src/navigation-link/shared/index.js

@@ -5,7 +5,7 @@
  * to reduce code duplication and ensure consistent behavior.
  */
 
-export { Controls } from './controls';
+export { Controls, BindingHelpText, MissingEntityHelpText } from './controls';
 export { updateAttributes } from './update-attributes';
 export {
 	useEntityBinding,

package/src/navigation-link/shared/use-entity-binding.js

@@ -98,10 +98,13 @@ export function useEntityBinding( { clientId, attributes } ) {
 
 			// Use the correct entity type based on kind.
 			const entityType = isTaxonomy ? 'taxonomy' : 'postType';
-			const entityRecord = getEntityRecord( entityType, type, id );
+			// Convert 'tag' back to 'post_tag' for the API call
+			// (it was converted from 'post_tag' to 'tag' for storage in updateAttributes)
+			const typeForAPI = type === 'tag' ? 'post_tag' : type;
+			const entityRecord = getEntityRecord( entityType, typeForAPI, id );
 			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
 				entityType,
-				type,
+				typeForAPI,
 				id,
 			] );
 

package/src/pattern/block.json

@@ -9,7 +9,7 @@
 		"html": false,
 		"inserter": false,
 		"renaming": false,
-		"blockVisibility": false,
+		"visibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/social-links/edit.js

@@ -183,7 +183,7 @@ export function SocialLinksEdit( props ) {
 						<SelectControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Icon Size' ) }
+							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {
 									size: newSize === '' ? undefined : newSize,

package/src/style.scss

@@ -1,3 +1,4 @@
+@use "./accordion/style.scss" as *;
 @use "./accordion-item/style.scss" as *;
 @use "./accordion-heading/style.scss" as *;
 @use "./accordion-panel/style.scss" as *;