@wordpress/block-editor 14.0.0 → 14.2.0

package/build-style/style.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -263,7 +263,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;
@@ -851,12 +850,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,11 +1078,10 @@ 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[aria-disabled=true] {
+  color: #1e1e1e;
 }
-.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]:hover {
   color: #1e1e1e;
 }
 
@@ -1128,7 +1126,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 +1273,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 {
@@ -1416,14 +1414,6 @@ iframe[name=editor-canvas] {
   flex: 1;
   margin-right: 12px;
 }
-.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: grid;
   gap: 16px;
@@ -1645,7 +1635,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;
 }
@@ -1667,6 +1656,16 @@ iframe[name=editor-canvas] {
 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
+  margin: 0;
+}
 
 .block-editor-global-styles-background-panel__image-preview-content,
 .block-editor-global-styles-background-panel__dropdown-toggle {
@@ -2002,7 +2001,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;
@@ -2048,7 +2046,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;
 }
@@ -2078,6 +2075,8 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }
 
 .show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
@@ -2183,7 +2182,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;
@@ -2353,7 +2351,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 {
@@ -2682,7 +2679,6 @@ iframe[name=editor-canvas] {
   height: 32px;
   padding: 6px 4px 6px 0;
   text-align: left;
-  border-radius: 2px;
   position: relative;
   white-space: nowrap;
 }
@@ -2727,7 +2723,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) {
@@ -2843,7 +2839,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;
@@ -2862,7 +2858,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;
@@ -2990,7 +2986,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;
@@ -3176,19 +3171,6 @@ iframe[name=editor-canvas] {
   content: attr(aria-label);
 }
 
-.block-editor-segmented-text-control {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.block-editor-segmented-text-control .block-editor-segmented-text-control__buttons {
-  padding: 4px 0;
-  display: flex;
-}
-.block-editor-segmented-text-control .components-button.has-icon {
-  margin-right: 4px;
-}
-
 .block-editor-skip-to-selected-block {
   position: absolute;
   top: -9999em;
@@ -3547,17 +3529,12 @@ iframe[name=editor-canvas] {
 }
 
 div.block-editor-bindings__panel {
-  grid-template-columns: auto;
+  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;
 }
@@ -3595,16 +3572,10 @@ 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 {
+.block-editor-hooks__layout-controls-units {
   display: flex;
-  margin-right: 24px;
-}
-.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg {
-  margin: auto 0 4px 8px;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
@@ -3913,11 +3884,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;
@@ -4398,7 +4369,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 {
@@ -4423,7 +4393,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;
@@ -4514,32 +4483,40 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
+.spacing-sizes-control .is-marked .components-range-control__track {
+  transition: width ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__track {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+  transition: left ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
-  height: 40px;
-  /* Vertically center the RangeControl until it has true 40px height. */
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-  flex: 1;
-}
-.spacing-sizes-control .spacing-sizes-control__range-control > .components-base-control__field,
-.spacing-sizes-control .spacing-sizes-control__custom-value-range > .components-base-control__field {
-  /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
+  margin-bottom: 0;
 }
 .spacing-sizes-control .components-range-control__mark {
+  transform: translateX(-50%);
   height: 4px;
-  width: 3px;
+  width: 2px;
   background-color: #fff;
   z-index: 1;
+  top: -4px;
 }
 .spacing-sizes-control .components-range-control__marks {
   margin-top: 17px;
 }
-.spacing-sizes-control .components-range-control__marks :first-child {
-  display: none;
-}
 .spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }

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.0.0",
+	"version": "14.2.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.5.0",
-		"@wordpress/api-fetch": "^7.5.0",
-		"@wordpress/blob": "^4.5.0",
-		"@wordpress/blocks": "^13.5.0",
-		"@wordpress/commands": "^1.5.0",
-		"@wordpress/components": "^28.5.0",
-		"@wordpress/compose": "^7.5.0",
-		"@wordpress/data": "^10.5.0",
-		"@wordpress/date": "^5.5.0",
-		"@wordpress/deprecated": "^4.5.0",
-		"@wordpress/dom": "^4.5.0",
-		"@wordpress/element": "^6.5.0",
-		"@wordpress/escape-html": "^3.5.0",
-		"@wordpress/hooks": "^4.5.0",
-		"@wordpress/html-entities": "^4.5.0",
-		"@wordpress/i18n": "^5.5.0",
-		"@wordpress/icons": "^10.5.0",
-		"@wordpress/is-shallow-equal": "^5.5.0",
-		"@wordpress/keyboard-shortcuts": "^5.5.0",
-		"@wordpress/keycodes": "^4.5.0",
-		"@wordpress/notices": "^5.5.0",
-		"@wordpress/preferences": "^4.5.0",
-		"@wordpress/private-apis": "^1.5.0",
-		"@wordpress/rich-text": "^7.5.0",
-		"@wordpress/style-engine": "^2.5.0",
-		"@wordpress/token-list": "^3.5.0",
-		"@wordpress/url": "^4.5.0",
-		"@wordpress/warning": "^3.5.0",
-		"@wordpress/wordcount": "^4.5.0",
+		"@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",
 		"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.41.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": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
+	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
 }

package/src/autocompleters/block.js

@@ -60,7 +60,8 @@ function createBlockCompleter() {
 				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
-				noop
+				noop,
+				true
 			);
 
 			const filteredItems = useMemo( () => {

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,6 +66,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			>
 				{ hasSelection && (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="block-editor-block-breadcrumb__button"
 						variant="tertiary"
 						onClick={ () => {
@@ -94,6 +96,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="block-editor-block-breadcrumb__button"
 						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }

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

@@ -41,7 +41,7 @@
 		content: "";
 		display: block;
 		position: absolute;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		top: $border-width;
 		right: $border-width;
 		bottom: $border-width;

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

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;