@wordpress/block-editor 14.19.0 → 14.21.0

package/build-style/style-rtl.css

@@ -441,13 +441,15 @@ iframe[name=editor-canvas] {
 }
 .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 .block-editor-html-element-control:where(:not(:last-child)) {
+.block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)),
+.block-editor-block-inspector .block-editor-image-size-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 .block-editor-html-element-control .components-base-control {
+.block-editor-block-inspector .block-editor-html-element-control .components-base-control,
+.block-editor-block-inspector .block-editor-image-size-control .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -2183,14 +2185,6 @@ iframe[name=editor-canvas] {
   left: 0;
 }
 
-.block-editor-image-size-control {
-  margin-bottom: 1em;
-}
-.block-editor-image-size-control .block-editor-image-size-control__width,
-.block-editor-image-size-control .block-editor-image-size-control__height {
-  margin-bottom: 1.115em;
-}
-
 .block-editor-block-types-list__list-item {
   display: block;
   width: 33.33%;

package/build-style/style.css

@@ -441,13 +441,15 @@ iframe[name=editor-canvas] {
 }
 .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 .block-editor-html-element-control:where(:not(:last-child)) {
+.block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)),
+.block-editor-block-inspector .block-editor-image-size-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 .block-editor-html-element-control .components-base-control {
+.block-editor-block-inspector .block-editor-html-element-control .components-base-control,
+.block-editor-block-inspector .block-editor-image-size-control .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -2184,14 +2186,6 @@ iframe[name=editor-canvas] {
   right: 0;
 }
 
-.block-editor-image-size-control {
-  margin-bottom: 1em;
-}
-.block-editor-image-size-control .block-editor-image-size-control__width,
-.block-editor-image-size-control .block-editor-image-size-control__height {
-  margin-bottom: 1.115em;
-}
-
 .block-editor-block-types-list__list-item {
   display: block;
   width: 33.33%;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.19.0",
+	"version": "14.21.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.24.0",
-		"@wordpress/api-fetch": "^7.24.0",
-		"@wordpress/blob": "^4.24.0",
-		"@wordpress/block-serialization-default-parser": "^5.24.0",
-		"@wordpress/blocks": "^14.13.0",
-		"@wordpress/commands": "^1.24.0",
-		"@wordpress/components": "^29.10.0",
-		"@wordpress/compose": "^7.24.0",
-		"@wordpress/data": "^10.24.0",
-		"@wordpress/date": "^5.24.0",
-		"@wordpress/deprecated": "^4.24.0",
-		"@wordpress/dom": "^4.24.0",
-		"@wordpress/element": "^6.24.0",
-		"@wordpress/escape-html": "^3.24.0",
-		"@wordpress/hooks": "^4.24.0",
-		"@wordpress/html-entities": "^4.24.0",
-		"@wordpress/i18n": "^5.24.0",
-		"@wordpress/icons": "^10.24.0",
-		"@wordpress/is-shallow-equal": "^5.24.0",
-		"@wordpress/keyboard-shortcuts": "^5.24.0",
-		"@wordpress/keycodes": "^4.24.0",
-		"@wordpress/notices": "^5.24.0",
-		"@wordpress/preferences": "^4.24.0",
-		"@wordpress/priority-queue": "^3.24.0",
-		"@wordpress/private-apis": "^1.24.0",
-		"@wordpress/rich-text": "^7.24.0",
-		"@wordpress/style-engine": "^2.24.0",
-		"@wordpress/token-list": "^3.24.0",
-		"@wordpress/upload-media": "^0.9.0",
-		"@wordpress/url": "^4.24.0",
-		"@wordpress/warning": "^3.24.0",
-		"@wordpress/wordcount": "^4.24.0",
+		"@wordpress/a11y": "^4.26.0",
+		"@wordpress/api-fetch": "^7.26.0",
+		"@wordpress/blob": "^4.26.0",
+		"@wordpress/block-serialization-default-parser": "^5.26.0",
+		"@wordpress/blocks": "^14.15.0",
+		"@wordpress/commands": "^1.26.0",
+		"@wordpress/components": "^29.12.0",
+		"@wordpress/compose": "^7.26.0",
+		"@wordpress/data": "^10.26.0",
+		"@wordpress/date": "^5.26.0",
+		"@wordpress/deprecated": "^4.26.0",
+		"@wordpress/dom": "^4.26.0",
+		"@wordpress/element": "^6.26.0",
+		"@wordpress/escape-html": "^3.26.0",
+		"@wordpress/hooks": "^4.26.0",
+		"@wordpress/html-entities": "^4.26.0",
+		"@wordpress/i18n": "^5.26.0",
+		"@wordpress/icons": "^10.26.0",
+		"@wordpress/is-shallow-equal": "^5.26.0",
+		"@wordpress/keyboard-shortcuts": "^5.26.0",
+		"@wordpress/keycodes": "^4.26.0",
+		"@wordpress/notices": "^5.26.0",
+		"@wordpress/preferences": "^4.26.0",
+		"@wordpress/priority-queue": "^3.26.0",
+		"@wordpress/private-apis": "^1.26.0",
+		"@wordpress/rich-text": "^7.26.0",
+		"@wordpress/style-engine": "^2.26.0",
+		"@wordpress/token-list": "^3.26.0",
+		"@wordpress/upload-media": "^0.11.0",
+		"@wordpress/url": "^4.26.0",
+		"@wordpress/warning": "^3.26.0",
+		"@wordpress/wordcount": "^4.26.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
+	"gitHead": "35e26942820d8237771af0c58e45b4303f0497f1"
 }

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

@@ -12,7 +12,8 @@
 
 	.components-base-control,
 	.components-radio-control,
-	.block-editor-html-element-control {
+	.block-editor-html-element-control,
+	.block-editor-image-size-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -22,7 +23,8 @@
 	.components-focal-point-picker-control,
 	.components-query-controls,
 	.components-range-control,
-	.block-editor-html-element-control {
+	.block-editor-html-element-control,
+	.block-editor-image-size-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

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

@@ -22,7 +22,7 @@ import { htmlElementMessages } from './messages';
  * @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 {string}   props.clientId Optional. The client ID of the block. Used to check for existing <main> elements.
  * @param {Array}    props.options  SelectControl options (optional).
  *
  * @return {Component} The HTML element select control with validation.

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

@@ -7,12 +7,18 @@ import { __ } from '@wordpress/i18n';
  * Messages providing helpful descriptions for HTML elements.
  */
 export const htmlElementMessages = {
+	a: __(
+		'The <a> element should be used for links that navigate to a different page or to a different section within the same page.'
+	),
 	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."
 	),
+	button: __(
+		'The <button> element should be used for interactive controls that perform an action on the current page, such as opening a modal or toggling content visibility.'
+	),
 	div: __(
 		'The <div> element should only be used if the block is a design element with no semantic meaning.'
 	),

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

@@ -5,6 +5,7 @@ import {
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
@@ -87,7 +88,7 @@ export default function ImageSizeControl( {
 	} );
 
 	return (
-		<>
+		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
@@ -100,10 +101,9 @@ export default function ImageSizeControl( {
 				/>
 			) }
 			{ isResizable && (
-				<div className="block-editor-image-size-control">
-					<HStack align="baseline" spacing="3">
+				<>
+					<HStack align="baseline" spacing="4">
 						<NumberControl
-							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
 							min={ 1 }
@@ -113,7 +113,6 @@ export default function ImageSizeControl( {
 							size="__unstable-large"
 						/>
 						<NumberControl
-							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
 							min={ 1 }
@@ -146,8 +145,8 @@ export default function ImageSizeControl( {
 							);
 						} ) }
 					</ToggleGroupControl>
-				</div>
+				</>
 			) }
-		</>
+		</VStack>
 	);
 }

package/src/components/inserter/media-tab/media-preview.js

@@ -37,7 +37,7 @@ import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const MEDIA_OPTIONS_POPOVER_PROPS = {
-	position: 'bottom left',
+	placement: 'bottom-end',
 	className:
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };

package/src/components/url-input/button.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 import {
 	Button,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
@@ -14,73 +14,67 @@ import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
  */
 import URLInput from './';
 
-class URLInputButton extends Component {
-	constructor() {
-		super( ...arguments );
-		this.toggle = this.toggle.bind( this );
-		this.submitLink = this.submitLink.bind( this );
-		this.state = {
-			expanded: false,
-		};
-	}
-
-	toggle() {
-		this.setState( { expanded: ! this.state.expanded } );
-	}
+/**
+ * A button that toggles a URL input field for inserting or editing links.
+ *
+ * @param {Object}   props          Component properties.
+ * @param {string}   props.url      The current URL value.
+ * @param {Function} props.onChange Callback function to handle URL changes.
+ * @return {JSX.Element} The URL input button component.
+ */
+function URLInputButton( { url, onChange } ) {
+	const [ expanded, toggleExpanded ] = useReducer(
+		( isExpanded ) => ! isExpanded,
+		false
+	);
 
-	submitLink( event ) {
+	const submitLink = ( event ) => {
 		event.preventDefault();
-		this.toggle();
-	}
-
-	render() {
-		const { url, onChange } = this.props;
-		const { expanded } = this.state;
-		const buttonLabel = url ? __( 'Edit link' ) : __( 'Insert link' );
+		toggleExpanded();
+	};
 
-		return (
-			<div className="block-editor-url-input__button">
-				<Button
-					size="compact"
-					icon={ link }
-					label={ buttonLabel }
-					onClick={ this.toggle }
-					className="components-toolbar__control"
-					isPressed={ !! url }
-				/>
-				{ expanded && (
-					<form
-						className="block-editor-url-input__button-modal"
-						onSubmit={ this.submitLink }
-					>
-						<div className="block-editor-url-input__button-modal-line">
-							<Button
-								__next40pxDefaultSize
-								className="block-editor-url-input__back"
-								icon={ arrowLeft }
-								label={ __( 'Close' ) }
-								onClick={ this.toggle }
-							/>
-							<URLInput
-								value={ url || '' }
-								onChange={ onChange }
-								suffix={
-									<InputControlSuffixWrapper variant="control">
-										<Button
-											size="small"
-											icon={ keyboardReturn }
-											label={ __( 'Submit' ) }
-											type="submit"
-										/>
-									</InputControlSuffixWrapper>
-								}
-							/>
-						</div>
-					</form>
-				) }
-			</div>
-		);
-	}
+	return (
+		<div className="block-editor-url-input__button">
+			<Button
+				size="compact"
+				icon={ link }
+				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
+				onClick={ toggleExpanded }
+				className="components-toolbar__control"
+				isPressed={ !! url }
+			/>
+			{ expanded && (
+				<form
+					className="block-editor-url-input__button-modal"
+					onSubmit={ submitLink }
+				>
+					<div className="block-editor-url-input__button-modal-line">
+						<Button
+							__next40pxDefaultSize
+							className="block-editor-url-input__back"
+							icon={ arrowLeft }
+							label={ __( 'Close' ) }
+							onClick={ toggleExpanded }
+						/>
+						<URLInput
+							value={ url || '' }
+							onChange={ onChange }
+							suffix={
+								<InputControlSuffixWrapper variant="control">
+									<Button
+										size="small"
+										icon={ keyboardReturn }
+										label={ __( 'Submit' ) }
+										type="submit"
+									/>
+								</InputControlSuffixWrapper>
+							}
+						/>
+					</div>
+				</form>
+			) }
+		</div>
+	);
 }
 
 /**

package/src/components/warning/index.js

@@ -36,7 +36,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 									icon={ moreVertical }
 									label={ __( 'More options' ) }
 									popoverProps={ {
-										position: 'bottom left',
+										placement: 'bottom-end',
 										className:
 											'block-editor-warning__dropdown',
 									} }

package/src/layouts/flex.js

@@ -56,6 +56,11 @@ const verticalAlignmentMap = {
 	'space-between': 'space-between',
 };
 
+const defaultAlignments = {
+	horizontal: 'center',
+	vertical: 'top',
+};
+
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
@@ -201,8 +206,8 @@ function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 
 	const defaultVerticalAlignment =
 		orientation === 'horizontal'
-			? verticalAlignmentMap.center
-			: verticalAlignmentMap.top;
+			? defaultAlignments.horizontal
+			: defaultAlignments.vertical;
 
 	const { verticalAlignment = defaultVerticalAlignment } = layout;
 

package/src/store/selectors.js

@@ -1807,9 +1807,9 @@ export const canInsertBlockType = createRegistrySelector( ( select ) =>
  * Determines if the given blocks are allowed to be inserted into the block
  * list.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be inserted.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object}   state        Editor state.
+ * @param {string[]} clientIds    The block client IDs to be inserted.
+ * @param {?string}  rootClientId Optional root client ID of block list.
  *
  * @return {boolean} Whether the given blocks are allowed to be inserted.
  */

package/src/style.scss

@@ -33,7 +33,6 @@
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/iframe/style.scss";
-@import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";
 @import "./components/inspector-popover-header/style.scss";

package/src/components/image-size-control/style.scss

@@ -1,8 +0,0 @@
-.block-editor-image-size-control {
-	margin-bottom: 1em;
-
-	.block-editor-image-size-control__width,
-	.block-editor-image-size-control__height {
-		margin-bottom: 1.115em;
-	}
-}