@wordpress/block-editor 14.17.0 → 14.19.0

package/src/components/background-image-control/index.js

@@ -249,6 +249,7 @@ function BackgroundImageControls( {
 	onResetImage = noop,
 	displayInPanel,
 	defaultValues,
+	containerRef,
 } ) {
 	const [ isUploading, setIsUploading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
@@ -256,7 +257,6 @@ function BackgroundImageControls( {
 	const { id, title, url } = style?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
-	const replaceContainerRef = useRef();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
@@ -324,6 +324,8 @@ function BackgroundImageControls( {
 			} )
 		);
 		setIsUploading( false );
+		// Close the dropdown and focus the toggle button.
+		closeAndFocus();
 	};
 
 	// Drag and drop callback, restricting image to one.
@@ -342,14 +344,19 @@ function BackgroundImageControls( {
 	const hasValue = hasBackgroundImageValue( style );
 
 	const closeAndFocus = () => {
-		const [ toggleButton ] = focus.tabbable.find(
-			replaceContainerRef.current
-		);
-		// Focus the toggle button and close the dropdown menu.
-		// This ensures similar behaviour as to selecting an image, where the dropdown is
-		// closed and focus is redirected to the dropdown toggle button.
-		toggleButton?.focus();
-		toggleButton?.click();
+		// Use requestAnimationFrame to ensure DOM updates are complete
+		window.requestAnimationFrame( () => {
+			const [ toggleButton ] = focus.tabbable.find(
+				containerRef?.current
+			);
+			if ( ! toggleButton ) {
+				return;
+			}
+			// Focus the toggle button and close the dropdown menu.
+			// This ensures similar behaviour as to selecting an image, where the dropdown is
+			// closed and focus is redirected to the dropdown toggle button.
+			toggleButton.focus();
+		} );
 	};
 
 	const onRemove = () =>
@@ -363,10 +370,7 @@ function BackgroundImageControls( {
 		title || getFilename( url ) || __( 'Add background image' );
 
 	return (
-		<div
-			ref={ replaceContainerRef }
-			className="block-editor-global-styles-background-panel__image-tools-panel-item"
-		>
+		<div className="block-editor-global-styles-background-panel__image-tools-panel-item">
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
@@ -697,9 +701,11 @@ export default function BackgroundImagePanel( {
 			settings?.background?.backgroundRepeat );
 
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
+	const containerRef = useRef();
 
 	return (
 		<div
+			ref={ containerRef }
 			className={ clsx(
 				'block-editor-global-styles-background-panel__inspector-media-replace-container',
 				{
@@ -727,6 +733,7 @@ export default function BackgroundImagePanel( {
 							} }
 							onRemoveImage={ () => setIsDropDownOpen( false ) }
 							defaultValues={ defaultValues }
+							containerRef={ containerRef }
 						/>
 						<BackgroundSizeControls
 							onChange={ onChange }
@@ -747,6 +754,7 @@ export default function BackgroundImagePanel( {
 						resetBackground();
 					} }
 					onRemoveImage={ () => setIsDropDownOpen( false ) }
+					containerRef={ containerRef }
 				/>
 			) }
 		</div>

package/src/components/block-canvas/index.js

@@ -56,8 +56,7 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				className="block-editor-block-canvas"
-				style={ { height } }
+				style={ { height, display: 'flex' } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -68,6 +67,10 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
+					style={ {
+						height: '100%',
+						width: '100%',
+					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -78,7 +81,6 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

package/src/components/block-inspector/style.scss

@@ -11,7 +11,8 @@
 	}
 
 	.components-base-control,
-	.components-radio-control {
+	.components-radio-control,
+	.block-editor-html-element-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -20,7 +21,8 @@
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
 	.components-query-controls,
-	.components-range-control {
+	.components-range-control,
+	.block-editor-html-element-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

package/src/components/block-list/content.scss

@@ -365,6 +365,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	border: none;
 	outline: none;
 	border-radius: $radius-small;
+	box-sizing: border-box;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
 	overflow: hidden;

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../store';
 const noop = () => {};
 
 export default function BlockModeToggle( { clientId, onToggle = noop } ) {
-	const { blockType, mode, isCodeEditingEnabled } = useSelect(
+	const { blockType, mode, enabled } = useSelect(
 		( select ) => {
 			const { getBlock, getBlockMode, getSettings } =
 				select( blockEditorStore );
@@ -23,7 +23,7 @@ export default function BlockModeToggle( { clientId, onToggle = noop } ) {
 			return {
 				mode: getBlockMode( clientId ),
 				blockType: block ? getBlockType( block.name ) : null,
-				isCodeEditingEnabled: getSettings().codeEditingEnabled,
+				enabled: getSettings().codeEditingEnabled && !! block?.isValid,
 			};
 		},
 		[ clientId ]
@@ -33,7 +33,7 @@ export default function BlockModeToggle( { clientId, onToggle = noop } ) {
 	if (
 		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
-		! isCodeEditingEnabled
+		! enabled
 	) {
 		return null;
 	}

package/src/components/block-settings-menu/test/block-mode-toggle.js

@@ -20,7 +20,7 @@ function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
 		return {
 			mode,
 			blockType,
-			isCodeEditingEnabled: codeEditingEnabled,
+			enabled: codeEditingEnabled,
 		};
 	} );
 }

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../store';
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+	const enabled = useSelect( ( select ) => {
 		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
 			select( blockEditorStore );
 
@@ -27,18 +27,12 @@ export function useHasBlockToolbar() {
 			selectedBlockClientId &&
 			getBlockType( getBlockName( selectedBlockClientId ) );
 
-		return {
-			isToolbarEnabled:
-				blockType &&
-				hasBlockSupport( blockType, '__experimentalToolbar', true ),
-			isBlockDisabled:
-				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
-		};
+		return (
+			blockType &&
+			hasBlockSupport( blockType, '__experimentalToolbar', true ) &&
+			getBlockEditingMode( selectedBlockClientId ) !== 'disabled'
+		);
 	}, [] );
 
-	if ( ! isToolbarEnabled || isBlockDisabled ) {
-		return false;
-	}
-
-	return true;
+	return enabled;
 }

package/src/components/child-layout-control/index.js

@@ -188,6 +188,7 @@ function FlexControls( {
 						} );
 					} }
 					value={ flexSize }
+					min={ 0 }
 					label={ flexResetLabel }
 					hideLabelFromVision
 				/>

package/src/components/html-element-control/index.js

@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	SelectControl,
+	Notice,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { htmlElementMessages } from './messages';
+
+/**
+ * Renders a SelectControl for choosing HTML elements with validation
+ * to prevent duplicate <main> elements.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.tagName  The current HTML tag name.
+ * @param {Function} props.onChange Function to call when the tag is changed.
+ * @param {string}   props.clientId The client ID of the current block.
+ * @param {Array}    props.options  SelectControl options (optional).
+ *
+ * @return {Component} The HTML element select control with validation.
+ */
+export default function HTMLElementControl( {
+	tagName,
+	onChange,
+	clientId,
+	options = [
+		{ label: __( 'Default (<div>)' ), value: 'div' },
+		{ label: '<header>', value: 'header' },
+		{ label: '<main>', value: 'main' },
+		{ label: '<section>', value: 'section' },
+		{ label: '<article>', value: 'article' },
+		{ label: '<aside>', value: 'aside' },
+		{ label: '<footer>', value: 'footer' },
+	],
+} ) {
+	const checkForMainTag =
+		!! clientId && options.some( ( option ) => option.value === 'main' );
+
+	const hasMainElementElsewhere = useSelect(
+		( select ) => {
+			if ( ! checkForMainTag ) {
+				return false;
+			}
+
+			const { getClientIdsWithDescendants, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return getClientIdsWithDescendants().some( ( id ) => {
+				// Skip the current block.
+				if ( id === clientId ) {
+					return false;
+				}
+
+				return getBlockAttributes( id )?.tagName === 'main';
+			} );
+		},
+		[ clientId, checkForMainTag ]
+	);
+
+	// Create a modified options array that disables the main option if needed.
+	const modifiedOptions = options.map( ( option ) => {
+		if (
+			option.value === 'main' &&
+			hasMainElementElsewhere &&
+			tagName !== 'main'
+		) {
+			return {
+				...option,
+				disabled: true,
+				label: sprintf(
+					/* translators: %s: HTML element name */
+					__( '%s (Already in use)' ),
+					option.label
+				),
+			};
+		}
+		return option;
+	} );
+
+	return (
+		<VStack spacing={ 2 } className="block-editor-html-element-control">
+			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ __( 'HTML element' ) }
+				options={ modifiedOptions }
+				value={ tagName }
+				onChange={ onChange }
+				help={ htmlElementMessages[ tagName ] }
+			/>
+
+			{ tagName === 'main' && hasMainElementElsewhere && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						'Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'
+					) }
+				</Notice>
+			) }
+		</VStack>
+	);
+}

package/src/components/html-element-control/messages.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Messages providing helpful descriptions for HTML elements.
+ */
+export const htmlElementMessages = {
+	article: __(
+		'The <article> element should represent a self-contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	div: __(
+		'The <div> element should only be used if the block is a design element with no semantic meaning.'
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only.'
+	),
+	nav: __(
+		'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+};

package/src/components/keyboard-shortcuts/index.js

@@ -59,8 +59,8 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'backspace',
+				modifier: 'access',
+				character: 'z',
 			},
 		} );
 

package/src/components/media-placeholder/index.js

@@ -47,7 +47,7 @@ const InsertFromURLPopover = ( {
 			<InputControl
 				__next40pxDefaultSize
 				label={ __( 'URL' ) }
-				type="url"
+				type="text" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)
 				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
@@ -272,11 +272,11 @@ export function MediaPlaceholder( {
 			} )
 		).catch( ( err ) => onError( err ) );
 
-		if ( multiple ) {
-			onSelect( uploadedMediaList );
-		} else {
-			onSelect( uploadedMediaList[ 0 ] );
+		if ( ! uploadedMediaList?.length ) {
+			return;
 		}
+
+		onSelect( multiple ? uploadedMediaList : uploadedMediaList[ 0 ] );
 	}
 
 	const onUpload = ( event ) => {

package/src/components/media-placeholder/style.scss

@@ -4,4 +4,10 @@
 	@include break-small() {
 		width: 300px;
 	}
+
+	input {
+		// Targeting input as we're using text instead of URLs for relative paths.
+		/* rtl:ignore */
+		direction: ltr;
+	}
 }

package/src/components/rich-text/README.md

@@ -23,7 +23,7 @@ _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-na
 ### `placeholder: String`
 
 _Optional._ Placeholder text to show when the field is empty, similar to the
-[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
+[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
 
 ### `disableLineBreaks: Boolean`
 

package/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode, shiftKey, ctrlKey, metaKey } = event;
+		const { keyCode } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,11 +30,6 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
-			// Exclude (command|ctrl)+shift+backspace as they are shortcuts for deleting blocks.
-			if ( shiftKey && ( ctrlKey || metaKey ) ) {
-				return;
-			}
-
 			if ( onMerge ) {
 				onMerge( ! isReverse );
 			}

package/src/components/url-popover/stories/index.story.js

@@ -20,6 +20,10 @@ const TestURLPopover = () => {
 	const close = () => setVisiblility( false );
 	const setTarget = () => {};
 
+	const handleUrlChange = ( event ) => {
+		setUrl( event.target.value );
+	};
+
 	return (
 		<>
 			<Button
@@ -40,7 +44,11 @@ const TestURLPopover = () => {
 					) }
 				>
 					<form onSubmit={ close }>
-						<input type="url" value={ url } onChange={ setUrl } />
+						<input
+							type="url"
+							value={ url }
+							onChange={ handleUrlChange }
+						/>
 						<Button
 							__next40pxDefaultSize
 							icon={ keyboardReturn }

package/src/components/use-resize-canvas/index.js

@@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					maxWidth: '100%',
+					overflowY: 'auto',
 				};
 			default:
 				return {

package/src/hooks/duotone.js

@@ -124,9 +124,10 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 		return null;
 	}
 
-	const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
-		? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
-		: duotoneStyle;
+	const duotonePresetOrColors =
+		duotoneStyle === 'unset' || Array.isArray( duotoneStyle )
+			? duotoneStyle
+			: getColorsFromDuotonePreset( duotoneStyle, duotonePalette );
 
 	return (
 		<>

package/src/hooks/typography.js

@@ -53,9 +53,11 @@ function styleToAttributes( style ) {
 	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
 	const fontSizeValue = style?.typography?.fontSize;
 	const fontFamilyValue = style?.typography?.fontFamily;
-	const fontSizeSlug = fontSizeValue?.startsWith( 'var:preset|font-size|' )
-		? fontSizeValue.substring( 'var:preset|font-size|'.length )
-		: undefined;
+	const fontSizeSlug =
+		typeof fontSizeValue === 'string' &&
+		fontSizeValue?.startsWith( 'var:preset|font-size|' )
+			? fontSizeValue.substring( 'var:preset|font-size|'.length )
+			: undefined;
 	const fontFamilySlug = fontFamilyValue?.startsWith(
 		'var:preset|font-family|'
 	)

package/src/private-apis.js

@@ -50,6 +50,7 @@ import useBlockDisplayTitle from './components/block-title/use-block-display-tit
 import TabbedSidebar from './components/tabbed-sidebar';
 import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
 import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
+import HTMLElementControl from './components/html-element-control';
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -80,6 +81,7 @@ lock( privateApis, {
 	TextAlignmentControl,
 	usesContextKey,
 	useFlashEditableBlocks,
+	HTMLElementControl,
 	useZoomOut,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,

package/src/private-apis.native.js

@@ -6,6 +6,7 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
 import { PrivateRichText } from './components/rich-text/';
+import HTMLElementControl from './components/html-element-control';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -16,4 +17,5 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getRichTextValues,
 	PrivateRichText,
+	HTMLElementControl,
 } );

package/src/store/actions.js

@@ -1157,7 +1157,11 @@ export const mergeBlocks =
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		if ( ! blockAType ) {
+		if (
+			! blockAType ||
+			select.getBlockEditingMode( clientIdA ) === 'disabled' ||
+			select.getBlockEditingMode( clientIdB ) === 'disabled'
+		) {
 			return;
 		}