@wordpress/block-editor 10.2.0 → 10.3.0

package/build-style/style.css

@@ -172,52 +172,82 @@
 /**
  * Cross-Block Selection
  */
+@keyframes selection-overlay__fade-in-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.4;
+  }
+}
 .block-editor-block-list__layout {
   position: relative;
 }
 .block-editor-block-list__layout::selection {
   background: transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
+.has-multi-selection .block-editor-block-list__layout::selection {
+  background: transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+  border-radius: 2px;
+  overflow: hidden;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
+  background: transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
+  content: "";
   position: absolute;
   z-index: 1;
   pointer-events: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--wp-admin-theme-color);
+  opacity: 0.4;
+  border-radius: 2px;
+  animation: selection-overlay__fade-in-animation 0.1s ease-out;
+  animation-fill-mode: forwards;
+  outline: 2px solid transparent;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
+  outline: none;
+}
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
   top: 1px;
+  right: 1px;
   bottom: 1px;
   left: 1px;
-  right: 1px;
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 1px;
   outline: 2px solid transparent;
 }
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
-  box-shadow: 0 0 0 1px #fff;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
-  background: transparent;
-}
-.has-multi-selection .block-editor-block-list__layout::selection {
-  background: transparent;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 1px solid transparent;
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
+  box-shadow: none;
+  outline: none;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before {
+.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
   z-index: 0;
@@ -229,10 +259,7 @@
   border-radius: 2px;
   border-top: 4px solid #ccc;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
-  content: none;
-}
-.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
+.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
 }
 .has-multi-selection .block-editor-block-list__layout {
@@ -266,24 +293,6 @@
   /**
    * Notices
    */
-  /**
-   * Block Layout
-   */
-  /**
-  * Block styles and alignments
-  */
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
-  top: -0.5px;
-  right: -0.5px;
-  bottom: -0.5px;
-  left: -0.5px;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
@@ -302,43 +311,6 @@
 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
   font-size: 13px;
 }
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
-  outline: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  content: "";
-  top: 1px;
-  bottom: 1px;
-  left: 1px;
-  right: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
-  outline: 2px solid transparent;
-}
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
-}
-.block-editor-block-list__layout .block-editor-block-list__block::after {
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border-radius: 2px;
-  box-shadow: 0 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__layout .block-editor-block-list__block::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
 }
@@ -380,6 +352,9 @@
   cursor: default;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
   top: 1px;
   left: 1px;
   right: 1px;
@@ -389,20 +364,14 @@
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  border-radius: 1px;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -1037,7 +1006,6 @@
 @media (min-width: 600px) {
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
     flex-direction: column;
-    width: 36px;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
     height: 24px;
@@ -1110,6 +1078,7 @@
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
   margin-bottom: 24px;
+  position: relative;
 }
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
@@ -1125,8 +1094,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: 2px;
-  border: 1px solid #f0f0f0;
+  border-radius: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
   padding-top: 8px;
@@ -1134,7 +1102,7 @@
   text-align: center;
 }
 .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
-  border: 1px solid var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1160,7 +1128,7 @@
   box-shadow: none;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1177,6 +1145,16 @@
   pointer-events: all;
 }
 
+.components-popover.block-editor-block-popover__drop-zone * {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__drop-zone .block-editor-block-popover__drop-zone-foreground {
+  position: absolute;
+  inset: 0;
+  background-color: var(--wp-admin-theme-color);
+  border-radius: 2px;
+}
+
 .block-editor-block-preview__container {
   position: relative;
   width: 100%;
@@ -1764,10 +1742,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1775,9 +1753,10 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
+  border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1788,7 +1767,7 @@
   background: currentColor;
   opacity: 0.1;
 }
-.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) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
+.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;
 }
 
@@ -2100,9 +2079,24 @@
   opacity: 0.6;
   cursor: default;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover {
+.components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
+  color: var(--wp-admin-theme-color) !important;
+  filter: brightness(0.95);
+}
+.components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
   color: var(--wp-admin-theme-color) !important;
 }
+.components-button.block-editor-block-types-list__item:not(:disabled):hover::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 2px;
+  opacity: 0.04;
+  background: var(--wp-admin-theme-color);
+}
 .components-button.block-editor-block-types-list__item:not(:disabled):focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
@@ -3871,12 +3865,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-left: 6px;
   padding-right: 6px;
 }
-.show-icon-labels .block-editor-block-switcher {
-  border-right: 1px solid #1e1e1e;
-}
-.show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle {
-  margin-left: 0;
-}
 .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 0 !important;
@@ -3885,24 +3873,50 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
   width: 0;
 }
+.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+  width: auto;
+}
 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-  margin-left: 0;
+  border-left: 1px solid #1e1e1e;
+  margin-left: 6px;
+  margin-right: -6px;
   white-space: nowrap;
 }
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+  border-left-color: #e0e0e0;
+}
 .show-icon-labels .block-editor-block-mover-button {
   padding-left: 8px !important;
   padding-right: 8px !important;
 }
 .show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
-  padding-left: 6px !important;
-  padding-right: 6px !important;
-  border-right: 1px solid #1e1e1e;
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
+  border-width: 0;
 }
 @media (min-width: 600px) {
   .show-icon-labels .is-up-button.is-up-button.is-up-button {
-    border-bottom: 1px solid #1e1e1e;
     margin-right: 0;
     border-radius: 0;
+    order: 1;
+  }
+  .show-icon-labels .block-editor-block-mover__move-button-container {
+    border-left: 1px solid #1e1e1e;
+  }
+  .show-icon-labels .block-editor-block-mover__move-button-container::before {
+    content: "";
+    display: block;
+    height: 1px;
+    background: #1e1e1e;
+    order: 2;
+  }
+  .show-icon-labels .is-down-button.is-down-button.is-down-button {
+    order: 3;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
+    background: #ddd;
   }
 }
 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
@@ -3937,16 +3951,15 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   flex-direction: column;
   height: 100%;
   gap: 16px;
-  width: auto;
+}
+.block-editor-inserter__main-area.show-as-tabs {
+  gap: 0;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__main-area {
     width: 350px;
   }
 }
-.block-editor-inserter__main-area.show-as-tabs {
-  gap: 0;
-}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -4055,10 +4068,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding: 16px 16px 0;
 }
 
-.block-editor-inserter__panel-header-patterns {
-  padding: 16px 16px 0;
-}
-
 .block-editor-inserter__panel-content {
   padding: 16px;
 }
@@ -4139,6 +4148,87 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   font-size: 13px;
 }
 
+.block-editor-inserter__patterns-explore-button.components-button {
+  padding: 16px;
+  justify-content: center;
+  margin-top: 16px;
+  width: 100%;
+}
+
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category {
+  color: var(--wp-admin-theme-color);
+  position: relative;
+}
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category .components-flex-item {
+  filter: brightness(0.95);
+}
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category svg {
+  fill: var(--wp-admin-theme-color);
+}
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 2px;
+  opacity: 0.04;
+  background: var(--wp-admin-theme-color);
+}
+
+.block-editor-inserter__block-patterns-tabs-container {
+  height: 100%;
+}
+.block-editor-inserter__block-patterns-tabs-container nav {
+  height: 100%;
+}
+
+.block-editor-inserter__block-patterns-tabs {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.block-editor-inserter__patterns-fill-space {
+  flex-grow: 1;
+}
+
+.block-editor-inserter__patterns-category-panel {
+  background: #f0f0f0;
+  border-left: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+  position: absolute;
+  padding: 32px 24px;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__patterns-category-panel {
+    left: 100%;
+    display: block;
+    width: 300px;
+  }
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-patterns-list {
+  margin-top: 24px;
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-preview__container {
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-preview__container:hover {
+  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-inserter__patterns-category-panel .block-editor-block-patterns-list__item-title {
+  display: none;
+}
+
 .block-editor-inserter__preview-content {
   min-height: 144px;
   background: #f0f0f0;
@@ -4278,6 +4368,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   max-height: 800px;
 }
 
+.block-editor-inserter__patterns-category-panel-title {
+  font-size: calc(1.25 * 13px);
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4301,7 +4395,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 @media (min-width: 600px) {
   .edit-post-header__settings .editor-post-preview,
-.edit-site-header__actions .editor-post-preview {
+.edit-site-header-edit-mode__actions .editor-post-preview {
     display: none;
   }
 }
@@ -4336,7 +4430,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  grid-template-rows: 25px auto;
+  grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4359,15 +4453,16 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 1/1;
   justify-content: left;
   height: 16px;
-  margin-top: 12px;
+  margin-top: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-label {
   grid-column: 1/1;
   justify-self: left;
   margin-bottom: 0;
 }
-.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control {
-  margin-top: 12px;
+.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 {
@@ -4385,12 +4480,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 2/2;
   grid-row: 1/1;
   justify-self: end;
-  padding: 0;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 16px;
+  margin-top: -4px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-right: 4px;
@@ -4398,29 +4488,37 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
   grid-column: 3/3;
   justify-self: end;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 16px;
   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-left: 8px;
-  height: 30px;
+  margin-left: 16px;
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
+  margin-top: 8px;
+}
+.component-spacing-sizes-control .components-range-control {
+  height: 40px;
+  /* Vertically center the RangeControl until it has true 40px height. */
+  display: flex;
+  align-items: center;
+}
+.component-spacing-sizes-control .components-range-control > .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;
-  height: 40px;
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4439,6 +4537,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
+  margin-top: 8px;
 }
 
 body.admin-color-light {