@wordpress/block-editor 14.19.0 → 14.20.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.20.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.25.0",
+		"@wordpress/api-fetch": "^7.25.0",
+		"@wordpress/blob": "^4.25.0",
+		"@wordpress/block-serialization-default-parser": "^5.25.0",
+		"@wordpress/blocks": "^14.14.0",
+		"@wordpress/commands": "^1.25.0",
+		"@wordpress/components": "^29.11.0",
+		"@wordpress/compose": "^7.25.0",
+		"@wordpress/data": "^10.25.0",
+		"@wordpress/date": "^5.25.0",
+		"@wordpress/deprecated": "^4.25.0",
+		"@wordpress/dom": "^4.25.0",
+		"@wordpress/element": "^6.25.0",
+		"@wordpress/escape-html": "^3.25.0",
+		"@wordpress/hooks": "^4.25.0",
+		"@wordpress/html-entities": "^4.25.0",
+		"@wordpress/i18n": "^5.25.0",
+		"@wordpress/icons": "^10.25.0",
+		"@wordpress/is-shallow-equal": "^5.25.0",
+		"@wordpress/keyboard-shortcuts": "^5.25.0",
+		"@wordpress/keycodes": "^4.25.0",
+		"@wordpress/notices": "^5.25.0",
+		"@wordpress/preferences": "^4.25.0",
+		"@wordpress/priority-queue": "^3.25.0",
+		"@wordpress/private-apis": "^1.25.0",
+		"@wordpress/rich-text": "^7.25.0",
+		"@wordpress/style-engine": "^2.25.0",
+		"@wordpress/token-list": "^3.25.0",
+		"@wordpress/upload-media": "^0.10.0",
+		"@wordpress/url": "^4.25.0",
+		"@wordpress/warning": "^3.25.0",
+		"@wordpress/wordcount": "^4.25.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
+	"gitHead": "d1acd76ffff33ab01f0a948d2f51e5e45c95158d"
 }

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