@wordpress/block-editor 10.3.0 → 10.5.0

package/build-style/style-rtl.css

@@ -364,14 +364,20 @@
 }
 .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:focus {
-  box-shadow: inset 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::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  top: 1px;
+  right: 1px;
+  left: 1px;
+  bottom: 1px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -545,6 +551,14 @@
   }
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+  pointer-events: none;
+}
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
+  pointer-events: all;
+}
+
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -554,6 +568,7 @@
   min-width: 24px;
   height: 24px;
 }
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
@@ -645,6 +660,9 @@
 .block-editor-block-list__block-selection-button .components-button:active {
   color: #fff;
 }
+.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
+  color: #fff;
+}
 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
   padding: 0;
 }
@@ -715,25 +733,18 @@
 .block-editor-block-lock-modal__options-title .components-base-control__field {
   align-items: center;
   display: flex;
-  margin: 0;
 }
 
 .block-editor-block-lock-modal__checklist-item {
-  margin-bottom: 0;
-  padding: 12px 32px 12px 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-grow: 1;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 0;
+  padding: 12px 32px 12px 0;
 }
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+.block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
+  flex-shrink: 0;
   margin-left: 12px;
   fill: #1e1e1e;
 }
@@ -1014,7 +1025,6 @@
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
     height: calc(100% - 4px);
-    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1052,6 +1062,33 @@
   }
 }
 
+.components-button.block-editor-block-mover-button::before {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  height: 32px;
+  right: 8px;
+  left: 8px;
+  z-index: -1;
+  animation: components-button__appear-animation 0.1s ease;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.block-editor-block-mover-button::before {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
+  box-shadow: none;
+  outline: none;
+}
+.components-button.block-editor-block-mover-button:focus-visible::before {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  outline: 2px solid transparent;
+}
+
 .block-editor-block-navigation__container {
   min-width: 280px;
 }
@@ -1122,13 +1159,9 @@
   margin: 0 !important;
   min-width: auto;
   width: max-content;
-  background: none;
-  border: none;
-  outline: none;
-  box-shadow: none;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1641,7 +1674,7 @@
   width: 100%;
   position: relative;
   text-align: right;
-  justify-content: left;
+  justify-content: right;
   padding: 6px 12px;
 }
 .block-editor-block-variation-transforms .components-dropdown-menu__toggle.components-dropdown-menu__toggle {
@@ -1674,43 +1707,36 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
-  width: 110px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__unit-control {
+  width: calc((100% - 16px) / 2);
   margin-bottom: 0;
-  margin-left: 12px;
+  margin-left: 16px;
   flex-shrink: 0;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control {
   flex: 1;
-  margin-bottom: 0;
-}
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-base-control__field {
-  margin-bottom: 0;
-  height: 30px;
+  margin-left: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-range-control__wrapper {
-  margin-left: 10px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
+  height: 40px;
+  display: flex;
+  align-items: center;
 }
 .components-border-radius-control .components-border-radius-control__wrapper > span {
   flex: 0 0 auto;
 }
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
-  display: flex;
-  width: 70%;
-  flex-wrap: wrap;
-}
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-border-radius-control__tooltip-wrapper {
-  width: calc(50% - 8px);
-  margin-bottom: 8px;
-  margin-left: 8px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-left: 12px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon {
+.components-border-radius-control .component-border-radius-control__linked-button {
   display: flex;
   justify-content: center;
-  margin-right: 2px;
-  margin-top: 3px;
+  margin-top: 8px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
+.components-border-radius-control .component-border-radius-control__linked-button svg {
   margin-left: 0;
 }
 
@@ -1891,12 +1917,14 @@
   display: none;
 }
 
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
   top: 0;
   left: 0;
   line-height: 0;
 }
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled,
 .block-editor-default-block-appender .block-editor-inserter:disabled {
   display: none;
 }
@@ -2096,6 +2124,7 @@
   border-radius: 2px;
   opacity: 0.04;
   background: var(--wp-admin-theme-color);
+  pointer-events: none;
 }
 .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);
@@ -2848,35 +2877,11 @@
 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
   top: -4px;
 }
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus:enabled {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus::before {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
-  outline: 2px solid transparent;
-}
 .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-  content: "";
-  position: absolute;
-  display: block;
-  border-radius: 2px;
   height: 16px;
   min-width: 100%;
   right: 0;
   left: 0;
-  animation: components-button__appear-animation 0.1s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-list-view-leaf .block-editor-inserter__toggle {
   background: #1e1e1e;
@@ -3021,13 +3026,6 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator > .components-popover__content {
-  margin-right: 0;
-  border: none;
-  box-shadow: none;
-  outline: none;
-}
-
 .block-editor-list-view-placeholder {
   padding: 0;
   margin: 0;
@@ -4095,9 +4093,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   text-align: left;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+  margin: auto 16px 16px;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-  display: inline-block;
-  margin: 16px;
+  justify-content: center;
+  width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -4254,10 +4256,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   position: relative;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  padding: 16px;
-}
-
 .block-editor-inserter__quick-inserter {
   width: 100%;
   max-width: 100%;
@@ -4342,7 +4340,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-bottom: 32px;
 }
 .block-editor-block-patterns-explorer__list {
-  margin-right: 248px;
+  margin-right: 280px;
+  padding: 24px 0 32px;
 }
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;
@@ -4451,13 +4450,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  justify-content: left;
+  justify-content: right;
   height: 16px;
   margin-top: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-label {
   grid-column: 1/1;
-  justify-self: left;
+  justify-self: right;
   margin-bottom: 0;
 }
 .component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control,
@@ -4471,7 +4470,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
-  justify-self: left;
+  justify-self: right;
   grid-row: 1/1;
   align-self: center;
   margin-right: 4px;
@@ -4505,6 +4504,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
   margin-top: 8px;
+  grid-column: 1;
 }
 .component-spacing-sizes-control .components-range-control {
   height: 40px;

package/build-style/style.css

@@ -364,14 +364,20 @@
 }
 .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:focus {
-  box-shadow: inset 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::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  bottom: 1px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 2px;
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
@@ -545,6 +551,14 @@
   }
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+  pointer-events: none;
+}
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
+  pointer-events: all;
+}
+
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -554,6 +568,7 @@
   min-width: 24px;
   height: 24px;
 }
+.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
@@ -645,6 +660,9 @@
 .block-editor-block-list__block-selection-button .components-button:active {
   color: #fff;
 }
+.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
+  color: #fff;
+}
 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
   padding: 0;
 }
@@ -715,25 +733,18 @@
 .block-editor-block-lock-modal__options-title .components-base-control__field {
   align-items: center;
   display: flex;
-  margin: 0;
 }
 
 .block-editor-block-lock-modal__checklist-item {
-  margin-bottom: 0;
-  padding: 12px 0 12px 32px;
-}
-.block-editor-block-lock-modal__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  flex-grow: 1;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 0;
+  padding: 12px 0 12px 32px;
 }
-.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg {
+.block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
+  flex-shrink: 0;
   margin-right: 12px;
   fill: #1e1e1e;
 }
@@ -1014,7 +1025,6 @@
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
     height: calc(100% - 4px);
-    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1052,6 +1062,33 @@
   }
 }
 
+.components-button.block-editor-block-mover-button::before {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  height: 32px;
+  left: 8px;
+  right: 8px;
+  z-index: -1;
+  animation: components-button__appear-animation 0.1s ease;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-button.block-editor-block-mover-button::before {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
+  box-shadow: none;
+  outline: none;
+}
+.components-button.block-editor-block-mover-button:focus-visible::before {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  outline: 2px solid transparent;
+}
+
 .block-editor-block-navigation__container {
   min-width: 280px;
 }
@@ -1122,13 +1159,9 @@
   margin: 0 !important;
   min-width: auto;
   width: max-content;
-  background: none;
-  border: none;
-  outline: none;
-  box-shadow: none;
   overflow-y: visible;
 }
-.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
   pointer-events: all;
 }
 
@@ -1674,43 +1707,36 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
-  width: 110px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__unit-control {
+  width: calc((100% - 16px) / 2);
   margin-bottom: 0;
-  margin-right: 12px;
+  margin-right: 16px;
   flex-shrink: 0;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control {
   flex: 1;
-  margin-bottom: 0;
-}
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-base-control__field {
-  margin-bottom: 0;
-  height: 30px;
+  margin-right: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-range-control__wrapper {
-  margin-right: 10px;
+.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
+  height: 40px;
+  display: flex;
+  align-items: center;
 }
 .components-border-radius-control .components-border-radius-control__wrapper > span {
   flex: 0 0 auto;
 }
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
-  display: flex;
-  width: 70%;
-  flex-wrap: wrap;
-}
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-border-radius-control__tooltip-wrapper {
-  width: calc(50% - 8px);
-  margin-bottom: 8px;
-  margin-right: 8px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-right: 12px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon {
+.components-border-radius-control .component-border-radius-control__linked-button {
   display: flex;
   justify-content: center;
-  margin-left: 2px;
-  margin-top: 3px;
+  margin-top: 8px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
+.components-border-radius-control .component-border-radius-control__linked-button svg {
   margin-right: 0;
 }
 
@@ -1891,12 +1917,14 @@
   display: none;
 }
 
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
   top: 0;
   right: 0;
   line-height: 0;
 }
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled,
 .block-editor-default-block-appender .block-editor-inserter:disabled {
   display: none;
 }
@@ -2096,6 +2124,7 @@
   border-radius: 2px;
   opacity: 0.04;
   background: var(--wp-admin-theme-color);
+  pointer-events: none;
 }
 .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);
@@ -2848,35 +2877,11 @@
 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
   top: -4px;
 }
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus:enabled {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-list-view-leaf .block-editor-block-mover-button:focus::before {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
-  outline: 2px solid transparent;
-}
 .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-  content: "";
-  position: absolute;
-  display: block;
-  border-radius: 2px;
   height: 16px;
   min-width: 100%;
   left: 0;
   right: 0;
-  animation: components-button__appear-animation 0.1s ease;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-block-mover-button::before {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-list-view-leaf .block-editor-inserter__toggle {
   background: #1e1e1e;
@@ -3021,13 +3026,6 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator > .components-popover__content {
-  margin-left: 0;
-  border: none;
-  box-shadow: none;
-  outline: none;
-}
-
 .block-editor-list-view-placeholder {
   padding: 0;
   margin: 0;
@@ -4095,9 +4093,13 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   text-align: right;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+  margin: auto 16px 16px;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-  display: inline-block;
-  margin: 16px;
+  justify-content: center;
+  width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -4254,10 +4256,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   position: relative;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  padding: 16px;
-}
-
 .block-editor-inserter__quick-inserter {
   width: 100%;
   max-width: 100%;
@@ -4342,7 +4340,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-bottom: 32px;
 }
 .block-editor-block-patterns-explorer__list {
-  margin-left: 248px;
+  margin-left: 280px;
+  padding: 24px 0 32px;
 }
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;
@@ -4505,6 +4504,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
   margin-top: 8px;
+  grid-column: 1;
 }
 .component-spacing-sizes-control .components-range-control {
   height: 40px;