@wordpress/block-editor 13.1.0 → 13.3.0

package/build-style/style-rtl.css

@@ -407,6 +407,17 @@ iframe[name=editor-canvas] {
   right: 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-lock-modal {
   z-index: 1000001;
 }
@@ -416,14 +427,22 @@ 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;
+}
+
 .block-editor-block-lock-modal__checklist {
   margin: 0;
 }
 
-.block-editor-block-lock-modal__options-title {
+.block-editor-block-lock-modal__options-all {
   padding: 12px 0;
 }
-.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+.block-editor-block-lock-modal__options-all .components-checkbox-control__label {
   font-weight: 600;
 }
 
@@ -885,6 +904,23 @@ iframe[name=editor-canvas] {
 .show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
   content: attr(aria-label);
 }
+@media screen and (min-width: 960px) {
+  .show-icon-labels .block-editor-patterns__grid-pagination {
+    flex-direction: row;
+  }
+  .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: row;
+  }
+}
+
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
 
 .components-popover.block-editor-block-popover {
   z-index: 31;
@@ -1510,13 +1546,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: right;
-}
 
 .block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
@@ -1536,7 +1565,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;
 }
@@ -1604,40 +1633,76 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-  position: relative;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-drop-zone__content-icon {
+.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;
+}
+.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-right: 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 {
@@ -1662,36 +1727,116 @@ iframe[name=editor-canvas] {
   box-sizing: inherit;
 }
 
-.block-editor-grid-visualizer {
-  z-index: 30 !important;
+.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-grid-visualizer .components-popover__content * {
-  pointer-events: none !important;
+.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-right: 16px;
+}
+
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
+  z-index: 30;
+}
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none;
+}
+.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__item {
-  outline: 1px solid transparent;
-  border-radius: 2px;
+.block-editor-grid-visualizer__cell {
+  display: grid;
+  position: relative;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter {
+  color: inherit;
+  z-index: 32;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 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-item-resizer {
-  z-index: 30 !important;
+.block-editor-grid-visualizer__drop-zone {
+  background: rgba(204, 204, 204, 0.1);
+  width: 100%;
+  height: 100%;
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 8px;
+  min-height: 8px;
 }
 
-.block-editor-grid-item-resizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+  z-index: 30;
+}
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none;
 }
 
 .block-editor-grid-item-resizer__box {
   border: 1px solid var(--wp-admin-theme-color);
 }
-.block-editor-grid-item-resizer__box .components-resizable-box__handle {
-  pointer-events: all !important;
+.block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
+  pointer-events: all;
 }
 
 .block-editor-height-control {
@@ -2887,8 +3032,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -2966,6 +3110,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-left: 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-right: 16px;
+  padding-left: 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-right: -8px;
@@ -3348,20 +3544,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: right;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3405,7 +3587,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;
@@ -3515,13 +3696,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 {
@@ -3622,20 +3797,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;
@@ -3710,42 +3878,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-left: 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-right: 16px;
-  padding-left: 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;