@wordpress/block-editor 14.2.0 → 14.2.1-next.1f6eadc42.0

package/build-style/style-rtl.css

@@ -174,11 +174,8 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
-.block-editor-block-inspector .components-base-control {
-  margin-bottom: 24px;
-}
-.block-editor-block-inspector .components-base-control:last-child {
-  margin-bottom: 8px;
+.block-editor-block-inspector .components-base-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,
@@ -523,37 +520,11 @@ iframe[name=editor-canvas] {
   display: none;
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-  height: 24px;
-  line-height: 24px;
-  padding: 0;
-  position: relative;
-}
-.block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) {
-  text-decoration: underline;
-  box-shadow: none;
-}
-.block-editor-block-breadcrumb__button.components-button:focus {
-  box-shadow: none;
-}
-.block-editor-block-breadcrumb__button.components-button:focus::before {
-  content: "";
-  display: block;
-  position: absolute;
-  border-radius: 2px;
-  top: 1px;
-  left: 1px;
-  bottom: 1px;
-  right: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-
 .block-editor-block-breadcrumb__current {
   cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
+.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
 .block-editor-block-breadcrumb__current {
   color: #1e1e1e;
   padding: 0 8px;
@@ -1085,27 +1056,6 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
 }
 
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon {
-  height: 100%;
-  position: relative;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  min-width: 100%;
-}
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before {
-  top: 8px;
-  left: 8px;
-  bottom: 8px;
-  right: 8px;
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
   min-width: 300px;
 }
@@ -3571,26 +3521,14 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   grid-column: span 1;
 }
 
-.block-editor-hooks__layout-controls-units {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
+.block-editor-hooks__layout-constrained .components-base-control {
   margin-bottom: 0;
 }
 
-.block-editor-hooks__layout-controls-reset {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 24px;
-}
-
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
   color: #757575;
   font-size: 12px;
-  margin-bottom: 16px;
+  margin-bottom: 0;
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -3602,10 +3540,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 8px;
 }
 
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-  margin-bottom: 16px;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3677,9 +3611,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-contextual-toolbar.components-accessible-toolbar {
   border: none;
-  border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-unstyled {
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
+}
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
@@ -3989,15 +3925,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   text-align: left;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  margin: auto 16px 16px;
-}
-
-.block-editor-inserter__manage-reusable-blocks {
-  justify-content: center;
-  width: 100%;
-}
-
 .block-editor-inserter__no-results,
 .block-editor-inserter__patterns-loading {
   padding: 32px;
@@ -4478,6 +4405,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   flex-direction: column;
 }
 
+.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+  padding: 0 24px 16px;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/build-style/style.css

@@ -174,11 +174,8 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
-.block-editor-block-inspector .components-base-control {
-  margin-bottom: 24px;
-}
-.block-editor-block-inspector .components-base-control:last-child {
-  margin-bottom: 8px;
+.block-editor-block-inspector .components-base-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,
@@ -523,37 +520,11 @@ iframe[name=editor-canvas] {
   display: none;
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-  height: 24px;
-  line-height: 24px;
-  padding: 0;
-  position: relative;
-}
-.block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) {
-  text-decoration: underline;
-  box-shadow: none;
-}
-.block-editor-block-breadcrumb__button.components-button:focus {
-  box-shadow: none;
-}
-.block-editor-block-breadcrumb__button.components-button:focus::before {
-  content: "";
-  display: block;
-  position: absolute;
-  border-radius: 2px;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  left: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-
 .block-editor-block-breadcrumb__current {
   cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
+.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
 .block-editor-block-breadcrumb__current {
   color: #1e1e1e;
   padding: 0 8px;
@@ -1085,27 +1056,6 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
 }
 
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon {
-  height: 100%;
-  position: relative;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  min-width: 100%;
-}
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before {
-  top: 8px;
-  right: 8px;
-  bottom: 8px;
-  left: 8px;
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
   min-width: 300px;
 }
@@ -3572,26 +3522,14 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   grid-column: span 1;
 }
 
-.block-editor-hooks__layout-controls-units {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
+.block-editor-hooks__layout-constrained .components-base-control {
   margin-bottom: 0;
 }
 
-.block-editor-hooks__layout-controls-reset {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 24px;
-}
-
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
   color: #757575;
   font-size: 12px;
-  margin-bottom: 16px;
+  margin-bottom: 0;
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -3603,10 +3541,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 8px;
 }
 
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-  margin-bottom: 16px;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3678,9 +3612,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-contextual-toolbar.components-accessible-toolbar {
   border: none;
-  border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-unstyled {
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
+}
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
@@ -3990,15 +3926,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   text-align: right;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  margin: auto 16px 16px;
-}
-
-.block-editor-inserter__manage-reusable-blocks {
-  justify-content: center;
-  width: 100%;
-}
-
 .block-editor-inserter__no-results,
 .block-editor-inserter__patterns-loading {
   padding: 32px;
@@ -4479,6 +4406,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   flex-direction: column;
 }
 
+.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+  padding: 0 24px 16px;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.2.0",
+	"version": "14.2.1-next.1f6eadc42.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,36 +36,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.7.0",
-		"@wordpress/api-fetch": "^7.7.0",
-		"@wordpress/blob": "^4.7.0",
-		"@wordpress/block-serialization-default-parser": "^5.7.0",
-		"@wordpress/blocks": "^13.7.0",
-		"@wordpress/commands": "^1.7.0",
-		"@wordpress/components": "^28.7.0",
-		"@wordpress/compose": "^7.7.0",
-		"@wordpress/data": "^10.7.0",
-		"@wordpress/date": "^5.7.0",
-		"@wordpress/deprecated": "^4.7.0",
-		"@wordpress/dom": "^4.7.0",
-		"@wordpress/element": "^6.7.0",
-		"@wordpress/escape-html": "^3.7.0",
-		"@wordpress/hooks": "^4.7.0",
-		"@wordpress/html-entities": "^4.7.0",
-		"@wordpress/i18n": "^5.7.0",
-		"@wordpress/icons": "^10.7.0",
-		"@wordpress/is-shallow-equal": "^5.7.0",
-		"@wordpress/keyboard-shortcuts": "^5.7.0",
-		"@wordpress/keycodes": "^4.7.0",
-		"@wordpress/notices": "^5.7.0",
-		"@wordpress/preferences": "^4.7.0",
-		"@wordpress/private-apis": "^1.7.0",
-		"@wordpress/rich-text": "^7.7.0",
-		"@wordpress/style-engine": "^2.7.0",
-		"@wordpress/token-list": "^3.7.0",
-		"@wordpress/url": "^4.7.0",
-		"@wordpress/warning": "^3.7.0",
-		"@wordpress/wordcount": "^4.7.0",
+		"@wordpress/a11y": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/api-fetch": "^7.7.1-next.1f6eadc42.0",
+		"@wordpress/blob": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/block-serialization-default-parser": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/blocks": "^13.7.1-next.1f6eadc42.0",
+		"@wordpress/commands": "^1.7.1-next.1f6eadc42.0",
+		"@wordpress/components": "^28.8.1-next.1f6eadc42.0",
+		"@wordpress/compose": "^7.8.1-next.1f6eadc42.0",
+		"@wordpress/data": "^10.7.1-next.1f6eadc42.0",
+		"@wordpress/date": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/deprecated": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/dom": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/element": "^6.7.1-next.1f6eadc42.0",
+		"@wordpress/escape-html": "^3.7.1-next.1f6eadc42.0",
+		"@wordpress/hooks": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/html-entities": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/i18n": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/icons": "^10.7.1-next.1f6eadc42.0",
+		"@wordpress/is-shallow-equal": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/keyboard-shortcuts": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/keycodes": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/notices": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/preferences": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/private-apis": "^1.7.1-next.1f6eadc42.0",
+		"@wordpress/rich-text": "^7.7.1-next.1f6eadc42.0",
+		"@wordpress/style-engine": "^2.7.1-next.1f6eadc42.0",
+		"@wordpress/token-list": "^3.7.1-next.1f6eadc42.0",
+		"@wordpress/url": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/warning": "^3.7.1-next.1f6eadc42.0",
+		"@wordpress/wordcount": "^4.7.1-next.1f6eadc42.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
+	"gitHead": "960a22b909c9fdbc90e7435b7ba8947b9218837a"
 }

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

@@ -66,10 +66,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			>
 				{ hasSelection && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
 						onClick={ () => {
 							// Find the block editor wrapper for the selected block
 							const blockEditor = blockRef.current?.closest(
@@ -96,10 +94,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }
 					>
 						<BlockTitle

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

@@ -22,40 +22,11 @@
 	}
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-	height: $button-size-small;
-	line-height: $button-size-small;
-	padding: 0;
-	position: relative;
-
-	&:hover:not(:disabled) {
-		text-decoration: underline;
-		box-shadow: none;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&:focus::before {
-		content: "";
-		display: block;
-		position: absolute;
-		border-radius: $radius-small;
-		top: $border-width;
-		right: $border-width;
-		bottom: $border-width;
-		left: $border-width;
-
-		@include button-style__focus();
-	}
-}
-
 .block-editor-block-breadcrumb__current {
 	cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
+.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
 .block-editor-block-breadcrumb__current {
 	color: $gray-900;
 	padding: 0 $grid-unit-10;

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

@@ -31,8 +31,7 @@ export default function BlockView( {
 
 			<div className="block-editor-block-compare__action">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					tabIndex="0"
 					onClick={ action }

package/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -30,7 +30,7 @@ exports[`BlockView should match snapshot 1`] = `
       class="block-editor-block-compare__action"
     >
       <button
-        class="components-button is-secondary"
+        class="components-button is-next-40px-default-size is-secondary"
         tabindex="0"
         type="button"
       >

package/src/components/block-edit/multiple-usage-warning.js

@@ -24,8 +24,7 @@ export function MultipleUsageWarning( {
 		<Warning
 			actions={ [
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					key="find-original"
 					variant="secondary"
 					onClick={ () => selectBlock( originalBlockClientId ) }
@@ -33,8 +32,7 @@ export function MultipleUsageWarning( {
 					{ __( 'Find original' ) }
 				</Button>,
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					key="remove"
 					variant="secondary"
 					onClick={ () => onReplace( [] ) }

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

@@ -72,7 +72,6 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				{ ...blockInformation }
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
-			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<BlockInfo.Slot />
 			{ hasBlockStyles && (
 				<BlockStylesPanel clientId={ topLevelLockedBlock } />

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

@@ -11,10 +11,8 @@
 	}
 
 	.components-base-control {
-		margin-bottom: #{ $grid-unit-30 };
-
-		&:last-child {
-			margin-bottom: $grid-unit-10;
+		&:where(:not(:last-child)) {
+			margin-bottom: $grid-unit-20;
 		}
 	}
 

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

@@ -101,8 +101,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 			<Warning
 				actions={ [
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						key="recover"
 						onClick={ convert.toRecoveredBlock }
 						variant="primary"

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

@@ -453,3 +453,24 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		margin-bottom: auto;
 	}
 }
+
+.block-editor-block-list__zoom-out-separator {
+	/* same color as the iframe's background */
+	background: $gray-300;
+	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
+	margin-left: -1px;
+	margin-right: -1px;
+	transition: background-color 0.3s ease;
+
+	&.is-dragged-over {
+		background: $gray-400;
+	}
+}
+
+// In Post Editor allow the separator to occupy the full width by ignoring (cancelling out) the global padding.
+.has-global-padding > .block-editor-block-list__zoom-out-separator,
+.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
+	max-width: none;
+	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
+	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
+}