@wordpress/block-editor 13.4.0 → 14.1.0

package/build-style/style-rtl.css

@@ -34,10 +34,13 @@
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
 /**
- * Dimensions.
+ * Radius scale.
  */
 /**
- * Shadows.
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -110,6 +113,9 @@
 .block-editor-autocompleters__block .block-editor-block-icon {
   margin-left: 8px;
 }
+.block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
+  color: inherit !important;
+}
 
 .block-editor-autocompleters__link {
   white-space: nowrap;
@@ -128,6 +134,13 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
+  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  iframe[name=editor-canvas] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-block-icon {
@@ -1403,14 +1416,6 @@ iframe[name=editor-canvas] {
   flex: 1;
   margin-left: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
-  height: 40px;
-  display: flex;
-  align-items: center;
-}
-.components-border-radius-control .components-border-radius-control__wrapper > span {
-  flex: 0 0 auto;
-}
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
   display: grid;
   gap: 16px;
@@ -1653,6 +1658,16 @@ iframe[name=editor-canvas] {
 .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__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
+  margin: 0;
+}
 
 .block-editor-global-styles-background-panel__image-preview-content,
 .block-editor-global-styles-background-panel__dropdown-toggle {
@@ -1706,10 +1721,6 @@ iframe[name=editor-canvas] {
   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%;
@@ -1723,12 +1734,6 @@ iframe[name=editor-canvas] {
   content: none;
 }
 
-.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;
 }
@@ -1826,7 +1831,6 @@ iframe[name=editor-canvas] {
 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
   width: 24px;
   min-width: 0 !important;
-  overflow: hidden;
   padding-right: 0;
   padding-left: 0;
 }
@@ -1870,7 +1874,7 @@ iframe[name=editor-canvas] {
     justify-content: space-around;
   }
   .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
-    height: 20px;
+    height: 20px !important;
     width: 100%;
     min-width: 0 !important;
   }
@@ -1884,13 +1888,43 @@ iframe[name=editor-canvas] {
   }
 }
 
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
-  border-left: 1px solid #757575;
-  padding-left: 12px;
+@media (min-width: 600px) {
+  .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
+    height: 40px;
+    position: relative;
+    top: -5px;
+  }
 }
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-  border-right: 1px solid #757575;
-  padding-right: 12px;
+
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
+  position: relative;
+}
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    background: #e0e0e0;
+    position: absolute;
+    top: 0;
+  }
+}
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    background: #1e1e1e;
+  }
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
+  padding-left: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
+  left: 0;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
+  padding-right: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
+  right: 0;
 }
 @media (min-width: 600px) {
   .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
@@ -1910,6 +1944,18 @@ iframe[name=editor-canvas] {
     background: #1e1e1e;
   }
 }
+.show-icon-labels .block-editor-grid-item-mover-button {
+  white-space: nowrap;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
+  height: 24px;
+  background: #ddd;
+  top: 4px;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
+  background: #ddd;
+  width: calc(100% - 24px);
+}
 
 .block-editor-height-control {
   border: 0;
@@ -2033,6 +2079,8 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }
 
 .show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
@@ -3131,19 +3179,6 @@ iframe[name=editor-canvas] {
   content: attr(aria-label);
 }
 
-.block-editor-segmented-text-control {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.block-editor-segmented-text-control .block-editor-segmented-text-control__buttons {
-  padding: 4px 0;
-  display: flex;
-}
-.block-editor-segmented-text-control .components-button.has-icon {
-  margin-left: 4px;
-}
-
 .block-editor-skip-to-selected-block {
   position: absolute;
   top: -9999em;
@@ -3165,17 +3200,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar {
+  background-color: #fff;
   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;
@@ -3192,20 +3223,7 @@ iframe[name=editor-canvas] {
 }
 
 .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 {
@@ -3496,10 +3514,6 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-  color: #757575;
-}
-
 .block-editor-hooks__block-hooks {
   /**
    * Since we're displaying the block icon alongside the block name,
@@ -3510,6 +3524,7 @@ iframe[name=editor-canvas] {
    */
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
   flex-direction: row-reverse;
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
@@ -3521,6 +3536,18 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
+div.block-editor-bindings__panel {
+  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+}
+div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
+  color: inherit;
+}
+
+.block-editor-bindings__popover .block-editor-bindings__source-label {
+  grid-column: 2;
+  margin: 8px 0;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3859,6 +3886,11 @@ iframe[name=editor-canvas] {
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3916,6 +3948,11 @@ iframe[name=editor-canvas] {
   position: relative;
   overflow: visible;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__menu.show-panel {
+    width: 630px;
+  }
+}
 
 .block-editor-inserter__inline-elements {
   margin-top: -1px;
@@ -4110,14 +4147,13 @@ iframe[name=editor-canvas] {
   .block-editor-inserter__category-panel {
     border-right: 1px solid #e0e0e0;
     padding: 0;
-    right: 100%;
-    width: 300px;
+    right: 350px;
+    width: 280px;
     position: absolute;
     top: -1px;
     height: calc(100% + 1px);
     background: #f0f0f0;
     border-top: 1px solid #e0e0e0;
-    box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.133);
   }
   .block-editor-inserter__category-panel .block-editor-inserter__media-list,
 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
@@ -4446,9 +4482,6 @@ iframe[name=editor-canvas] {
     height: 100%;
   }
 }
-.block-editor-inserter__menu.is-zoom-out .block-editor-inserter__category-panel {
-  box-shadow: none;
-}
 
 @media (max-width: 959px) {
   .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
@@ -4471,32 +4504,39 @@ iframe[name=editor-canvas] {
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
+.spacing-sizes-control .is-marked .components-range-control__track {
+  transition: width ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__track {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+  transition: right ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
-  height: 40px;
-  /* Vertically center the RangeControl until it has true 40px height. */
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-  flex: 1;
-}
-.spacing-sizes-control .spacing-sizes-control__range-control > .components-base-control__field,
-.spacing-sizes-control .spacing-sizes-control__custom-value-range > .components-base-control__field {
-  /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
 .spacing-sizes-control .components-range-control__mark {
+  transform: translateX(50%);
   height: 4px;
-  width: 3px;
+  width: 2px;
   background-color: #fff;
   z-index: 1;
+  top: -4px;
 }
 .spacing-sizes-control .components-range-control__marks {
   margin-top: 17px;
 }
-.spacing-sizes-control .components-range-control__marks :first-child {
-  display: none;
-}
 .spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }