@wordpress/block-editor 13.2.0 → 13.4.0

package/build-style/style.css

@@ -407,6 +407,24 @@ iframe[name=editor-canvas] {
   left: 50%;
 }
 
+.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
+.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
+.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
+.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.zoom-out-toolbar .block-editor-block-mover {
+  background: none;
+  border: none;
+}
+
+.block-editor-block-tools__zoom-out-mode-inserter-button {
+  visibility: hidden;
+}
+.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
+  visibility: visible;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -416,9 +434,6 @@ iframe[name=editor-canvas] {
   }
 }
 
-.block-editor-block-lock-modal__options {
-  margin-top: 16px;
-}
 .block-editor-block-lock-modal__options legend {
   margin-bottom: 16px;
   padding: 0;
@@ -456,7 +471,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-lock-modal__template-lock {
   border-top: 1px solid #ddd;
   margin-top: 16px;
-  padding: 12px 0;
+  padding-top: 16px;
 }
 
 .block-editor-block-lock-modal__actions {
@@ -877,13 +892,6 @@ iframe[name=editor-canvas] {
   background-color: #757575;
 }
 
-.show-icon-labels .block-editor-patterns__grid-pagination {
-  flex-direction: column;
-}
-.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
-.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
-  flex-direction: column;
-}
 .show-icon-labels .block-editor-patterns__grid-pagination .components-button {
   width: auto;
 }
@@ -1091,25 +1099,19 @@ iframe[name=editor-canvas] {
   min-width: 300px;
 }
 
-.block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
+.block-editor-block-switcher__popover-preview-container {
+  left: 0;
   position: absolute;
-  top: -12px;
-  left: calc(100% + 16px);
+  top: -1px;
+  width: 100%;
+  bottom: 0;
+  pointer-events: none;
 }
 
-.block-editor-block-switcher__preview__popover {
-  display: none;
+.block-editor-block-switcher__popover-preview {
   overflow: hidden;
 }
-.block-editor-block-switcher__preview__popover.components-popover {
-  margin-top: 11px;
-}
-@media (min-width: 782px) {
-  .block-editor-block-switcher__preview__popover {
-    display: block;
-  }
-}
-.block-editor-block-switcher__preview__popover .components-popover__content {
+.block-editor-block-switcher__popover-preview .components-popover__content {
   width: 300px;
   border: 1px solid #1e1e1e;
   background: #fff;
@@ -1118,13 +1120,13 @@ iframe[name=editor-canvas] {
   box-shadow: none;
   overflow: auto;
 }
-.block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
+.block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview {
   max-height: calc(500px - 32px);
   margin: 16px 0;
   padding: 0 16px;
   overflow: hidden;
 }
-.block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview.is-pattern-list-preview {
+.block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview.is-pattern-list-preview {
   overflow: unset;
 }
 
@@ -1518,13 +1520,6 @@ iframe[name=editor-canvas] {
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
 }
-.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint {
-  grid-template-columns: auto 30px;
-}
-.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint {
-  grid-row: 2;
-  text-align: left;
-}
 
 .block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
@@ -1544,7 +1539,7 @@ iframe[name=editor-canvas] {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control ul li {
+.components-font-appearance-control [role=option] {
   color: #1e1e1e;
   text-transform: capitalize;
 }
@@ -1613,40 +1608,77 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
+  background-color: #f0f0f0;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
+  flex-grow: 1;
+  border: 0;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
+  display: block;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
+  height: 100%;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
+  display: block;
+  height: 36px;
+}
+
+.block-editor-global-styles-background-panel__image-tools-panel-item {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
   position: relative;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-drop-zone__content-icon {
+.block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
   display: none;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button {
+.block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
+  display: block;
+  height: 36px;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
   width: 100%;
   display: block;
-  height: 40px;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:hover {
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:focus {
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-media-replace-title {
+
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+  height: 100%;
+  width: 100%;
+  padding-left: 12px;
+}
+
+.block-editor-global-styles-background-panel__dropdown-toggle {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
   word-break: break-all;
   white-space: normal;
   text-align: start;
   text-align-last: center;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
-  display: block;
-}
 
-.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-  display: block;
+.block-editor-global-styles-background-panel__inspector-preview-inner .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
   width: 20px;
   height: 20px;
-  flex: none;
-  background: #fff;
+  min-width: auto;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -1671,6 +1703,47 @@ iframe[name=editor-canvas] {
   box-sizing: inherit;
 }
 
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+  min-width: 260px;
+  overflow-x: hidden;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-base-control__help,
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-toggle-control {
+  margin-bottom: 0;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
+  background-color: #f0f0f0;
+  width: 100%;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
+  max-height: 180px;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker::after {
+  content: none;
+}
+
+.block-editor-global-styles-background-panel__hidden-tools-panel-item {
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+
+.modal-open .block-editor-global-styles-background-panel__popover {
+  z-index: 159890;
+}
+
+.block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
+  width: 226px;
+}
+.block-editor-global-styles-background-panel__media-replace-popover .components-button {
+  padding: 0 8px;
+}
+.block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
+  margin-left: 16px;
+}
+
 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
   z-index: 30;
 }
@@ -1680,28 +1753,56 @@ iframe[name=editor-canvas] {
 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
   pointer-events: all;
 }
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
+  pointer-events: auto;
+}
 
 .block-editor-grid-visualizer__grid {
   display: grid;
 }
 
 .block-editor-grid-visualizer__cell {
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  display: grid;
+  position: relative;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter {
+  color: inherit;
+  z-index: 32;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, #0000);
+  color: inherit;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  padding: 0 !important;
+  opacity: 0;
+}
+.block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
+.block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
+  background: var(--wp-admin-theme-color);
+}
+.block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
+.block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 20%, #0000);
 }
 
 .block-editor-grid-visualizer__drop-zone {
   background: rgba(204, 204, 204, 0.1);
-  border: 1px dotted #ddd;
   width: 100%;
   height: 100%;
+  grid-column: 1;
+  grid-row: 1;
   min-width: 8px;
   min-height: 8px;
 }
-.block-editor-grid-visualizer__drop-zone.is-highlighted {
-  background: var(--wp-admin-theme-color);
-}
 
 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
   z-index: 30;
@@ -1717,6 +1818,100 @@ iframe[name=editor-canvas] {
   pointer-events: all;
 }
 
+.block-editor-grid-item-mover__move-button-container {
+  display: flex;
+  padding: 0;
+  border: none;
+  justify-content: center;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
+  width: 24px;
+  min-width: 0 !important;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
+  min-width: 24px;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-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) {
+  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before {
+  box-shadow: none;
+  outline: none;
+}
+.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
+  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;
+}
+
+.block-editor-grid-item-mover__move-vertical-button-container {
+  display: flex;
+  position: relative;
+}
+@media (min-width: 600px) {
+  .block-editor-grid-item-mover__move-vertical-button-container {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+    height: 20px;
+    width: 100%;
+    min-width: 0 !important;
+  }
+  .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
+    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 {
+    flex-shrink: 0;
+    height: 20px;
+  }
+}
+
+.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
+  border-right: 1px solid #757575;
+  padding-right: 12px;
+}
+.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
+  border-left: 1px solid #757575;
+  padding-left: 12px;
+}
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: #e0e0e0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    margin-top: -0.5px;
+  }
+}
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
+    background: #1e1e1e;
+  }
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -1845,25 +2040,6 @@ iframe[name=editor-canvas] {
   justify-content: center;
 }
 
-.block-editor-inspector-controls-tabs__hint {
-  align-items: flex-start;
-  background: #f0f0f0;
-  border-radius: 2px;
-  color: #1e1e1e;
-  display: flex;
-  flex-direction: row;
-  margin: 16px;
-  font-size: 13px;
-}
-
-.block-editor-inspector-controls-tabs__hint-content {
-  margin: 12px 0 12px 12px;
-}
-
-.block-editor-inspector-controls-tabs__hint-dismiss {
-  margin: 4px 4px 4px 0;
-}
-
 .block-editor-inspector-popover-header {
   margin-bottom: 16px;
 }
@@ -2631,7 +2807,8 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
 }
-.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__lock,
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
@@ -2988,6 +3165,58 @@ iframe[name=editor-canvas] {
   z-index: 100000;
 }
 
+.block-editor-tabbed-sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+@media (min-width: 782px) {
+  .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.block-editor-tabbed-sidebar__close-button {
+  background: #fff;
+  /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+  order: 1;
+  align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+  box-sizing: border-box;
+  flex-grow: 1;
+  margin-bottom: -1px;
+  width: 100%;
+}
+
+.block-editor-tabbed-sidebar__tab {
+  flex-grow: 1;
+  margin-bottom: -1px;
+}
+.block-editor-tabbed-sidebar__tab[id$=reusable] {
+  flex-grow: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+}
+
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-left: -8px;
@@ -3198,6 +3427,7 @@ iframe[name=editor-canvas] {
 .block-editor-url-popover__row {
   display: flex;
   gap: 4px;
+  align-items: center;
 }
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
@@ -3370,20 +3600,6 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
-.block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
-  display: none;
-}
-
-.block-editor-hooks__position-selection__select-control__option.has-hint {
-  grid-template-columns: auto 30px;
-  line-height: 1.4;
-  margin-bottom: 0;
-}
-.block-editor-hooks__position-selection__select-control__option .components-custom-select-control__item-hint {
-  grid-row: 2;
-  text-align: left;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3427,7 +3643,6 @@ iframe[name=editor-canvas] {
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar {
   background: none;
-  line-height: 0;
   margin-top: -1px;
   margin-bottom: -1px;
   border: 0;
@@ -3537,13 +3752,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-toolbar__slot {
-  display: inline-block;
-  line-height: 0;
-}
-@supports (position: sticky) {
-  .block-editor-block-toolbar__slot {
-    display: inline-flex;
-  }
+  display: inline-flex;
 }
 
 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon {
@@ -3644,20 +3853,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__main-area {
-  position: relative;
-  display: flex;
-  flex-direction: column;
   height: 100%;
   gap: 16px;
+  position: relative;
 }
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
-@media (min-width: 782px) {
-  .block-editor-inserter__main-area {
-    width: 350px;
-  }
-}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3732,42 +3934,6 @@ iframe[name=editor-canvas] {
   padding: 16px 16px 0 16px;
 }
 
-.block-editor-inserter__tabs {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist-and-close-button {
-  border-bottom: 1px solid #ddd;
-  padding-right: 12px;
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-inserter__tabs .block-editor-inserter__close-button {
-  /* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-  order: 1;
-  align-self: center;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist {
-  width: 100%;
-  margin-bottom: -1px;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab] {
-  flex-grow: 1;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab][id$=reusable] {
-  flex-grow: inherit;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tabpanel {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
 .block-editor-inserter__no-tab-container {
   overflow-y: auto;
   flex-grow: 1;
@@ -3888,6 +4054,9 @@ iframe[name=editor-canvas] {
 .block-editor-inserter__category-tablist div[role=listitem]:last-child {
   margin-top: auto;
 }
+.block-editor-inserter__category-tablist[aria-orientation=vertical]::after {
+  content: none;
+}
 .block-editor-inserter__category-tablist .block-editor-inserter__category-tab {
   padding: 8px 4px 8px 12px;
   text-align: left;
@@ -3933,18 +4102,10 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__category-panel {
-  background: #f0f0f0;
-  border-top: 1px solid #e0e0e0;
-  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
   outline: 1px solid transparent;
-  position: absolute;
-  top: -1px;
-  left: 0;
-  height: calc(100% + 1px);
-  width: 100%;
-  padding: 0 16px;
   display: flex;
   flex-direction: column;
+  padding: 0 16px;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__category-panel {
@@ -3952,15 +4113,26 @@ iframe[name=editor-canvas] {
     padding: 0;
     left: 100%;
     width: 300px;
+    position: absolute;
+    top: -1px;
+    height: calc(100% + 1px);
+    background: #f0f0f0;
+    border-top: 1px solid #e0e0e0;
+    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
   }
-}
-.block-editor-inserter__category-panel .block-editor-inserter__media-list,
+  .block-editor-inserter__category-panel .block-editor-inserter__media-list,
 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
-  padding: 0 24px 16px;
+    padding: 0 24px 16px;
+  }
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-  padding: 8px 24px;
+  padding: 8px 0;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__patterns-category-panel-header {
+    padding: 8px 24px;
+  }
 }
 
 .block-editor-inserter__patterns-category-no-results {
@@ -3975,7 +4147,6 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__preview-content {
-  min-height: 144px;
   background: #f0f0f0;
   display: grid;
   flex-grow: 1;
@@ -4146,10 +4317,16 @@ iframe[name=editor-canvas] {
   flex: 1;
 }
 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
-  padding: 16px 24px 8px;
+  margin-bottom: 24px;
 }
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
-  --wp-components-color-background: #fff;
+@media (min-width: 782px) {
+  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
+    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 {
@@ -4251,28 +4428,6 @@ iframe[name=editor-canvas] {
   margin: 16px 16px 0;
 }
 
-.reusable-blocks-menu-items__rename-hint {
-  align-items: top;
-  background: #f0f0f0;
-  border-radius: 2px;
-  color: #1e1e1e;
-  display: flex;
-  flex-direction: row;
-  max-width: 380px;
-}
-
-.reusable-blocks-menu-items__rename-hint-content {
-  margin: 12px 0 12px 12px;
-}
-
-.reusable-blocks-menu-items__rename-hint-dismiss {
-  margin: 4px 4px 4px 0;
-}
-
-.components-menu-group .reusable-blocks-menu-items__rename-hint {
-  margin: 0;
-}
-
 .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
   height: 40px;
 }
@@ -4292,6 +4447,26 @@ iframe[name=editor-canvas] {
     height: 100%;
   }
 }
+.block-editor-inserter__menu.is-zoom-out .block-editor-inserter__category-panel {
+  box-shadow: none;
+}
+
+@media (max-width: 959px) {
+  .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
+    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 {
+    flex-direction: column;
+  }
+}
+.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
 
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {