@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.0

package/build-style/style.css

@@ -267,44 +267,6 @@
 /**
  * Block Toolbar when contextual.
  */
-.block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  left: 0;
-}
-@media (min-width: 783px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-.auto-fold .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0;
-}
-@media (min-width: 783px) {
-  .folded .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-
-body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0 !important;
-}
-
 .block-editor-block-contextual-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;
@@ -316,11 +278,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   border-right-color: #1e1e1e;
 }
 .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
   overflow: hidden;
   border: none;
   border-bottom: 1px solid #e0e0e0;
@@ -343,32 +300,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   background: linear-gradient(to right, #fff, transparent);
 }
 @media (min-width: 782px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
@@ -429,12 +360,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     height: 24px;
     top: -1px;
   }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 80px;
-  }
-  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 144px;
-  }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
     left: 0;
   }
@@ -449,12 +374,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     background-color: #ddd;
     position: relative;
   }
-  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 153.6px;
-  }
-  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-left: 268.8px;
-  }
   .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
     position: relative;
     top: -1px;
@@ -484,25 +403,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-bottom: -1px;
   }
 }
-@media (min-width: 782px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 180px);
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% + 40px - 180px);
-  }
-}
-@media (min-width: 960px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -963,7 +863,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
 }
-.block-editor-block-patterns-list__list-item[draggable=true] .block-editor-block-preview__container {
+.block-editor-block-patterns-list__list-item[draggable=true] {
   cursor: grab;
 }
 
@@ -977,20 +877,65 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   border-radius: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
-  padding-top: 8px;
-  font-size: 12px;
-  text-align: center;
+  text-align: left;
+  flex-grow: 1;
 }
 .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #1e1e1e;
 }
 .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) #1e1e1e;
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title {
-  color: var(--wp-admin-theme-color);
+.block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:hover .block-editor-block-preview__container, .block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:focus .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-block-synced-color), 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-details {
+  align-items: center;
+  margin-top: 8px;
+}
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper {
+  min-width: 24px;
+  height: 24px;
+}
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
+  fill: var(--wp-block-synced-color);
+}
+
+.block-editor-patterns__grid-pagination {
+  border-top: 1px solid #2f2f2f;
+  padding: 4px;
+}
+.block-editor-patterns__grid-pagination .components-button.is-tertiary {
+  width: auto;
+  height: 32px;
+  justify-content: center;
+}
+.block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+  color: #fff;
+  background-color: #757575;
+}
+
+.show-icon-labels .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .components-button {
+  width: auto;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .components-button span {
+  display: none;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
+  content: attr(aria-label);
 }
 
 .components-popover.block-editor-block-popover {
@@ -1100,13 +1045,13 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
+  box-shadow: inset 0 0 0 1px #ddd;
   display: inline-block;
   width: calc(50% - 4px);
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
   color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 1px #ccc;
+  box-shadow: inset 0 0 0 1px #ddd;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover {
   background-color: #1e1e1e;
@@ -1116,8 +1061,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
   word-break: break-all;
@@ -1929,7 +1873,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   position: relative;
 }
 
-.block-editor-link-control__search-input-container {
+.block-editor-link-control__search-input-container,
+.block-editor-link-control__search-input-wrapper {
   position: relative;
 }
 
@@ -1975,7 +1920,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__field input[type=text]:focus, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:focus {
   border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-link-control__field input[type=text]::-webkit-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-webkit-input-placeholder {
@@ -1993,6 +1938,16 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: -8px 16px 16px;
 }
 
+.block-editor-link-control__search-enter {
+  position: absolute;
+  right: 19px;
+  top: 3px;
+}
+.block-editor-link-control__search-enter svg {
+  position: relative;
+  top: -2px;
+}
+
 .block-editor-link-control__search-actions {
   display: flex;
   flex-direction: row-reverse;
@@ -2278,6 +2233,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   padding-left: 0;
   gap: 0;
 }
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
+  color: #1e1e1e;
+}
 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
   visibility: visible;
   transition: transform 0.1s ease;
@@ -2309,7 +2267,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   left: auto;
   bottom: auto;
   top: calc(50% - 16px / 2);
-  right: 16px;
+  right: 40px;
+}
+
+.block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
+  top: calc(50% + 16px / 4);
+  right: 12px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -2583,8 +2546,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
 }
-.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
-.block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock {
   line-height: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
@@ -3045,7 +3007,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-url-input__input[type=text]:focus {
   border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-url-input__input[type=text]::-webkit-input-placeholder {
@@ -3222,6 +3184,69 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-top: 8px;
 }
 
+.block-editor-hooks__block-hooks {
+  /**
+   * Since we're displaying the block icon alongside the block name,
+   * we need to right-align the toggle.
+   */
+  /**
+   * Un-reverse the flex direction for the toggle's label.
+   */
+}
+.block-editor-hooks__block-hooks .components-toggle-control .components-h-stack {
+  flex-direction: row-reverse;
+}
+.block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
+  flex-direction: row;
+}
+
+.block-editor-hooks__background__inspector-upload-container {
+  position: relative;
+}
+.block-editor-hooks__background__inspector-upload-container .components-drop-zone__content-icon {
+  display: none;
+}
+
+.block-editor-hooks__background__inspector-upload-container button.components-button,
+.block-editor-hooks__background__inspector-media-replace-container button.components-button {
+  color: #1e1e1e;
+  box-shadow: inset 0 0 0 1px #ccc;
+  width: 100%;
+  display: block;
+  height: 40px;
+}
+.block-editor-hooks__background__inspector-upload-container button.components-button:hover,
+.block-editor-hooks__background__inspector-media-replace-container button.components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
+.block-editor-hooks__background__inspector-upload-container button.components-button:focus,
+.block-editor-hooks__background__inspector-media-replace-container button.components-button:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.block-editor-hooks__background__inspector-upload-container .block-editor-hooks__background__inspector-media-replace-title,
+.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
+
+.block-editor-hooks__background__inspector-media-replace-container .components-dropdown {
+  display: block;
+}
+.block-editor-hooks__background__inspector-media-replace-container img {
+  width: 20px;
+  min-width: 20px;
+  aspect-ratio: 1;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  border-radius: 50% !important;
+}
+.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-readonly-logo-preview {
+  padding: 6px 12px;
+  display: flex;
+  height: 40px;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3330,6 +3355,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   grid-column: span 1;
 }
 
+.block-editor-block-rename-modal {
+  z-index: 1000001;
+}
+
 /**
  * Block Toolbar
  */
@@ -3776,12 +3805,18 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   background: var(--wp-admin-theme-color);
 }
 
-.block-editor-inserter__block-patterns-tabs-container {
+.block-editor-inserter__block-patterns-tabs-container,
+.block-editor-block-patterns-explorer__sidebar {
   height: 100%;
 }
-.block-editor-inserter__block-patterns-tabs-container nav {
+.block-editor-inserter__block-patterns-tabs-container nav,
+.block-editor-block-patterns-explorer__sidebar nav {
   height: 100%;
 }
+.block-editor-inserter__block-patterns-tabs-container .block-editor-block-patterns__source-filter select.components-select-control__input,
+.block-editor-block-patterns-explorer__sidebar .block-editor-block-patterns__source-filter select.components-select-control__input {
+  height: 40px;
+}
 
 .block-editor-inserter__block-patterns-tabs {
   display: flex;
@@ -3817,10 +3852,11 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-inserter__patterns-category-dialog .block-editor-block-patterns-list {
   margin-top: 24px;
 }
-.block-editor-inserter__patterns-category-dialog .block-editor-block-preview__container {
+
+.block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
 }
-.block-editor-inserter__patterns-category-dialog .block-editor-block-preview__container:hover {
+.block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
   box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
 }
 
@@ -3945,6 +3981,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-left: 280px;
   padding: 24px 0 32px;
 }
+.block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
+  width: 380px;
+}
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;
   grid-gap: 32px;
@@ -4184,6 +4223,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: 0;
 }
 
+.block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
+  height: 40px;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4272,13 +4315,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   z-index: 3;
 }
 
-.spacing-sizes-control__wrapper + .spacing-sizes-control__wrapper {
-  margin-top: 8px;
-}
-
 .spacing-sizes-control__header {
   height: 16px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 .spacing-sizes-control__dropdown {
@@ -4295,6 +4334,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex: 0 0 auto;
 }
 
+.spacing-sizes-control__icon {
+  margin-left: -4px;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.9.1-next.5a1d1283.0",
+	"version": "12.10.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/api-fetch": "^6.38.1-next.5a1d1283.0",
-		"@wordpress/blob": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/blocks": "^12.18.1-next.5a1d1283.0",
-		"@wordpress/commands": "^0.12.1-next.5a1d1283.0",
-		"@wordpress/components": "^26.0.1-next.5a1d1283.0",
-		"@wordpress/compose": "^6.18.1-next.5a1d1283.0",
-		"@wordpress/data": "^9.11.1-next.5a1d1283.0",
-		"@wordpress/date": "^4.41.1-next.5a1d1283.0",
-		"@wordpress/deprecated": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/dom": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/element": "^5.18.1-next.5a1d1283.0",
-		"@wordpress/escape-html": "^2.41.1-next.5a1d1283.0",
-		"@wordpress/hooks": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/html-entities": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/i18n": "^4.41.1-next.5a1d1283.0",
-		"@wordpress/icons": "^9.32.1-next.5a1d1283.0",
-		"@wordpress/is-shallow-equal": "^4.41.1-next.5a1d1283.0",
-		"@wordpress/keyboard-shortcuts": "^4.18.1-next.5a1d1283.0",
-		"@wordpress/keycodes": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/notices": "^4.9.1-next.5a1d1283.0",
-		"@wordpress/preferences": "^3.18.1-next.5a1d1283.0",
-		"@wordpress/private-apis": "^0.23.1-next.5a1d1283.0",
-		"@wordpress/rich-text": "^6.18.1-next.5a1d1283.0",
-		"@wordpress/shortcode": "^3.41.1-next.5a1d1283.0",
-		"@wordpress/style-engine": "^1.24.1-next.5a1d1283.0",
-		"@wordpress/token-list": "^2.41.1-next.5a1d1283.0",
-		"@wordpress/url": "^3.42.1-next.5a1d1283.0",
-		"@wordpress/warning": "^2.41.1-next.5a1d1283.0",
-		"@wordpress/wordcount": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/a11y": "^3.42.0",
+		"@wordpress/api-fetch": "^6.39.0",
+		"@wordpress/blob": "^3.42.0",
+		"@wordpress/blocks": "^12.19.0",
+		"@wordpress/commands": "^0.13.0",
+		"@wordpress/components": "^25.8.0",
+		"@wordpress/compose": "^6.19.0",
+		"@wordpress/data": "^9.12.0",
+		"@wordpress/date": "^4.42.0",
+		"@wordpress/deprecated": "^3.42.0",
+		"@wordpress/dom": "^3.42.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/escape-html": "^2.42.0",
+		"@wordpress/hooks": "^3.42.0",
+		"@wordpress/html-entities": "^3.42.0",
+		"@wordpress/i18n": "^4.42.0",
+		"@wordpress/icons": "^9.33.0",
+		"@wordpress/is-shallow-equal": "^4.42.0",
+		"@wordpress/keyboard-shortcuts": "^4.19.0",
+		"@wordpress/keycodes": "^3.42.0",
+		"@wordpress/notices": "^4.10.0",
+		"@wordpress/preferences": "^3.19.0",
+		"@wordpress/private-apis": "^0.24.0",
+		"@wordpress/rich-text": "^6.19.0",
+		"@wordpress/shortcode": "^3.42.0",
+		"@wordpress/style-engine": "^1.25.0",
+		"@wordpress/token-list": "^2.42.0",
+		"@wordpress/url": "^3.43.0",
+		"@wordpress/warning": "^2.42.0",
+		"@wordpress/wordcount": "^3.42.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

package/src/components/block-canvas/index.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockList from '../block-list';
+import EditorStyles from '../editor-styles';
+import Iframe from '../iframe';
+import WritingFlow from '../writing-flow';
+import { useMouseMoveTypingReset } from '../observe-typing';
+import { useClipboardHandler } from '../copy-handler';
+import { useBlockSelectionClearer } from '../block-selection-clearer';
+
+export function ExperimentalBlockCanvas( {
+	shouldIframe = true,
+	height = '300px',
+	children = <BlockList />,
+	styles,
+	contentRef: contentRefProp,
+	iframeProps,
+} ) {
+	const resetTypingRef = useMouseMoveTypingReset();
+	const copyHandler = useClipboardHandler();
+	const clearerRef = useBlockSelectionClearer();
+	const contentRef = useMergeRefs( [
+		copyHandler,
+		contentRefProp,
+		clearerRef,
+	] );
+
+	if ( ! shouldIframe ) {
+		return (
+			<>
+				<EditorStyles
+					styles={ styles }
+					scope=".editor-styles-wrapper"
+				/>
+				<WritingFlow
+					ref={ contentRef }
+					className="editor-styles-wrapper"
+					tabIndex={ -1 }
+					style={ { height } }
+				>
+					{ children }
+				</WritingFlow>
+			</>
+		);
+	}
+
+	return (
+		<Iframe
+			{ ...iframeProps }
+			ref={ resetTypingRef }
+			contentRef={ contentRef }
+			style={ {
+				width: '100%',
+				height,
+				...iframeProps?.style,
+			} }
+			name="editor-canvas"
+		>
+			<EditorStyles styles={ styles } />
+			{ children }
+		</Iframe>
+	);
+}
+
+/**
+ * BlockCanvas component is a component used to display the canvas of the block editor.
+ * What we call the canvas is an iframe containing the block list that you can manipulate.
+ * The component is also responsible of wiring up all the necessary hooks to enable
+ * the keyboard navigation across blocks in the editor and inject content styles into the iframe.
+ *
+ * @example
+ *
+ * ```jsx
+ * function MyBlockEditor() {
+ *   const [ blocks, updateBlocks ] = useState([]);
+ *   return (
+ *     <BlockEditorProvider
+ *       value={ blocks }
+ *       onInput={ updateBlocks }
+ *       onChange={ persistBlocks }
+ *      >
+ *        <BlockCanvas height="400px" />
+ *      </BlockEditorProvider>
+ *    );
+ * }
+ * ```
+ *
+ * @param {Object}    props          Component props.
+ * @param {string}    props.height   Canvas height, defaults to 300px.
+ * @param {Array}     props.styles   Content styles to inject into the iframe.
+ * @param {WPElement} props.children Content of the canvas, defaults to the BlockList component.
+ * @return {WPElement}               Block Breadcrumb.
+ */
+function BlockCanvas( { children, height, styles } ) {
+	return (
+		<ExperimentalBlockCanvas height={ height } styles={ styles }>
+			{ children }
+		</ExperimentalBlockCanvas>
+	);
+}
+
+export default BlockCanvas;

package/src/components/block-inspector/index.js

@@ -39,7 +39,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				getBlockName,
 				getBlockEditingMode,
 			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( [ topLevelLockedBlock ] ).filter(
+			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
 				( clientId ) =>
 					getBlockName( clientId ) !== 'core/list-item' &&
 					getBlockEditingMode( clientId ) === 'contentOnly'
@@ -300,6 +300,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Border' ) }
 					/>
 					<InspectorControls.Slot group="styles" />
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background' ) }
+					/>
 					<PositionControls />
 					<div>
 						<AdvancedControls />