@wordpress/block-library 9.33.2-next.36001005c.0 → 9.34.0

package/src/image/index.php

@@ -250,12 +250,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// Image.
 	$processor->next_tag( 'img' );
 	$processor->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
-	$processor->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
-	$processor->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
+	$processor->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
+	$processor->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
-	$processor->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
+	$processor->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
 	$processor->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' );
 	$processor->set_attribute( 'data-wp-class--show', 'state.isContentVisible' );
 
@@ -273,7 +273,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-init="callbacks.initTriggerButton"
-			data-wp-on-async--click="actions.showLightbox"
+			data-wp-on--click="actions.showLightbox"
 			data-wp-style--right="state.imageButtonRight"
 			data-wp-style--top="state.imageButtonTop"
 		>
@@ -324,12 +324,12 @@ function block_core_image_print_lightbox_overlay() {
 			data-wp-class--show-closing-animation="state.overlayOpened"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
-			data-wp-on-async--touchstart="actions.handleTouchStart"
+			data-wp-on--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
-			data-wp-on-async--touchend="actions.handleTouchEnd"
-			data-wp-on-async--click="actions.hideLightbox"
-			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
-			data-wp-on-async-window--scroll="actions.handleScroll"
+			data-wp-on--touchend="actions.handleTouchEnd"
+			data-wp-on--click="actions.hideLightbox"
+			data-wp-on-window--resize="callbacks.setOverlayStyles"
+			data-wp-on-window--scroll="actions.handleScroll"
 			data-wp-bind--style="state.overlayStyles"
 			tabindex="-1"
 			>

package/src/image/view.js

@@ -356,9 +356,19 @@ const { state, actions, callbacks } = store(
 				`;
 			},
 			setButtonStyles() {
-				const { imageId } = getContext();
 				const { ref } = getElement();
 
+				// This guard prevents errors in images with the `srcset`
+				// attribute, which can dispatch `load` events even after DOM
+				// removal. Preact doesn't automatically clean up `load` event
+				// listeners on unmounted `img` elements (see
+				// https://github.com/preactjs/preact/issues/3141).
+				if ( ! ref ) {
+					return;
+				}
+
+				const { imageId } = getContext();
+
 				state.metadata[ imageId ].imageRef = ref;
 				state.metadata[ imageId ].currentSrc = ref.currentSrc;
 

package/src/latest-comments/block.json

@@ -22,9 +22,10 @@
 			"type": "boolean",
 			"default": true
 		},
-		"displayExcerpt": {
-			"type": "boolean",
-			"default": true
+		"displayContent": {
+			"type": "string",
+			"default": "excerpt",
+			"enum": [ "none", "excerpt", "full" ]
 		}
 	},
 	"supports": {

package/src/latest-comments/deprecated.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+
+const v1 = {
+	attributes: {
+		commentsToShow: {
+			type: 'number',
+			default: 5,
+			minimum: 1,
+			maximum: 100,
+		},
+		displayAvatar: {
+			type: 'boolean',
+			default: true,
+		},
+		displayDate: {
+			type: 'boolean',
+			default: true,
+		},
+		displayExcerpt: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+	isEligible( attributes ) {
+		return attributes?.displayExcerpt === false;
+	},
+	migrate( attributes ) {
+		return {
+			...attributes,
+			displayContent: attributes.displayExcerpt ? 'excerpt' : 'none',
+		};
+	},
+};
+
+export default [ v1 ];

package/src/latest-comments/edit.js

@@ -5,6 +5,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	Disabled,
 	RangeControl,
+	SelectControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -31,7 +32,7 @@ const MIN_COMMENTS = 1;
 const MAX_COMMENTS = 100;
 
 export default function LatestComments( { attributes, setAttributes } ) {
-	const { commentsToShow, displayAvatar, displayDate, displayExcerpt } =
+	const { commentsToShow, displayAvatar, displayDate, displayContent } =
 		attributes;
 
 	const serverSideAttributes = {
@@ -54,7 +55,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 							commentsToShow: 5,
 							displayAvatar: true,
 							displayDate: true,
-							displayExcerpt: true,
+							displayContent: 'excerpt',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -98,20 +99,26 @@ export default function LatestComments( { attributes, setAttributes } ) {
 					</ToolsPanelItem>
 
 					<ToolsPanelItem
-						hasValue={ () => ! displayExcerpt }
-						label={ __( 'Display excerpt' ) }
+						hasValue={ () => displayContent !== 'excerpt' }
+						label={ __( 'Display content' ) }
 						onDeselect={ () =>
-							setAttributes( { displayExcerpt: true } )
+							setAttributes( { displayContent: 'excerpt' } )
 						}
 						isShownByDefault
 					>
-						<ToggleControl
+						<SelectControl
 							__nextHasNoMarginBottom
-							label={ __( 'Display excerpt' ) }
-							checked={ displayExcerpt }
-							onChange={ () =>
+							__next40pxDefaultSize
+							label={ __( 'Display content' ) }
+							value={ displayContent }
+							options={ [
+								{ label: __( 'No content' ), value: 'none' },
+								{ label: __( 'Excerpt' ), value: 'excerpt' },
+								{ label: __( 'Full content' ), value: 'full' },
+							] }
+							onChange={ ( value ) =>
 								setAttributes( {
-									displayExcerpt: ! displayExcerpt,
+									displayContent: value,
 								} )
 							}
 						/>

package/src/latest-comments/index.js

@@ -9,6 +9,7 @@ import { comment as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/latest-comments/index.php

@@ -43,6 +43,13 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
  * @return string Returns the post content with latest comments added.
  */
 function render_block_core_latest_comments( $attributes ) {
+	// Handle backward compatibility: check for old displayExcerpt attribute
+	if ( isset( $attributes['displayExcerpt'] ) ) {
+		$display_content = $attributes['displayExcerpt'] ? 'excerpt' : 'none';
+	} else {
+		$display_content = isset( $attributes['displayContent'] ) ? $attributes['displayContent'] : 'excerpt';
+	}
+
 	$comments = get_comments(
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-recent-comments.php */
 		apply_filters(
@@ -112,7 +119,9 @@ function render_block_core_latest_comments( $attributes ) {
 				);
 			}
 			$list_items_markup .= '</footer>';
-			if ( $attributes['displayExcerpt'] ) {
+			if ( 'full' === $display_content ) {
+				$list_items_markup .= '<div class="wp-block-latest-comments__comment-excerpt">' . wpautop( get_comment_text( $comment ) ) . '</div>';
+			} elseif ( 'excerpt' === $display_content ) {
 				$list_items_markup .= '<div class="wp-block-latest-comments__comment-excerpt">' . wpautop( get_comment_excerpt( $comment ) ) . '</div>';
 			}
 			$list_items_markup .= '</article></li>';
@@ -126,7 +135,7 @@ function render_block_core_latest_comments( $attributes ) {
 	if ( $attributes['displayDate'] ) {
 		$classnames[] = 'has-dates';
 	}
-	if ( $attributes['displayExcerpt'] ) {
+	if ( 'none' !== $display_content ) {
 		$classnames[] = 'has-excerpts';
 	}
 	if ( empty( $comments ) ) {

package/src/math/deprecated.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+// v1: Add a wrapper div around the math element.
+const v1 = {
+	attributes: {
+		latex: {
+			type: 'string',
+			role: 'content',
+		},
+		mathML: {
+			type: 'string',
+			source: 'html',
+			selector: 'math',
+		},
+	},
+	save( { attributes } ) {
+		const { latex, mathML } = attributes;
+
+		if ( ! latex ) {
+			return null;
+		}
+
+		return (
+			<math
+				{ ...useBlockProps.save() }
+				display="block"
+				dangerouslySetInnerHTML={ { __html: mathML } }
+			/>
+		);
+	},
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1 ];

package/src/math/edit.js

@@ -82,6 +82,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 								label={ __( 'LaTeX math syntax' ) }
 								hideLabelFromVision
 								value={ latex }
+								className="wp-block-math__textarea-control"
 								onChange={ ( newLatex ) => {
 									if ( ! latexToMathML ) {
 										setAttributes( { latex: newLatex } );

package/src/math/editor.scss

@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.wp-block-math__textarea-control textarea {
+	font-family: $font-family-mono;
+	/*rtl:ignore*/
+	direction: ltr;
+}

package/src/math/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
@@ -26,6 +27,7 @@ export const settings = {
 	},
 	edit,
 	save,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/math/save.js

@@ -11,10 +11,11 @@ export default function save( { attributes } ) {
 	}
 
 	return (
-		<math
-			{ ...useBlockProps.save() }
-			display="block"
-			dangerouslySetInnerHTML={ { __html: mathML } }
-		/>
+		<div { ...useBlockProps.save() }>
+			<math
+				display="block"
+				dangerouslySetInnerHTML={ { __html: mathML } }
+			/>
+		</div>
 	);
 }

package/src/math/style.scss

@@ -0,0 +1,4 @@
+.wp-block-math {
+	overflow-x: auto;
+	overflow-y: hidden;
+}

package/src/navigation/index.php

@@ -497,7 +497,7 @@ class WP_Navigation_Block_Renderer {
 		$close_button_directives         = '';
 		if ( $is_interactive ) {
 			$open_button_directives                  = '
-				data-wp-on-async--click="actions.openMenuOnClick"
+				data-wp-on--click="actions.openMenuOnClick"
 				data-wp-on--keydown="actions.handleMenuKeydown"
 			';
 			$responsive_container_directives         = '
@@ -505,7 +505,7 @@ class WP_Navigation_Block_Renderer {
 				data-wp-class--is-menu-open="state.isMenuOpen"
 				data-wp-watch="callbacks.initMenu"
 				data-wp-on--keydown="actions.handleMenuKeydown"
-				data-wp-on-async--focusout="actions.handleMenuFocusout"
+				data-wp-on--focusout="actions.handleMenuFocusout"
 				tabindex="-1"
 			';
 			$responsive_dialog_directives            = '
@@ -514,7 +514,7 @@ class WP_Navigation_Block_Renderer {
 				data-wp-bind--role="state.roleAttribute"
 			';
 			$close_button_directives                 = '
-				data-wp-on-async--click="actions.closeMenuOnClick"
+				data-wp-on--click="actions.closeMenuOnClick"
 			';
 			$responsive_container_content_directives = '
 				data-wp-watch="callbacks.focusFirstElement"
@@ -830,8 +830,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'tabindex', '-1' );
 
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
-			$tags->set_attribute( 'data-wp-on-async--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.
@@ -841,7 +841,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on-async--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
 			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
@@ -852,7 +852,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation__submenu-container',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on-async--focus', 'actions.openMenuOnFocus' );
+			$tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' );
 		}
 
 		// Iterate through subitems if exist.

package/src/navigation/menu-items-to-blocks.js

@@ -4,6 +4,11 @@
 import { createBlock, parse } from '@wordpress/blocks';
 import { applyFilters } from '@wordpress/hooks';
 
+/**
+ * Internal dependencies
+ */
+import { buildNavigationLinkEntityBinding } from '../navigation-link/shared/use-entity-binding';
+
 /**
  * Convert a flat menu item structure to a nested blocks structure.
  *
@@ -145,12 +150,14 @@ function menuItemToBlockAttributes(
 		object = 'tag';
 	}
 
+	const inferredKind = menuItemTypeField?.replace( '_', '-' ) || 'custom';
+
 	return {
 		label: menuItemTitleField?.rendered || '',
 		...( object?.length && {
 			type: object,
 		} ),
-		kind: menuItemTypeField?.replace( '_', '-' ) || 'custom',
+		kind: inferredKind,
 		url: url || '',
 		...( xfn?.length &&
 			xfn.join( ' ' ).trim() && {
@@ -165,8 +172,11 @@ function menuItemToBlockAttributes(
 			title: attr_title,
 		} ),
 		...( object_id &&
-			'custom' !== object && {
+			( inferredKind === 'post-type' || inferredKind === 'taxonomy' ) && {
 				id: object_id,
+				metadata: {
+					bindings: buildNavigationLinkEntityBinding( inferredKind ),
+				},
 			} ),
 		/* eslint-enable camelcase */
 		...( description?.length && {

package/src/navigation/test/menu-items-to-blocks.js

@@ -371,4 +371,148 @@ describe( 'converting menu items to blocks', () => {
 		const { innerBlocks: actual } = menuItemsToBlocks( [] );
 		expect( actual ).toEqual( [] );
 	} );
+
+	it( 'adds entity bindings for non-custom menu items', () => {
+		const { innerBlocks: actual } = menuItemsToBlocks( [
+			{
+				id: 1,
+				title: {
+					raw: 'Page Item',
+					rendered: 'Page Item',
+				},
+				url: 'http://localhost:8889/page-item/',
+				attr_title: '',
+				description: '',
+				type: 'post_type',
+				type_label: 'Page',
+				object: 'page',
+				object_id: 123,
+				parent: 0,
+				menu_order: 1,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+			{
+				id: 2,
+				title: {
+					raw: 'Category Item',
+					rendered: 'Category Item',
+				},
+				url: 'http://localhost:8889/category/category-item/',
+				attr_title: '',
+				description: '',
+				type: 'taxonomy',
+				type_label: 'Category',
+				object: 'category',
+				object_id: 456,
+				parent: 0,
+				menu_order: 2,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+			{
+				id: 3,
+				title: {
+					raw: 'Custom Item',
+					rendered: 'Custom Item',
+				},
+				url: 'http://localhost:8889/custom-link/',
+				attr_title: '',
+				description: '',
+				type: 'custom',
+				type_label: 'Custom Link',
+				object: 'custom',
+				parent: 0,
+				menu_order: 3,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+		] );
+
+		expect( actual ).toEqual( [
+			expect.objectContaining( {
+				name: 'core/navigation-link',
+				attributes: expect.objectContaining( {
+					label: 'Page Item',
+					id: 123,
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/post-data',
+								args: {
+									field: 'link',
+								},
+							},
+						},
+					},
+				} ),
+				innerBlocks: [],
+			} ),
+			expect.objectContaining( {
+				name: 'core/navigation-link',
+				attributes: expect.objectContaining( {
+					label: 'Category Item',
+					id: 456,
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/term-data',
+								args: {
+									field: 'link',
+								},
+							},
+						},
+					},
+				} ),
+				innerBlocks: [],
+			} ),
+			expect.objectContaining( {
+				name: 'core/navigation-link',
+				attributes: expect.objectContaining( {
+					label: 'Custom Item',
+					// Custom items should NOT have id, metadata, or bindings
+				} ),
+				innerBlocks: [],
+			} ),
+		] );
+
+		// Verify custom item does NOT have bindings
+		expect( actual[ 2 ].attributes ).not.toHaveProperty( 'id' );
+		expect( actual[ 2 ].attributes ).not.toHaveProperty( 'metadata' );
+	} );
+
+	it( 'does not add bindings for invalid kinds even when object_id is present', () => {
+		const { innerBlocks: actual } = menuItemsToBlocks( [
+			{
+				id: 10,
+				title: {
+					raw: 'Invalid Kind Item',
+					rendered: 'Invalid Kind Item',
+				},
+				url: 'http://localhost:8889/invalid-kind-item/',
+				attr_title: '',
+				description: '',
+				type: 'invalid', // becomes inferred kind 'invalid'
+				type_label: 'Invalid',
+				object: 'page',
+				object_id: 999,
+				parent: 0,
+				menu_order: 1,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+		] );
+
+		expect( actual ).toHaveLength( 1 );
+		expect( actual[ 0 ].name ).toBe( 'core/navigation-link' );
+		// Should not set id or metadata when kind is not supported
+		expect( actual[ 0 ].attributes ).not.toHaveProperty( 'id' );
+		expect( actual[ 0 ].attributes ).not.toHaveProperty( 'metadata' );
+		// Label should still be set correctly
+		expect( actual[ 0 ].attributes.label ).toBe( 'Invalid Kind Item' );
+	} );
 } );

package/src/navigation/view.js

@@ -144,7 +144,7 @@ const { state, actions } = store(
 					}
 				}
 			} ),
-			handleMenuFocusout( event ) {
+			handleMenuFocusout: withSyncEvent( ( event ) => {
 				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu
 				// event.target === The element losing focus
@@ -162,7 +162,7 @@ const { state, actions } = store(
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );
 				}
-			},
+			} ),
 
 			openMenu( menuOpenedOn = 'click' ) {
 				const { type } = getContext();

package/src/navigation-link/link-ui/page-creator.js

@@ -9,9 +9,10 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
 
@@ -57,6 +58,8 @@ export function LinkUIPageCreator( {
 	);
 
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	async function createPage( event ) {
 		event.preventDefault();
@@ -85,10 +88,30 @@ export function LinkUIPageCreator( {
 					kind: 'post-type',
 				};
 
+				// Show success notice
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: the name of the new page being created.
+						__( '%s page created successfully.' ),
+						decodeEntities( savedRecord.title.rendered )
+					),
+					{
+						type: 'snackbar',
+						id: 'page-created-success',
+					}
+				);
+
 				onPageCreated( pageLink );
 			}
 		} catch ( error ) {
-			// Error handling is done via the data store selectors
+			// Show error notice
+			createErrorNotice(
+				__( 'Failed to create page. Please try again.' ),
+				{
+					type: 'snackbar',
+					id: 'page-created-error',
+				}
+			);
 		}
 	}
 

package/src/post-date/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-date",
 	"title": "Date",
 	"category": "theme",
-	"description": "Display the publish date for an entry such as a post or page.",
+	"description": "Display a custom date.",
 	"textdomain": "default",
 	"attributes": {
 		"datetime": {