@wordpress/block-editor 11.8.0 → 12.0.0

package/build-style/content-rtl.css

@@ -149,7 +149,7 @@
 .has-multi-selection .block-editor-block-list__layout::selection {
   background: transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+.block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
   border-radius: 2px;
   overflow: hidden;
 }
@@ -178,15 +178,16 @@
     animation-delay: 0s;
   }
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
+  box-shadow: none;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
   outline: none;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
   position: absolute;
@@ -200,6 +201,8 @@
   border-radius: 1px;
   outline: 2px solid transparent;
 }
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }

package/build-style/content.css

@@ -149,7 +149,7 @@
 .has-multi-selection .block-editor-block-list__layout::selection {
   background: transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+.block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
   border-radius: 2px;
   overflow: hidden;
 }
@@ -178,15 +178,16 @@
     animation-delay: 0s;
   }
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
+  box-shadow: none;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
   outline: none;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
   position: absolute;
@@ -200,6 +201,8 @@
   border-radius: 1px;
   outline: 2px solid transparent;
 }
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }

package/build-style/style-rtl.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -270,6 +271,44 @@
 /**
  * Block Toolbar when contextual.
  */
+.block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  right: 0;
+}
+@media (min-width: 783px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    right: 160px;
+  }
+}
+
+.auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+    right: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+    right: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .block-editor-block-contextual-toolbar.is-fixed {
+  right: 0;
+}
+@media (min-width: 783px) {
+  .folded .block-editor-block-contextual-toolbar.is-fixed {
+    right: 36px;
+  }
+}
+
+body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+  right: 0 !important;
+}
+
 .block-editor-block-contextual-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;
@@ -283,10 +322,9 @@
 .block-editor-block-contextual-toolbar.is-fixed {
   position: sticky;
   top: 0;
-  width: 100%;
   z-index: 31;
-  min-height: 48px;
   display: block;
+  width: 100%;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
@@ -295,6 +333,119 @@
 .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 {
+    margin-right: 64px;
+    position: fixed;
+    top: 40px;
+    min-height: initial;
+    border-bottom: none;
+    display: flex;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+    margin-right: 216px;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 120px;
+    top: 8px;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+    margin-right: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+    border: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: absolute;
+    right: 44px;
+    top: -1px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    border: none;
+  }
+  .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: -12px;
+    height: 24px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 64px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-right: 384px;
+  }
+  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 128px;
+  }
+  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-right: 448px;
+  }
+  .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;
+  }
+}
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    width: 100%;
+  }
+}
+@media (min-width: 960px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    width: initial;
+  }
+}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -660,10 +811,12 @@
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > * {
     width: 24px;
     min-width: 0 !important;
-    padding-right: 0 !important;
-    padding-left: 0 !important;
     overflow: hidden;
   }
+  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button {
+    padding-right: 0;
+    padding-left: 0;
+  }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     right: 5px;
   }
@@ -676,10 +829,12 @@
   .block-editor-block-mover__drag-handle {
     width: 24px;
     min-width: 0 !important;
-    padding-right: 0 !important;
-    padding-left: 0 !important;
     overflow: hidden;
   }
+  .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon.has-icon {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 .components-button.block-editor-block-mover-button::before {
@@ -1444,15 +1599,18 @@
   width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
   display: block;
   padding: 0;
 }
-.block-editor-global-styles-effects-panel__shadow-dropdown > button {
+.block-editor-global-styles-filters-panel__dropdown button,
+.block-editor-global-styles-effects-panel__shadow-dropdown button {
   width: 100%;
   padding: 8px;
 }
-.block-editor-global-styles-effects-panel__shadow-dropdown > button.is-open {
+.block-editor-global-styles-filters-panel__dropdown button.is-open,
+.block-editor-global-styles-effects-panel__shadow-dropdown button.is-open {
   background-color: #f0f0f0;
 }
 
@@ -2131,6 +2289,12 @@
 .block-editor-list-view-leaf {
   position: relative;
 }
+.block-editor-list-view-leaf .components-button[aria-expanded=true] {
+  color: #1e1e1e;
+}
+.block-editor-list-view-leaf .components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-list-view-leaf.is-selected td {
   background: var(--wp-admin-theme-color);
 }
@@ -2187,16 +2351,16 @@
 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
   border-top-left-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:first-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
   border-top-right-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:last-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
   border-top-left-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:first-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
   border-bottom-right-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:last-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
   border-bottom-left-radius: 2px;
 }
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
@@ -2464,25 +2628,25 @@
   visibility: hidden;
 }
 
-.block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
   visibility: visible;
   transition: transform 0.2s ease;
   transform: rotate(-90deg);
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg {
+  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 
-.block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
   visibility: visible;
   transform: rotate(0deg);
   transition: transform 0.2s ease;
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg {
+  .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
@@ -3176,6 +3340,30 @@
   border-left: none;
 }
 
+@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.has-parent:not(.is-fixed) {
   margin-right: calc(48px + 8px);
 }
@@ -3183,20 +3371,6 @@
   margin-right: 0;
 }
 
-.block-editor-block-parent-selector {
-  position: absolute;
-  top: -1px;
-  right: calc(-48px - 8px - 1px);
-}
-.show-icon-labels .block-editor-block-parent-selector {
-  position: relative;
-  right: auto;
-  top: auto;
-  margin-top: -1px;
-  margin-right: -1px;
-  margin-bottom: -1px;
-}
-
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 24px !important;
@@ -3245,13 +3419,27 @@
 .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
+  min-width: 0 !important;
+}
+.show-icon-labels .block-editor-block-parent-selector__button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
   width: 0;
 }
-.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+.show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
 }
+.show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
+.show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+  padding-right: 8px;
+  padding-left: 8px;
+}
 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-right: 1px solid #1e1e1e;
   margin-right: 6px;
@@ -3261,13 +3449,9 @@
 .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-button {
-  padding-right: 8px !important;
-  padding-left: 8px !important;
-}
-.show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
-  padding-right: 12px !important;
-  padding-left: 12px !important;
+.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;
@@ -3281,15 +3465,8 @@
   .show-icon-labels .block-editor-block-mover__move-button-container {
     border-right: 1px solid #1e1e1e;
   }
-  .show-icon-labels .block-editor-block-mover__move-button-container::before {
-    content: "";
-    display: block;
-    height: 1px;
-    background: #1e1e1e;
-    order: 2;
-  }
   .show-icon-labels .is-down-button.is-down-button.is-down-button {
-    order: 3;
+    order: 2;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
     background: #ddd;