@wordpress/block-library 9.33.5 → 9.33.7

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

@@ -1,4 +1,7 @@
-.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel.wp-block-accordion-panel {
+  min-width: 100%;
+}
+.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }

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

@@ -1,4 +1,7 @@
-.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel.wp-block-accordion-panel {
+  min-width: 100%;
+}
+.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }

package/build-style/editor-rtl.css

@@ -1986,6 +1986,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   text-transform: uppercase;
 }
 
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }

package/build-style/editor.css

@@ -1994,6 +1994,13 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   text-transform: uppercase;
 }
 
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
+}
+
 .wp-block-navigation-submenu {
   display: block;
 }

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

@@ -151,4 +151,11 @@
 .link-ui-page-creator__back {
   margin-right: 8px;
   text-transform: uppercase;
+}
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
 }

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

@@ -151,4 +151,11 @@
 .link-ui-page-creator__back {
   margin-left: 8px;
   text-transform: uppercase;
+}
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+  color: #cc1818;
 }

package/build-style/style-rtl.css

@@ -21,6 +21,11 @@
   }
 }
 
+.wp-block-accordion-heading.wp-block-accordion-heading {
+  min-width: 100%;
+  margin: 0;
+}
+
 .wp-block-accordion-heading__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -31,21 +36,32 @@
   text-decoration: inherit;
   word-spacing: inherit;
   font-style: inherit;
-  background: none;
   border: none;
-  color: inherit;
   padding: var(--wp--preset--spacing--20, 1em) 0;
   cursor: pointer;
   overflow: hidden;
   display: flex;
   align-items: center;
   text-align: inherit;
-  position: relative;
   width: 100%;
+  background-color: inherit !important;
+  color: inherit !important;
 }
 .wp-block-accordion-heading__toggle:not(:focus-visible) {
   outline: none;
 }
+.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
+  text-decoration: none;
+  background-color: inherit !important;
+  box-shadow: none;
+  color: inherit;
+  border: none;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+}
+.wp-block-accordion-heading__toggle:focus-visible {
+  outline: auto;
+  outline-offset: 0;
+}
 .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
   text-decoration: underline;
 }
@@ -62,7 +78,10 @@
   justify-content: center;
 }
 
-.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel.wp-block-accordion-panel {
+  min-width: 100%;
+}
+.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }

package/build-style/style.css

@@ -21,6 +21,11 @@
   }
 }
 
+.wp-block-accordion-heading.wp-block-accordion-heading {
+  min-width: 100%;
+  margin: 0;
+}
+
 .wp-block-accordion-heading__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -31,21 +36,32 @@
   text-decoration: inherit;
   word-spacing: inherit;
   font-style: inherit;
-  background: none;
   border: none;
-  color: inherit;
   padding: var(--wp--preset--spacing--20, 1em) 0;
   cursor: pointer;
   overflow: hidden;
   display: flex;
   align-items: center;
   text-align: inherit;
-  position: relative;
   width: 100%;
+  background-color: inherit !important;
+  color: inherit !important;
 }
 .wp-block-accordion-heading__toggle:not(:focus-visible) {
   outline: none;
 }
+.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-heading__toggle:focus {
+  text-decoration: none;
+  background-color: inherit !important;
+  box-shadow: none;
+  color: inherit;
+  border: none;
+  padding: var(--wp--preset--spacing--20, 1em) 0;
+}
+.wp-block-accordion-heading__toggle:focus-visible {
+  outline: auto;
+  outline-offset: 0;
+}
 .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
   text-decoration: underline;
 }
@@ -62,7 +78,10 @@
   justify-content: center;
 }
 
-.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
+.wp-block-accordion-panel.wp-block-accordion-panel {
+  min-width: 100%;
+}
+.wp-block-accordion-panel.wp-block-accordion-panel[inert], .wp-block-accordion-panel.wp-block-accordion-panel[aria-hidden=true] {
   display: none;
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.33.5",
+	"version": "9.33.7",
 	"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.4",
-		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/components": "^30.6.2",
+		"@wordpress/block-editor": "^15.6.6",
+		"@wordpress/blocks": "^15.6.2",
+		"@wordpress/components": "^30.6.4",
 		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.4",
+		"@wordpress/core-data": "^7.33.6",
 		"@wordpress/data": "^10.33.1",
 		"@wordpress/date": "^5.33.1",
 		"@wordpress/deprecated": "^4.33.1",
@@ -105,14 +105,14 @@
 		"@wordpress/interactivity-router": "^2.33.1",
 		"@wordpress/keyboard-shortcuts": "^5.33.1",
 		"@wordpress/keycodes": "^4.33.1",
-		"@wordpress/latex-to-mathml": "^1.1.1",
+		"@wordpress/latex-to-mathml": "^1.1.2",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.4",
+		"@wordpress/patterns": "^2.33.6",
 		"@wordpress/primitives": "^4.33.1",
 		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.4",
-		"@wordpress/rich-text": "^7.33.1",
-		"@wordpress/server-side-render": "^6.9.2",
+		"@wordpress/reusable-blocks": "^5.33.6",
+		"@wordpress/rich-text": "^7.33.2",
+		"@wordpress/server-side-render": "^6.9.4",
 		"@wordpress/url": "^4.33.1",
 		"@wordpress/viewport": "^6.33.1",
 		"@wordpress/wordcount": "^4.33.1",
@@ -133,5 +133,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e2a11a11f0c5c9cb2bba2dd40b8046d2a10dc9d"
+	"gitHead": "e821b2ec0a90d60aa7cafc248ba049f13b4265b7"
 }

package/src/accordion-heading/style.scss

@@ -1,3 +1,17 @@
+// 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%;
+	// Some classic themes apply default margins to heading elements,
+	// so those styles need to be reset.
+	margin: 0;
+}
+
 .wp-block-accordion-heading__toggle {
 	font-family: inherit;
 	font-size: inherit;
@@ -8,26 +22,45 @@
 	text-decoration: inherit;
 	word-spacing: inherit;
 	font-style: inherit;
-	background: none;
 	border: none;
-	color: inherit;
 	padding: var(--wp--preset--spacing--20, 1em) 0;
 	cursor: pointer;
 	overflow: hidden;
 	display: flex;
 	align-items: center;
 	text-align: inherit;
-	position: relative;
 	width: 100%;
 
+	// Some themes may apply colors to button elements with a particularly
+	// high CSS specificity. Since it's impossible to predict this specificity,
+	// we reset the colors using `!important`.
+	background-color: inherit !important;
+	color: inherit !important;
+
 	&:not(:focus-visible) {
 		outline: none;
 	}
 
-	&:hover {
-		.wp-block-accordion-heading__toggle-title {
-			text-decoration: underline;
-		}
+	&:hover,
+	&:focus {
+		// Some themes may apply styles when a button element is hovered
+		// over or focused. This is not intended for accordion toggle
+		// buttons, so we reset it here.
+		text-decoration: none;
+		background-color: inherit !important;
+		box-shadow: none;
+		color: inherit;
+		border: none;
+		padding: var(--wp--preset--spacing--20, 1em) 0;
+	}
+
+	&:focus-visible {
+		outline: auto;
+		outline-offset: 0;
+	}
+
+	&:hover .wp-block-accordion-heading__toggle-title {
+		text-decoration: underline;
 	}
 }
 

package/src/accordion-panel/style.scss

@@ -1,4 +1,9 @@
-.wp-block-accordion-panel {
+// 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%;
+
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
 	&[inert],
 	&[aria-hidden="true"] {

package/src/heading/index.js

@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -65,6 +66,7 @@ export const settings = {
 	},
 	edit,
 	save,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/heading/variations.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Path, SVG } from '@wordpress/primitives';
+import { heading } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'heading',
+		title: __( 'Heading' ),
+		description: __(
+			'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'
+		),
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		attributes: { fitText: undefined },
+		icon: heading,
+	},
+	// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
+	// to make Stretchy variations appear as the last of their sections in the inserter.
+	{
+		name: 'stretchy-heading',
+		title: __( 'Stretchy Heading' ),
+		description: __( 'Heading that resizes to fit its container.' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Path d="m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" />
+			</SVG>
+		),
+		attributes: { fitText: true },
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes.fitText === true,
+	},
+];
+
+export default variations;

package/src/navigation-link/edit.js

@@ -97,21 +97,35 @@ const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	const hasId = Number.isInteger( id );
 	const blockEditingMode = useBlockEditingMode();
 
-	const postStatus = useSelect(
+	const { postStatus, isDeleted } = useSelect(
 		( select ) => {
 			if ( ! isPostType ) {
-				return null;
+				return { postStatus: null, isDeleted: false };
 			}
 
 			// Fetching the posts status is an "expensive" operation. Especially for sites with large navigations.
 			// When the block is rendered in a template or other disabled contexts we can skip this check in order
 			// to avoid all these additional requests that don't really add any value in that mode.
 			if ( blockEditingMode === 'disabled' || ! enabled ) {
-				return null;
+				return { postStatus: null, isDeleted: false };
 			}
 
-			const { getEntityRecord } = select( coreStore );
-			return getEntityRecord( 'postType', type, id )?.status;
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const entityRecord = getEntityRecord( 'postType', type, id );
+			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				type,
+				id,
+			] );
+
+			// If resolution has finished and entityRecord is undefined, the entity was deleted.
+			const deleted = hasResolved && entityRecord === undefined;
+
+			return {
+				postStatus: entityRecord?.status,
+				isDeleted: deleted,
+			};
 		},
 		[ isPostType, blockEditingMode, enabled, type, id ]
 	);
@@ -121,11 +135,13 @@ const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	// 2. It has an id.
 	// 3. It's neither null, nor undefined, as valid items might be either of those while loading.
 	// If those conditions are met, check if
-	// 1. The post status is published.
-	// 2. The Navigation Link item has no label.
+	// 1. The post status is trash (trashed).
+	// 2. The entity doesn't exist (deleted).
 	// If either of those is true, invalidate.
 	const isInvalid =
-		isPostType && hasId && postStatus && 'trash' === postStatus;
+		isPostType &&
+		hasId &&
+		( isDeleted || ( postStatus && 'trash' === postStatus ) );
 	const isDraft = 'draft' === postStatus;
 
 	return [ isInvalid, isDraft ];
@@ -248,7 +264,12 @@ export default function NavigationLinkEdit( {
 	const { getBlocks } = useSelect( blockEditorStore );
 
 	// URL binding logic
-	const { clearBinding, createBinding } = useEntityBinding( {
+	const {
+		clearBinding,
+		createBinding,
+		hasUrlBinding,
+		isBoundEntityAvailable,
+	} = useEntityBinding( {
 		clientId,
 		attributes,
 	} );
@@ -405,14 +426,23 @@ export default function NavigationLinkEdit( {
 		}
 	);
 
-	if ( ! url || isInvalid || isDraft ) {
+	if (
+		! url ||
+		isInvalid ||
+		isDraft ||
+		( hasUrlBinding && ! isBoundEntityAvailable )
+	) {
 		blockProps.onClick = () => {
 			setIsLinkOpen( true );
 		};
 	}
 
 	const classes = clsx( 'wp-block-navigation-item__content', {
-		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
+		'wp-block-navigation-link__placeholder':
+			! url ||
+			isInvalid ||
+			isDraft ||
+			( hasUrlBinding && ! isBoundEntityAvailable ),
 	} );
 
 	const missingText = getMissingText( type );
@@ -531,9 +561,10 @@ export default function NavigationLinkEdit( {
 							link={ attributes }
 							onClose={ () => {
 								setIsLinkOpen( false );
-								// If there is no link then remove the auto-inserted block.
+								// If there is no link and no binding, remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
-								if ( ! url ) {
+								// Don't remove if binding exists (even if entity is unavailable) so user can fix it.
+								if ( ! url && ! hasUrlBinding ) {
 									onReplace( [] );
 								} else if ( isNewLink.current ) {
 									// If we just created a new link, select it

package/src/navigation-link/editor.scss

@@ -143,3 +143,10 @@
 		text-transform: uppercase;
 	}
 }
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+	color: $alert-red;
+}

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

@@ -26,6 +26,7 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { LinkUIPageCreator } from './page-creator';
 import LinkUIBlockInserter from './block-inserter';
+import { useEntityBinding } from '../shared/use-entity-binding';
 
 /**
  * Given the Link block's type attribute, return the query params to give to
@@ -66,7 +67,8 @@ export function getSuggestionsQuery( type, kind ) {
 }
 
 function UnforwardedLinkUI( props, ref ) {
-	const { label, url, opensInNewTab, type, kind, id, metadata } = props.link;
+	const { label, url, opensInNewTab, type, kind, id } = props.link;
+	const { clientId } = props;
 	const postType = type || 'page';
 
 	const [ addingBlock, setAddingBlock ] = useState( false );
@@ -78,12 +80,11 @@ function UnforwardedLinkUI( props, ref ) {
 		name: postType,
 	} );
 
-	// Check if there's a URL binding with the new binding sources
-	// Only enable handleEntities when there's actually a binding present
-	const hasUrlBinding =
-		( metadata?.bindings?.url?.source === 'core/post-data' ||
-			metadata?.bindings?.url?.source === 'core/term-data' ) &&
-		!! id;
+	// Use the entity binding hook to get binding status
+	const { isBoundEntityAvailable } = useEntityBinding( {
+		clientId,
+		attributes: props.link,
+	} );
 
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
@@ -152,7 +153,7 @@ function UnforwardedLinkUI( props, ref ) {
 						onChange={ props.onChange }
 						onRemove={ props.onRemove }
 						onCancel={ props.onCancel }
-						handleEntities={ hasUrlBinding }
+						handleEntities={ isBoundEntityAvailable }
 						renderControlBottom={ () => {
 							// Don't show the tools when there is submitted link (preview state).
 							if ( link?.url?.length ) {