@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

package/build-style/style-rtl.css

@@ -164,9 +164,6 @@
   margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
 /**
  * Cross-Block Selection
  */
@@ -233,6 +230,14 @@
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
   border-color: var(--wp-admin-theme-color);
 }
+.has-multi-selection .block-editor-block-list__layout {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.block-editor-block-list__layout [class^=components-] {
+  -webkit-user-select: text;
+          user-select: text;
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
   opacity: 0;
@@ -243,6 +248,8 @@
 
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
+  -webkit-user-select: text;
+          user-select: text;
   overflow-wrap: break-word;
   /**
    * Notices
@@ -254,6 +261,12 @@
   * Block styles and alignments
   */
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
+  height: 0;
+}
+.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 {
+  height: auto;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -299,7 +312,14 @@
   bottom: 0;
   right: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+  box-shadow: 0 0 0 0 transparent;
+  transition: box-shadow 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-list__layout .block-editor-block-list__block::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
@@ -1676,6 +1696,24 @@
   color: #000;
 }
 
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+  pointer-events: none;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  border: 1px dashed currentColor;
+  border-radius: 2px;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+  visibility: hidden;
+}
+
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
@@ -1878,9 +1916,6 @@
 .block-editor-date-format-picker__custom-format-select-control.components-base-control {
   margin-bottom: 0;
 }
-.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
-  width: 100%;
-}
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
@@ -1900,9 +1935,6 @@
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
 }
-.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
-  margin: 16px 0 12px;
-}
 .block-editor-duotone-control__popover .components-circular-option-picker__swatches {
   display: grid;
   grid-template-columns: repeat(6, 28px);
@@ -1919,9 +1951,6 @@
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control {
-  margin-bottom: 24px;
-}
 .components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2799,14 +2828,20 @@
   width: 100%;
   transform: translateY(-50%);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
+  position: relative;
+  max-width: min(110px, 40%);
+  width: 100%;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
+  position: absolute;
+  left: 0;
+  transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
-  display: inline-block;
   padding: 2px 6px;
-  max-width: min(100px, 40%);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
@@ -2952,6 +2987,7 @@
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
+  margin: 0;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
   margin-bottom: 0;
@@ -3201,38 +3237,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   z-index: 100000;
 }
 
-.block-editor-text-transform-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-transform-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-left: 4px;
-}
-
-.block-editor-text-decoration-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-decoration-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-left: 4px;
-}
-
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-right: -8px;
@@ -3301,9 +3305,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover .block-editor-url-input .components-spinner,
 .block-editor-url-input .components-spinner {
   position: absolute;
-  left: 8px 8px 8px 12px;
-  bottom: 8px 8px 8px 12px8px1;
   margin: 0;
+  top: calc(50% - 16px / 2);
+  left: 8px;
 }
 
 .block-editor-url-input__input[type=text] {
@@ -3499,10 +3503,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
   margin-bottom: 0;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
-  bottom: 8px 8px 8px 12px1;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3606,12 +3606,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-appearance-control,
-.typography-block-support-panel .components-font-size-picker__controls,
-.typography-block-support-panel .block-editor-text-decoration-control__buttons,
-.typography-block-support-panel .block-editor-text-transform-control__buttons {
-  margin-bottom: 0;
-}
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4226,6 +4220,108 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   }
 }
 
+.tools-panel-item-spacing {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-row-gap: 4px;
+}
+
+.component-spacing-sizes-control {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  width: 100%;
+  display: contents;
+}
+.component-spacing-sizes-control legend {
+  padding: 0;
+  grid-column: 1/1;
+  grid-row: 1/1;
+  align-self: center;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
+  grid-column: 1/1;
+  min-height: 30px;
+  justify-content: left;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
+  margin-top: 0;
+  margin-right: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  color: #757575;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  grid-column: 2/2;
+  justify-self: left;
+  grid-row: 1/1;
+  align-self: center;
+  margin-right: 4px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
+  grid-column: 2/2;
+  grid-row: 1/1;
+  justify-self: end;
+  margin-left: 4px;
+  padding: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
+  grid-column: 3/3;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+}
+.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
+  grid-column: 3/3;
+  grid-row: 1/1;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
+  grid-column: span 2;
+  margin-right: 8px;
+  padding-left: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+  width: 124px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
+  grid-column: span 3;
+  padding-left: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-range-control__wrapper {
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control .components-range-control__mark {
+  height: 4px;
+  width: 3px;
+  background-color: #fff;
+  z-index: 1;
+}
+.component-spacing-sizes-control .components-range-control__marks {
+  margin-top: 17px;
+}
+.component-spacing-sizes-control .components-range-control__marks :first-child {
+  display: none;
+}
+.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+  z-index: 3;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  margin-left: 4px;
+  grid-column: 1/1;
+  justify-self: left;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
+  grid-column: span 3;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/build-style/style.css

@@ -164,9 +164,6 @@
   margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
 /**
  * Cross-Block Selection
  */
@@ -233,6 +230,14 @@
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
   border-color: var(--wp-admin-theme-color);
 }
+.has-multi-selection .block-editor-block-list__layout {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.block-editor-block-list__layout [class^=components-] {
+  -webkit-user-select: text;
+          user-select: text;
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
   opacity: 0;
@@ -243,6 +248,8 @@
 
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
+  -webkit-user-select: text;
+          user-select: text;
   overflow-wrap: break-word;
   /**
    * Notices
@@ -254,6 +261,12 @@
   * Block styles and alignments
   */
 }
+.block-editor-block-list__layout .block-editor-block-list__block.is-partially-selected::after {
+  height: 0;
+}
+.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 {
+  height: auto;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -299,7 +312,14 @@
   bottom: 0;
   left: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+  box-shadow: 0 0 0 0 transparent;
+  transition: box-shadow 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-list__layout .block-editor-block-list__block::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
   min-height: 48px;
@@ -1676,6 +1696,24 @@
   color: #000;
 }
 
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+  pointer-events: none;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  border: 1px dashed currentColor;
+  border-radius: 2px;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+  visibility: hidden;
+}
+
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
@@ -1878,9 +1916,6 @@
 .block-editor-date-format-picker__custom-format-select-control.components-base-control {
   margin-bottom: 0;
 }
-.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
-  width: 100%;
-}
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
@@ -1900,9 +1935,6 @@
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
 }
-.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
-  margin: 16px 0 12px;
-}
 .block-editor-duotone-control__popover .components-circular-option-picker__swatches {
   display: grid;
   grid-template-columns: repeat(6, 28px);
@@ -1919,9 +1951,6 @@
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control {
-  margin-bottom: 24px;
-}
 .components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2799,14 +2828,20 @@
   width: 100%;
   transform: translateY(-50%);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
+  position: relative;
+  max-width: min(110px, 40%);
+  width: 100%;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
-  display: inline-block;
   padding: 2px 6px;
-  max-width: min(100px, 40%);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
@@ -2952,6 +2987,7 @@
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
+  margin: 0;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
   margin-bottom: 0;
@@ -3201,38 +3237,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   z-index: 100000;
 }
 
-.block-editor-text-transform-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-transform-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-right: 4px;
-}
-
-.block-editor-text-decoration-control {
-  flex: 0 0 50%;
-}
-.block-editor-text-decoration-control legend {
-  margin-bottom: 8px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons {
-  display: inline-flex;
-  margin-bottom: 24px;
-}
-.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon {
-  min-width: 24px;
-  padding: 0;
-  margin-right: 4px;
-}
-
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-left: -8px;
@@ -3301,9 +3305,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover .block-editor-url-input .components-spinner,
 .block-editor-url-input .components-spinner {
   position: absolute;
-  right: 8px 8px 8px 12px;
-  bottom: 8px 8px 8px 12px8px1;
   margin: 0;
+  top: calc(50% - 16px / 2);
+  right: 8px;
 }
 
 .block-editor-url-input__input[type=text] {
@@ -3499,10 +3503,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
   margin-bottom: 0;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
-  bottom: 8px 8px 8px 12px1;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3606,12 +3606,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-appearance-control,
-.typography-block-support-panel .components-font-size-picker__controls,
-.typography-block-support-panel .block-editor-text-decoration-control__buttons,
-.typography-block-support-panel .block-editor-text-transform-control__buttons {
-  margin-bottom: 0;
-}
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4226,6 +4220,108 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   }
 }
 
+.tools-panel-item-spacing {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-row-gap: 4px;
+}
+
+.component-spacing-sizes-control {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  width: 100%;
+  display: contents;
+}
+.component-spacing-sizes-control legend {
+  padding: 0;
+  grid-column: 1/1;
+  grid-row: 1/1;
+  align-self: center;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
+  grid-column: 1/1;
+  min-height: 30px;
+  justify-content: left;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  color: #757575;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  grid-column: 2/2;
+  justify-self: left;
+  grid-row: 1/1;
+  align-self: center;
+  margin-left: 4px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
+  grid-column: 2/2;
+  grid-row: 1/1;
+  justify-self: end;
+  margin-right: 4px;
+  padding: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
+  grid-column: 3/3;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+}
+.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
+  grid-column: 3/3;
+  grid-row: 1/1;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
+  grid-column: span 2;
+  margin-left: 8px;
+  padding-right: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+  width: 124px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
+  grid-column: span 3;
+  padding-right: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-range-control__wrapper {
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control .components-range-control__mark {
+  height: 4px;
+  width: 3px;
+  background-color: #fff;
+  z-index: 1;
+}
+.component-spacing-sizes-control .components-range-control__marks {
+  margin-top: 17px;
+}
+.component-spacing-sizes-control .components-range-control__marks :first-child {
+  display: none;
+}
+.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+  z-index: 3;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  margin-right: 4px;
+  grid-column: 1/1;
+  justify-self: left;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
+  grid-column: span 3;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;