@wordpress/block-editor 8.6.0 → 9.2.0

package/build-style/style-rtl.css

@@ -107,14 +107,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-alignment-matrix-control__popover .components-popover__content {
-  min-width: 0;
-  width: auto;
-}
-.block-editor-block-alignment-matrix-control__popover .components-popover__content > div {
-  padding: 8px;
-}
-
 .block-editor-block-icon {
   display: flex;
   align-items: center;
@@ -358,6 +350,9 @@
   border-radius: 1px;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
+  cursor: default;
+}
+.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 {
@@ -386,21 +381,6 @@
   opacity: 1;
 }
 
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-  opacity: 0.5;
-  transition: opacity 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.has-child-selected, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity:not(.has-child-selected) .block-editor-block-list__block, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity .block-editor-block-list__block,
-.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity .is-active-entity .block-editor-block-list__block {
-  opacity: 1;
-}
-
 .wp-block[data-align=left] > *,
 .wp-block[data-align=right] > *,
 .wp-block.alignleft,
@@ -536,18 +516,8 @@
   }
 }
 
-.block-editor-block-list__block-popover-inserter {
-  position: absolute;
-  top: -9999em;
-  margin-bottom: 14px;
-}
-.block-editor-block-list__block-popover-inserter.is-visible {
-  position: static;
-}
-
 .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,
-.block-editor-block-list__block-popover-inserter .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;
   border-radius: 2px;
   color: #fff;
@@ -556,8 +526,7 @@
   height: 24px;
 }
 .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,
-.block-editor-block-list__block-popover-inserter .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;
   background: var(--wp-admin-theme-color);
 }
@@ -901,7 +870,7 @@
   margin: 0.67em 0;
 }
 
-.block-editor-block-content-overlay.overlay-active::before {
+.block-editor-block-content-overlay::before {
   content: "";
   position: absolute;
   top: 0;
@@ -912,18 +881,11 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
-.block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
+.block-editor-block-content-overlay:hover:not(.is-dragging-blocks)::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
 }
-.block-editor-block-content-overlay.overlay-active:not(.is-dragging-blocks) * {
-  pointer-events: none;
-}
-.block-editor-block-content-overlay.is-dragging-blocks {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
 
 .block-editor-block-draggable-chip-wrapper {
   position: absolute;
@@ -1099,6 +1061,7 @@
 .components-popover.block-editor-block-popover {
   z-index: 31;
   position: absolute;
+  margin: 0 !important;
 }
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
@@ -1106,6 +1069,7 @@
   width: max-content;
   background: none;
   border: none;
+  outline: none;
   box-shadow: none;
   overflow-y: visible;
   pointer-events: none;
@@ -1252,10 +1216,6 @@
   font-size: 14px;
 }
 
-.block-editor-block-switcher__popover {
-  margin-right: 6px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
   display: flex;
 }
@@ -1298,39 +1258,16 @@
   min-width: 300px;
 }
 
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
-  min-width: auto;
-  display: flex;
-  background: #fff;
-  padding: 0;
-}
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group {
-  margin: 0;
-}
-
-.block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles {
-  margin: 0 -3px;
-}
-.block-editor-block-switcher__popover .components-popover__content .components-panel__body {
-  border: 0;
-  position: relative;
-  z-index: 1;
-}
-.block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body {
-  border-top: 1px solid #e0e0e0;
-}
-
 .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
   position: absolute;
   top: -12px;
-  right: calc(100% + 32px);
+  right: calc(100% + 16px);
 }
 
 .block-editor-block-switcher__preview__popover {
   display: none;
 }
 .block-editor-block-switcher__preview__popover.components-popover {
-  margin-right: 4px;
   margin-top: 11px;
 }
 @media (min-width: 782px) {
@@ -1343,6 +1280,7 @@
   border: 1px solid #1e1e1e;
   background: #fff;
   border-radius: 2px;
+  outline: none;
 }
 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
   width: 300px;
@@ -1643,7 +1581,7 @@
 .components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
   width: 110px;
   margin-bottom: 0;
-  margin-left: 8px;
+  margin-left: 12px;
   flex-shrink: 0;
 }
 .components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
@@ -1665,7 +1603,7 @@
   width: 70%;
   flex-wrap: wrap;
 }
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-unit-control-wrapper {
+.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;
@@ -1674,26 +1612,12 @@
   display: flex;
   justify-content: center;
   margin-right: 2px;
+  margin-top: 3px;
 }
 .components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
   margin-left: 0;
 }
 
-.components-border-style-control legend {
-  line-height: 1.4;
-  margin-bottom: 8px;
-  padding: 0;
-}
-.components-border-style-control .components-border-style-control__buttons {
-  display: inline-flex;
-}
-.components-border-style-control .components-border-style-control__buttons .components-button.has-icon {
-  min-width: 30px;
-  height: 30px;
-  padding: 3px;
-  margin-left: 4px;
-}
-
 .block-editor-button-block-appender {
   display: flex;
   flex-direction: column;
@@ -1730,21 +1654,10 @@
   min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
-  display: flex;
-  gap: 8px;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  width: 12px;
-  height: 12px;
-  align-self: center;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
-  margin-right: 12px;
-}
-.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: none;
+.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;
 }
+
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
@@ -1755,45 +1668,59 @@
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
   margin-bottom: inherit;
 }
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
-  display: block;
-}
 
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+  width: 280px;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content > div {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__color-indicator {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-@media (min-width: 782px) {
-  .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-    margin-left: 156px !important;
-  }
-  .block-editor-panel-color-gradient-settings__dropdown-content.is-from-top .components-popover__content {
-    margin-top: -60px !important;
-  }
-  .block-editor-panel-color-gradient-settings__dropdown-content.is-from-bottom .components-popover__content {
-    margin-bottom: -60px !important;
-  }
+/**
+* The following styles replicate the separated border of the
+* `ItemGroup` component but allows for hidden items. This is because
+* to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+* must at least render a placeholder which would otherwise interfere
+* with the `:last-child` styles.
+*/
+.block-editor-tools-panel-color-gradient-settings__item {
+  padding: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
+.block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 24px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.block-editor-tools-panel-color-gradient-settings__item.last {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.block-editor-tools-panel-color-gradient-settings__item > div,
+.block-editor-tools-panel-color-gradient-settings__item > div > button {
+  border-radius: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
+.block-editor-tools-panel-color-gradient-settings__dropdown {
+  display: block;
+  padding: 0;
 }
-.block-editor-panel-color-gradient-settings__item .block-editor-panel-color-gradient-settings__color-indicator {
-  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+.block-editor-tools-panel-color-gradient-settings__dropdown > button {
+  height: 46px;
 }
-.block-editor-panel-color-gradient-settings__item.is-open {
+.block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1919,7 +1846,7 @@
   text-align: right;
 }
 
-.block-editor-duotone-control__popover > .components-popover__content > div {
+.block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
   width: 280px;
 }
@@ -1941,10 +1868,6 @@
   font-size: 12px;
 }
 
-.block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
-  margin-right: -14px;
-}
-
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2914,10 +2837,11 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
   margin-right: 0;
   border: none;
   box-shadow: none;
+  outline: none;
 }
 
 .block-editor-list-view-placeholder {
@@ -3072,6 +2996,27 @@
   width: 100%;
 }
 
+.block-editor-publish-date-time-picker__header {
+  margin-bottom: 1em;
+}
+
+.block-editor-publish-date-time-picker__heading {
+  font-size: 13px;
+  margin: 0;
+}
+
+.block-editor-publish-date-time-picker__reset {
+  height: 24px;
+  margin: 0;
+  text-decoration: underline;
+}
+
+[class].block-editor-publish-date-time-picker__close {
+  height: 24px;
+  min-width: 24px;
+  padding: 0;
+}
+
 .block-editor-responsive-block-control {
   margin-bottom: 28px;
   border-bottom: 1px solid #ccc;
@@ -3146,13 +3091,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   min-width: auto;
   margin-bottom: 8px;
   box-shadow: none;
-  border: 1px solid #1e1e1e;
-  border-radius: 2px;
-  background-color: #fff;
+  outline: none;
 }
-.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
-  border: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
@@ -3605,44 +3547,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.block-editor__border-box-control__popover .components-popover__content,
-.block-editor__border-box-control__popover-top .components-popover__content,
-.block-editor__border-box-control__popover-right .components-popover__content,
-.block-editor__border-box-control__popover-bottom .components-popover__content,
-.block-editor__border-box-control__popover-left .components-popover__content {
-  width: 282px;
-}
-
-@media (min-width: 782px) {
-  .block-editor__border-box-control__popover .components-popover__content,
-.block-editor__border-box-control__popover-left .components-popover__content {
-    margin-left: 52px !important;
-  }
-
-  .block-editor__border-box-control__popover-top .components-popover__content,
-.block-editor__border-box-control__popover-bottom .components-popover__content {
-    margin-left: 107px !important;
-  }
-
-  .block-editor__border-box-control__popover-right .components-popover__content {
-    margin-left: 162px !important;
-  }
-
-  .block-editor__border-box-control__popover.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-top.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-right.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-bottom.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-left.is-from-top .components-popover__content {
-    margin-top: -52px !important;
-  }
-  .block-editor__border-box-control__popover.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-top.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-right.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-bottom.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-left.is-from-bottom .components-popover__content {
-    margin-bottom: -52px !important;
-  }
-}
 .dimensions-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3660,15 +3564,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
   /**
-   * The following styles replicate the separated border of the
-   * `ItemGroup` component but allows for hidden items. This is because
-   * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
-   * must at least render a placeholder which would otherwise interfere
-   * with the `:last-child` styles.
-   */
-  /**
-   * The following few styles fix the layout and spacing for the due to the
-   * introduced wrapper element by the `Item` component.
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
    */
 }
 .color-block-support-panel .block-editor-contrast-checker {
@@ -3687,42 +3585,21 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item {
-  padding: 0;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
 .color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div,
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button {
-  border-radius: inherit;
-}
-.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator {
-  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown {
-  display: block;
-  padding: 0;
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown > button {
-  height: 46px;
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
+  margin-top: 0;
 }
-.color-block-support-panel .color-block-support-panel__item-group > div {
-  grid-column: span 2;
-  border-radius: inherit;
+
+.block-editor__padding-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
 }
 
 /**
@@ -3894,6 +3771,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
+  outline: none;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
   border-right: 1px solid #ccc;
@@ -4166,7 +4044,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-top: 1px solid #ddd;
 }
 
-.block-editor-inserter__popover.is-quick > .components-popover__content > div {
+.block-editor-inserter__popover.is-quick > .components-popover__content {
   padding: 0;
 }
 
@@ -4250,9 +4128,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-right: 8px;
 }
 
-.block-editor-post-preview__dropdown-content .components-popover__content {
-  overflow-y: visible;
-}
 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child {
   padding-bottom: 8px;
 }