@wordpress/block-library 11.1.0 → 11.2.0

package/src/columns/edit.jsx

@@ -1,12 +1,9 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import {
-	Notice,
-	RangeControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -19,122 +16,16 @@ import {
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
-	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import {
-	hasExplicitPercentColumnWidths,
-	getMappedColumnWidths,
-	getRedistributedColumnWidths,
-	toWidthPrecision,
-} from './utils';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const DEFAULT_BLOCK = {
 	name: 'core/column',
 };
 
-function ColumnInspectorControls( {
-	clientId,
-	setAttributes,
-	isStackedOnMobile,
-} ) {
-	const { count, canInsertColumnBlock, minCount } = useSelect(
-		( select ) => {
-			const { canInsertBlockType, canRemoveBlock, getBlockOrder } =
-				select( blockEditorStore );
-			const blockOrder = getBlockOrder( clientId );
-
-			// Get the indexes of columns for which removal is prevented.
-			// The highest index will be used to determine the minimum column count.
-			const preventRemovalBlockIndexes = blockOrder.reduce(
-				( acc, blockId, index ) => {
-					if ( ! canRemoveBlock( blockId ) ) {
-						acc.push( index );
-					}
-					return acc;
-				},
-				[]
-			);
-
-			return {
-				count: blockOrder.length,
-				canInsertColumnBlock: canInsertBlockType(
-					'core/column',
-					clientId
-				),
-				minCount: Math.max( ...preventRemovalBlockIndexes ) + 1,
-			};
-		},
-		[ clientId ]
-	);
-	const { getBlocks } = useSelect( blockEditorStore );
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-
-	/**
-	 * Updates the column count, including necessary revisions to child Column
-	 * blocks to grant required or redistribute available space.
-	 *
-	 * @param {number} previousColumns Previous column count.
-	 * @param {number} newColumns      New column count.
-	 */
-	function updateColumns( previousColumns, newColumns ) {
-		let innerBlocks = getBlocks( clientId );
-		const hasExplicitWidths = hasExplicitPercentColumnWidths( innerBlocks );
-
-		// Redistribute available width for existing inner blocks.
-		const isAddingColumn = newColumns > previousColumns;
-
-		if ( isAddingColumn && hasExplicitWidths ) {
-			// If adding a new column, assign width to the new column equal to
-			// as if it were `1 / columns` of the total available space.
-			const newColumnWidth = toWidthPrecision( 100 / newColumns );
-			const newlyAddedColumns = newColumns - previousColumns;
-
-			// Redistribute in consideration of pending block insertion as
-			// constraining the available working width.
-			const widths = getRedistributedColumnWidths(
-				innerBlocks,
-				100 - newColumnWidth * newlyAddedColumns
-			);
-
-			innerBlocks = [
-				...getMappedColumnWidths( innerBlocks, widths ),
-				...Array.from( {
-					length: newlyAddedColumns,
-				} ).map( () => {
-					return createBlock( 'core/column', {
-						width: `${ newColumnWidth }%`,
-					} );
-				} ),
-			];
-		} else if ( isAddingColumn ) {
-			innerBlocks = [
-				...innerBlocks,
-				...Array.from( {
-					length: newColumns - previousColumns,
-				} ).map( () => {
-					return createBlock( 'core/column' );
-				} ),
-			];
-		} else if ( newColumns < previousColumns ) {
-			// The removed column will be the last of the inner blocks.
-			innerBlocks = innerBlocks.slice(
-				0,
-				-( previousColumns - newColumns )
-			);
-			if ( hasExplicitWidths ) {
-				// Redistribute as if block is already removed.
-				const widths = getRedistributedColumnWidths( innerBlocks, 100 );
-
-				innerBlocks = getMappedColumnWidths( innerBlocks, widths );
-			}
-		}
-
-		replaceInnerBlocks( clientId, innerBlocks );
-	}
-
+function ColumnInspectorControls( { setAttributes, isStackedOnMobile } ) {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -147,26 +38,6 @@ function ColumnInspectorControls( {
 			} }
 			dropdownMenuProps={ dropdownMenuProps }
 		>
-			{ canInsertColumnBlock && (
-				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
-					<RangeControl
-						label={ __( 'Columns' ) }
-						value={ count }
-						onChange={ ( value ) =>
-							updateColumns( count, Math.max( minCount, value ) )
-						}
-						min={ Math.max( 1, minCount ) }
-						max={ Math.max( 6, count ) }
-					/>
-					{ count > 6 && (
-						<Notice status="warning" isDismissible={ false }>
-							{ __(
-								'This column count exceeds the recommended amount and may cause visual breakage.'
-							) }
-						</Notice>
-					) }
-				</VStack>
-			) }
 			<ToolsPanelItem
 				label={ __( 'Stack on mobile' ) }
 				isShownByDefault
@@ -243,7 +114,6 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 			</BlockControls>
 			<InspectorControls>
 				<ColumnInspectorControls
-					clientId={ clientId }
 					setAttributes={ setAttributes }
 					isStackedOnMobile={ isStackedOnMobile }
 				/>

package/src/comments/edit/placeholder.jsx

@@ -3,6 +3,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { createInterpolateElement } from '@wordpress/element';
+import { inertValue } from '@wordpress/react-inert-value';
 import CommentsForm from '../../post-comments-form/form';
 
 export default function PostCommentsPlaceholder( { postType, postId } ) {
@@ -17,7 +18,10 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 	);
 
 	return (
-		<div className="wp-block-comments__legacy-placeholder" inert="true">
+		<div
+			className="wp-block-comments__legacy-placeholder"
+			inert={ inertValue( true ) }
+		>
 			<h3>
 				{
 					/* translators: %s: Post title. */

package/src/comments-pagination/README.md

@@ -43,6 +43,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
   - [`allowInheriting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowinheriting): `false`
   - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `padding`: `true`
+  - `margin`: `true`
+  - `blockGap`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/comments-pagination/block.json

@@ -50,6 +50,11 @@
 				"type": "flex"
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"blockGap": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -63,6 +68,12 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/comments-pagination/style.scss

@@ -1,5 +1,8 @@
 $pagination-margin: 0.5em;
 .wp-block-comments-pagination {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	// Increased specificity to override blocks default margin.
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,

package/src/common.scss

@@ -243,3 +243,41 @@ html :where(.is-position-sticky) {
 		--wp-admin--admin-bar--position-offset: 0px;
 	}
 }
+
+// Polyfill for two parts of MathML that MathML Core leaves out and that
+// converted LaTeX relies on: the `columnalign` attribute on table cells,
+// which `aligned` and `cases` need, and the `menclose` lines that `\overline`
+// and `\underline` produce. Firefox and Safari render both natively, so the
+// feature query limits the rules to Chromium, which implements MathML Core
+// only. The rules key on the standard attributes, so they apply to any MathML
+// that carries them and can go once Chromium renders them itself.
+// Feature query from https://github.com/ronkok/Temml/blob/v0.10.34/dist/Temml-Local.css#L64-L65
+//
+// The rules live here because both the Math block and the inline math format
+// produce this MathML.
+//
+// Mathematical notation is written left to right in every language, so
+// nothing here is flipped for RTL.
+/*!rtl:begin:ignore*/
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+	// Plain `text-align` does not move a cell's content in Chromium, the
+	// `-webkit-` values do.
+	mtd[columnalign="right"] {
+		text-align: -webkit-right;
+	}
+
+	mtd[columnalign="left"] {
+		text-align: -webkit-left;
+	}
+
+	menclose[notation~="top"] {
+		padding-top: 0.1em;
+		border-top: 0.065em solid;
+	}
+
+	menclose[notation~="bottom"] {
+		padding-bottom: 0.1em;
+		border-bottom: 0.065em solid;
+	}
+}
+/*!rtl:end:ignore*/

package/src/cover/README.md

@@ -160,6 +160,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `false`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+  - `interactive`: `true`
 - [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
   - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
 - [`allowedBlocks`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#allowedblocks): `true`

package/src/cover/block.json

@@ -153,7 +153,8 @@
 			"allowJustification": false
 		},
 		"interactivity": {
-			"clientNavigation": true
+			"clientNavigation": true,
+			"interactive": true
 		},
 		"filter": {
 			"duotone": true

package/src/cover/edit/index.jsx

@@ -9,7 +9,12 @@ import {
 	useState,
 } from '@wordpress/element';
 import { Placeholder, SandBox, Spinner } from '@wordpress/components';
-import { compose, useResizeObserver } from '@wordpress/compose';
+import {
+	compose,
+	useMergeRefs,
+	useReducedMotion,
+	useResizeObserver,
+} from '@wordpress/compose';
 import {
 	withColors,
 	ColorPalette,
@@ -445,6 +450,8 @@ function CoverEdit( {
 		[ url, backgroundType ]
 	);
 
+	const prefersReducedMotion = useReducedMotion();
+
 	// Compute embed HTML for editor display via SandBox
 	const embedHtml = useMemo( () => {
 		if (
@@ -453,8 +460,10 @@ function CoverEdit( {
 		) {
 			return null;
 		}
-		return getBackgroundEmbedHtml( embedPreview.html );
-	}, [ embedPreview, backgroundType ] );
+		return getBackgroundEmbedHtml( embedPreview.html, {
+			autoplay: ! prefersReducedMotion,
+		} );
+	}, [ embedPreview, backgroundType, prefersReducedMotion ] );
 
 	// Set while the media editor has pointed the cover at a freshly
 	// generated file the browser hasn't finished loading; cleared by the
@@ -513,7 +522,11 @@ function CoverEdit( {
 	);
 
 	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+	// State, not a ref, so that the element is there on the next render.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	const blockProps = useBlockProps( {
+		ref: useMergeRefs( [ ref, setDropZoneElement ] ),
+	} );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -522,12 +535,20 @@ function CoverEdit( {
 		{
 			allowedBlocks,
 			templateLock,
-			dropZoneElement: ref.current,
+			dropZoneElement,
 		}
 	);
 
 	const mediaElement = useRef();
 	const editMediaButtonRef = useRef();
+
+	// `autoPlay` only applies when the video loads, so pause a video that is
+	// already playing when the user turns on reduced motion.
+	useEffect( () => {
+		if ( prefersReducedMotion && isVideoBackground ) {
+			mediaElement.current?.pause();
+		}
+	}, [ prefersReducedMotion, isVideoBackground ] );
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,
@@ -543,11 +564,18 @@ function CoverEdit( {
 			return;
 		}
 
+		const previousImage = { id, url: propsRef.current.attributes.url };
+		let isUndone = false;
 		openMediaEditorModal( {
 			id,
 			onClose: () => {
 				editMediaButtonRef.current?.focus();
 			},
+			onUndo: () => {
+				isUndone = true;
+				setIsSwappingMedia( false );
+				setAttributes( previousImage );
+			},
 			onUpdate: async ( { id: newId, url: newUrl } ) => {
 				if ( typeof newId !== 'number' ) {
 					return;
@@ -569,6 +597,10 @@ function CoverEdit( {
 				if ( newUrl ) {
 					const averageBackgroundColor =
 						await getMediaColor( newUrl );
+					// Snackbar Undo can run while the image color is loading.
+					if ( isUndone ) {
+						return;
+					}
 
 					// Read latest values after await to avoid stale closures.
 					const {
@@ -836,7 +868,7 @@ function CoverEdit( {
 					<video
 						ref={ mediaElement }
 						className="wp-block-cover__video-background"
-						autoPlay
+						autoPlay={ ! prefersReducedMotion }
 						muted
 						loop
 						src={ url }

package/src/cover/edit/inspector-controls.jsx

@@ -10,7 +10,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSettings,
@@ -227,6 +227,8 @@ export default function CoverInspectorControls( {
 
 	const showFocalPointPicker = isVideoBackground || isImageBackground;
 
+	const prefersReducedMotion = useReducedMotion();
+
 	const imperativeFocalPointPreview = ( value ) => {
 		const [ styleOfRef, property ] = mediaElement.current
 			? [ mediaElement.current.style, 'objectPosition' ]
@@ -396,8 +398,15 @@ export default function CoverInspectorControls( {
 								}
 							>
 								<FocalPointPicker
+									// `autoPlay` only applies when the
+									// video loads, so remount the picker
+									// to stop a preview that is already
+									// playing when the user turns on
+									// reduced motion.
+									key={ prefersReducedMotion }
 									label={ __( 'Focal point' ) }
 									url={ url }
+									autoPlay={ ! prefersReducedMotion }
 									value={ focalPoint }
 									onDragStart={ imperativeFocalPointPreview }
 									onDrag={ imperativeFocalPointPreview }

package/src/cover/embed-video-utils.js

@@ -94,17 +94,19 @@ function findVideoEmbedProvider(
 /**
  * Modifies embed HTML to use background video parameters.
  *
- * @param {string} html The original embed HTML.
+ * @param {string}  html             The original embed HTML.
+ * @param {Object}  options          Options.
+ * @param {boolean} options.autoplay Whether the video should start playing on load.
  * @return {string|null} The modified embed HTML, or null if not possible.
  */
-export function getBackgroundEmbedHtml( html ) {
+export function getBackgroundEmbedHtml( html, { autoplay = true } = {} ) {
 	const srcMatch = html?.match( /src=["']([^"']+)["']/ );
 	if ( ! srcMatch ) {
 		return null;
 	}
 
 	const iframeSrc = srcMatch[ 1 ];
-	const backgroundSrc = getBackgroundVideoSrc( iframeSrc );
+	const backgroundSrc = getBackgroundVideoSrc( iframeSrc, { autoplay } );
 	return html.replace( iframeSrc, backgroundSrc );
 }
 
@@ -150,10 +152,12 @@ export function detectProviderFromSrc( src ) {
  * Modifies an iframe src URL to add background video parameters.
  * Automatically detects the provider from the URL.
  *
- * @param {string} src The iframe src URL.
+ * @param {string}  src              The iframe src URL.
+ * @param {Object}  options          Options.
+ * @param {boolean} options.autoplay Whether the video should start playing on load.
  * @return {string} The modified URL.
  */
-export function getBackgroundVideoSrc( src ) {
+export function getBackgroundVideoSrc( src, { autoplay = true } = {} ) {
 	if ( ! src ) {
 		return src;
 	}
@@ -164,11 +168,14 @@ export function getBackgroundVideoSrc( src ) {
 		// Detect provider from the iframe src URL
 		const provider = detectProviderFromSrc( src );
 
+		if ( autoplay ) {
+			url.searchParams.set( 'autoplay', '1' );
+		}
+
 		// Add provider-specific parameters for background video behavior
 		switch ( provider ) {
 			case 'youtube':
 				// YouTube parameters for background video
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'mute', '1' );
 				url.searchParams.set( 'loop', '1' );
 				url.searchParams.set( 'controls', '0' );
@@ -185,24 +192,25 @@ export function getBackgroundVideoSrc( src ) {
 
 			case 'vimeo':
 				// Vimeo parameters for background video
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'muted', '1' );
 				url.searchParams.set( 'loop', '1' );
-				url.searchParams.set( 'background', '1' );
+				// Vimeo's background mode always autoplays, so it can only be
+				// used when autoplay is allowed.
+				if ( autoplay ) {
+					url.searchParams.set( 'background', '1' );
+				}
 				url.searchParams.set( 'controls', '0' );
 				break;
 
 			case 'videopress':
 			case 'wordpress-tv':
 				// VideoPress parameters
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'loop', '1' );
 				url.searchParams.set( 'muted', '1' );
 				break;
 
 			default:
 				// Generic parameters that might work for other providers
-				url.searchParams.set( 'autoplay', '1' );
 				url.searchParams.set( 'muted', '1' );
 				url.searchParams.set( 'loop', '1' );
 				break;

package/src/cover/index.php

@@ -26,6 +26,10 @@ function render_block_core_cover( $attributes, $content ) {
 	) {
 		$url = $attributes['url'];
 
+		// The view script decides whether the embed may autoplay, so it is only
+		// needed for embed backgrounds.
+		wp_enqueue_script_module( '@wordpress/block-library/cover/view' );
+
 		// Use WordPress's native oEmbed processing (includes caching).
 		$oembed_html = wp_oembed_get( $url );
 
@@ -50,7 +54,8 @@ function render_block_core_cover( $attributes, $content ) {
 				}
 
 				// Modify iframe src to add background video parameters based on provider.
-				$parsed_url = wp_parse_url( $iframe_src );
+				$parsed_url         = wp_parse_url( $iframe_src );
+				$reduced_motion_src = null;
 				if ( $parsed_url && isset( $parsed_url['host'] ) ) {
 					// Parse existing query parameters.
 					$query_params = array();
@@ -58,9 +63,12 @@ function render_block_core_cover( $attributes, $content ) {
 						parse_str( $parsed_url['query'], $query_params );
 					}
 
-					// Add background video parameters based on provider.
+					// Add background video parameters based on provider. The
+					// autoplay parameters are kept separate so a source without
+					// them can also be built, which the view script swaps in for
+					// a visitor who has asked for reduced motion.
+					$autoplay_params = array();
 					if ( 'youtube' === $provider ) {
-						$query_params['autoplay']       = '1';
 						$query_params['mute']           = '1';
 						$query_params['loop']           = '1';
 						$query_params['controls']       = '0';
@@ -74,32 +82,53 @@ function render_block_core_cover( $attributes, $content ) {
 						if ( $video_id ) {
 								$query_params['playlist'] = $video_id;
 						}
+
+						$autoplay_params['autoplay'] = '1';
 					} elseif ( 'vimeo' === $provider ) {
-						$query_params['autoplay']    = '1';
 						$query_params['muted']       = '1';
 						$query_params['loop']        = '1';
-						$query_params['background']  = '1';
 						$query_params['controls']    = '0';
 						$query_params['transparent'] = '0';
+
+						// Vimeo's background mode always autoplays, so it can only
+						// be used when autoplay is allowed.
+						$autoplay_params['autoplay']   = '1';
+						$autoplay_params['background'] = '1';
 					} elseif ( 'videopress' === $provider || 'wordpress-tv' === $provider ) {
-						$query_params['autoplay'] = '1';
-						$query_params['loop']     = '1';
-						$query_params['muted']    = '1';
+						$query_params['loop']  = '1';
+						$query_params['muted'] = '1';
+
+						$autoplay_params['autoplay'] = '1';
 					}
 
 					// Rebuild the URL with new parameters.
-					$iframe_src = $parsed_url['scheme'] . '://' . $parsed_url['host'];
+					$iframe_base = $parsed_url['scheme'] . '://' . $parsed_url['host'];
 					if ( isset( $parsed_url['path'] ) ) {
-						$iframe_src .= $parsed_url['path'];
-					}
-					if ( ! empty( $query_params ) ) {
-						$iframe_src .= '?' . http_build_query( $query_params );
+						$iframe_base .= $parsed_url['path'];
 					}
+
+					$reduced_motion_src = empty( $query_params )
+						? $iframe_base
+						: $iframe_base . '?' . http_build_query( $query_params );
+
+					$iframe_src = empty( $autoplay_params )
+						? $reduced_motion_src
+						: $iframe_base . '?' . http_build_query( array_merge( $query_params, $autoplay_params ) );
 				}
 
-				// Build the iframe HTML that will replace the figure.
+				// Build the iframe HTML that will replace the figure. The server
+				// renders the autoplaying source, and the view script swaps in the
+				// one without autoplay for a visitor who prefers reduced motion.
 				$iframe_html = sprintf(
-					'<div class="wp-block-cover__video-background wp-block-cover__embed-background"><iframe src="%s" title="Background video" frameborder="0" allow="autoplay; fullscreen"></iframe></div>',
+					'<div class="wp-block-cover__video-background wp-block-cover__embed-background" data-wp-interactive="core/cover" data-wp-context=\'%s\'><iframe src="%s" data-wp-bind--src="state.videoSrc" title="Background video" frameborder="0" allow="autoplay; fullscreen"></iframe></div>',
+					esc_attr(
+						wp_json_encode(
+							array(
+								'src'              => $iframe_src,
+								'reducedMotionSrc' => $reduced_motion_src,
+							)
+						)
+					),
 					esc_url( $iframe_src )
 				);