@wordpress/block-editor 11.3.3 → 11.4.0

package/build-style/style-rtl.css

@@ -1455,23 +1455,9 @@
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
-.block-editor-image-size-control .block-editor-image-size-control__row {
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
-  margin-bottom: 0.5em;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
-  line-height: 1.25;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
-  margin-left: 5px;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
-  margin-right: 5px;
+.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 {
@@ -1742,6 +1728,7 @@
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
+  order: 20;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -2028,11 +2015,40 @@
 
 .block-editor-link-control__drawer {
   display: flex;
+  order: 30;
+  flex-direction: column;
+  flex-basis: 100%;
+}
+
+.block-editor-link-control__drawer-inner {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+  margin-top: 16px;
+  padding-top: 16px;
+  position: relative;
+}
+.block-editor-link-control__drawer-inner::after {
+  content: "";
+  display: block;
+  height: 1px;
+  background-color: #ddd;
+  position: absolute;
+  right: -16px;
+  left: -16px;
+  top: 0;
+}
+
+.block-editor-link-control__tools {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid #ddd;
   margin: 0;
   padding: 16px;
+  margin-top: calc(var(--wp-admin-border-width-focus) * -1);
+  padding-top: var(--wp-admin-border-width-focus);
+  overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
@@ -2044,9 +2060,6 @@
   flex: 1;
   margin: 0;
 }
-.block-editor-link-control__settings :last-child {
-  margin-bottom: 0;
-}
 .is-alternate .block-editor-link-control__settings {
   border-top: 1px solid #1e1e1e;
 }
@@ -2054,7 +2067,7 @@
 .block-editor-link-control__setting {
   margin-bottom: 16px;
 }
-.block-editor-link-control__setting :last-child {
+.block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
 

package/build-style/style.css

@@ -1455,23 +1455,9 @@
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
-.block-editor-image-size-control .block-editor-image-size-control__row {
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
-  margin-bottom: 0.5em;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
-  line-height: 1.25;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
-  margin-right: 5px;
-}
-.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
-  margin-left: 5px;
+.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 {
@@ -1742,6 +1728,7 @@
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
+  order: 20;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -2028,11 +2015,40 @@
 
 .block-editor-link-control__drawer {
   display: flex;
+  order: 30;
+  flex-direction: column;
+  flex-basis: 100%;
+}
+
+.block-editor-link-control__drawer-inner {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+  margin-top: 16px;
+  padding-top: 16px;
+  position: relative;
+}
+.block-editor-link-control__drawer-inner::after {
+  content: "";
+  display: block;
+  height: 1px;
+  background-color: #ddd;
+  position: absolute;
+  left: -16px;
+  right: -16px;
+  top: 0;
+}
+
+.block-editor-link-control__tools {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid #ddd;
   margin: 0;
   padding: 16px;
+  margin-top: calc(var(--wp-admin-border-width-focus) * -1);
+  padding-top: var(--wp-admin-border-width-focus);
+  overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
@@ -2044,9 +2060,6 @@
   flex: 1;
   margin: 0;
 }
-.block-editor-link-control__settings :last-child {
-  margin-bottom: 0;
-}
 .is-alternate .block-editor-link-control__settings {
   border-top: 1px solid #1e1e1e;
 }
@@ -2054,7 +2067,7 @@
 .block-editor-link-control__setting {
   margin-bottom: 16px;
 }
-.block-editor-link-control__setting :last-child {
+.block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.3.3",
+	"version": "11.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.26.1",
-		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/blob": "^3.26.1",
-		"@wordpress/blocks": "^12.3.2",
-		"@wordpress/components": "^23.3.2",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/data": "^8.3.2",
-		"@wordpress/date": "^4.26.2",
-		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/dom": "^3.26.1",
-		"@wordpress/element": "^5.3.1",
-		"@wordpress/escape-html": "^2.26.1",
-		"@wordpress/hooks": "^3.26.1",
-		"@wordpress/html-entities": "^3.26.1",
-		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
-		"@wordpress/is-shallow-equal": "^4.26.1",
-		"@wordpress/keyboard-shortcuts": "^4.3.2",
-		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/notices": "^3.26.2",
-		"@wordpress/preferences": "^3.3.2",
-		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/rich-text": "^6.3.2",
-		"@wordpress/shortcode": "^3.26.1",
-		"@wordpress/style-engine": "^1.9.1",
-		"@wordpress/token-list": "^2.26.1",
-		"@wordpress/url": "^3.27.1",
-		"@wordpress/warning": "^2.26.1",
-		"@wordpress/wordcount": "^3.26.1",
+		"@wordpress/a11y": "^3.27.0",
+		"@wordpress/api-fetch": "^6.24.0",
+		"@wordpress/blob": "^3.27.0",
+		"@wordpress/blocks": "^12.4.0",
+		"@wordpress/components": "^23.4.0",
+		"@wordpress/compose": "^6.4.0",
+		"@wordpress/data": "^8.4.0",
+		"@wordpress/date": "^4.27.0",
+		"@wordpress/deprecated": "^3.27.0",
+		"@wordpress/dom": "^3.27.0",
+		"@wordpress/element": "^5.4.0",
+		"@wordpress/escape-html": "^2.27.0",
+		"@wordpress/hooks": "^3.27.0",
+		"@wordpress/html-entities": "^3.27.0",
+		"@wordpress/i18n": "^4.27.0",
+		"@wordpress/icons": "^9.18.0",
+		"@wordpress/is-shallow-equal": "^4.27.0",
+		"@wordpress/keyboard-shortcuts": "^4.4.0",
+		"@wordpress/keycodes": "^3.27.0",
+		"@wordpress/notices": "^3.27.0",
+		"@wordpress/preferences": "^3.4.0",
+		"@wordpress/private-apis": "^0.9.0",
+		"@wordpress/rich-text": "^6.4.0",
+		"@wordpress/shortcode": "^3.27.0",
+		"@wordpress/style-engine": "^1.10.0",
+		"@wordpress/token-list": "^2.27.0",
+		"@wordpress/url": "^3.28.0",
+		"@wordpress/warning": "^2.27.0",
+		"@wordpress/wordcount": "^3.27.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
+	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
 }

package/src/components/block-popover/inbetween.js

@@ -68,53 +68,6 @@ function BlockPopoverInbetween( {
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
-	const style = useMemo( () => {
-		if (
-			// popoverRecomputeCounter is by definition always equal or greater than 0.
-			// This check is only there to satisfy the correctness of the
-			// exhaustive-deps rule for the `useMemo` hook.
-			popoverRecomputeCounter < 0 ||
-			( ! previousElement && ! nextElement ) ||
-			! isVisible
-		) {
-			return {};
-		}
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			return {
-				width: previousRect ? previousRect.width : nextRect.width,
-				height:
-					nextRect && previousRect
-						? nextRect.top - previousRect.bottom
-						: 0,
-			};
-		}
-
-		let width = 0;
-		if ( previousRect && nextRect ) {
-			width = isRTL()
-				? previousRect.left - nextRect.right
-				: nextRect.left - previousRect.right;
-		}
-
-		return {
-			width,
-			height: previousRect ? previousRect.height : nextRect.height,
-		};
-	}, [
-		previousElement,
-		nextElement,
-		isVertical,
-		popoverRecomputeCounter,
-		isVisible,
-	] );
 
 	const popoverAnchor = useMemo( () => {
 		if (
@@ -142,10 +95,17 @@ function BlockPopoverInbetween( {
 
 				let left = 0;
 				let top = 0;
+				let width = 0;
+				let height = 0;
 
 				if ( isVertical ) {
 					// vertical
 					top = previousRect ? previousRect.bottom : nextRect.top;
+					width = previousRect ? previousRect.width : nextRect.width;
+					height =
+						nextRect && previousRect
+							? nextRect.top - previousRect.bottom
+							: 0;
 
 					if ( isRTL() ) {
 						// vertical, rtl
@@ -158,21 +118,32 @@ function BlockPopoverInbetween( {
 					}
 				} else {
 					top = previousRect ? previousRect.top : nextRect.top;
+					height = previousRect
+						? previousRect.height
+						: nextRect.height;
 
 					if ( isRTL() ) {
 						// non vertical, rtl
 						left = previousRect
 							? previousRect.left
 							: nextRect.right;
+						width =
+							previousRect && nextRect
+								? previousRect.left - nextRect.right
+								: 0;
 					} else {
 						// non vertical, ltr
 						left = previousRect
 							? previousRect.right
 							: nextRect.left;
+						width =
+							previousRect && nextRect
+								? nextRect.left - previousRect.right
+								: 0;
 					}
 				}
 
-				return new window.DOMRect( left, top, 0, 0 );
+				return new window.DOMRect( left, top, width, height );
 			},
 		};
 	}, [
@@ -267,13 +238,10 @@ function BlockPopoverInbetween( {
 			) }
 			resize={ false }
 			flip={ false }
-			placement="bottom-start"
+			placement="overlay"
 			variant="unstyled"
 		>
-			<div
-				className="block-editor-block-popover__inbetween-container"
-				style={ style }
-			>
+			<div className="block-editor-block-popover__inbetween-container">
 				{ children }
 			</div>
 		</Popover>

package/src/components/block-types-list/index.native.js

@@ -32,6 +32,7 @@ export default function BlockTypesList( {
 	name,
 	sections,
 	onSelect,
+	label,
 	listProps,
 	initialNumToRender = 3,
 } ) {
@@ -154,6 +155,7 @@ export default function BlockTypesList( {
 		<SectionList
 			onLayout={ onLayout }
 			testID={ `InserterUI-${ name }` }
+			accessibilityLabel={ label }
 			keyboardShouldPersistTaps="always"
 			sections={ sections }
 			initialNumToRender={ initialNumToRender }

package/src/components/colors-gradients/control.js

@@ -55,6 +55,7 @@ function ColorGradientControlInner( {
 	clearable,
 	showTitle = true,
 	enableAlpha,
+	headingLevel,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -84,6 +85,7 @@ function ColorGradientControlInner( {
 				}
 				clearable={ clearable }
 				enableAlpha={ enableAlpha }
+				headingLevel={ headingLevel }
 			/>
 		),
 		[ TAB_GRADIENT.value ]: (
@@ -103,6 +105,7 @@ function ColorGradientControlInner( {
 					__experimentalIsRenderedInSidebar
 				}
 				clearable={ clearable }
+				headingLevel={ headingLevel }
 			/>
 		),
 	};

package/src/components/font-appearance-control/index.js

@@ -63,7 +63,7 @@ const FONT_WEIGHTS = [
  * @param {boolean} hasFontWeights Whether font weights are enabled and present.
  * @return {string} A label representing what font appearance is being edited.
  */
-export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
 	if ( ! hasFontStyles ) {
 		return __( 'Font weight' );
 	}