@wordpress/block-library 9.33.4 → 9.34.1-next.2f1c7c01b.0

package/src/image/view.js

@@ -6,8 +6,14 @@ import {
 	getContext,
 	getElement,
 	withSyncEvent,
+	withScope,
 } from '@wordpress/interactivity';
 
+/**
+ * Internal dependencies
+ */
+import { IMAGE_PRELOAD_DELAY } from './constants';
+
 /**
  * Tracks whether user is touching screen; used to differentiate behavior for
  * touch and mouse input.
@@ -24,11 +30,36 @@ let isTouching = false;
  */
 let lastTouchTime = 0;
 
+/**
+ * Returns the appropriate src URL for an image.
+ *
+ * @param {string} uploadedSrc - Full size image src.
+ * @return {string} The source URL.
+ */
+function getImageSrc( { uploadedSrc } ) {
+	return (
+		uploadedSrc ||
+		'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+	);
+}
+
+/**
+ * Returns the appropriate srcset for an image.
+ *
+ * @param {string} lightboxSrcset - Image srcset.
+ * @return {string} The srcset value.
+ */
+function getImageSrcset( { lightboxSrcset } ) {
+	return lightboxSrcset || '';
+}
+
 const { state, actions, callbacks } = store(
 	'core/image',
 	{
 		state: {
 			currentImageId: null,
+			preloadTimers: new Map(),
+			preloadedImageIds: new Set(),
 			get currentImage() {
 				return state.metadata[ state.currentImageId ];
 			},
@@ -42,10 +73,10 @@ const { state, actions, callbacks } = store(
 				return state.overlayOpened ? 'true' : null;
 			},
 			get enlargedSrc() {
-				return (
-					state.currentImage.uploadedSrc ||
-					'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
-				);
+				return getImageSrc( state.currentImage );
+			},
+			get enlargedSrcset() {
+				return getImageSrcset( state.currentImage );
 			},
 			get figureStyles() {
 				return (
@@ -187,6 +218,55 @@ const { state, actions, callbacks } = store(
 					}
 				}
 			},
+			preloadImage() {
+				const { imageId } = getContext();
+
+				// Bails if it has already been preloaded. This could help
+				// prevent unnecessary preloading of the same image multiple times,
+				// leading to duplicate link elements in the document head.
+				if ( state.preloadedImageIds.has( imageId ) ) {
+					return;
+				}
+
+				// Link element to preload the image.
+				const imageMetadata = state.metadata[ imageId ];
+				const imageLink = document.createElement( 'link' );
+				imageLink.rel = 'preload';
+				imageLink.as = 'image';
+				imageLink.href = getImageSrc( imageMetadata );
+
+				// Apply srcset if available for responsive preloading
+				const srcset = getImageSrcset( imageMetadata );
+				if ( srcset ) {
+					imageLink.setAttribute( 'imagesrcset', srcset );
+					imageLink.setAttribute( 'imagesizes', '100vw' );
+				}
+
+				document.head.appendChild( imageLink );
+				state.preloadedImageIds.add( imageId );
+			},
+			preloadImageWithDelay() {
+				const { imageId } = getContext();
+
+				actions.cancelPreload();
+
+				// Set a new timer to preload the image after a short delay.
+				const timerId = setTimeout(
+					withScope( () => {
+						actions.preloadImage();
+						state.preloadTimers.delete( imageId );
+					} ),
+					IMAGE_PRELOAD_DELAY
+				);
+				state.preloadTimers.set( imageId, timerId );
+			},
+			cancelPreload() {
+				const { imageId } = getContext();
+				if ( state.preloadTimers.has( imageId ) ) {
+					clearTimeout( state.preloadTimers.get( imageId ) );
+					state.preloadTimers.delete( imageId );
+				}
+			},
 		},
 		callbacks: {
 			setOverlayStyles() {

package/src/index.js

@@ -125,8 +125,10 @@ import * as siteTitle from './site-title';
 import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
+import * as tab from './tab';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
+import * as tabs from './tabs';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termCount from './term-count';
@@ -263,6 +265,8 @@ const getAllBlocks = () => {
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( breadcrumbs );
+		blocks.push( tab );
+		blocks.push( tabs );
 	}
 
 	if ( window?.__experimentalEnableFormBlocks ) {

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

@@ -7,6 +7,9 @@
 	"description": "Display mathematical notation using LaTeX.",
 	"keywords": [ "equation", "formula", "latex", "mathematics" ],
 	"textdomain": "default",
+	"supports": {
+		"html": false
+	},
 	"attributes": {
 		"latex": {
 			"type": "string",

package/src/math/edit.js

@@ -23,11 +23,11 @@ import { unlock } from '../lock-unlock';
 const { Badge } = unlock( componentsPrivateApis );
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
-	const { latex } = attributes;
+	const { latex, mathML } = attributes;
 	const [ blockRef, setBlockRef ] = useState();
 	const [ error, setError ] = useState( null );
 	const [ latexToMathML, setLatexToMathML ] = useState();
-	const initialLatex = useRef( attributes.latex );
+	const initialLatex = useRef( latex );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -56,13 +56,13 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 
 	return (
 		<div { ...blockProps }>
-			{ attributes.mathML ? (
+			{ mathML ? (
 				<math
 					// We can't spread block props on the math element because
 					// it only supports a limited amount of global attributes.
 					// For example, draggable will have no effect.
 					display="block"
-					dangerouslySetInnerHTML={ { __html: attributes.mathML } }
+					dangerouslySetInnerHTML={ { __html: mathML } }
 				/>
 			) : (
 				'\u200B'
@@ -88,9 +88,9 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setAttributes( { latex: newLatex } );
 										return;
 									}
-									let mathML = '';
+									let newMathML = '';
 									try {
-										mathML = latexToMathML( newLatex, {
+										newMathML = latexToMathML( newLatex, {
 											displayMode: true,
 										} );
 										setError( null );
@@ -98,7 +98,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 										setError( err.message );
 									}
 									setAttributes( {
-										mathML,
+										mathML: newMathML,
 										latex: newLatex,
 									} );
 								} }

package/src/media-text/edit.js

@@ -58,7 +58,6 @@ const applyWidthConstraints = ( width ) =>
 	);
 
 function getImageSourceUrlBySizeSlug( image, slug ) {
-	// eslint-disable-next-line camelcase
 	return image?.media_details?.sizes?.[ slug ]?.source_url;
 }
 
@@ -105,7 +104,6 @@ function attributesFromMedia( {
 			// Try the "large" size URL, falling back to the "full" size URL below.
 			src =
 				media.sizes?.large?.url ||
-				// eslint-disable-next-line camelcase
 				media.media_details?.sizes?.large?.source_url;
 		}
 

package/src/missing/edit.js

@@ -59,7 +59,11 @@ export default function MissingEdit( { attributes, clientId } ) {
 		</Button>
 	);
 
-	if ( hasContent && ! hasFreeformBlock && ! originalName ) {
+	if (
+		hasContent &&
+		! hasFreeformBlock &&
+		( ! originalName || originalName === 'core/freeform' )
+	) {
 		if ( hasHTMLBlock ) {
 			messageHTML = __(
 				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'

package/src/navigation/edit/menu-inspector-controls.js

@@ -124,7 +124,7 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 				if ( isEntityLink ) {
 					createBinding( updatedAttributes );
 				} else {
-					clearBinding( updatedAttributes );
+					clearBinding();
 				}
 
 				setInsertedBlock( null );

package/src/navigation-link/edit.js

@@ -558,7 +558,7 @@ export default function NavigationLinkEdit( {
 								if ( isEntityLink ) {
 									createBinding( updatedAttributes );
 								} else {
-									clearBinding( updatedAttributes );
+									clearBinding();
 								}
 							} }
 						/>

package/src/navigation-link/editor.scss

@@ -110,7 +110,7 @@
 .link-control-transform__subheading {
 	font-size: 11px;
 	text-transform: uppercase;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin-bottom: 1.5em;
 }

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/navigation-link/shared/controls.js

@@ -11,7 +11,7 @@ import {
 	TextareaControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { safeDecodeURI } from '@wordpress/url';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
@@ -72,9 +72,20 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	const { label, url, description, rel, opensInNewTab } = attributes;
 	const lastURLRef = useRef( url );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const urlInputRef = useRef();
+	const shouldFocusURLInputRef = useRef( false );
 	const inputId = useInstanceId( Controls, 'link-input' );
 	const helpTextId = `${ inputId }__help`;
 
+	// Local state to control the input value
+	const [ inputValue, setInputValue ] = useState( url );
+
+	// Sync local state when url prop changes (e.g., from undo/redo or external updates)
+	useEffect( () => {
+		setInputValue( url );
+		lastURLRef.current = url;
+	}, [ url ] );
+
 	// Use the entity binding hook internally
 	const { hasUrlBinding, clearBinding } = useEntityBinding( {
 		clientId,
@@ -84,7 +95,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	// Get direct store dispatch to bypass setBoundAttributes wrapper
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const editBoundLink = () => {
+	const unsyncBoundLink = () => {
 		// Clear the binding first
 		clearBinding();
 
@@ -93,9 +104,23 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 		// setAttributes is actually setBoundAttributes, a wrapper function that
 		// processes attributes through the binding system.
 		// See: packages/block-editor/src/components/block-edit/edit.js
-		updateBlockAttributes( clientId, { url: '', id: undefined } );
+		updateBlockAttributes( clientId, {
+			url: lastURLRef.current, // set the lastURLRef as the new editable value so we avoid bugs from empty link states
+			id: undefined,
+		} );
 	};
 
+	useEffect( () => {
+		// Checking for ! hasUrlBinding is a defensive check, as we would
+		// only want to focus the input if the url is not bound to an entity.
+		if ( ! hasUrlBinding && shouldFocusURLInputRef.current ) {
+			// focuses and highlights the url input value, giving the user
+			// the ability to delete the value quickly or edit it.
+			urlInputRef.current?.select();
+		}
+		shouldFocusURLInputRef.current = false;
+	}, [ hasUrlBinding ] );
+
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -135,22 +160,25 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 				isShownByDefault
 			>
 				<InputControl
+					ref={ urlInputRef }
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					id={ inputId }
 					label={ __( 'Link' ) }
-					value={ url ? safeDecodeURI( url ) : '' }
-					onChange={ ( urlValue ) => {
-						if ( hasUrlBinding ) {
-							return; // Prevent editing when URL is bound
-						}
-						setAttributes( {
-							url: encodeURI( safeDecodeURI( urlValue ) ),
-						} );
-					} }
+					value={ inputValue ? safeDecodeURI( inputValue ) : '' }
 					autoComplete="off"
 					type="url"
 					disabled={ hasUrlBinding }
+					onChange={ ( newValue ) => {
+						if ( hasUrlBinding ) {
+							return;
+						}
+
+						// Defer updating the url attribute until onBlur to prevent the canvas from
+						// treating a temporary empty value as a committed value, which replaces the
+						// label with placeholder text.
+						setInputValue( newValue );
+					} }
 					onFocus={ () => {
 						if ( hasUrlBinding ) {
 							return;
@@ -161,12 +189,19 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						if ( hasUrlBinding ) {
 							return;
 						}
+
+						const finalValue = ! inputValue
+							? lastURLRef.current
+							: inputValue;
+
+						// Update local state immediately so input reflects the reverted value if the value was cleared
+						setInputValue( finalValue );
+
 						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
-						updateAttributes(
-							{ url: ! url ? lastURLRef.current : url },
-							setAttributes,
-							{ ...attributes, url: lastURLRef.current }
-						);
+						updateAttributes( { url: finalValue }, setAttributes, {
+							...attributes,
+							url: lastURLRef.current,
+						} );
 					} }
 					help={
 						hasUrlBinding && (
@@ -180,7 +215,12 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						hasUrlBinding && (
 							<Button
 								icon={ unlinkIcon }
-								onClick={ editBoundLink }
+								onClick={ () => {
+									unsyncBoundLink();
+									// Focus management to send focus to the URL input
+									// on next render after disabled state is removed.
+									shouldFocusURLInputRef.current = true;
+								} }
 								aria-describedby={ helpTextId }
 								showTooltip
 								label={ __( 'Unsync and edit' ) }

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

@@ -6,6 +6,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -95,18 +96,22 @@ describe( 'Controls', () => {
 		expect( urlInput.value ).toBe( 'https://example.com/test page' );
 	} );
 
-	it( 'encodes URL values when changed', () => {
+	it( 'calls updateAttributes with new URL on blur', async () => {
+		const user = userEvent.setup();
 		render( <Controls { ...defaultProps } /> );
 
 		const urlInput = screen.getByLabelText( 'Link' );
 
-		fireEvent.change( urlInput, {
-			target: { value: 'https://example.com/test page' },
-		} );
+		await user.click( urlInput );
+		await user.clear( urlInput );
+		await user.type( urlInput, 'https://example.com/test page' );
+		await user.tab();
 
-		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
-			url: 'https://example.com/test%20page',
-		} );
+		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
+			{ url: 'https://example.com/test page' },
+			defaultProps.setAttributes,
+			{ ...defaultProps.attributes, url: 'https://example.com' }
+		);
 	} );
 
 	it( 'calls updateAttributes on URL blur', () => {
@@ -143,11 +148,11 @@ describe( 'Controls', () => {
 			target: { value: 'https://new.com' },
 		} );
 
-		// Blur should call updateAttributes with the current URL (since url exists)
+		// Blur should call updateAttributes with the new URL value from the input
 		fireEvent.blur( urlInput );
 
 		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
-			{ url: 'https://different.com' }, // Current URL from attributes (not input value)
+			{ url: 'https://new.com' }, // New URL from input value
 			defaultProps.setAttributes,
 			{
 				...propsWithDifferentUrl.attributes,

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

@@ -69,7 +69,7 @@ export function useEntityBinding( { clientId, attributes } ) {
 		if ( hasUrlBinding ) {
 			updateBlockBindings( { url: undefined } );
 		}
-	}, [ updateBlockBindings, hasUrlBinding, metadata, id ] );
+	}, [ updateBlockBindings, hasUrlBinding ] );
 
 	const createBinding = useCallback(
 		( updatedAttributes ) => {