@wordpress/block-editor 14.17.0 → 14.18.0

package/build-style/style.css

@@ -319,12 +319,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 1.5em;
 }
 .block-editor-block-inspector .components-base-control:where(:not(:last-child)),
-.block-editor-block-inspector .components-radio-control:where(:not(:last-child)) {
+.block-editor-block-inspector .components-radio-control:where(:not(:last-child)),
+.block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)) {
   margin-bottom: 16px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
 .block-editor-block-inspector .components-query-controls .components-base-control,
-.block-editor-block-inspector .components-range-control .components-base-control {
+.block-editor-block-inspector .components-range-control .components-base-control,
+.block-editor-block-inspector .block-editor-html-element-control .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -3030,6 +3032,10 @@ iframe[name=editor-canvas] {
     width: 300px;
   }
 }
+.block-editor-media-placeholder__url-input-form input {
+  /* rtl:ignore */
+  direction: ltr;
+}
 
 .modal-open .block-editor-media-replace-flow__options {
   display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.17.0",
+	"version": "14.18.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.22.0",
-		"@wordpress/api-fetch": "^7.22.0",
-		"@wordpress/blob": "^4.22.0",
-		"@wordpress/block-serialization-default-parser": "^5.22.0",
-		"@wordpress/blocks": "^14.11.0",
-		"@wordpress/commands": "^1.22.0",
-		"@wordpress/components": "^29.8.0",
-		"@wordpress/compose": "^7.22.0",
-		"@wordpress/data": "^10.22.0",
-		"@wordpress/date": "^5.22.0",
-		"@wordpress/deprecated": "^4.22.0",
-		"@wordpress/dom": "^4.22.0",
-		"@wordpress/element": "^6.22.0",
-		"@wordpress/escape-html": "^3.22.0",
-		"@wordpress/hooks": "^4.22.0",
-		"@wordpress/html-entities": "^4.22.0",
-		"@wordpress/i18n": "^5.22.0",
-		"@wordpress/icons": "^10.22.0",
-		"@wordpress/is-shallow-equal": "^5.22.0",
-		"@wordpress/keyboard-shortcuts": "^5.22.0",
-		"@wordpress/keycodes": "^4.22.0",
-		"@wordpress/notices": "^5.22.0",
-		"@wordpress/preferences": "^4.22.0",
-		"@wordpress/priority-queue": "^3.22.0",
-		"@wordpress/private-apis": "^1.22.0",
-		"@wordpress/rich-text": "^7.22.0",
-		"@wordpress/style-engine": "^2.22.0",
-		"@wordpress/token-list": "^3.22.0",
-		"@wordpress/upload-media": "^0.7.0",
-		"@wordpress/url": "^4.22.0",
-		"@wordpress/warning": "^3.22.0",
-		"@wordpress/wordcount": "^4.22.0",
+		"@wordpress/a11y": "^4.23.0",
+		"@wordpress/api-fetch": "^7.23.0",
+		"@wordpress/blob": "^4.23.0",
+		"@wordpress/block-serialization-default-parser": "^5.23.0",
+		"@wordpress/blocks": "^14.12.0",
+		"@wordpress/commands": "^1.23.0",
+		"@wordpress/components": "^29.9.0",
+		"@wordpress/compose": "^7.23.0",
+		"@wordpress/data": "^10.23.0",
+		"@wordpress/date": "^5.23.0",
+		"@wordpress/deprecated": "^4.23.0",
+		"@wordpress/dom": "^4.23.0",
+		"@wordpress/element": "^6.23.0",
+		"@wordpress/escape-html": "^3.23.0",
+		"@wordpress/hooks": "^4.23.0",
+		"@wordpress/html-entities": "^4.23.0",
+		"@wordpress/i18n": "^5.23.0",
+		"@wordpress/icons": "^10.23.0",
+		"@wordpress/is-shallow-equal": "^5.23.0",
+		"@wordpress/keyboard-shortcuts": "^5.23.0",
+		"@wordpress/keycodes": "^4.23.0",
+		"@wordpress/notices": "^5.23.0",
+		"@wordpress/preferences": "^4.23.0",
+		"@wordpress/priority-queue": "^3.23.0",
+		"@wordpress/private-apis": "^1.23.0",
+		"@wordpress/rich-text": "^7.23.0",
+		"@wordpress/style-engine": "^2.23.0",
+		"@wordpress/token-list": "^3.23.0",
+		"@wordpress/upload-media": "^0.8.0",
+		"@wordpress/url": "^4.23.0",
+		"@wordpress/warning": "^3.23.0",
+		"@wordpress/wordcount": "^4.23.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
+	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
 }

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 }

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/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/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;
 		}