@wordpress/block-editor 12.4.0 → 12.5.0

package/build-style/style.css

@@ -160,7 +160,8 @@
   margin-bottom: 8px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
-.block-editor-block-inspector .components-query-controls .components-base-control {
+.block-editor-block-inspector .components-query-controls .components-base-control,
+.block-editor-block-inspector .components-range-control .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -328,44 +329,77 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-right-color: #e0e0e0;
 }
+.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
+  display: none;
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 64px;
+    margin-left: 180px;
     position: fixed;
-    top: 40px;
+    top: 39px;
     min-height: initial;
     border-bottom: none;
     display: flex;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-left: 216px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 120px;
-    top: 8px;
+    margin-left: 240px;
+    top: 7px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-left: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+    flex-grow: initial;
+    width: initial;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-right: 0;
+    background-color: #ddd;
+    position: relative;
+    left: -2px;
+    top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
     border: none;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
     margin-top: 12px;
-    margin-bottom: 12px;
+    margin-right: 8px;
     background-color: #ddd;
-    position: absolute;
-    left: 44px;
+    position: relative;
+    left: 0;
     top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
     border: none;
   }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    width: 256px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
     content: "";
     width: 1px;
@@ -373,20 +407,15 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-bottom: 12px;
     background-color: #ddd;
     position: relative;
-    left: -12px;
+    left: -8px;
     height: 24px;
+    top: -1px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 64px;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-left: 384px;
+    margin-left: 80px;
   }
   .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 128px;
-  }
-  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-left: 448px;
+    margin-left: 144px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
     left: 0;
@@ -444,7 +473,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: initial;
+    width: calc(100% - 240px - 256px);
   }
 }
 
@@ -765,6 +794,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   padding: 0 13px;
   -webkit-user-select: none;
           user-select: none;
+  width: max-content;
 }
 .block-editor-block-draggable-chip svg {
   fill: currentColor;
@@ -1870,6 +1900,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__search-input-wrapper {
+  margin-bottom: 8px;
   position: relative;
 }
 
@@ -1884,15 +1915,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__field {
   margin: 16px;
 }
-.block-editor-link-control__field > .components-base-control__field {
-  display: flex;
-  align-items: center;
-}
-.block-editor-link-control__field .components-base-control__label {
-  margin-right: 16px;
-  margin-bottom: 0;
-  min-width: 29px;
-}
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1904,13 +1926,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  width: calc(100% - 32px);
   display: block;
-  padding: 11px 16px;
+  border: 1px solid #949494;
+  border-radius: 2px;
+  height: 40px;
   margin: 0;
+  padding: 8px 16px;
   position: relative;
-  border: 1px solid #ddd;
-  border-radius: 2px;
+  width: 100%;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
@@ -1950,12 +1973,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
+  padding: 8px;
   order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
   position: relative;
-  margin-top: -15px;
 }
 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
   content: "";
@@ -1978,8 +2001,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__search-results {
-  margin: 0;
-  padding: 8px 16px 8px;
+  margin-top: -16px;
+  padding: 8px;
   max-height: 200px;
   overflow-y: auto;
 }
@@ -1987,35 +2010,23 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   opacity: 0.2;
 }
 
-.block-editor-link-control__search-item {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  font-size: 13px;
-  cursor: pointer;
-  background: #fff;
-  width: 100%;
-  border: none;
-  text-align: left;
-  padding: 12px 16px;
-  border-radius: 2px;
+.block-editor-link-control__search-item.components-button.components-menu-item__button {
   height: auto;
+  text-align: left;
 }
-.block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
-  background-color: #f0f0f0;
-}
-.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type {
-  background: #fff;
+.block-editor-link-control__search-item .components-menu-item__item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
 }
-.block-editor-link-control__search-item:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+.block-editor-link-control__search-item .components-menu-item__shortcut {
+  color: #757575;
+  text-transform: capitalize;
+  white-space: nowrap;
 }
-.block-editor-link-control__search-item.is-selected {
+.block-editor-link-control__search-item[aria-selected] {
   background: #f0f0f0;
 }
-.block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type {
-  background: #fff;
-}
 .block-editor-link-control__search-item.is-current {
   flex-direction: column;
   background: transparent;
@@ -2044,7 +2055,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
-  top: 0.2em;
   margin-right: 8px;
   max-height: 24px;
   flex-shrink: 0;
@@ -2060,17 +2070,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 32px;
   max-height: 32px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
-  position: absolute;
-  right: 0;
-  margin-top: 0;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
   margin-bottom: 0.2em;
@@ -2088,25 +2087,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title svg {
   display: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info {
-  display: block;
-  color: #757575;
-  font-size: 0.9em;
-  line-height: 1.3;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-error-notice {
-  font-style: italic;
-  font-size: 1.1em;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-type {
-  display: block;
-  padding: 3px 6px;
-  margin-left: auto;
-  font-size: 0.9em;
-  background-color: #f0f0f0;
-  border-radius: 2px;
-  white-space: nowrap;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-description {
   padding-top: 12px;
   margin: 0;
@@ -2221,10 +2201,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   top: 0;
 }
 
-.block-editor-link-control__search-results div[role=menu] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
-  padding: 10px;
-}
-
 .block-editor-link-control__drawer {
   display: flex;
   order: 30;
@@ -2236,48 +2212,18 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   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;
-  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 {
   padding-left: 16px;
   padding-right: 16px;
 }
 
-.block-editor-link-control__settings {
-  flex: 1;
-  margin: 0;
-}
-.is-alternate .block-editor-link-control__settings {
-  border-top: 1px solid #1e1e1e;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 16px;
+  flex: 1;
+  padding: 8px 0 8px 24px;
 }
 .block-editor-link-control__setting input {
   margin-left: 0;
@@ -2286,6 +2232,37 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-bottom: 0;
 }
 
+.block-editor-link-control__tools {
+  padding: 8px 8px 0 8px;
+  margin-top: -16px;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
+  padding-left: 0;
+  gap: 0;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+  visibility: visible;
+  transition: transform 0.1s ease;
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+  visibility: visible;
+  transform: rotate(0deg);
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
   display: block;
 }
@@ -2659,8 +2636,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 6px;
-  border: 1px solid #fff;
+  height: 4px;
   border-radius: 4px;
 }
 
@@ -4120,6 +4096,32 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: 0;
 }
 
+.block-editor-inserter__hint {
+  margin: 16px 16px 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+  align-items: top;
+  background: #f0f0f0;
+  border-radius: 2px;
+  color: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+  margin: 12px 0 12px 12px;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+  margin: 4px 4px 4px 0;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+  margin: 0;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.4.0",
+	"version": "12.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,36 +32,37 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.36.0",
-		"@wordpress/api-fetch": "^6.33.0",
-		"@wordpress/blob": "^3.36.0",
-		"@wordpress/blocks": "^12.13.0",
-		"@wordpress/components": "^25.2.0",
-		"@wordpress/compose": "^6.13.0",
-		"@wordpress/data": "^9.6.0",
-		"@wordpress/date": "^4.36.0",
-		"@wordpress/deprecated": "^3.36.0",
-		"@wordpress/dom": "^3.36.0",
-		"@wordpress/element": "^5.13.0",
-		"@wordpress/escape-html": "^2.36.0",
-		"@wordpress/hooks": "^3.36.0",
-		"@wordpress/html-entities": "^3.36.0",
-		"@wordpress/i18n": "^4.36.0",
-		"@wordpress/icons": "^9.27.0",
-		"@wordpress/is-shallow-equal": "^4.36.0",
-		"@wordpress/keyboard-shortcuts": "^4.13.0",
-		"@wordpress/keycodes": "^3.36.0",
-		"@wordpress/notices": "^4.4.0",
-		"@wordpress/preferences": "^3.13.0",
-		"@wordpress/private-apis": "^0.18.0",
-		"@wordpress/rich-text": "^6.13.0",
-		"@wordpress/shortcode": "^3.36.0",
-		"@wordpress/style-engine": "^1.19.0",
-		"@wordpress/token-list": "^2.36.0",
-		"@wordpress/url": "^3.37.0",
-		"@wordpress/warning": "^2.36.0",
-		"@wordpress/wordcount": "^3.36.0",
+		"@wordpress/a11y": "^3.37.0",
+		"@wordpress/api-fetch": "^6.34.0",
+		"@wordpress/blob": "^3.37.0",
+		"@wordpress/blocks": "^12.14.0",
+		"@wordpress/components": "^25.3.0",
+		"@wordpress/compose": "^6.14.0",
+		"@wordpress/data": "^9.7.0",
+		"@wordpress/date": "^4.37.0",
+		"@wordpress/deprecated": "^3.37.0",
+		"@wordpress/dom": "^3.37.0",
+		"@wordpress/element": "^5.14.0",
+		"@wordpress/escape-html": "^2.37.0",
+		"@wordpress/hooks": "^3.37.0",
+		"@wordpress/html-entities": "^3.37.0",
+		"@wordpress/i18n": "^4.37.0",
+		"@wordpress/icons": "^9.28.0",
+		"@wordpress/is-shallow-equal": "^4.37.0",
+		"@wordpress/keyboard-shortcuts": "^4.14.0",
+		"@wordpress/keycodes": "^3.37.0",
+		"@wordpress/notices": "^4.5.0",
+		"@wordpress/preferences": "^3.14.0",
+		"@wordpress/private-apis": "^0.19.0",
+		"@wordpress/rich-text": "^6.14.0",
+		"@wordpress/shortcode": "^3.37.0",
+		"@wordpress/style-engine": "^1.20.0",
+		"@wordpress/token-list": "^2.37.0",
+		"@wordpress/url": "^3.38.0",
+		"@wordpress/warning": "^2.37.0",
+		"@wordpress/wordcount": "^3.37.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -84,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d47d8069e1aae05d4a16dc287902eb90edcbff50"
+	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -25,7 +25,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -48,7 +48,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -80,7 +80,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+          d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
         />
       </svg>
     </button>
@@ -113,7 +113,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -136,7 +136,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -159,7 +159,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
+            d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
           />
         </svg>
       </button>

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

@@ -23,7 +23,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
         />
       </svg>
     </button>
@@ -55,7 +55,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>
@@ -77,7 +77,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
           />
         </svg>
       </button>
@@ -99,7 +99,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
           />
         </svg>
       </button>
@@ -121,7 +121,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
+            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>

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

@@ -15,6 +15,7 @@
 	height: $block-toolbar-height;
 	padding: 0 ( $grid-unit-15 + $border-width );
 	user-select: none;
+	width: max-content;
 
 	svg {
 		fill: currentColor;

package/src/components/block-heading-level-dropdown/heading-level-icon.js

@@ -10,6 +10,7 @@ import {
 	headingLevel6,
 	paragraph,
 } from '@wordpress/icons';
+import { Icon } from '@wordpress/components';
 
 /** @typedef {import('@wordpress/element').WPComponent} WPComponent */
 
@@ -39,5 +40,9 @@ const LEVEL_TO_PATH = {
  * @return {?WPComponent} The icon.
  */
 export default function HeadingLevelIcon( { level } ) {
-	return LEVEL_TO_PATH[ level ] ?? null;
+	if ( LEVEL_TO_PATH[ level ] ) {
+		return <Icon icon={ LEVEL_TO_PATH[ level ] } />;
+	}
+
+	return null;
 }

package/src/components/block-heading-level-dropdown/index.native.js

@@ -30,7 +30,11 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
  *
  * @return {WPComponent} The toolbar.
  */
-export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
+export default function HeadingLevelDropdown( {
+	options = HEADING_LEVELS,
+	value,
+	onChange,
+} ) {
 	const createLevelControl = (
 		targetLevel,
 		currentLevel,
@@ -53,9 +57,9 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 
 	return (
 		<DropdownMenu
-			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-			controls={ HEADING_LEVELS.map( ( index ) =>
-				createLevelControl( index, selectedLevel, onChange )
+			icon={ <HeadingLevelIcon level={ value } /> }
+			controls={ options.map( ( index ) =>
+				createLevelControl( index, value, onChange )
 			) }
 			label={ __( 'Change level' ) }
 		/>