@wordpress/block-editor 12.15.0 → 12.16.0

package/build-style/style-rtl.css

@@ -169,9 +169,6 @@
   border-top: 1px solid #e0e0e0;
   margin-top: -1px;
 }
-.block-editor-block-inspector .block-editor-block-card {
-  padding: 16px;
-}
 
 .block-editor-block-inspector__no-blocks,
 .block-editor-block-inspector__no-block-tools {
@@ -264,137 +261,6 @@
   background: #1e1e1e;
 }
 
-/**
- * Block Toolbar when contextual.
- */
-.block-editor-block-contextual-toolbar {
-  display: inline-flex;
-  border: 1px solid #1e1e1e;
-  border-radius: 2px;
-  background-color: #fff;
-}
-.block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group,
-.block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar {
-  border-left-color: #1e1e1e;
-}
-.block-editor-block-contextual-toolbar.is-fixed {
-  overflow: hidden;
-  border-bottom: 1px solid #e0e0e0;
-  border-radius: 0;
-}
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar {
-  overflow: auto;
-  overflow-y: hidden;
-}
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
-  border-left-color: #e0e0e0;
-}
-@media (min-width: 782px) {
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
-    flex-grow: initial;
-    width: initial;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
-    content: "";
-    width: 1px;
-    height: 24px;
-    margin-top: 12px;
-    margin-left: 0;
-    background-color: #ddd;
-    position: relative;
-    right: -2px;
-    top: -1px;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
-    border: none;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon svg {
-    display: none;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon::after {
-    content: attr(aria-label);
-    font-size: 12px;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::before {
-    content: "";
-    width: 1px;
-    height: 24px;
-    margin-top: 12px;
-    margin-left: 8px;
-    background-color: #ddd;
-    position: relative;
-    right: 0;
-    top: -1px;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
-    border: none;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
-    width: 256px;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon svg {
-    display: none;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon::after {
-    content: attr(aria-label);
-    font-size: 12px;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
-    content: "";
-    width: 1px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-    background-color: #ddd;
-    position: relative;
-    right: -8px;
-    height: 24px;
-    top: -1px;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
-    right: 0;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-    border-right: none;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover::before {
-    content: "";
-    width: 1px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-    background-color: #ddd;
-    position: relative;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
-    position: relative;
-    top: -1px;
-    border: 0;
-    padding-left: 6px;
-    padding-right: 6px;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
-    content: "·";
-    font-size: 16px;
-    line-height: 40px;
-    position: absolute;
-    right: 46px;
-    bottom: 4px;
-  }
-  .block-editor-block-contextual-toolbar:not(.is-fixed) .block-editor-block-parent-selector {
-    position: absolute;
-    top: -1px;
-    right: calc(-48px - 8px - 1px);
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar:not(.is-fixed) .block-editor-block-parent-selector {
-    position: relative;
-    right: auto;
-    top: auto;
-    margin-top: -1px;
-    margin-right: -1px;
-    margin-bottom: -1px;
-  }
-}
-
 /**
  * Block Label for Navigation/Selection Mode
  */
@@ -467,6 +333,26 @@
   margin-top: 12px;
   margin-bottom: 12px;
 }
+.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
+  border: 1px solid #1e1e1e;
+  border-radius: 2px;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
+  margin-right: calc(48px + 8px);
+}
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
+  margin-right: 0;
+}
+.components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar {
+  overflow: visible;
+}
+.components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group,
+.components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
+  border-left-color: #1e1e1e;
+}
 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
   visibility: hidden;
 }
@@ -474,6 +360,32 @@
   opacity: 0;
   animation: hide-during-dragging 1ms linear forwards;
 }
+.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
+  position: absolute;
+  right: calc(-48px - 8px - 1px);
+}
+.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
+  content: "";
+}
+.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  border: 1px solid #1e1e1e;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: #fff;
+}
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
+  position: static;
+  margin-top: -1px;
+  margin-right: -1px;
+  margin-bottom: -1px;
+}
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  position: static;
+}
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+  border-right: 1px solid #1e1e1e;
+}
 
 .is-dragging-components-draggable .components-tooltip {
   display: none;
@@ -598,25 +510,29 @@
 }
 
 .block-editor-block-card {
-  display: flex;
   align-items: flex-start;
+  color: #1e1e1e;
+  display: flex;
+  padding: 16px;
 }
 
 .block-editor-block-card__content {
   flex-grow: 1;
-  margin-bottom: 4px;
 }
 
 .block-editor-block-card__title {
   font-weight: 500;
 }
 .block-editor-block-card__title.block-editor-block-card__title {
+  font-size: 13px;
   line-height: 24px;
-  margin: 0 0 4px;
+  margin: 0;
 }
 
 .block-editor-block-card__description {
+  display: block;
   font-size: 13px;
+  margin-top: 4px;
 }
 
 .block-editor-block-card .block-editor-block-icon {
@@ -835,17 +751,6 @@
   font-weight: 500;
 }
 
-.block-editor-block-parent-selector {
-  background: #fff;
-  border-radius: 2px;
-}
-.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
-  width: 48px;
-  height: 48px;
-  border: 1px solid #1e1e1e;
-  border-radius: 2px;
-}
-
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
   margin-bottom: 24px;
@@ -1022,15 +927,6 @@
     display: block;
   }
 }
-.block-editor-block-styles__preview-panel .block-editor-inserter__preview-container {
-  right: auto;
-  left: auto;
-  top: auto;
-  position: static;
-}
-.block-editor-block-styles__preview-panel .block-editor-block-card__title.block-editor-block-card__title {
-  margin: 0;
-}
 .block-editor-block-styles__preview-panel .block-editor-block-icon {
   display: none;
 }
@@ -1480,10 +1376,6 @@
   min-width: 0;
 }
 
-.block-editor-color-gradient-control__tabs .block-editor-color-gradient-control__panel {
-  padding: 16px;
-}
-
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
   display: block;
 }
@@ -1492,7 +1384,6 @@
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
     grid-template-columns: repeat(6, 28px);
-    justify-content: space-between;
   }
 }
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
@@ -1585,7 +1476,7 @@
 
 .block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
-  width: 280px;
+  width: 260px;
 }
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
@@ -1597,11 +1488,6 @@
   justify-content: space-between;
 }
 
-.block-editor-duotone-control__description {
-  margin: 16px 0;
-  font-size: 12px;
-}
-
 .block-editor-duotone-control__unset-indicator {
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
@@ -1910,7 +1796,7 @@
   border-radius: 2px;
   height: 40px;
   margin: 0;
-  padding: 8px 16px;
+  padding: 8px 16px 8px 40px;
   position: relative;
   width: 100%;
 }
@@ -3423,43 +3309,50 @@
   border-left: none;
 }
 
-.block-editor-block-contextual-toolbar.is-fixed {
+.block-editor-block-contextual-toolbar {
   position: sticky;
   top: 0;
   z-index: 31;
   display: block;
   width: 100%;
+  background-color: #fff;
+  flex-shrink: 3;
 }
-
-@media (min-width: 782px) {
-  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
-    border-left: none;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group::after,
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar::after {
-    content: "";
-    width: 1px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-    background-color: #ddd;
-    margin-right: 8px;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after {
-    display: none;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child::after,
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
-.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child .components-toolbar::after {
-    display: none;
-  }
+.block-editor-block-contextual-toolbar.components-accessible-toolbar {
+  border: none;
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 0;
 }
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-  margin-right: calc(48px + 8px);
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+  overflow: auto;
+  overflow-y: hidden;
 }
-.show-icon-labels .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-  margin-right: 0;
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
+  display: none;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group,
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar {
+  border-left-color: #e0e0e0;
+}
+.block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
+  flex-grow: initial;
+  width: initial;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
+  position: relative;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
+  content: "·";
+  position: absolute;
+  font-size: 16px;
+  left: 0;
+  bottom: 16px;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-parent-selector__button {
+  position: relative;
+  top: -1px;
 }
 
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
@@ -3509,11 +3402,14 @@
   height: 0 !important;
   min-width: 0 !important;
 }
-.show-icon-labels .block-editor-block-parent-selector__button {
+.show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  padding-right: 12px;
+  padding-left: 12px;
+  text-wrap: nowrap;
 }
-.show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
+.show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button .block-editor-block-icon {
   width: 0;
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
@@ -3529,36 +3425,24 @@
   padding-left: 8px;
 }
 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-  border-right: 1px solid #1e1e1e;
+  border-right: 1px solid #ddd;
   margin-right: 6px;
   margin-left: -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-right-color: #e0e0e0;
-}
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
   padding-right: 12px;
   padding-left: 12px;
 }
-.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 {
     margin-left: 0;
     border-radius: 0;
     order: 1;
   }
-  .show-icon-labels .block-editor-block-mover__move-button-container {
-    border-right: 1px solid #1e1e1e;
-  }
   .show-icon-labels .is-down-button.is-down-button.is-down-button {
     order: 2;
   }
-  .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 {
   width: auto;
@@ -3567,12 +3451,6 @@
 .show-icon-labels .components-toolbar-group {
   flex-shrink: 1;
 }
-@media (min-width: 782px) {
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar,
-.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar-group {
-    flex-shrink: 0;
-  }
-}
 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
   margin-right: 6px;
 }
@@ -3780,15 +3658,14 @@
   margin-left: 8px;
 }
 
+.block-editor-inserter__preview-container__popover {
+  top: 16px !important;
+}
+
 .block-editor-inserter__preview-container {
   display: none;
-  width: 300px;
-  background: #fff;
-  border-radius: 2px;
-  border: 1px solid #ddd;
-  position: absolute;
-  top: 16px;
-  right: calc(100% + 16px);
+  width: 280px;
+  padding: 16px;
   max-height: calc(100% - 32px);
   overflow-y: hidden;
 }
@@ -3797,11 +3674,13 @@
     display: block;
   }
 }
-.block-editor-inserter__preview-container .block-editor-block-card {
-  padding: 16px;
+.block-editor-inserter__preview-container .block-editor-block-preview__container {
+  height: 100%;
 }
-.block-editor-inserter__preview-container .block-editor-block-card__title {
-  font-size: 13px;
+.block-editor-inserter__preview-container .block-editor-block-card {
+  padding-right: 0;
+  padding-left: 0;
+  padding-bottom: 4px;
 }
 
 .block-editor-inserter__patterns-explore-button.components-button {
@@ -3833,18 +3712,12 @@
   background: var(--wp-admin-theme-color);
 }
 
-.block-editor-inserter__block-patterns-tabs-container,
-.block-editor-block-patterns-explorer__sidebar {
+.block-editor-inserter__block-patterns-tabs-container {
   height: 100%;
 }
-.block-editor-inserter__block-patterns-tabs-container nav,
-.block-editor-block-patterns-explorer__sidebar nav {
+.block-editor-inserter__block-patterns-tabs-container nav {
   height: 100%;
 }
-.block-editor-inserter__block-patterns-tabs-container .block-editor-block-patterns__source-filter select.components-select-control__input,
-.block-editor-block-patterns-explorer__sidebar .block-editor-block-patterns__source-filter select.components-select-control__input {
-  height: 40px;
-}
 
 .block-editor-inserter__block-patterns-tabs {
   display: flex;
@@ -3925,6 +3798,7 @@
   min-height: 144px;
   color: #757575;
   background: #f0f0f0;
+  border-radius: 2px;
 }
 
 .block-editor-inserter__tips {
@@ -3997,7 +3871,7 @@
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 76px;
+  top: 72px;
   right: 0;
   bottom: 0;
   width: 280px;
@@ -4271,60 +4145,6 @@
   height: 40px;
 }
 
-.block-editor-post-preview__dropdown {
-  padding: 0;
-}
-
-.block-editor-post-preview__button-resize.block-editor-post-preview__button-resize {
-  padding-right: 40px;
-}
-.block-editor-post-preview__button-resize.block-editor-post-preview__button-resize.has-icon {
-  padding-right: 8px;
-}
-
-.block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child {
-  padding-bottom: 8px;
-}
-.block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:last-child {
-  margin-bottom: 0;
-}
-.block-editor-post-preview__dropdown-content .components-menu-group + .components-menu-group {
-  padding: 8px;
-}
-
-@media (min-width: 600px) {
-  .edit-post-header__settings .editor-post-preview,
-.edit-site-header-edit-mode__actions .editor-post-preview {
-    display: none;
-  }
-}
-
-@media (min-width: 600px) {
-  .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft,
-.edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state,
-.edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle {
-    transition: opacity 0.1s linear;
-  }
-}
-@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
-  .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft,
-.edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state,
-.edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-@media (min-width: 600px) {
-  .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-save-draft,
-.edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-saved-state,
-.edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle {
-    opacity: 0;
-  }
-  .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle.is-opened {
-    opacity: 1;
-  }
-}
-
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;