npm - @wordpress/block-editor - Versions diffs - 12.1.0 → 12.3.0 - Mend

@wordpress/block-editor 12.1.0 → 12.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1853) hide show

package/build-style/content-rtl.css CHANGED Viewed

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -240,22 +240,21 @@
   padding: 0;
 }
-.is-content-locked .block-editor-block-list__block {
-  pointer-events: none;
-}
-.is-content-locked .is-content-block {
-  pointer-events: initial;
-}
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
+  overflow-wrap: break-word;
+  pointer-events: auto;
   -webkit-user-select: text;
           user-select: text;
-  overflow-wrap: break-word;
   /**
    * Notices
    */
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-editing-disabled {
+  pointer-events: none;
+  -webkit-user-select: none;
+          user-select: none;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -670,6 +669,23 @@
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
+  border: none;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
+  visibility: visible;
+}
+.block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
+  background-color: var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.65);
+  transition: background-color 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
+    transition: none;
+  }
+}
 /**
  * Default block appender.
@@ -928,7 +944,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -943,7 +959,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -958,7 +974,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -973,7 +989,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -988,7 +1004,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1003,7 +1019,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1018,7 +1034,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1033,7 +1049,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/content.css CHANGED Viewed

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -240,22 +240,21 @@
   padding: 0;
 }
-.is-content-locked .block-editor-block-list__block {
-  pointer-events: none;
-}
-.is-content-locked .is-content-block {
-  pointer-events: initial;
-}
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
+  overflow-wrap: break-word;
+  pointer-events: auto;
   -webkit-user-select: text;
           user-select: text;
-  overflow-wrap: break-word;
   /**
    * Notices
    */
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-editing-disabled {
+  pointer-events: none;
+  -webkit-user-select: none;
+          user-select: none;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -670,6 +669,23 @@
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
+  border: none;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
+  visibility: visible;
+}
+.block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
+  background-color: var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.65);
+  transition: background-color 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
+    transition: none;
+  }
+}
 /**
  * Default block appender.
@@ -928,7 +944,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -943,7 +959,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -958,7 +974,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -973,7 +989,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -988,7 +1004,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1003,7 +1019,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1018,7 +1034,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1033,7 +1049,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/default-editor-styles-rtl.css CHANGED Viewed

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/default-editor-styles.css CHANGED Viewed

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/style-rtl.css CHANGED Viewed

@@ -98,7 +98,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -832,6 +832,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   }
 }
+.block-editor-block-mover__drag-handle {
+  cursor: grab;
+}
 @media (min-width: 600px) {
   .block-editor-block-mover__drag-handle {
     width: 24px;
@@ -1166,17 +1169,17 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   }
 }
 .block-editor-block-switcher__preview__popover .components-popover__content {
-  box-shadow: none;
+  width: 300px;
   border: 1px solid #1e1e1e;
   background: #fff;
   border-radius: 2px;
   outline: none;
+  box-shadow: none;
 }
 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
-  width: 300px;
-  height: auto;
   max-height: calc(500px - 32px);
-  margin: 16px;
+  margin: 16px 0;
+  padding: 0 16px;
   overflow: hidden;
 }
@@ -1644,6 +1647,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
   font-family: Menlo, Consolas, monaco, monospace;
+  direction: ltr;
 }
 .block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
@@ -1971,12 +1975,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   top: auto;
 }
-.block-editor-link-control__search-results-label {
-  padding: 16px 32px 0;
-  display: block;
-  font-weight: 600;
-}
 .block-editor-link-control__search-results {
   margin: 0;
   padding: 8px 16px 8px;
@@ -2279,6 +2277,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__setting {
   margin-bottom: 16px;
 }
+.block-editor-link-control__setting input {
+  margin-right: 0;
+}
 .block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
@@ -2470,32 +2471,15 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 36px;
   vertical-align: middle;
 }
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
-  will-change: opacity;
   opacity: 0;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
+.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:focus-within > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
+.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
   opacity: 1;
-  animation: edit-post__fade-in-animation 0.2s ease-out 0s;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon,
@@ -2590,11 +2574,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   line-height: 0;
 }
-.block-editor-list-view-block-select-button__description,
-.block-editor-list-view-appender__description {
-  display: none;
-}
 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
@@ -4199,151 +4178,61 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   }
 }
-.tools-panel-item-spacing {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  grid-template-rows: 24px auto;
-}
-.component-spacing-sizes-control {
-  box-sizing: border-box;
-  padding-bottom: 12px;
-  width: 100%;
-  display: contents;
-}
-.component-spacing-sizes-control legend {
-  padding: 0;
-  grid-column: 1/1;
-  grid-row: 1/1;
-  align-self: center;
-}
-.component-spacing-sizes-control .components-base-control__label {
-  margin-bottom: 8px;
-  height: 16px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
-  grid-column: 1/1;
-  justify-content: right;
-  height: 16px;
-  margin-top: 16px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  grid-column: 1/1;
-  justify-self: right;
-  margin-bottom: 0;
-}
-.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control,
-.component-spacing-sizes-control.is-unlinked .components-spacing-sizes-control__custom-value-input {
-  margin-top: 8px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
-  color: #757575;
+.spacing-sizes-control .spacing-sizes-control__custom-value-input,
+.spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
-  grid-column: 2/2;
-  justify-self: right;
-  grid-row: 1/1;
-  align-self: center;
-  margin-right: 4px;
-  margin-bottom: 8px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
-  grid-column: 2/2;
-  grid-row: 1/1;
-  justify-self: end;
-  margin-top: -4px;
-}
-.component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
-  margin-left: 4px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
-  grid-column: 3/3;
-  justify-self: end;
-  margin-top: 12px;
-}
-.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
-  grid-column: 3/3;
-  grid-row: 1/1;
-  justify-self: end;
-  line-height: 0;
-  margin-top: -4px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
-  grid-column: span 2;
-  margin-right: 16px;
-}
-.component-spacing-sizes-control .components-base-control.components-spacing-sizes-control__custom-value-input {
-  width: 124px;
-  grid-column: 1;
-  margin-bottom: 0;
-}
-.component-spacing-sizes-control .components-base-control.components-range-control {
+.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;
 }
-.component-spacing-sizes-control .components-base-control.components-range-control > .components-base-control__field {
+.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;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
-  grid-column: span 3;
-}
-.component-spacing-sizes-control .components-range-control__mark {
+.spacing-sizes-control .components-range-control__mark {
   height: 4px;
   width: 3px;
   background-color: #fff;
   z-index: 1;
 }
-.component-spacing-sizes-control .components-range-control__marks {
+.spacing-sizes-control .components-range-control__marks {
   margin-top: 17px;
 }
-.component-spacing-sizes-control .components-range-control__marks :first-child {
+.spacing-sizes-control .components-range-control__marks :first-child {
   display: none;
 }
-.component-spacing-sizes-control .components-range-control__thumb-wrapper {
+.spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
-  grid-column: span 3;
-  margin-top: 8px;
-}
-.offcanvas-editor-appender .block-editor-inserter__toggle {
-  background-color: #1e1e1e;
-  color: #fff;
-  margin: 8px 24px 0 0;
-  border-radius: 2px;
-  height: 24px;
-  min-width: 24px;
-  padding: 0;
-}
-.offcanvas-editor-appender .block-editor-inserter__toggle:hover, .offcanvas-editor-appender .block-editor-inserter__toggle:focus {
-  background: var(--wp-admin-theme-color);
-  color: #fff;
+.spacing-sizes-control__wrapper + .spacing-sizes-control__wrapper {
+  margin-top: 8px;
 }
-.offcanvas-editor-appender__description {
-  display: none;
+.spacing-sizes-control__header {
+  height: 16px;
+  margin-bottom: 8px;
 }
-.offcanvas-editor-list-view-tree-wrapper {
-  max-width: 100%;
-  overflow-x: auto;
+.spacing-sizes-control__dropdown {
+  height: 24px;
 }
-.offcanvas-editor-list-view-leaf {
-  display: block;
-  max-width: 248px;
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+  flex: 1;
 }
-.offcanvas-editor-list-view-is-empty {
-  margin-right: 16px;
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+  flex: 0 0 auto;
 }
 body.admin-color-light {
@@ -4355,7 +4244,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4370,7 +4259,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4385,7 +4274,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4400,7 +4289,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4415,7 +4304,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4430,7 +4319,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4445,7 +4334,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4460,7 +4349,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }