@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

package/build-style/style.css

@@ -1,57 +1,6 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Fonts & basic variables.
- */
 /**
  * Typography
  */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
- * Colors
- */
 /**
  * SCSS Variables.
  *
@@ -59,91 +8,9 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Typography
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
 /**
  * Colors
  */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
 /**
  * Fonts & basic variables.
  */
@@ -194,9 +61,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -223,10 +87,11 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
   --wp-bound-block-color: var(--wp-block-synced-color);
+  --wp-editor-canvas-background: #ddd;
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
-  --wp-admin-theme-color-darker-10: #006ba1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
@@ -258,6 +123,7 @@
   border: 1px solid #ddd;
   border-radius: 2px;
   grid-column: 1/-1;
+  position: relative;
 }
 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
   background-color: #f0f0f0;
@@ -319,6 +185,31 @@
   height: 100%;
   width: 100%;
   padding-left: 12px;
+  padding-right: 32px;
+}
+
+.block-editor-global-styles-background-panel__reset {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
+}
+@media not (prefers-reduced-motion) {
+  .block-editor-global-styles-background-panel__reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
+  border-radius: 2px;
+}
+.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-editor-global-styles-background-panel__reset {
+    opacity: 1;
+  }
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-title {
@@ -396,13 +287,15 @@ iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
   display: block;
-  background-color: #ddd;
 }
 @media not (prefers-reduced-motion) {
   iframe[name=editor-canvas] {
     transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
   }
 }
+iframe[name=editor-canvas] {
+  background-color: var(--wp-editor-canvas-background);
+}
 
 .block-editor-block-icon {
   display: flex;
@@ -507,15 +400,17 @@ iframe[name=editor-canvas] {
   display: none;
   position: absolute;
   will-change: transform;
-  justify-content: center;
-  top: calc(50% - 12px);
-  left: calc(50% - 12px);
 }
 @media (min-width: 480px) {
   .block-editor-block-list__insertion-point-inserter {
     display: flex;
   }
 }
+.block-editor-block-list__insertion-point-inserter {
+  justify-content: center;
+  top: calc(50% - 12px);
+  left: calc(50% - 12px);
+}
 
 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
   pointer-events: none;
@@ -584,39 +479,6 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
   border-right-color: #1e1e1e;
 }
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar {
-  background-color: #1e1e1e;
-  color: #f0f0f0;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar.block-editor-block-contextual-toolbar {
-  border-color: #2f2f2f;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button {
-  color: #ddd;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:hover {
-  color: #fff;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:focus::before {
-  box-shadow: inset 0 0 0 1px #1e1e1e, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:disabled, .components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button[aria-disabled=true] {
-  color: #757575;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
-  border-color: #2f2f2f;
-  background-color: #1e1e1e;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-switcher__toggle {
-  color: #f0f0f0;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar-group,
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar {
-  border-right-color: #2f2f2f !important;
-}
-.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .is-pressed {
-  color: var(--wp-admin-theme-color);
-}
 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
   visibility: hidden;
 }
@@ -737,6 +599,30 @@ iframe[name=editor-canvas] {
   margin-right: -6px;
 }
 
+.block-editor-block-allowed-blocks-control:not(:only-child) {
+  margin-top: 16px;
+}
+
+.block-editor-block-allowed-blocks-control__button {
+  width: 100%;
+  justify-content: center;
+}
+
+.block-editor-block-allowed-blocks-modal {
+  z-index: 1000001;
+}
+
+.block-editor-block-allowed-blocks-modal__actions {
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+  bottom: -32px;
+  left: 0;
+  margin: 0 -32px -32px;
+  padding: 16px 32px;
+  position: sticky;
+  z-index: 1;
+}
+
 .block-editor-block-breadcrumb {
   list-style: none;
   padding: 0;
@@ -948,28 +834,6 @@ iframe[name=editor-canvas] {
   text-align: center;
 }
 
-.block-editor-block-manager__search {
-  margin: 16px 0;
-}
-
-.block-editor-block-manager__disabled-blocks-count {
-  border: 1px solid #ddd;
-  border-width: 1px 0;
-  box-shadow: -32px 0 0 0 #fff, 32px 0 0 0 #fff;
-  padding: 8px;
-  background-color: #fff;
-  text-align: center;
-  position: sticky;
-  top: -5px;
-  z-index: 2;
-}
-.block-editor-block-manager__disabled-blocks-count ~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
-  top: 31px;
-}
-.block-editor-block-manager__disabled-blocks-count .is-link {
-  margin-left: 12px;
-}
-
 .block-editor-block-manager__category {
   margin: 0 0 24px 0;
 }
@@ -1437,14 +1301,16 @@ iframe[name=editor-canvas] {
 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
   height: 100%;
   border-radius: 2px;
-  position: relative;
-  border: 1px solid transparent;
 }
 @media not (prefers-reduced-motion) {
   .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
     transition: all 0.05s ease-in-out;
   }
 }
+.block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
+  position: relative;
+  border: 1px solid transparent;
+}
 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover, .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:focus {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
@@ -1596,13 +1462,15 @@ iframe[name=editor-canvas] {
   background-color: #fff;
   margin: auto;
   padding: 0;
-  z-index: 100;
 }
 @media not (prefers-reduced-motion) {
   .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
     transition: transform 0.5s, z-index 0.5s;
   }
 }
+.block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
+  z-index: 100;
+}
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
   opacity: 1;
   position: relative;
@@ -1928,13 +1796,15 @@ iframe[name=editor-canvas] {
   width: 26px;
   box-sizing: border-box;
   transform: scale(1);
-  will-change: transform;
 }
 @media not (prefers-reduced-motion) {
   .block-editor-global-styles__shadow-indicator {
     transition: transform 0.1s ease;
   }
 }
+.block-editor-global-styles__shadow-indicator {
+  will-change: transform;
+}
 .block-editor-global-styles__shadow-indicator:focus {
   border: 2px solid #757575;
 }
@@ -2105,7 +1975,7 @@ iframe[name=editor-canvas] {
     height: calc(100% - 4px);
   }
   .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
-.block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
+  .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
     flex-shrink: 0;
     height: 20px;
   }
@@ -2233,14 +2103,16 @@ iframe[name=editor-canvas] {
   cursor: pointer;
   background: transparent;
   word-break: break-word;
-  position: relative;
-  height: auto;
 }
 @media not (prefers-reduced-motion) {
   .components-button.block-editor-block-types-list__item {
     transition: all 0.05s ease-in-out;
   }
 }
+.components-button.block-editor-block-types-list__item {
+  position: relative;
+  height: auto;
+}
 .components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
   opacity: 0.6;
   cursor: default;
@@ -2370,6 +2242,15 @@ iframe[name=editor-canvas] {
   position: relative;
 }
 
+.block-editor-link-control__help {
+  padding: 0 16px;
+  margin-top: -8px;
+  margin-bottom: 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
 .block-editor-link-control__search-input-container,
 .block-editor-link-control__search-input-wrapper {
   position: relative;
@@ -2612,9 +2493,9 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__setting {
   margin-bottom: 0;
   flex: 1;
-  padding: 8px 0 8px 24px;
+  padding: 8px 24px;
 }
-.block-editor-link-control__setting .components-base-control__field {
+.block-editor-link-control__setting .components-base-control:not(.components-input-control) .components-base-control__field {
   display: flex;
 }
 .block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
@@ -2640,13 +2521,15 @@ iframe[name=editor-canvas] {
 }
 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
   visibility: visible;
-  transform: rotate(90deg);
 }
 @media not (prefers-reduced-motion) {
   .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
     transition: transform 0.1s ease;
   }
 }
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+  transform: rotate(90deg);
+}
 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
   visibility: visible;
   transform: rotate(0deg);
@@ -2775,11 +2658,16 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
   border-radius: 0;
 }
+@media not (prefers-reduced-motion) {
+  .block-editor-list-view-leaf.is-displacement-normal {
+    transition: transform 0.2s;
+  }
+}
 .block-editor-list-view-leaf.is-displacement-normal {
   transform: translateY(0);
 }
 @media not (prefers-reduced-motion) {
-  .block-editor-list-view-leaf.is-displacement-normal {
+  .block-editor-list-view-leaf.is-displacement-up {
     transition: transform 0.2s;
   }
 }
@@ -2787,7 +2675,7 @@ iframe[name=editor-canvas] {
   transform: translateY(-32px);
 }
 @media not (prefers-reduced-motion) {
-  .block-editor-list-view-leaf.is-displacement-up {
+  .block-editor-list-view-leaf.is-displacement-down {
     transition: transform 0.2s;
   }
 }
@@ -2795,7 +2683,7 @@ iframe[name=editor-canvas] {
   transform: translateY(32px);
 }
 @media not (prefers-reduced-motion) {
-  .block-editor-list-view-leaf.is-displacement-down {
+  .block-editor-list-view-leaf.is-after-dragged-blocks {
     transition: transform 0.2s;
   }
 }
@@ -2803,7 +2691,7 @@ iframe[name=editor-canvas] {
   transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 }
 @media not (prefers-reduced-motion) {
-  .block-editor-list-view-leaf.is-after-dragged-blocks {
+  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
     transition: transform 0.2s;
   }
 }
@@ -2811,18 +2699,13 @@ iframe[name=editor-canvas] {
   transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 }
 @media not (prefers-reduced-motion) {
-  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
+  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
     transition: transform 0.2s;
   }
 }
 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
   transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 }
-@media not (prefers-reduced-motion) {
-  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
-    transition: transform 0.2s;
-  }
-}
 .block-editor-list-view-leaf.is-dragging {
   opacity: 0;
   left: 0;
@@ -2995,6 +2878,7 @@ iframe[name=editor-canvas] {
   background: rgba(0, 0, 0, 0.3);
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;
@@ -3077,13 +2961,15 @@ iframe[name=editor-canvas] {
 
 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
   visibility: visible;
-  transform: rotate(90deg);
 }
 @media not (prefers-reduced-motion) {
   .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
     transition: transform 0.2s ease;
   }
 }
+.block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
+  transform: rotate(90deg);
+}
 
 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
   visibility: visible;
@@ -3363,22 +3249,6 @@ iframe[name=editor-canvas] {
   scrollbar-gutter: auto;
 }
 
-.block-editor-tool-selector__help {
-  margin-top: 8px;
-  margin-left: -8px;
-  margin-right: -8px;
-  margin-bottom: -8px;
-  padding: 16px;
-  border-top: 1px solid #ddd;
-  color: #757575;
-  min-width: 280px;
-}
-
-.block-editor-tool-selector__menu .components-menu-item__info {
-  margin-left: 36px;
-  text-align: left;
-}
-
 .block-editor-block-list__block .block-editor-url-input,
 .components-popover .block-editor-url-input,
 .block-editor-url-input {
@@ -3388,8 +3258,8 @@ iframe[name=editor-canvas] {
 }
 @media (min-width: 600px) {
   .block-editor-block-list__block .block-editor-url-input,
-.components-popover .block-editor-url-input,
-.block-editor-url-input {
+  .components-popover .block-editor-url-input,
+  .block-editor-url-input {
     min-width: 300px;
     width: auto;
   }
@@ -3415,15 +3285,17 @@ iframe[name=editor-canvas] {
 
 .block-editor-url-input__suggestions {
   max-height: 200px;
-  padding: 4px 0;
-  width: 302px;
-  overflow-y: auto;
 }
 @media not (prefers-reduced-motion) {
   .block-editor-url-input__suggestions {
     transition: all 0.15s ease-in-out;
   }
 }
+.block-editor-url-input__suggestions {
+  padding: 4px 0;
+  width: 302px;
+  overflow-y: auto;
+}
 
 .block-editor-url-input__suggestions,
 .block-editor-url-input .components-spinner {
@@ -3431,7 +3303,7 @@ iframe[name=editor-canvas] {
 }
 @media (min-width: 600px) {
   .block-editor-url-input__suggestions,
-.block-editor-url-input .components-spinner {
+  .block-editor-url-input .components-spinner {
     display: grid;
   }
 }
@@ -3599,14 +3471,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   grid-column: span 1;
 }
 
-.color-block-support-panel {
-  /* Increased specificity required to remove the slot wrapper's row gap */
-  /**
-   * After converting PanelColorGradientSettings to render as a ToolsPanel
-   * we need to remove the top margin when wrapping inner content due to
-   * rendering via SlotFills.
-   */
-}
 .color-block-support-panel .block-editor-contrast-checker {
   grid-column: span 2;
   margin-top: 16px;
@@ -3614,9 +3478,19 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .color-block-support-panel .block-editor-contrast-checker .components-notice__content {
   margin-right: 0;
 }
+.color-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+}
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
+.color-block-support-panel {
+  /**
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
+   */
+}
 .color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
   margin-top: 0;
 }
@@ -3735,11 +3609,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
-  scrollbar-width: thin;
-  scrollbar-gutter: stable both-edges;
-  scrollbar-color: #e0e0e0 transparent;
-  will-change: transform;
-  scrollbar-gutter: auto;
 }
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
   width: 12px;
@@ -3757,14 +3626,25 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within::-webkit-scrollbar-thumb {
   background-color: #949494;
 }
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: #e0e0e0 transparent;
+}
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within {
   scrollbar-color: #949494 transparent;
 }
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+  will-change: transform;
+}
 @media (hover: none) {
   .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
     scrollbar-color: #949494 transparent;
   }
 }
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+  scrollbar-gutter: auto;
+}
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
@@ -4138,7 +4018,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
     border-top: 1px solid #e0e0e0;
   }
   .block-editor-inserter__category-panel .block-editor-inserter__media-list,
-.block-editor-inserter__category-panel .block-editor-block-patterns-list {
+  .block-editor-inserter__category-panel .block-editor-block-patterns-list {
     padding: 0 24px 16px;
   }
 }
@@ -4347,9 +4227,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
     margin-bottom: 0;
     padding: 16px 24px 16px;
   }
-  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
-    --wp-components-color-background: #fff;
-  }
 }
 
 .block-editor-inserter__media-list__list-item {
@@ -4472,7 +4349,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
     flex-direction: column;
   }
   .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
-.show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
     flex-direction: column;
   }
 }
@@ -4535,10 +4412,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;
-  --wp-admin-theme-color-darker-10: #0073a1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 115, 161;
-  --wp-admin-theme-color-darker-20: #006187;
-  --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
+  --wp-admin-theme-color-darker-10: rgb(0, 114.7661290323, 160.5);
+  --wp-admin-theme-color-darker-10--rgb: 0, 114.7661290323, 160.5;
+  --wp-admin-theme-color-darker-20: rgb(0, 96.5322580645, 135);
+  --wp-admin-theme-color-darker-20--rgb: 0, 96.5322580645, 135;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4550,10 +4427,10 @@ body.admin-color-light {
 body.admin-color-modern {
   --wp-admin-theme-color: #3858e9;
   --wp-admin-theme-color--rgb: 56, 88, 233;
-  --wp-admin-theme-color-darker-10: #2145e6;
-  --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
-  --wp-admin-theme-color-darker-20: #183ad6;
-  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
+  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
+  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
+  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
+  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4565,10 +4442,10 @@ body.admin-color-modern {
 body.admin-color-blue {
   --wp-admin-theme-color: #096484;
   --wp-admin-theme-color--rgb: 9, 100, 132;
-  --wp-admin-theme-color-darker-10: #07526c;
-  --wp-admin-theme-color-darker-10--rgb: 7, 82, 108;
-  --wp-admin-theme-color-darker-20: #064054;
-  --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
+  --wp-admin-theme-color-darker-10: rgb(7.3723404255, 81.914893617, 108.1276595745);
+  --wp-admin-theme-color-darker-10--rgb: 7.3723404255, 81.914893617, 108.1276595745;
+  --wp-admin-theme-color-darker-20: rgb(5.7446808511, 63.829787234, 84.2553191489);
+  --wp-admin-theme-color-darker-20--rgb: 5.7446808511, 63.829787234, 84.2553191489;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4580,10 +4457,10 @@ body.admin-color-blue {
 body.admin-color-coffee {
   --wp-admin-theme-color: #46403c;
   --wp-admin-theme-color--rgb: 70, 64, 60;
-  --wp-admin-theme-color-darker-10: #383330;
-  --wp-admin-theme-color-darker-10--rgb: 56, 51, 48;
-  --wp-admin-theme-color-darker-20: #2b2724;
-  --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
+  --wp-admin-theme-color-darker-10: rgb(56.2692307692, 51.4461538462, 48.2307692308);
+  --wp-admin-theme-color-darker-10--rgb: 56.2692307692, 51.4461538462, 48.2307692308;
+  --wp-admin-theme-color-darker-20: rgb(42.5384615385, 38.8923076923, 36.4615384615);
+  --wp-admin-theme-color-darker-20--rgb: 42.5384615385, 38.8923076923, 36.4615384615;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4595,10 +4472,10 @@ body.admin-color-coffee {
 body.admin-color-ectoplasm {
   --wp-admin-theme-color: #523f6d;
   --wp-admin-theme-color--rgb: 82, 63, 109;
-  --wp-admin-theme-color-darker-10: #46365d;
-  --wp-admin-theme-color-darker-10--rgb: 70, 54, 93;
-  --wp-admin-theme-color-darker-20: #3a2c4d;
-  --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
+  --wp-admin-theme-color-darker-10: rgb(69.8430232558, 53.6598837209, 92.8401162791);
+  --wp-admin-theme-color-darker-10--rgb: 69.8430232558, 53.6598837209, 92.8401162791;
+  --wp-admin-theme-color-darker-20: rgb(57.6860465116, 44.3197674419, 76.6802325581);
+  --wp-admin-theme-color-darker-20--rgb: 57.6860465116, 44.3197674419, 76.6802325581;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4610,10 +4487,10 @@ body.admin-color-ectoplasm {
 body.admin-color-midnight {
   --wp-admin-theme-color: #e14d43;
   --wp-admin-theme-color--rgb: 225, 77, 67;
-  --wp-admin-theme-color-darker-10: #dd382d;
-  --wp-admin-theme-color-darker-10--rgb: 221, 56, 45;
-  --wp-admin-theme-color-darker-20: #d02c21;
-  --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
+  --wp-admin-theme-color-darker-10: rgb(221.4908256881, 56.1788990826, 45.0091743119);
+  --wp-admin-theme-color-darker-10--rgb: 221.4908256881, 56.1788990826, 45.0091743119;
+  --wp-admin-theme-color-darker-20: rgb(207.8348623853, 44.2201834862, 33.1651376147);
+  --wp-admin-theme-color-darker-20--rgb: 207.8348623853, 44.2201834862, 33.1651376147;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4625,10 +4502,10 @@ body.admin-color-midnight {
 body.admin-color-ocean {
   --wp-admin-theme-color: #627c83;
   --wp-admin-theme-color--rgb: 98, 124, 131;
-  --wp-admin-theme-color-darker-10: #576e74;
-  --wp-admin-theme-color-darker-10--rgb: 87, 110, 116;
-  --wp-admin-theme-color-darker-20: #4c6066;
-  --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
+  --wp-admin-theme-color-darker-10: rgb(87.0873362445, 110.192139738, 116.4126637555);
+  --wp-admin-theme-color-darker-10--rgb: 87.0873362445, 110.192139738, 116.4126637555;
+  --wp-admin-theme-color-darker-20: rgb(76.1746724891, 96.384279476, 101.8253275109);
+  --wp-admin-theme-color-darker-20--rgb: 76.1746724891, 96.384279476, 101.8253275109;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -4640,10 +4517,10 @@ body.admin-color-ocean {
 body.admin-color-sunrise {
   --wp-admin-theme-color: #dd823b;
   --wp-admin-theme-color--rgb: 221, 130, 59;
-  --wp-admin-theme-color-darker-10: #d97426;
-  --wp-admin-theme-color-darker-10--rgb: 217, 116, 38;
-  --wp-admin-theme-color-darker-20: #c36922;
-  --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
+  --wp-admin-theme-color-darker-10: rgb(216.8782608696, 116.1847826087, 37.6217391304);
+  --wp-admin-theme-color-darker-10--rgb: 216.8782608696, 116.1847826087, 37.6217391304;
+  --wp-admin-theme-color-darker-20: rgb(195.147826087, 104.5434782609, 33.852173913);
+  --wp-admin-theme-color-darker-20--rgb: 195.147826087, 104.5434782609, 33.852173913;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {