@wordpress/block-editor 10.3.0 → 10.4.0

package/build-style/style-rtl.css

@@ -1052,6 +1052,33 @@
   }
 }
 
+.components-button.block-editor-block-mover-button::before {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  height: 32px;
+  right: 8px;
+  left: 8px;
+  z-index: -1;
+  animation: components-button__appear-animation 0.1s ease;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.block-editor-block-mover-button::before {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
+  box-shadow: none;
+  outline: none;
+}
+.components-button.block-editor-block-mover-button:focus-visible::before {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  outline: 2px solid transparent;
+}
+
 .block-editor-block-navigation__container {
   min-width: 280px;
 }
@@ -1122,10 +1149,6 @@
   margin: 0 !important;
   min-width: auto;
   width: max-content;
-  background: none;
-  border: none;
-  outline: none;
-  box-shadow: none;
   overflow-y: visible;
 }
 .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
@@ -1641,7 +1664,7 @@
   width: 100%;
   position: relative;
   text-align: right;
-  justify-content: left;
+  justify-content: right;
   padding: 6px 12px;
 }
 .block-editor-block-variation-transforms .components-dropdown-menu__toggle.components-dropdown-menu__toggle {
@@ -1674,43 +1697,36 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
-  width: 110px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__unit-control {
+  width: calc((100% - 16px) / 2);
   margin-bottom: 0;
-  margin-left: 12px;
+  margin-left: 16px;
   flex-shrink: 0;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control {
   flex: 1;
-  margin-bottom: 0;
-}
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-base-control__field {
-  margin-bottom: 0;
-  height: 30px;
+  margin-left: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-range-control__wrapper {
-  margin-left: 10px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
+  height: 40px;
+  display: flex;
+  align-items: center;
 }
 .components-border-radius-control .components-border-radius-control__wrapper > span {
   flex: 0 0 auto;
 }
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
-  display: flex;
-  width: 70%;
-  flex-wrap: wrap;
-}
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-border-radius-control__tooltip-wrapper {
-  width: calc(50% - 8px);
-  margin-bottom: 8px;
-  margin-left: 8px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-left: 12px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon {
+.components-border-radius-control .component-border-radius-control__linked-button {
   display: flex;
   justify-content: center;
-  margin-right: 2px;
-  margin-top: 3px;
+  margin-top: 8px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
+.components-border-radius-control .component-border-radius-control__linked-button svg {
   margin-left: 0;
 }
 
@@ -2096,6 +2112,7 @@
   border-radius: 2px;
   opacity: 0.04;
   background: var(--wp-admin-theme-color);
+  pointer-events: none;
 }
 .components-button.block-editor-block-types-list__item:not(:disabled):focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -2848,35 +2865,11 @@
 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
   top: -4px;
 }
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus:enabled {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus::before {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
-  outline: 2px solid transparent;
-}
 .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-  content: "";
-  position: absolute;
-  display: block;
-  border-radius: 2px;
   height: 16px;
   min-width: 100%;
   right: 0;
   left: 0;
-  animation: components-button__appear-animation 0.1s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-list-view-leaf .block-editor-inserter__toggle {
   background: #1e1e1e;
@@ -3021,13 +3014,6 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator > .components-popover__content {
-  margin-right: 0;
-  border: none;
-  box-shadow: none;
-  outline: none;
-}
-
 .block-editor-list-view-placeholder {
   padding: 0;
   margin: 0;
@@ -4451,13 +4437,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  justify-content: left;
+  justify-content: right;
   height: 16px;
   margin-top: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-label {
   grid-column: 1/1;
-  justify-self: left;
+  justify-self: right;
   margin-bottom: 0;
 }
 .component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control,
@@ -4471,7 +4457,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
-  justify-self: left;
+  justify-self: right;
   grid-row: 1/1;
   align-self: center;
   margin-right: 4px;
@@ -4505,6 +4491,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
   margin-top: 8px;
+  grid-column: 1;
 }
 .component-spacing-sizes-control .components-range-control {
   height: 40px;

package/build-style/style.css

@@ -1052,6 +1052,33 @@
   }
 }
 
+.components-button.block-editor-block-mover-button::before {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  height: 32px;
+  left: 8px;
+  right: 8px;
+  z-index: -1;
+  animation: components-button__appear-animation 0.1s ease;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.block-editor-block-mover-button::before {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
+  box-shadow: none;
+  outline: none;
+}
+.components-button.block-editor-block-mover-button:focus-visible::before {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  outline: 2px solid transparent;
+}
+
 .block-editor-block-navigation__container {
   min-width: 280px;
 }
@@ -1122,10 +1149,6 @@
   margin: 0 !important;
   min-width: auto;
   width: max-content;
-  background: none;
-  border: none;
-  outline: none;
-  box-shadow: none;
   overflow-y: visible;
 }
 .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
@@ -1674,43 +1697,36 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
-  width: 110px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__unit-control {
+  width: calc((100% - 16px) / 2);
   margin-bottom: 0;
-  margin-right: 12px;
+  margin-right: 16px;
   flex-shrink: 0;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control {
   flex: 1;
-  margin-bottom: 0;
-}
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-base-control__field {
-  margin-bottom: 0;
-  height: 30px;
+  margin-right: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-range-control__wrapper {
-  margin-right: 10px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
+  height: 40px;
+  display: flex;
+  align-items: center;
 }
 .components-border-radius-control .components-border-radius-control__wrapper > span {
   flex: 0 0 auto;
 }
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
-  display: flex;
-  width: 70%;
-  flex-wrap: wrap;
-}
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-border-radius-control__tooltip-wrapper {
-  width: calc(50% - 8px);
-  margin-bottom: 8px;
-  margin-right: 8px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-right: 12px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon {
+.components-border-radius-control .component-border-radius-control__linked-button {
   display: flex;
   justify-content: center;
-  margin-left: 2px;
-  margin-top: 3px;
+  margin-top: 8px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
+.components-border-radius-control .component-border-radius-control__linked-button svg {
   margin-right: 0;
 }
 
@@ -2096,6 +2112,7 @@
   border-radius: 2px;
   opacity: 0.04;
   background: var(--wp-admin-theme-color);
+  pointer-events: none;
 }
 .components-button.block-editor-block-types-list__item:not(:disabled):focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -2848,35 +2865,11 @@
 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
   top: -4px;
 }
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus:enabled {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus::before {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
-  outline: 2px solid transparent;
-}
 .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-  content: "";
-  position: absolute;
-  display: block;
-  border-radius: 2px;
   height: 16px;
   min-width: 100%;
   left: 0;
   right: 0;
-  animation: components-button__appear-animation 0.1s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-list-view-leaf .block-editor-inserter__toggle {
   background: #1e1e1e;
@@ -3021,13 +3014,6 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator > .components-popover__content {
-  margin-left: 0;
-  border: none;
-  box-shadow: none;
-  outline: none;
-}
-
 .block-editor-list-view-placeholder {
   padding: 0;
   margin: 0;
@@ -4505,6 +4491,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
   margin-top: 8px;
+  grid-column: 1;
 }
 .component-spacing-sizes-control .components-range-control {
   height: 40px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.3.0",
+	"version": "10.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.20.0",
-		"@wordpress/api-fetch": "^6.17.0",
-		"@wordpress/blob": "^3.20.0",
-		"@wordpress/blocks": "^11.19.0",
-		"@wordpress/components": "^21.3.0",
-		"@wordpress/compose": "^5.18.0",
-		"@wordpress/data": "^7.4.0",
-		"@wordpress/date": "^4.20.0",
-		"@wordpress/deprecated": "^3.20.0",
-		"@wordpress/dom": "^3.20.0",
-		"@wordpress/element": "^4.18.0",
-		"@wordpress/hooks": "^3.20.0",
-		"@wordpress/html-entities": "^3.20.0",
-		"@wordpress/i18n": "^4.20.0",
-		"@wordpress/icons": "^9.11.0",
-		"@wordpress/is-shallow-equal": "^4.20.0",
-		"@wordpress/keyboard-shortcuts": "^3.18.0",
-		"@wordpress/keycodes": "^3.20.0",
-		"@wordpress/notices": "^3.20.0",
-		"@wordpress/rich-text": "^5.18.0",
-		"@wordpress/shortcode": "^3.20.0",
-		"@wordpress/style-engine": "^1.3.0",
-		"@wordpress/token-list": "^2.20.0",
-		"@wordpress/url": "^3.21.0",
-		"@wordpress/warning": "^2.20.0",
-		"@wordpress/wordcount": "^3.20.0",
+		"@wordpress/a11y": "^3.21.0",
+		"@wordpress/api-fetch": "^6.18.0",
+		"@wordpress/blob": "^3.21.0",
+		"@wordpress/blocks": "^11.20.0",
+		"@wordpress/components": "^22.0.0",
+		"@wordpress/compose": "^5.19.0",
+		"@wordpress/data": "^7.5.0",
+		"@wordpress/date": "^4.21.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/dom": "^3.21.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/hooks": "^3.21.0",
+		"@wordpress/html-entities": "^3.21.0",
+		"@wordpress/i18n": "^4.21.0",
+		"@wordpress/icons": "^9.12.0",
+		"@wordpress/is-shallow-equal": "^4.21.0",
+		"@wordpress/keyboard-shortcuts": "^3.19.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/notices": "^3.21.0",
+		"@wordpress/rich-text": "^5.19.0",
+		"@wordpress/shortcode": "^3.21.0",
+		"@wordpress/style-engine": "^1.4.0",
+		"@wordpress/token-list": "^2.21.0",
+		"@wordpress/url": "^3.22.0",
+		"@wordpress/warning": "^2.21.0",
+		"@wordpress/wordcount": "^3.21.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }

package/src/components/alignment-control/ui.js

@@ -30,7 +30,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function AlignmentUI( {

package/src/components/block-alignment-control/constants.js

@@ -41,5 +41,5 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 export const DEFAULT_CONTROL = 'none';
 
 export const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };

package/src/components/block-alignment-matrix-control/index.js

@@ -24,7 +24,7 @@ function BlockAlignmentMatrixControl( props ) {
 	return (
 		<Dropdown
 			position="bottom right"
-			popoverProps={ { isAlternate: true } }
+			popoverProps={ { variant: 'toolbar' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

package/src/components/block-breadcrumb/test/__snapshots__/index.js.snap

@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockBreadcrumb should render correctly 1`] = `
-<ul
-  aria-label="Block breadcrumb"
-  class="block-editor-block-breadcrumb"
-  role="list"
->
-  <li
-    aria-current="true"
-    class="block-editor-block-breadcrumb__current"
+<div>
+  <ul
+    aria-label="Block breadcrumb"
+    class="block-editor-block-breadcrumb"
+    role="list"
   >
-    Document
-  </li>
-</ul>
+    <li
+      aria-current="true"
+      class="block-editor-block-breadcrumb__current"
+    >
+      Document
+    </li>
+  </ul>
+</div>
 `;

package/src/components/block-breadcrumb/test/index.js

@@ -12,7 +12,7 @@ describe( 'BlockBreadcrumb', () => {
 	it( 'should render correctly', () => {
 		const { container } = render( <BlockBreadcrumb /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'Root label text', () => {

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { castArray } from 'lodash';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -44,7 +43,9 @@ function BlockCompare( {
 
 	function getConvertedContent( convertedBlock ) {
 		// The convertor may return an array of items or a single item.
-		const newBlocks = castArray( convertedBlock );
+		const newBlocks = Array.isArray( convertedBlock )
+			? convertedBlock
+			: [ convertedBlock ];
 
 		// Get converted block details.
 		const newContent = newBlocks.map( ( item ) =>

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

@@ -20,11 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId } = props;
+	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		__unstableLayoutClassNames,
 	};
 	return (
 		<BlockEditContextProvider

package/src/components/block-list/block.js

@@ -84,6 +84,7 @@ function BlockListBlock( {
 	isSelected,
 	isSelectionEnabled,
 	className,
+	__unstableLayoutClassNames: layoutClassNames,
 	name,
 	isValid,
 	attributes,
@@ -146,6 +147,7 @@ function BlockListBlock( {
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
+			__unstableLayoutClassNames={ layoutClassNames }
 		/>
 	);
 

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

@@ -174,7 +174,7 @@
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
 	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
-	// from the preceeding paragraph showing, which is effectively the above selection bleeding in.
+	// from the preceding paragraph showing, which is effectively the above selection bleeding in.
 	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 

package/src/components/block-mover/stories/index.js

@@ -70,7 +70,7 @@ function BlockMoverStory() {
 			</Toolbar>
 
 			<p style={ { marginTop: 36 } }>
-				But it can also accomodate horizontal blocks.
+				But it can also accommodate horizontal blocks.
 			</p>
 			<Toolbar label="Block Mover">
 				<BlockMover

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

@@ -61,3 +61,38 @@
 		overflow: hidden;
 	}
 }
+
+// Specificity is necessary to override block toolbar button styles.
+.components-button.block-editor-block-mover-button {
+	// Focus and toggle pseudo elements.
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		border-radius: $radius-block-ui;
+		height: $grid-unit-40;
+
+		// Position the focus rectangle.
+		left: $grid-unit-10;
+		right: $grid-unit-10;
+		z-index: -1;
+
+		// Animate in.
+		animation: components-button__appear-animation 0.1s ease;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+	}
+
+	// Don't show the focus inherited by the Button component.
+	&:focus,
+	&:focus:enabled,
+	// Override focus styles from the block toolbar
+	&:focus::before {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible::before {
+		@include block-toolbar-button-style__focus();
+	}
+}

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

@@ -268,6 +268,7 @@ function BlockPopoverInbetween( {
 			resize={ false }
 			flip={ false }
 			placement="bottom-start"
+			variant="unstyled"
 		>
 			<div
 				className="block-editor-block-popover__inbetween-container"

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

@@ -173,6 +173,7 @@ function BlockPopover(
 				'block-editor-block-popover',
 				props.className
 			) }
+			variant="unstyled"
 		>
 			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
 			{ ! __unstableCoverTarget && children }

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

@@ -13,10 +13,6 @@
 		margin: 0 !important;
 		min-width: auto;
 		width: max-content;
-		background: none;
-		border: none;
-		outline: none;
-		box-shadow: none;
 		overflow-y: visible;
 	}