@wordpress/block-library 11.0.0 → 11.0.2-next.v.202609171837.0

package/src/image/edit.jsx

@@ -405,7 +405,7 @@ export function ImageEdit( {
 							/* translators: %s: Label of the bindings source. */
 							__( 'Connected to %s' ),
 							blockBindingsSource.label
-					  )
+						)
 					: __( 'Connected to dynamic data' ),
 			};
 		},

package/src/image/image.jsx

@@ -331,7 +331,7 @@ export default function Image( {
 							'attachment',
 							id,
 							{ context: 'view' }
-					  )
+						)
 					: null;
 
 			// Check if the attachment resolution failed with a specific error.
@@ -348,7 +348,7 @@ export default function Image( {
 								id,
 								{ context: 'view' },
 							]
-					  )
+						)
 					: null;
 
 			return {
@@ -837,7 +837,7 @@ export default function Image( {
 							/* translators: %s: Label of the bindings source. */
 							__( 'Connected to %s' ),
 							altBindingSource.label
-					  )
+						)
 					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
@@ -851,7 +851,7 @@ export default function Image( {
 							/* translators: %s: Label of the bindings source. */
 							__( 'Connected to %s' ),
 							titleBindingSource.label
-					  )
+						)
 					: __( 'Connected to dynamic data' ),
 			};
 		},
@@ -1156,7 +1156,7 @@ export default function Image( {
 						'This image has been marked as decorative; its file name is %s'
 					),
 					filename
-			  )
+				)
 			: __( 'This image has been marked as decorative.' );
 	} else if ( alt ) {
 		defaultedAlt = alt;
@@ -1209,7 +1209,7 @@ export default function Image( {
 										height:
 											pixelSize.height +
 											resizeDelta.height,
-								  }
+									}
 								: ( () => {
 										const style = {};
 										if ( width === 'auto' ) {
@@ -1242,7 +1242,7 @@ export default function Image( {
 											style.height = 'auto';
 										}
 										return style;
-								  } )() ),
+									} )() ),
 							objectFit: scale,
 							objectPosition:
 								focalPoint && scale

package/src/image/index.php

@@ -290,12 +290,12 @@ function block_core_image_render_lightbox( $block_content, array $block, WP_Bloc
 	$body_content = $processor->get_updated_html();
 
 	// Adds a button alongside image in the body content.
+	// Extract the img tag using preg_match for structured access.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
 
-	$button =
-		$img[0]
-		. '<button
+	if ( isset( $img[0] ) ) {
+		$button_html = '<button
 			class="lightbox-trigger"
 			type="button"
 			aria-haspopup="dialog"
@@ -310,7 +310,13 @@ function block_core_image_render_lightbox( $block_content, array $block, WP_Bloc
 			</svg>
 		</button>';
 
-	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
+		// Build the replacement: img tag + button.
+		// Use str_replace for literal replacement instead of preg_replace to avoid
+		// PCRE backreference interpretation of $ and \ sequences in user-controlled
+		// image attributes (e.g., alt="Just $5 today").
+		$button       = $img[0] . $button_html;
+		$body_content = str_replace( $img[0], $button, $body_content );
+	}
 
 	add_action( 'wp_footer', 'block_core_image_print_lightbox_overlay' );
 

package/src/image/style.scss

@@ -6,6 +6,7 @@
 	> a,
 	> figure > a {
 		display: inline-block;
+		color: inherit;
 	}
 
 	img {

package/src/image/test/use-open-image-media-editor-modal.jsdom.test.js

@@ -649,7 +649,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 								id: 2,
 								alt_text: 'Updated alt',
 								caption: { raw: '' },
-						  },
+							},
 				resolveGetEntityRecord: ( kind, name, attachmentId ) =>
 					attachmentId === 2 ? updatedAttachment : undefined,
 			},

package/src/index.jsx

@@ -408,7 +408,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 							enabledExperiments.includes( __experimental )
 					)
 					.forEach( ( { init } ) => init() );
-		  }
+			}
 		: undefined;
 
 export { privateApis } from './private-apis';

package/src/latest-comments/edit.jsx

@@ -1,7 +1,7 @@
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	RangeControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Spinner,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
@@ -106,7 +106,7 @@ export default function LatestComments( { attributes, setAttributes, name } ) {
 						}
 						isShownByDefault
 					>
-						<SelectControl
+						<WCSelectControl
 							label={ __( 'Display content' ) }
 							value={ displayContent }
 							options={ [

package/src/latest-posts/edit.jsx

@@ -758,7 +758,7 @@ export default function LatestPostsEdit( {
 									!! titleTrimmed
 										? {
 												__html: titleTrimmed,
-										  }
+											}
 										: undefined
 								}
 								onClick={ showRedirectionPreventedNotice }

package/src/list/ordered-list-settings.jsx

@@ -3,7 +3,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import {
 	TextControl,
 	ToggleControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -58,7 +58,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
 						} )
 					}
 				>
-					<SelectControl
+					<WCSelectControl
 						label={ __( 'List style' ) }
 						options={ LIST_STYLE_OPTIONS }
 						value={ type || 'decimal' }

package/src/list-item/hooks/use-enter.js

@@ -69,7 +69,7 @@ export default function useEnter( clientId ) {
 								...topParentListBlock,
 								innerBlocks: after,
 							} ),
-					  ]
+						]
 					: [];
 				replaceBlocks(
 					topParentListBlock.clientId,

package/src/math/README.md

@@ -15,7 +15,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
-| `latex` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `latex` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `math annotation[encoding="application/x-tex"]`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 | `mathML` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `html`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `math` |
 
 ## Supports
@@ -39,7 +39,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
 
 ```html
-<!-- wp:math {"latex":"x = \u005cfrac{-b \u005cpm \u005csqrt{b^2-4ac}}{2a}"} -->
+<!-- wp:math -->
 <div class="wp-block-math"><math display="block"><semantics><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</annotation></semantics></math></div>
 <!-- /wp:math -->
 ```

package/src/math/block.json

@@ -44,6 +44,8 @@
 	"attributes": {
 		"latex": {
 			"type": "string",
+			"source": "text",
+			"selector": "math annotation[encoding=\"application/x-tex\"]",
 			"role": "content"
 		},
 		"mathML": {

package/src/math/deprecated.jsx

@@ -1,18 +1,44 @@
 import { useBlockProps } from '@wordpress/block-editor';
 
+// Earlier versions stored the LaTeX source in the block comment. Content that
+// could not be rendered was saved with an empty `<math>`, so the source is
+// only available from the comment attribute for such blocks.
+const legacyAttributes = {
+	latex: {
+		type: 'string',
+		role: 'content',
+	},
+	mathML: {
+		type: 'string',
+		source: 'html',
+		selector: 'math',
+	},
+};
+
+// v2: The LaTeX source was stored in the block comment.
+const v2 = {
+	attributes: legacyAttributes,
+	save( { attributes } ) {
+		const { latex, mathML } = attributes;
+
+		if ( ! latex ) {
+			return null;
+		}
+
+		return (
+			<div { ...useBlockProps.save() }>
+				<math
+					display="block"
+					dangerouslySetInnerHTML={ { __html: mathML } }
+				/>
+			</div>
+		);
+	},
+};
+
 // v1: Add a wrapper div around the math element.
 const v1 = {
-	attributes: {
-		latex: {
-			type: 'string',
-			role: 'content',
-		},
-		mathML: {
-			type: 'string',
-			source: 'html',
-			selector: 'math',
-		},
-	},
+	attributes: legacyAttributes,
 	save( { attributes } ) {
 		const { latex, mathML } = attributes;
 
@@ -38,4 +64,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

package/src/math/edit.jsx

@@ -4,37 +4,43 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
-import { ValidatedTextareaControl } from '@wordpress/ui';
+import { ValidatedTextareaControl, Link } from '@wordpress/ui';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { useEvent } from '@wordpress/compose';
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
 	const [ blockRef, setBlockRef ] = useState();
 	const [ error, setError ] = useState( null );
 	const [ latexToMathML, setLatexToMathML ] = useState();
-	const initialLatex = useRef( latex );
 	const formRef = useRef();
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	// Re-render once the converter loads, so MathML saved from a corrupted
+	// source is repaired and a source typed before the converter loaded is
+	// rendered. The converter loads asynchronously, and the user can type in
+	// the meantime, so read the source at that time rather than on mount.
+	const renderLatest = useEvent( ( convert ) => {
+		if ( ! latex ) {
+			return;
+		}
+		try {
+			const newMathML = convert( latex, { displayMode: true } );
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { mathML: newMathML } );
+		} catch ( err ) {
+			setError( err.message );
+		}
+	} );
+
 	useEffect( () => {
 		import( '@wordpress/latex-to-mathml' ).then( ( module ) => {
 			setLatexToMathML( () => module.default );
-			if ( initialLatex.current ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				setAttributes( {
-					mathML: module.default( initialLatex.current, {
-						displayMode: true,
-					} ),
-				} );
-			}
+			renderLatest( module.default );
 		} );
-	}, [
-		initialLatex,
-		setAttributes,
-		__unstableMarkNextChangeAsNotPersistent,
-	] );
+	}, [ renderLatest ] );
 
 	const blockProps = useBlockProps( {
 		ref: setBlockRef,
@@ -52,7 +58,15 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 					dangerouslySetInnerHTML={ { __html: mathML } }
 				/>
 			) : (
-				'\u200B'
+				// Show the source until it renders, as the front end does.
+				<math display="block">
+					<semantics>
+						{ /* eslint-disable-next-line react/no-unknown-property -- MathML attribute. */ }
+						<annotation encoding="application/x-tex">
+							{ latex || '\u200B' }
+						</annotation>
+					</semantics>
+				</math>
 			) }
 			{ isSelected && (
 				<Popover
@@ -67,12 +81,11 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 				>
 					<form
 						ref={ formRef }
-						style={ { padding: '4px', minWidth: '300px' } }
+						style={ { padding: '16px', minWidth: '300px' } }
 						onSubmit={ ( event ) => event.preventDefault() }
 					>
 						<ValidatedTextareaControl
 							label={ __( 'LaTeX math syntax' ) }
-							hideLabelFromVision
 							value={ latex ?? '' }
 							className="wp-block-math__textarea-control"
 							customValidity={
@@ -82,7 +95,12 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 							}
 							onValueChange={ ( newLatex ) => {
 								if ( ! latexToMathML ) {
-									setAttributes( { latex: newLatex } );
+									// The source is read back from the MathML,
+									// so clear a stale render along with it.
+									setAttributes( {
+										latex: newLatex,
+										mathML: '',
+									} );
 									return;
 								}
 								let newMathML = '';
@@ -99,8 +117,19 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 									latex: newLatex,
 								} );
 							} }
-							placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
+							placeholder={ __(
+								'e.g., x^2, \\frac{a}{b}, \\sqrt{x}'
+							) }
 						/>
+						<Link
+							openInNewTab
+							className="wp-block-math__learn-more"
+							href={ __(
+								'https://wordpress.org/documentation/article/math-block/'
+							) }
+						>
+							{ __( 'Learn more about LaTeX syntax' ) }
+						</Link>
 					</form>
 				</Popover>
 			) }

package/src/math/editor.scss

@@ -5,3 +5,8 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.wp-block-math__learn-more {
+	display: inline-block;
+	margin-top: var(--wpds-dimension-gap-sm);
+}

package/src/math/save.jsx

@@ -7,12 +7,28 @@ export default function save( { attributes } ) {
 		return null;
 	}
 
+	// The LaTeX source lives in the `<annotation>` inside the MathML, where
+	// it is HTML-escaped, so `wp_kses` leaves characters such as `&` and `<`
+	// alone. Until the source renders, save it on its own: with the
+	// annotation as the only child of `<semantics>`, browsers display the
+	// source text.
 	return (
 		<div { ...useBlockProps.save() }>
-			<math
-				display="block"
-				dangerouslySetInnerHTML={ { __html: mathML } }
-			/>
+			{ mathML ? (
+				<math
+					display="block"
+					dangerouslySetInnerHTML={ { __html: mathML } }
+				/>
+			) : (
+				<math display="block">
+					<semantics>
+						{ /* eslint-disable-next-line react/no-unknown-property -- MathML attribute. */ }
+						<annotation encoding="application/x-tex">
+							{ latex }
+						</annotation>
+					</semantics>
+				</math>
+			) }
 		</div>
 	);
 }

package/src/media-text/constants.js

@@ -1,5 +1,6 @@
 import { _x } from '@wordpress/i18n';
 
+export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
 export const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 export const LINK_DESTINATION_NONE = 'none';

package/src/media-text/deprecated.jsx

@@ -15,7 +15,7 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 				backgroundPosition: focalPoint
 					? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
 					: `50% 50%`,
-		  }
+			}
 		: {};
 };
 
@@ -26,9 +26,9 @@ const v6ToV7ImageFillStyles = ( url, focalPoint ) => {
 				backgroundPosition: focalPoint
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
 							focalPoint.y * 100
-					  ) }%`
+						) }%`
 					: `50% 50%`,
-		  }
+			}
 		: {};
 };
 

package/src/media-text/edit.jsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useRef } from '@wordpress/element';
 import {
 	BlockControls,
@@ -26,8 +26,11 @@ import {
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
 import MediaContainer from './media-container';
 import {
+	ALLOWED_MEDIA_TYPES,
 	DEFAULT_MEDIA_SIZE_SLUG,
 	WIDTH_CONSTRAINT_PERCENTAGE,
 	LINK_DESTINATION_NONE,
@@ -36,6 +39,7 @@ import {
 } from './constants';
 import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { MediaControl } from '../utils/media-control';
 
 const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -221,7 +225,7 @@ function MediaTextEdit( {
 								{
 									context: 'view',
 								}
-						  )
+							)
 						: undefined,
 			};
 		},
@@ -240,7 +244,7 @@ function MediaTextEdit( {
 								{
 									context: 'view',
 								}
-						  )
+							)
 						: null,
 			};
 		},
@@ -332,6 +336,46 @@ function MediaTextEdit( {
 	};
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+	};
+
+	const mediaInspectorPanel = isSelected ? (
+		<InspectorControls group="content">
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				resetAll={ () => onSelectMedia( undefined ) }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Media' ) }
+					hasValue={ () => !! mediaUrl || !! useFeaturedImage }
+					onDeselect={ () => onSelectMedia( undefined ) }
+					isShownByDefault
+				>
+					<MediaControl
+						mediaId={ mediaId }
+						mediaUrl={ mediaUrl || featuredImageURL }
+						filename={
+							image?.media_details?.sizes?.full?.file ||
+							image?.slug ||
+							getFilename( mediaUrl )
+						}
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onSelect={ onSelectMedia }
+						onError={ onUploadError }
+						onReset={ () => onSelectMedia( undefined ) }
+						useFeaturedImage={ useFeaturedImage }
+						onToggleFeaturedImage={ toggleUseFeaturedImage }
+						emptyLabel={ __( 'Add media' ) }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</InspectorControls>
+	) : null;
+
 	const mediaTextGeneralSettings = (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -480,6 +524,7 @@ function MediaTextEdit( {
 
 	return (
 		<>
+			{ mediaInspectorPanel }
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
 				{ blockEditingMode === 'default' && (

package/src/media-text/image-fill.js

@@ -4,8 +4,8 @@ export function imageFillStyles( url, focalPoint ) {
 				objectPosition: focalPoint
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
 							focalPoint.y * 100
-					  ) }%`
+						) }%`
 					: `50% 50%`,
-		  }
+			}
 		: {};
 }

package/src/media-text/media-container.jsx

@@ -15,11 +15,11 @@ import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 import { imageFillStyles } from './image-fill';
+import { ALLOWED_MEDIA_TYPES } from './constants';
 
 /**
  * Constants
  */
-const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const noop = () => {};
 
 const ResizableBoxContainer = forwardRef(

package/src/navigation/edit/index.jsx

@@ -770,7 +770,7 @@ function Navigation( {
 		submenuVisibility !== 'always'
 			? __(
 					'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.'
-			  )
+				)
 			: '';
 
 	const isFirstRender = useRef( true ); // Don't speak on first render.

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

@@ -60,10 +60,10 @@ const MainContent = ( {
 				/* translators: %s: The name of a menu. */
 				__( 'Structure for Navigation Menu: %s' ),
 				navigationMenu?.title || __( 'Untitled menu' )
-		  )
+			)
 		: __(
 				'You have not yet created any menus. Displaying a list of your Pages'
-		  );
+			);
 
 	return (
 		<div className="wp-block-navigation__menu-inspector-controls">

package/src/navigation/edit/overlay-template-part-selector.jsx

@@ -3,7 +3,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Button,
 	FlexBlock,
 	FlexItem,
@@ -255,7 +255,7 @@ export default function OverlayTemplatePartSelector( {
 					selectedTemplatePart.title?.rendered
 						? decodeEntities( selectedTemplatePart.title.rendered )
 						: selectedTemplatePart.slug
-			  )
+				)
 			: __( 'Edit overlay' );
 	}, [ selectedTemplatePart ] );
 
@@ -301,7 +301,7 @@ export default function OverlayTemplatePartSelector( {
 						className="wp-block-navigation__overlay-selector-controls"
 					>
 						<FlexBlock>
-							<SelectControl
+							<WCSelectControl
 								label={ __( 'Overlay template' ) }
 								hideLabelFromVision
 								aria-labelledby={ headingId }

package/src/navigation/edit/responsive-wrapper.jsx

@@ -62,7 +62,7 @@ export default function ResponsiveWrapper( {
 					! overlayBackgroundColor?.slug &&
 					overlayBackgroundColor?.color &&
 					overlayBackgroundColor.color,
-		  }
+			}
 		: {};
 
 	const openButtonClasses = clsx(