@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

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

@@ -6,11 +6,8 @@ import {
 	getDefaultBlockName,
 	cloneBlock,
 } from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -21,30 +18,31 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import useOutdentListItem from './use-outdent-list-item';
 import { unlock } from '../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
-export default function useEnter( props ) {
+export default function useEnter( clientId ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
-		useSelect( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
+	const {
+		getBlock,
+		getBlockAttributes,
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockName,
+	} = useSelect( blockEditorStore );
 	const outdentListItem = useOutdentListItem();
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
-			const { content, clientId } = propsRef.current;
-			if ( content.length ) {
+			const { content } = getBlockAttributes( clientId ) ?? {};
+			if ( content?.length ) {
 				return;
 			}
 			event.preventDefault();
 			const canOutdent =
 				getBlockName(
-					getBlockRootClientId(
-						getBlockRootClientId( propsRef.current.clientId )
-					)
+					getBlockRootClientId( getBlockRootClientId( clientId ) )
 				) === 'core/list-item';
 			if ( canOutdent ) {
 				outdentListItem();
@@ -90,11 +88,6 @@ export default function useEnter( props ) {
 
 		// Capture phase so we run before writing-flow's ancestor-bubble
 		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeDelegatedListener(
-			element,
-			'keydown',
-			onKeyDown,
-			true
-		);
+		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 	}, [] );
 }

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

@@ -16,6 +16,8 @@ export default function useIndentListItem( clientId ) {
 		getSelectionEnd,
 		hasMultiSelection,
 		getMultiSelectedBlockClientIds,
+		getBlockRootClientId,
+		getBlockAttributes,
 	} = useSelect( blockEditorStore );
 	return useCallback( () => {
 		const _hasMultiSelection = hasMultiSelection();
@@ -27,9 +29,16 @@ export default function useIndentListItem( clientId ) {
 		);
 		const previousSiblingId = getPreviousBlockClientId( clientId );
 		const newListItem = cloneBlock( getBlock( previousSiblingId ) );
+		// Get the parent list's attributes to inherit the ordered property
+		const parentListId = getBlockRootClientId( clientId );
+		const parentListAttributes = getBlockAttributes( parentListId );
 		// If the sibling has no innerBlocks, create a new `list` block.
 		if ( ! newListItem.innerBlocks?.length ) {
-			newListItem.innerBlocks = [ createBlock( 'core/list' ) ];
+			newListItem.innerBlocks = [
+				createBlock( 'core/list', {
+					ordered: parentListAttributes.ordered,
+				} ),
+			];
 		}
 		// A list item usually has one `list`, but it's possible to have
 		// more. So we need to preserve the previous `list` blocks and

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

@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -16,7 +14,7 @@ import useIndentListItem from './use-indent-list-item';
 import useOutdentListItem from './use-outdent-list-item';
 import { unlock } from '../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
@@ -63,7 +61,7 @@ export default function useSpace( clientId ) {
 
 			// Capture phase so we run before writing-flow's ancestor-bubble
 			// keydown handlers that gate on `event.defaultPrevented`.
-			return subscribeDelegatedListener(
+			return subscribeOwnedListener(
 				element,
 				'keydown',
 				onKeyDown,

package/src/math/edit.js

@@ -1,27 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	TextareaControl,
 	Popover,
-	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
 
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
+const { ValidatedTextareaControl } = unlock( componentsPrivateApis );
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
@@ -29,6 +26,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const [ error, setError ] = useState( null );
 	const [ latexToMathML, setLatexToMathML ] = useState();
 	const initialLatex = useRef( latex );
+	const formRef = useRef();
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -74,63 +72,48 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 					offset={ 8 }
 					anchor={ blockRef }
 					focusOnMount={ false }
+					// Surface any parsing error before focus leaves the block.
+					// An invalid field is refocused, keeping the popover open.
+					onFocusOutside={ () => formRef.current?.reportValidity() }
 					__unstableSlotName="__unstable-block-tools-after"
 				>
-					<div style={ { padding: '4px', minWidth: '300px' } }>
-						<VStack spacing={ 1 }>
-							<TextareaControl
-								__next40pxDefaultSize
-								label={ __( 'LaTeX math syntax' ) }
-								hideLabelFromVision
-								value={ latex }
-								className="wp-block-math__textarea-control"
-								onChange={ ( newLatex ) => {
-									if ( ! latexToMathML ) {
-										setAttributes( { latex: newLatex } );
-										return;
-									}
-									let newMathML = '';
-									try {
-										newMathML = latexToMathML( newLatex, {
-											displayMode: true,
-										} );
-										setError( null );
-									} catch ( err ) {
-										setError( err.message );
-										speak(
-											sprintf(
-												/* translators: %s: error message returned when parsing LaTeX. */
-												__(
-													'Error parsing mathematical expression: %s'
-												),
-												err.message
-											)
-										);
-									}
-									setAttributes( {
-										mathML: newMathML,
-										latex: newLatex,
+					<form
+						ref={ formRef }
+						style={ { padding: '4px', minWidth: '300px' } }
+						onSubmit={ ( event ) => event.preventDefault() }
+					>
+						<ValidatedTextareaControl
+							label={ __( 'LaTeX math syntax' ) }
+							hideLabelFromVision
+							value={ latex }
+							className="wp-block-math__textarea-control"
+							customValidity={
+								error
+									? { type: 'invalid', message: error }
+									: undefined
+							}
+							onChange={ ( newLatex ) => {
+								if ( ! latexToMathML ) {
+									setAttributes( { latex: newLatex } );
+									return;
+								}
+								let newMathML = '';
+								try {
+									newMathML = latexToMathML( newLatex, {
+										displayMode: true,
 									} );
-								} }
-								placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
-							/>
-							{ error && (
-								<>
-									<WCBadge
-										intent="error"
-										className="wp-block-math__error"
-									>
-										{ sprintf(
-											/* translators: %s: error message returned when parsing LaTeX. */
-											__( 'Error: %s' ),
-											error
-										) }
-									</WCBadge>
-									<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
-								</>
-							) }
-						</VStack>
-					</div>
+									setError( null );
+								} catch ( err ) {
+									setError( err.message );
+								}
+								setAttributes( {
+									mathML: newMathML,
+									latex: newLatex,
+								} );
+							} }
+							placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
+						/>
+					</form>
 				</Popover>
 			) }
 		</div>

package/src/media-text/edit.js

@@ -499,6 +499,7 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
+							label={ __( 'Align media and text vertically' ) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }

package/src/media-text/editor.scss

@@ -15,6 +15,7 @@
 	}
 }
 
+// stylelint-disable-next-line selector-class-pattern -- re-resizable library class name.
 .wp-block-media-text .__resizable_base__ {
 	grid-column: 1 / span 2;
 	grid-row: 2;

package/src/media-text/index.php

@@ -31,8 +31,17 @@ function render_block_core_media_text( $attributes, $content ) {
 
 	$has_media_on_right = 'right' === ( $attributes['mediaPosition'] ?? null );
 	$image_fill         = (bool) ( $attributes['imageFill'] ?? false );
-	$focal_point        = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
-	$unique_id          = 'wp-block-media-text__media-' . wp_unique_id();
+	$focal_point_attr   = $attributes['focalPoint'] ?? null;
+	$focal_point_x      = null;
+	$focal_point_y      = null;
+	if ( is_array( $focal_point_attr ) ) {
+		$focal_point_x = isset( $focal_point_attr['x'] ) && is_numeric( $focal_point_attr['x'] ) ? $focal_point_attr['x'] : null;
+		$focal_point_y = isset( $focal_point_attr['y'] ) && is_numeric( $focal_point_attr['y'] ) ? $focal_point_attr['y'] : null;
+	}
+	$focal_point = null !== $focal_point_x && null !== $focal_point_y
+		? round( $focal_point_x * 100 ) . '% ' . round( $focal_point_y * 100 ) . '%'
+		: '50% 50%';
+	$unique_id   = 'wp-block-media-text__media-' . wp_unique_id();
 
 	$block_tag_processor = new WP_HTML_Tag_Processor( $content );
 	$block_query         = array(

package/src/more/edit.js

@@ -76,10 +76,13 @@ export default function MoreEdit( {
 						setAttributes( { customText: value } )
 					}
 					disableLineBreaks
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
+					__unstableOnSplitAtEnd={
+						insertBlocksAfter
+							? () =>
+									insertBlocksAfter(
+										createBlock( getDefaultBlockName() )
+									)
+							: undefined
 					}
 				/>
 			</div>

package/src/more/editor.scss

@@ -18,7 +18,7 @@
 		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		display: inline-flex;

package/src/navigation/edit/index.js

@@ -75,6 +75,7 @@ import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { isWithinNavigationOverlay } from '../../utils/is-within-overlay';
+import useLayoutCustomProperties from './use-layout-custom-properties';
 import {
 	DEFAULT_BLOCK,
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
@@ -280,6 +281,11 @@ function Navigation( {
 	} = attributes;
 
 	const ref = attributes.ref;
+	useLayoutCustomProperties( {
+		clientId,
+		layout: attributes.layout,
+		style: attributes.style,
+	} );
 
 	const setRef = useCallback(
 		( postId ) => {
@@ -297,22 +303,30 @@ function Navigation( {
 		onNavigateToEntityRecord,
 		currentTheme,
 		editorDisabledResponsive,
-	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-
-		return {
-			isPreviewMode: settings.isPreviewMode,
-			onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
-			// Needed to construct the template part ID for the overlay preview.
-			currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
-			// When editing a navigation post directly in an isolated editor,
-			// always show navigation expanded (no hamburger) so users can see
-			// and interact with all menu items.
-			editorDisabledResponsive:
-				!! settings?.[ isNavigationPostEditorKey ],
-		};
-	}, [] );
+		hasSelectedStyleState,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				hasSelectedStyleState: hasSelectedBlockStyleState,
+			} = unlock( select( blockEditorStore ) );
+			const settings = getSettings();
+
+			return {
+				isPreviewMode: settings.isPreviewMode,
+				onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
+				// Needed to construct the template part ID for the overlay preview.
+				currentTheme: select( coreStore ).getCurrentTheme()?.stylesheet,
+				// When editing a navigation post directly in an isolated editor,
+				// always show navigation expanded (no hamburger) so users can see
+				// and interact with all menu items.
+				editorDisabledResponsive:
+					!! settings?.[ isNavigationPostEditorKey ],
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+			};
+		},
+		[ clientId ]
+	);
 	const hasAlreadyRendered = isPreviewMode ? false : recursionDetected;
 
 	const blockEditingMode = useBlockEditingMode();
@@ -924,26 +938,28 @@ function Navigation( {
 					/>
 				</InspectorControls>
 			) }
-			<InspectorControls group="color">
-				{ /*
-				 * Avoid useMultipleOriginColorsAndGradients and detectColors
-				 * on block mount. InspectorControls only mounts this component
-				 * when the block is selected.
-				 * */ }
-				<ColorTools
-					textColor={ textColor }
-					setTextColor={ setTextColor }
-					backgroundColor={ backgroundColor }
-					setBackgroundColor={ setBackgroundColor }
-					overlayTextColor={ overlayTextColor }
-					setOverlayTextColor={ setOverlayTextColor }
-					overlayBackgroundColor={ overlayBackgroundColor }
-					setOverlayBackgroundColor={ setOverlayBackgroundColor }
-					clientId={ clientId }
-					navRef={ navRef }
-					hasCustomOverlay={ !! overlay }
-				/>
-			</InspectorControls>
+			{ ! hasSelectedStyleState && (
+				<InspectorControls group="color">
+					{ /*
+					 * Avoid useMultipleOriginColorsAndGradients and detectColors
+					 * on block mount. InspectorControls only mounts this component
+					 * when the block is selected.
+					 * */ }
+					<ColorTools
+						textColor={ textColor }
+						setTextColor={ setTextColor }
+						backgroundColor={ backgroundColor }
+						setBackgroundColor={ setBackgroundColor }
+						overlayTextColor={ overlayTextColor }
+						setOverlayTextColor={ setOverlayTextColor }
+						overlayBackgroundColor={ overlayBackgroundColor }
+						setOverlayBackgroundColor={ setOverlayBackgroundColor }
+						clientId={ clientId }
+						navRef={ navRef }
+						hasCustomOverlay={ !! overlay }
+					/>
+				</InspectorControls>
+			) }
 		</>
 	);
 

package/src/navigation/edit/test/layout-custom-properties.js

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSettings, useStyleOverride } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useLayoutCustomProperties from '../use-layout-custom-properties';
+
+const mockGetResponsiveMediaQueries = jest.fn();
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	useSettings: jest.fn(),
+	useStyleOverride: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/global-styles-engine', () => ( {
+	privateApis: {},
+} ) );
+
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: () => ( {
+		getResponsiveMediaQueries: ( ...args ) =>
+			mockGetResponsiveMediaQueries( ...args ),
+	} ),
+} ) );
+
+describe( 'Navigation layout custom properties', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		useSettings.mockReturnValue( [ { mobile: 480, tablet: 782 } ] );
+		mockGetResponsiveMediaQueries.mockReturnValue( {
+			'@tablet': '@media (480px < width <= 782px)',
+			'@mobile': '@media (width <= 480px)',
+		} );
+	} );
+
+	describe( 'vertical layouts', () => {
+		it.each( [
+			[ 'left', 'initial', 'flex-start' ],
+			[ 'center', 'center', 'center' ],
+			[ 'right', 'flex-end', 'flex-end' ],
+			[ 'space-between', 'space-between', 'flex-start' ],
+		] )(
+			'reproduces the vertical %s class cascade',
+			( justifyContent, justify, align ) => {
+				renderHook( () =>
+					useLayoutCustomProperties( {
+						clientId: 'test',
+						style: {
+							'@mobile': {
+								layout: {
+									orientation: 'vertical',
+									justifyContent,
+									flexWrap: 'nowrap',
+								},
+							},
+						},
+					} )
+				);
+
+				const { css } = useStyleOverride.mock.calls.at( -1 )[ 0 ];
+				expect( css ).toContain(
+					'--navigation-layout-direction: column;'
+				);
+				expect( css ).toContain( '--navigation-layout-wrap: nowrap;' );
+				expect( css ).toContain(
+					`--navigation-layout-justify: ${ justify };`
+				);
+				expect( css ).toContain(
+					`--navigation-layout-align: ${ align };`
+				);
+			}
+		);
+	} );
+
+	describe( 'responsive styles', () => {
+		it( 'merges viewport overrides with the base layout', () => {
+			renderHook( () =>
+				useLayoutCustomProperties( {
+					clientId: 'test',
+					layout: {
+						justifyContent: 'right',
+						flexWrap: 'nowrap',
+					},
+					style: {
+						'@mobile': {
+							layout: { orientation: 'vertical' },
+						},
+					},
+				} )
+			);
+
+			expect( useStyleOverride ).toHaveBeenCalledWith( {
+				css: '@media (width <= 480px){#block-test {--navigation-layout-justification-setting: flex-end;--navigation-layout-direction: column;--navigation-layout-wrap: nowrap;--navigation-layout-justify: flex-end;--navigation-layout-align: flex-end;}}',
+			} );
+		} );
+
+		it( 'uses default values for explicit viewport resets', () => {
+			renderHook( () =>
+				useLayoutCustomProperties( {
+					clientId: 'test',
+					layout: { justifyContent: 'right' },
+					style: {
+						'@tablet': {
+							layout: { justifyContent: null },
+						},
+					},
+				} )
+			);
+
+			expect( useStyleOverride ).toHaveBeenCalledWith( {
+				css: expect.stringContaining(
+					'--navigation-layout-justify: flex-start;'
+				),
+			} );
+		} );
+
+		it( 'does not emit styles without a viewport layout override', () => {
+			renderHook( () =>
+				useLayoutCustomProperties( {
+					clientId: 'test',
+					style: {
+						'@mobile': { spacing: { blockGap: '10px' } },
+					},
+				} )
+			);
+
+			expect( useStyleOverride ).toHaveBeenCalledWith( { css: '' } );
+		} );
+	} );
+} );

package/src/navigation/edit/use-layout-custom-properties.js

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { useSettings, useStyleOverride } from '@wordpress/block-editor';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
+
+const JUSTIFICATION_VALUES = {
+	left: 'flex-start',
+	center: 'center',
+	right: 'flex-end',
+	'space-between': 'space-between',
+};
+
+/**
+ * Adds responsive Navigation layout custom properties to the editor canvas.
+ *
+ * @param {Object} options          Options.
+ * @param {string} options.clientId Block client ID.
+ * @param {Object} options.layout   Base layout configuration.
+ * @param {Object} options.style    Block style attribute.
+ */
+export default function useLayoutCustomProperties( {
+	clientId,
+	layout,
+	style,
+} ) {
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const selector = `#block-${ clientId }`;
+	const css = Object.entries( getResponsiveMediaQueries( viewportSettings ) )
+		.map( ( [ viewport, mediaQuery ] ) => {
+			const viewportLayout = style?.[ viewport ]?.layout;
+			if (
+				! viewportLayout ||
+				typeof viewportLayout !== 'object' ||
+				Array.isArray( viewportLayout ) ||
+				! Object.keys( viewportLayout ).length
+			) {
+				return '';
+			}
+
+			const effectiveLayout = { ...layout, ...viewportLayout };
+			const justifyContent = Object.hasOwn(
+				JUSTIFICATION_VALUES,
+				effectiveLayout.justifyContent
+			)
+				? effectiveLayout.justifyContent
+				: 'left';
+			const justification = JUSTIFICATION_VALUES[ justifyContent ];
+			const isVertical = effectiveLayout.orientation === 'vertical';
+			let align = 'center';
+			if ( isVertical ) {
+				align = [ 'center', 'right' ].includes( justifyContent )
+					? justification
+					: 'flex-start';
+			}
+			const justify =
+				isVertical && justifyContent === 'left'
+					? 'initial'
+					: justification;
+			const declarations = {
+				'--navigation-layout-justification-setting': justification,
+				'--navigation-layout-direction': isVertical ? 'column' : 'row',
+				'--navigation-layout-wrap':
+					effectiveLayout.flexWrap === 'nowrap' ? 'nowrap' : 'wrap',
+				'--navigation-layout-justify': justify,
+				'--navigation-layout-align': align,
+			};
+			const cssDeclarations = Object.entries( declarations )
+				.map( ( [ property, value ] ) => `${ property }: ${ value };` )
+				.join( '' );
+
+			return `${ mediaQuery }{${ selector } {${ cssDeclarations }}}`;
+		} )
+		.join( '' );
+
+	useStyleOverride( { css } );
+}