@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/build-style/style.css

@@ -129,7 +129,7 @@
   max-height: 24px;
 }
 
-.block-editor-block-inspector p {
+.block-editor-block-inspector p:not(.components-base-control__help) {
   margin-top: 0;
 }
 .block-editor-block-inspector h2,
@@ -160,23 +160,21 @@
   text-align: center;
 }
 
+.block-editor-block-inspector__block-buttons-container {
+  border-top: 1px solid #e0e0e0;
+  padding: 16px;
+}
+
 .block-editor-block-styles .block-editor-block-list__block {
   margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
 /**
  * Cross-Block Selection
  */
 .block-editor-block-list__layout {
   position: relative;
 }
-.block-editor-block-list__layout.is-navigate-mode {
-  cursor: default;
-}
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .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 {
@@ -192,21 +190,19 @@
   border-radius: 1px;
   outline: 2px solid transparent;
 }
-.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-navigate-mode .block-editor-block-list__block.is-hovered::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .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 {
   box-shadow: 0 0 0 1px #fff;
 }
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;
 }
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 1px solid transparent;
@@ -233,6 +229,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;
@@ -241,8 +245,17 @@
   padding: 0;
 }
 
+.is-content-locked .block-editor-block-list__block {
+  pointer-events: none;
+}
+.is-content-locked .is-content-block {
+  pointer-events: initial;
+}
+
 .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 +267,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 +318,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;
@@ -381,6 +407,12 @@
   opacity: 1;
 }
 
+.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected, .is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected .block-editor-block-list__block,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected .block-editor-block-list__block {
+  opacity: 1;
+}
+
 .wp-block[data-align=left] > *,
 .wp-block[data-align=right] > *,
 .wp-block.alignleft,
@@ -477,6 +509,22 @@
   margin-bottom: auto;
 }
 
+/** Zoom Out mode styles **/
+.block-editor-iframe__body {
+  transition: all 0.3s;
+  transform-origin: top center;
+}
+.block-editor-iframe__body.is-zoomed-out {
+  margin: 100px 0;
+  transform: scale(0.45);
+}
+.block-editor-iframe__body.is-zoomed-out .wp-site-blocks > * + * {
+  margin-block-start: 2.5rem;
+}
+.block-editor-iframe__body.is-zoomed-out > .block-list-appender {
+  display: none;
+}
+
 /**
  * Insertion Point.
  */
@@ -619,6 +667,10 @@
 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
   padding: 0;
 }
+.block-editor-block-list__block-selection-button .block-editor-block-mover {
+  background: unset;
+  border: none;
+}
 
 @keyframes hide-during-dragging {
   to {
@@ -879,7 +931,10 @@
   margin: 0.67em 0;
 }
 
-.block-editor-block-content-overlay::before {
+.block-editor-block-list__block.has-block-overlay {
+  cursor: default;
+}
+.block-editor-block-list__block.has-block-overlay::before {
   content: "";
   position: absolute;
   top: 0;
@@ -891,10 +946,23 @@
   border-radius: 2px;
   z-index: 10;
 }
-.block-editor-block-content-overlay:hover:not(.is-dragging-blocks)::before {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+.block-editor-block-list__block.has-block-overlay::after {
+  content: none !important;
+}
+.block-editor-block-list__block.has-block-overlay:hover:not(.is-dragging-blocks)::before {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
+}
+.block-editor-block-list__block.has-block-overlay.is-selected:not(.is-dragging-blocks)::before {
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
 }
+.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
+  pointer-events: none;
+}
+.block-editor-iframe__body.is-zoomed-out .block-editor-block-list__block.has-block-overlay::before {
+  width: calc(100vw);
+  left: calc(( 100% - 100vw ) / 2);
+}
 
 .block-editor-block-draggable-chip-wrapper {
   position: absolute;
@@ -1071,6 +1139,7 @@
   z-index: 31;
   position: absolute;
   margin: 0 !important;
+  pointer-events: none;
 }
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
@@ -1081,7 +1150,6 @@
   outline: none;
   box-shadow: none;
   overflow-y: visible;
-  pointer-events: none;
 }
 .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
   pointer-events: all;
@@ -1313,8 +1381,9 @@
 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
   width: 300px;
   height: auto;
-  max-height: 500px;
-  padding: 16px;
+  max-height: calc(500px - 32px);
+  margin: 16px;
+  overflow: hidden;
 }
 
 .block-editor-block-switcher__preview-title {
@@ -1676,6 +1745,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;
 }
@@ -3199,38 +3286,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;
@@ -3563,7 +3618,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-hooks__layout-controls {
   display: flex;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit {
   display: flex;
@@ -3580,7 +3635,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 
 .block-editor-hooks__layout-controls-helptext {
+  color: #757575;
   font-size: 12px;
+  margin-bottom: 16px;
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -3592,6 +3649,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   margin-bottom: 8px;
 }
 
+.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
+  margin-bottom: 16px;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3600,11 +3661,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.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;
 }
@@ -3813,8 +3869,21 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   }
 }
 
-.block-editor-inserter__content {
+.block-editor-inserter__main-area {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 16px;
+  width: auto;
+}
+@media (min-width: 782px) {
+  .block-editor-inserter__main-area {
+    width: 350px;
+  }
+}
+.block-editor-inserter__main-area.show-as-tabs {
+  gap: 0;
 }
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
@@ -3871,17 +3940,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   overflow: visible;
 }
 
-.block-editor-inserter__main-area {
-  width: auto;
-  overflow-y: auto;
-  height: 100%;
-}
-@media (min-width: 782px) {
-  .block-editor-inserter__main-area {
-    width: 350px;
-  }
-}
-
 .block-editor-inserter__inline-elements {
   margin-top: -1px;
 }
@@ -3895,11 +3953,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 
 .block-editor-inserter__search {
-  background: #fff;
   padding: 16px 16px 0 16px;
-  position: sticky;
-  top: 0;
-  z-index: 1;
 }
 .block-editor-inserter__search .components-search-control__icon {
   right: 20px;
@@ -3909,14 +3963,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 
 .block-editor-inserter__tabs {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 .block-editor-inserter__tabs .components-tab-panel__tabs {
-  position: sticky;
-  top: 64px;
-  background: #fff;
-  z-index: 1;
   border-bottom: 1px solid #ddd;
 }
 .block-editor-inserter__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
@@ -3927,8 +3979,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  position: relative;
-  z-index: 0;
+  overflow-y: auto;
+}
+
+.block-editor-inserter__no-tab-container {
+  overflow-y: auto;
+  flex-grow: 1;
 }
 
 .block-editor-inserter__panel-header {
@@ -3963,11 +4019,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border: none;
 }
 
-.block-editor-inserter__block-list {
-  flex-grow: 1;
-  position: relative;
-}
-
 .block-editor-inserter__reusable-blocks-panel {
   position: relative;
   text-align: right;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.7.1-next.d6164808d3.0",
+	"version": "10.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/api-fetch": "^6.12.1-next.d6164808d3.0",
-		"@wordpress/blob": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/blocks": "^11.14.1-next.d6164808d3.0",
-		"@wordpress/components": "^20.0.1-next.d6164808d3.0",
-		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
-		"@wordpress/data": "^7.0.1-next.d6164808d3.0",
-		"@wordpress/date": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/dom": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
-		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/html-entities": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
-		"@wordpress/is-shallow-equal": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/keyboard-shortcuts": "^3.13.1-next.d6164808d3.0",
-		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/notices": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/rich-text": "^5.13.1-next.d6164808d3.0",
-		"@wordpress/shortcode": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/style-engine": "^0.14.1-next.d6164808d3.0",
-		"@wordpress/token-list": "^2.15.1-next.d6164808d3.0",
-		"@wordpress/url": "^3.16.1-next.d6164808d3.0",
-		"@wordpress/warning": "^2.15.1-next.d6164808d3.0",
-		"@wordpress/wordcount": "^3.15.1-next.d6164808d3.0",
+		"@wordpress/a11y": "^3.17.0",
+		"@wordpress/api-fetch": "^6.14.0",
+		"@wordpress/blob": "^3.17.0",
+		"@wordpress/blocks": "^11.16.0",
+		"@wordpress/components": "^21.0.0",
+		"@wordpress/compose": "^5.15.0",
+		"@wordpress/data": "^7.1.0",
+		"@wordpress/date": "^4.17.0",
+		"@wordpress/deprecated": "^3.17.0",
+		"@wordpress/dom": "^3.17.0",
+		"@wordpress/element": "^4.15.0",
+		"@wordpress/hooks": "^3.17.0",
+		"@wordpress/html-entities": "^3.17.0",
+		"@wordpress/i18n": "^4.17.0",
+		"@wordpress/icons": "^9.8.0",
+		"@wordpress/is-shallow-equal": "^4.17.0",
+		"@wordpress/keyboard-shortcuts": "^3.15.0",
+		"@wordpress/keycodes": "^3.17.0",
+		"@wordpress/notices": "^3.17.0",
+		"@wordpress/rich-text": "^5.15.0",
+		"@wordpress/shortcode": "^3.17.0",
+		"@wordpress/style-engine": "^0.16.0",
+		"@wordpress/token-list": "^2.17.0",
+		"@wordpress/url": "^3.18.0",
+		"@wordpress/warning": "^2.17.0",
+		"@wordpress/wordcount": "^3.17.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
+	"gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
 }