@wordpress/block-editor 14.1.0 → 14.2.1-next.1f6eadc42.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,
@@ -263,7 +260,6 @@ iframe[name=editor-canvas] {
 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
-  border-radius: 2px;
   color: #fff;
   padding: 0;
   min-width: 24px;
@@ -524,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;
@@ -851,12 +821,12 @@ iframe[name=editor-canvas] {
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
   outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 .block-editor-block-patterns-list__item:hover:not(:focus) .block-editor-block-preview__container::after {
   outline-color: rgba(0, 0, 0, 0.3);
@@ -1079,33 +1049,11 @@ iframe[name=editor-canvas] {
   min-width: 24px !important;
 }
 
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled {
-  opacity: 1;
-}
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled,
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true] {
   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-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true]:hover {
+  color: #1e1e1e;
 }
 
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
@@ -1128,7 +1076,7 @@ iframe[name=editor-canvas] {
   width: 300px;
   border: 1px solid #1e1e1e;
   background: #fff;
-  border-radius: 2px;
+  border-radius: 4px;
   outline: none;
   box-shadow: none;
   overflow: auto;
@@ -1275,7 +1223,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
-  border-radius: 2px;
+  border-radius: 4px;
   border: 1px solid #ddd;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content {
@@ -1637,7 +1585,6 @@ iframe[name=editor-canvas] {
 
 .block-editor-global-styles-background-panel__image-tools-panel-item {
   border: 1px solid #ddd;
-  border-radius: 2px;
   grid-column: 1/-1;
   position: relative;
 }
@@ -2004,7 +1951,6 @@ iframe[name=editor-canvas] {
   cursor: pointer;
   background: transparent;
   word-break: break-word;
-  border-radius: 2px;
   transition: all 0.05s ease-in-out;
   position: relative;
   height: auto;
@@ -2050,7 +1996,6 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-types-list__item-icon {
   padding: 12px 20px;
-  border-radius: 2px;
   color: #1e1e1e;
   transition: all 0.05s ease-in-out;
 }
@@ -2187,7 +2132,6 @@ iframe[name=editor-canvas] {
   line-height: normal;
   display: block;
   border: 1px solid #949494;
-  border-radius: 2px;
   height: 40px;
   margin: 0;
   padding: 8px 40px 8px 16px;
@@ -2357,7 +2301,6 @@ iframe[name=editor-canvas] {
   max-height: 32px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  border-radius: 2px;
   line-height: 1.1;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus {
@@ -2686,7 +2629,6 @@ iframe[name=editor-canvas] {
   height: 32px;
   padding: 6px 4px 6px 0;
   text-align: left;
-  border-radius: 2px;
   position: relative;
   white-space: nowrap;
 }
@@ -2731,7 +2673,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
   opacity: 1;
-  animation: edit-post__fade-in-animation 0.2s ease-out 0s;
+  animation: edit-post__fade-in-animation 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2847,7 +2789,7 @@ iframe[name=editor-canvas] {
   right: 0;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: 1px;
   padding: 2px 6px;
   max-width: 100%;
   box-sizing: border-box;
@@ -2866,7 +2808,7 @@ iframe[name=editor-canvas] {
   background-size: cover;
   width: 18px;
   height: 18px;
-  border-radius: 2px;
+  border-radius: 1px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
   box-shadow: 0 0 0 2px #fff;
@@ -2994,7 +2936,6 @@ iframe[name=editor-canvas] {
   background-color: #1e1e1e;
   color: #fff;
   margin: 8px 0 0 24px;
-  border-radius: 2px;
   height: 24px;
   min-width: 24px;
   padding: 0;
@@ -3540,15 +3481,10 @@ iframe[name=editor-canvas] {
 div.block-editor-bindings__panel {
   grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
-div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
+div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
   color: inherit;
 }
 
-.block-editor-bindings__popover .block-editor-bindings__source-label {
-  grid-column: 2;
-  margin: 8px 0;
-}
-
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3586,32 +3522,14 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   grid-column: span 1;
 }
 
-.block-editor-hooks__layout-controls {
-  display: flex;
-  margin-bottom: 8px;
-}
-.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit {
-  display: flex;
-  margin-right: 24px;
-}
-.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg {
-  margin: auto 0 4px 8px;
-}
-
-.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,
@@ -3623,10 +3541,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   margin-bottom: 8px;
 }
 
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-  margin-bottom: 16px;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3698,9 +3612,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 }
 .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;
@@ -3904,11 +3820,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
   border-top: 1px solid #ccc;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
   border-bottom: 1px solid #ccc;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 4px 4px;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
   border: 1px solid #1e1e1e;
@@ -4010,15 +3926,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   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;
@@ -4389,7 +4296,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 }
 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
   background: #fff;
-  border-radius: 2px;
   display: none;
 }
 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button.is-opened, .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:focus {
@@ -4414,7 +4320,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   max-width: 100%;
   outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
-  border-radius: 2px;
 }
 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
   display: flex;
@@ -4501,6 +4406,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   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;
@@ -4526,6 +4435,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
   flex: 1;
+  margin-bottom: 0;
 }
 .spacing-sizes-control .components-range-control__mark {
   transform: translateX(-50%);

package/build-types/utils/dom.d.ts

@@ -27,4 +27,29 @@ export function isInsideRootBlock(blockElement: Element, element: Element): bool
  *                            a block.
  */
 export function getBlockClientId(node: Node | null): string | undefined;
+/**
+ * Calculates the union of two rectangles.
+ *
+ * @param {DOMRect} rect1 First rectangle.
+ * @param {DOMRect} rect2 Second rectangle.
+ * @return {DOMRect} Union of the two rectangles.
+ */
+export function rectUnion(rect1: DOMRect, rect2: DOMRect): DOMRect;
+/**
+ * Returns the rect of the element including all visible nested elements.
+ *
+ * Visible nested elements, including elements that overflow the parent, are
+ * taken into account.
+ *
+ * This function is useful for calculating the visible area of a block that
+ * contains nested elements that overflow the block, e.g. the Navigation block,
+ * which can contain overflowing Submenu blocks.
+ *
+ * The returned rect represents the full extent of the element and its visible
+ * children, which may extend beyond the viewport.
+ *
+ * @param {Element} element Element.
+ * @return {DOMRect} Bounding client rect of the element and its visible children.
+ */
+export function getVisibleElementBounds(element: Element): DOMRect;
 //# sourceMappingURL=dom.d.ts.map

package/build-types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AA8CD;;;;;;;;;;;;;;;GAeG;AACH,iDAHW,OAAO,GACN,OAAO,CAyClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.1.0",
+	"version": "14.2.1-next.1f6eadc42.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.6.0",
-		"@wordpress/api-fetch": "^7.6.0",
-		"@wordpress/blob": "^4.6.0",
-		"@wordpress/blocks": "^13.6.0",
-		"@wordpress/commands": "^1.6.0",
-		"@wordpress/components": "^28.6.0",
-		"@wordpress/compose": "^7.6.0",
-		"@wordpress/data": "^10.6.0",
-		"@wordpress/date": "^5.6.0",
-		"@wordpress/deprecated": "^4.6.0",
-		"@wordpress/dom": "^4.6.0",
-		"@wordpress/element": "^6.6.0",
-		"@wordpress/escape-html": "^3.6.0",
-		"@wordpress/hooks": "^4.6.0",
-		"@wordpress/html-entities": "^4.6.0",
-		"@wordpress/i18n": "^5.6.0",
-		"@wordpress/icons": "^10.6.0",
-		"@wordpress/is-shallow-equal": "^5.6.0",
-		"@wordpress/keyboard-shortcuts": "^5.6.0",
-		"@wordpress/keycodes": "^4.6.0",
-		"@wordpress/notices": "^5.6.0",
-		"@wordpress/preferences": "^4.6.0",
-		"@wordpress/private-apis": "^1.6.0",
-		"@wordpress/rich-text": "^7.6.0",
-		"@wordpress/style-engine": "^2.6.0",
-		"@wordpress/token-list": "^3.6.0",
-		"@wordpress/url": "^4.6.0",
-		"@wordpress/warning": "^3.6.0",
-		"@wordpress/wordcount": "^4.6.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",
@@ -72,8 +73,9 @@
 		"diff": "^4.0.2",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
+		"parsel-js": "^1.1.2",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.51.0",
+		"postcss-prefix-selector": "^1.16.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
@@ -86,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab9564947967bb3f00343130954b9efacba6cdd7"
+	"gitHead": "960a22b909c9fdbc90e7435b7ba8947b9218837a"
 }

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

@@ -6,7 +6,7 @@ import { DOWN } from '@wordpress/keycodes';
 import {
 	ToolbarButton,
 	Dropdown,
-	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
+	AlignmentMatrixControl,
 } from '@wordpress/components';
 
 const noop = () => {};

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

@@ -66,8 +66,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			>
 				{ hasSelection && (
 					<Button
+						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(
@@ -94,8 +94,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>
 					<Button
+						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-block-ui;
-		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-canvas/index.js

@@ -16,6 +16,13 @@ import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
 
+// EditorStyles is a memoized component, so avoid passing a new
+// object reference on each render.
+const EDITOR_STYLE_TRANSFORM_OPTIONS = {
+	// Don't transform selectors that already specify `.editor-styles-wrapper`.
+	ignoredSelectors: [ /\.editor-styles-wrapper/gi ],
+};
+
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
 	height = '300px',
@@ -38,7 +45,8 @@ export function ExperimentalBlockCanvas( {
 			>
 				<EditorStyles
 					styles={ styles }
-					scope=".editor-styles-wrapper"
+					scope=":where(.editor-styles-wrapper)"
+					transformOptions={ EDITOR_STYLE_TRANSFORM_OPTIONS }
 				/>
 				<WritingFlow
 					ref={ contentRef }

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

@@ -30,7 +30,12 @@ export default function BlockView( {
 			</div>
 
 			<div className="block-editor-block-compare__action">
-				<Button variant="secondary" tabIndex="0" onClick={ action }>
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					tabIndex="0"
+					onClick={ action }
+				>
 					{ actionText }
 				</Button>
 			</div>

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-draggable/content.scss

@@ -3,7 +3,7 @@
 .block-editor-block-list__layout .is-dragging {
 	background-color: currentColor !important;
 	opacity: 0.05 !important;
-	border-radius: $radius-block-ui !important;
+	border-radius: $radius-small !important;
 
 	// Disabling pointer events during the drag event is necessary,
 	// lest the block might affect your drag operation.

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

@@ -62,7 +62,7 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
 
@@ -75,7 +75,7 @@ const BlockDraggable = ( {
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
 		return () => {
-			if ( isDragging.current ) {
+			if ( isDraggingRef.current ) {
 				stopDraggingBlocks();
 			}
 		};
@@ -193,7 +193,7 @@ const BlockDraggable = ( {
 				// frame to enable dragging.
 				window.requestAnimationFrame( () => {
 					startDraggingBlocks( clientIds );
-					isDragging.current = true;
+					isDraggingRef.current = true;
 
 					startScrolling( event );
 
@@ -205,7 +205,7 @@ const BlockDraggable = ( {
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {
 				stopDraggingBlocks();
-				isDragging.current = false;
+				isDraggingRef.current = false;
 
 				stopScrolling();
 

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

@@ -7,7 +7,7 @@
 
 .block-editor-block-draggable-chip {
 	background-color: $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	box-shadow: 0 6px 8px rgba($black, 0.3);
 	color: $white;
 	cursor: grabbing;