@wordpress/block-editor 9.8.1-next.957ca95e4c.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,6 +160,11 @@
   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;
 }
@@ -170,10 +175,6 @@
 .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 {
@@ -189,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;
@@ -246,6 +245,13 @@
   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;
@@ -401,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,
@@ -497,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.
  */
@@ -639,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 {
@@ -899,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;
@@ -911,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;
@@ -1091,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;
@@ -1101,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;
@@ -1333,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 {
@@ -3569,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;
@@ -3586,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,
@@ -3598,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;
 }
@@ -3814,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 {
@@ -3872,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;
 }
@@ -3896,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;
@@ -3910,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 {
@@ -3928,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 {
@@ -3964,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.8.1-next.957ca95e4c.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.16.1-next.957ca95e4c.0",
-		"@wordpress/api-fetch": "^6.13.1-next.957ca95e4c.0",
-		"@wordpress/blob": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/blocks": "^11.15.1-next.957ca95e4c.0",
-		"@wordpress/components": "^20.0.2-next.957ca95e4c.0",
-		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
-		"@wordpress/data": "^7.0.1-next.957ca95e4c.0",
-		"@wordpress/date": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/dom": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
-		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/html-entities": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
-		"@wordpress/is-shallow-equal": "^4.16.1-next.957ca95e4c.0",
-		"@wordpress/keyboard-shortcuts": "^3.14.1-next.957ca95e4c.0",
-		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/notices": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/rich-text": "^5.14.1-next.957ca95e4c.0",
-		"@wordpress/shortcode": "^3.16.1-next.957ca95e4c.0",
-		"@wordpress/style-engine": "^0.15.1-next.957ca95e4c.0",
-		"@wordpress/token-list": "^2.16.1-next.957ca95e4c.0",
-		"@wordpress/url": "^3.17.1-next.957ca95e4c.0",
-		"@wordpress/warning": "^2.16.1-next.957ca95e4c.0",
-		"@wordpress/wordcount": "^3.16.1-next.957ca95e4c.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": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
+	"gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -1,140 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
-<ToolbarGroup
-  controls={
-    Array [
-      Object {
-        "align": "custom-left",
-        "icon": <SVG
+<div>
+  <div
+    class="components-toolbar"
+    icon="[object Object]"
+    label="Align"
+  >
+    <div>
+      <button
+        align="custom-left"
+        aria-label="My custom left"
+        aria-pressed="false"
+        class="components-button components-toolbar__control has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "My custom left",
-      },
-      Object {
-        "align": "custom-right",
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        align="custom-right"
+        aria-label="My custom right"
+        aria-pressed="true"
+        class="components-button components-toolbar__control is-pressed has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
           />
-        </SVG>,
-        "isActive": true,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "My custom right",
-      },
-    ]
-  }
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
+<div>
+  <div
+    class="components-dropdown components-dropdown-menu components-toolbar"
+    tabindex="-1"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Align"
+      class="components-button components-dropdown-menu__toggle has-icon"
+      data-toolbar-item="true"
+      type="button"
     >
-      <Path
-        d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
-      />
-    </SVG>
-  }
-  isCollapsed={true}
-  label="Align"
-  popoverProps={
-    Object {
-      "isAlternate": true,
-      "position": "bottom right",
-    }
-  }
-  toggleProps={
-    Object {
-      "describedBy": "Change text alignment",
-    }
-  }
-/>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
 `;
 
-exports[`AlignmentUI should match snapshot 1`] = `
-<ToolbarGroup
-  controls={
-    Array [
-      Object {
-        "align": "left",
-        "icon": <SVG
+exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
+<div>
+  <div
+    class="components-toolbar"
+    icon="[object Object]"
+    label="Align"
+  >
+    <div>
+      <button
+        align="left"
+        aria-label="Align text left"
+        aria-pressed="true"
+        class="components-button components-toolbar__control is-pressed has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
           />
-        </SVG>,
-        "isActive": true,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align text left",
-      },
-      Object {
-        "align": "center",
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        align="center"
+        aria-label="Align text center"
+        aria-pressed="false"
+        class="components-button components-toolbar__control has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align text center",
-      },
-      Object {
-        "align": "right",
-        "icon": <SVG
+        </svg>
+      </button>
+    </div>
+    <div>
+      <button
+        align="right"
+        aria-label="Align text right"
+        aria-pressed="false"
+        class="components-button components-toolbar__control has-icon"
+        data-toolbar-item="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          height="24"
           viewBox="0 0 24 24"
+          width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <Path
+          <path
             d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
           />
-        </SVG>,
-        "isActive": false,
-        "onClick": [Function],
-        "role": "menuitemradio",
-        "title": "Align text right",
-      },
-    ]
-  }
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
-      />
-    </SVG>
-  }
-  isCollapsed={true}
-  label="Align"
-  popoverProps={
-    Object {
-      "isAlternate": true,
-      "position": "bottom right",
-    }
-  }
-  toggleProps={
-    Object {
-      "describedBy": "Change text alignment",
-    }
-  }
-/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
 `;