@wordpress/block-editor 8.5.4 → 9.0.0

package/build-style/style-rtl.css

@@ -358,6 +358,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 +389,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,
@@ -502,6 +490,10 @@
  */
 .block-editor-block-list__insertion-point {
   position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
 }
 
 .block-editor-block-list__insertion-point-indicator {
@@ -541,7 +533,6 @@
   position: static;
 }
 
-.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .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 {
@@ -552,7 +543,6 @@
   min-width: 24px;
   height: 24px;
 }
-.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 .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 {
@@ -595,30 +585,6 @@
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-left-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar .block-editor-block-mover-button {
-  overflow: hidden;
-}
-.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
-  min-width: 24px;
-  width: 24px;
-}
-.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button svg {
-  min-width: 24px;
-}
-
-.block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button:focus::before {
-  right: 0 !important;
-  min-width: 0;
-  width: 100%;
-}
-@media (min-width: 600px) {
-  .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-up-button svg {
-    top: 5px;
-  }
-  .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-down-button svg {
-    bottom: 5px;
-  }
-}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -673,58 +639,15 @@
   padding: 0;
 }
 
-/**
- * Popovers.
- */
-.block-editor-block-list__insertion-point-popover.is-without-arrow {
-  z-index: 28;
-  position: absolute;
-  pointer-events: none;
-}
-.block-editor-block-list__insertion-point-popover.is-without-arrow * {
-  pointer-events: none;
-}
-.block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter {
-  pointer-events: all;
-}
-.block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter * {
-  pointer-events: all;
-}
-.block-editor-block-list__insertion-point-popover.is-without-arrow .components-popover__content.components-popover__content {
-  background: none;
-  border: none;
-  box-shadow: none;
-  overflow-y: visible;
-  margin-right: 0;
-}
-
 @keyframes hide-during-dragging {
   to {
     position: fixed;
     transform: translate(-9999px, 9999px);
   }
 }
-.components-popover.block-editor-block-list__block-popover {
-  z-index: 31;
-  position: absolute;
-}
-.components-popover.block-editor-block-list__block-popover .components-popover__content {
-  margin: 0 !important;
-  min-width: auto;
-  width: max-content;
-  background: none;
-  border: none;
-  box-shadow: none;
-  overflow-y: visible;
-  pointer-events: none;
-}
-.components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button,
-.components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar,
-.components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__empty-block-inserter {
+.components-popover.block-editor-block-list__block-popover .block-editor-block-list__block-selection-button,
+.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
   pointer-events: all;
-}
-.components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button,
-.components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar {
   margin-top: 12px;
   margin-bottom: 12px;
 }
@@ -740,47 +663,6 @@
   display: none;
 }
 
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown,
-.block-editor-block-toolbar .components-toolbar-group {
-  padding-right: 6px;
-  padding-left: 6px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar-group .components-button,
-.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon {
-  min-width: 36px;
-  padding-right: 6px;
-  padding-left: 6px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button svg,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon svg,
-.block-editor-block-toolbar .components-toolbar-group .components-button svg,
-.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon svg {
-  min-width: 24px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar-group .components-button::before,
-.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon::before {
-  right: 2px;
-  left: 2px;
-}
-
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -1083,138 +965,62 @@
   content: none !important;
 }
 
-.block-editor-block-mobile-toolbar {
-  display: flex;
-  flex-direction: row;
-  border-left: 1px solid #ddd;
-}
-.block-editor-block-mobile-toolbar .block-editor-block-mover-button {
-  width: 36px;
-  height: 36px;
-  border-radius: 2px;
-  padding: 3px;
-  margin: 0;
-  justify-content: center;
-  align-items: center;
-}
-.block-editor-block-mobile-toolbar .block-editor-block-mover-button .dashicon {
-  margin: auto;
-}
-.block-editor-block-mobile-toolbar .block-editor-block-mover {
+.block-editor-block-mover__move-button-container {
   display: flex;
-  margin-left: auto;
-}
-.block-editor-block-mobile-toolbar .block-editor-block-mover .block-editor-block-mover-button {
-  float: right;
-}
-
-.block-editor-block-mover-button__description {
-  display: none;
-}
-
-.block-editor-block-mover-button.has-icon {
-  padding: 0;
-}
-
-.block-editor-block-mover {
-  display: inline-flex;
-  flex-direction: row;
-}
-.block-editor-block-mover .block-editor-block-mover__move-button-container,
-.block-editor-block-mover .components-toolbar {
-  flex: 1;
-  flex-direction: row;
-  border-left: none !important;
   padding: 0;
+  border: none;
 }
 @media (min-width: 600px) {
-  .block-editor-block-mover .block-editor-block-mover__move-button-container,
-.block-editor-block-mover .components-toolbar {
+  .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
     flex-direction: column;
+    width: 36px;
   }
-}
-.block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container, .block-editor-block-mover.is-horizontal .components-toolbar {
-  flex-direction: row;
-}
-.block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button {
-  padding-left: 0;
-  padding-right: 0;
-  min-width: 36px;
-}
-@media (min-width: 600px) {
-  .block-editor-block-mover .block-editor-block-mover-button {
+  .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
     height: 24px;
-    width: 42px;
-    padding-left: 11px !important;
-    padding-right: 6px !important;
+    width: 100%;
+    min-width: 0 !important;
   }
-  .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button {
-    min-width: 42px;
+  .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
+    height: 100%;
+    width: 100%;
   }
-}
-@media (min-width: 600px) {
-  .block-editor-block-mover .block-editor-block-mover-button::before {
-    right: 8px !important;
-    left: 8px !important;
+  .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
+    top: 5px;
+    flex-shrink: 0;
   }
-}
-.block-editor-block-mover .block-editor-block-mover__drag-handle {
-  width: 24px;
-  cursor: grab;
-  min-width: 24px !important;
-  padding: 0 !important;
-}
-.block-editor-block-mover .block-editor-block-mover__drag-handle:focus::before {
-  right: 0 !important;
-  left: 0 !important;
-}
-@media (min-width: 600px) {
-  .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button,
-.block-editor-block-mover .components-toolbar .block-editor-block-mover-button {
-    margin: 0 0 0 auto;
+  .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
+    bottom: 5px;
+    flex-shrink: 0;
   }
-  .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-up-button::before,
-.block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-up-button::before {
-    bottom: 0;
-    height: calc(100% - 1px);
+  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container {
+    width: 48px;
   }
-  .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-down-button::before,
-.block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-down-button::before {
-    top: 0;
-    height: calc(100% - 1px);
+  .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 > *::before {
+    height: 100%;
+  }
+  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
+    right: 5px;
+  }
+  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
+    left: 5px;
   }
 }
-.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon {
-  height: 48px;
-  width: 24px;
-  padding-right: 0;
-  padding-left: 0;
-}
-.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon::before {
-  top: 1px;
-  bottom: 1px;
-  min-width: 0;
-  width: auto;
-  height: auto;
-}
-.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon svg {
-  margin-right: 0;
-  margin-left: -8px;
-  margin-bottom: 0;
-}
-.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon::before {
-  right: 0 !important;
-  left: 0 !important;
-}
-.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon svg {
-  margin-right: -8px;
-  margin-left: 0;
-  margin-top: 0;
-}
-.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon::before {
-  right: 0 !important;
-  left: 0 !important;
-  width: calc(100% + 1px);
+
+@media (min-width: 600px) {
+  .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-navigation__container {
@@ -1277,6 +1083,25 @@
   color: var(--wp-admin-theme-color);
 }
 
+.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;
+  min-width: auto;
+  width: max-content;
+  background: none;
+  border: none;
+  box-shadow: none;
+  overflow-y: visible;
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover .components-popover__content > * {
+  pointer-events: all;
+}
+
 .block-editor-block-preview__container {
   position: relative;
   width: 100%;
@@ -1383,7 +1208,6 @@
 
 .block-editor-block-switcher {
   position: relative;
-  padding: 0 6px;
 }
 .block-editor-block-switcher .components-button.components-dropdown-menu__toggle.has-icon.has-icon {
   min-width: 36px;
@@ -1422,7 +1246,6 @@
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
   display: flex;
-  padding: 6px 12px !important;
 }
 .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   margin-left: auto;
@@ -1806,11 +1629,13 @@
   align-items: flex-start;
 }
 .components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
-  width: calc(50% - 26px);
+  width: 110px;
   margin-bottom: 0;
+  margin-left: 8px;
+  flex-shrink: 0;
 }
 .components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
-  width: calc(50% - 26px);
+  flex: 1;
   margin-bottom: 0;
 }
 .components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-base-control__field {
@@ -1836,26 +1661,12 @@
 .components-border-radius-control .component-border-radius-control__linked-button.has-icon {
   display: flex;
   justify-content: center;
+  margin-right: 2px;
 }
 .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;
@@ -1984,15 +1795,13 @@
   display: none;
 }
 
-.block-editor-default-block-appender .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+.block-editor-default-block-appender .block-editor-inserter {
   position: absolute;
   top: 0;
   left: 0;
   line-height: 0;
 }
-.block-editor-default-block-appender .block-editor-inserter:disabled,
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
+.block-editor-default-block-appender .block-editor-inserter:disabled {
   display: none;
 }
 
@@ -3769,6 +3578,44 @@ 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;
 }
@@ -3851,6 +3698,19 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   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;
+}
+
 /**
  * Block Toolbar
  */
@@ -3910,19 +3770,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   margin-bottom: -1px;
 }
 
-.block-editor-block-toolbar__block-controls {
-  height: auto !important;
-  padding: 0 !important;
-  margin-right: -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;
   margin: 0 !important;
 }
-.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-  margin-right: -6px;
-}
 .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
   margin-right: -6px !important;
 }