@wordpress/block-editor 12.17.0 → 12.18.0

package/build-style/style.css

@@ -98,7 +98,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -125,10 +125,17 @@
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
-  background-color: #fff;
   display: block;
 }
 
+iframe[name=editor-canvas]:not(.has-history) {
+  background-color: #fff;
+}
+
+iframe[name=editor-canvas].has-history {
+  padding: 48px 48px 0;
+}
+
 .block-editor-block-icon {
   display: flex;
   align-items: center;
@@ -380,14 +387,14 @@ iframe[name=editor-canvas] {
   padding-left: 6px;
   background-color: #fff;
 }
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
-  position: static;
-  margin-top: -1px;
+  position: relative;
+  left: auto;
   margin-left: -1px;
-  margin-bottom: -1px;
-}
-.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
-  position: static;
 }
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
@@ -1037,10 +1044,6 @@ iframe[name=editor-canvas] {
   display: none;
 }
 
-.show-icon-labels .block-editor-block-toolbar .block-editor-block-switcher .components-button.has-icon::after {
-  font-size: 14px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
   display: flex;
 }
@@ -1177,6 +1180,12 @@ iframe[name=editor-canvas] {
   cursor: pointer;
 }
 
+.block-editor-block-switcher__no-transforms {
+  color: #757575;
+  padding: 6px 8px;
+  margin: 0;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -1492,10 +1501,6 @@ iframe[name=editor-canvas] {
   flex-shrink: 0;
 }
 
-.block-editor-contrast-checker > .components-notice {
-  margin: 0;
-}
-
 .block-editor-date-format-picker {
   margin-bottom: 16px;
 }
@@ -1809,10 +1814,6 @@ iframe[name=editor-canvas] {
   position: relative;
 }
 
-.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
-  flex: 1;
-}
-
 .block-editor-link-control__field {
   margin: 16px;
 }
@@ -1867,6 +1868,9 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__field input[type=text]:-ms-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
+.has-actions .block-editor-link-control__field input[type=text], .has-actions .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
+  padding-right: 16px;
+}
 
 .block-editor-link-control__search-error {
   margin: -8px 16px 16px;
@@ -1955,10 +1959,14 @@ iframe[name=editor-canvas] {
   flex-direction: row;
   align-items: flex-start;
   margin-right: 8px;
+  gap: 8px;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-info {
+  color: #757575;
+  line-height: 1.1;
+  font-size: 12px;
   word-break: break-all;
 }
 .block-editor-link-control__search-item.is-preview .block-editor-link-control__search-item-header {
@@ -1971,14 +1979,24 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__search-item.is-url-title .block-editor-link-control__search-item-title {
   word-break: break-all;
 }
+.block-editor-link-control__search-item .block-editor-link-control__search-item-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 4px;
+}
+.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+  background-color: #f0f0f0;
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
-  margin-right: 8px;
-  max-height: 24px;
   flex-shrink: 0;
-  width: 24px;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon img {
   width: 16px;
@@ -1989,10 +2007,13 @@ iframe[name=editor-canvas] {
   max-height: 32px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  display: block;
-  font-weight: 500;
-  position: relative;
-  line-height: 24px;
+  border-radius: 2px;
+  line-height: 1.1;
+}
+.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
+  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));
+  outline: 2px solid transparent;
+  text-decoration: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 600;
@@ -2005,51 +2026,6 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title svg {
   display: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description {
-  padding-top: 12px;
-  margin: 0;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder {
-  margin-top: 12px;
-  padding-top: 0;
-  height: 28px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder::before, .block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder::after {
-  display: block;
-  content: "";
-  height: 0.7em;
-  width: 100%;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description .components-text {
-  font-size: 0.9em;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-image {
-  display: flex;
-  width: 100%;
-  background-color: #f0f0f0;
-  justify-content: center;
-  height: 140px;
-  max-height: 140px;
-  overflow: hidden;
-  border-radius: 2px;
-  margin-top: 12px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-image.is-placeholder {
-  background-color: #f0f0f0;
-  border-radius: 3px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
-}
 
 .block-editor-link-control__search-item-top {
   display: flex;
@@ -2058,19 +2034,6 @@ iframe[name=editor-canvas] {
   align-items: center;
 }
 
-.block-editor-link-control__search-item-bottom {
-  transition: opacity 1.5s;
-  width: 100%;
-}
-
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-description::before, .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-description::after {
-  animation: loadingpulse 1s linear infinite;
-  animation-delay: 0.5s;
-}
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-image {
-  animation: loadingpulse 1s linear infinite;
-  animation-delay: 0.5s;
-}
 .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon svg,
 .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon img {
   opacity: 0;
@@ -2223,9 +2186,13 @@ iframe[name=editor-canvas] {
   margin: -12px -6px 0;
   width: calc(100% + 12px);
 }
+.block-editor-list-view-tree.is-dragging tbody {
+  pointer-events: none;
+}
 
 .block-editor-list-view-leaf {
   position: relative;
+  transform: translateY(0);
 }
 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
   cursor: grab;
@@ -2303,6 +2270,72 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
   border-radius: 0;
 }
+.block-editor-list-view-leaf.is-displacement-normal {
+  transition: transform 0.2s;
+  transform: translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-displacement-normal {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-displacement-up {
+  transition: transform 0.2s;
+  transform: translateY(-36px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-displacement-up {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-displacement-down {
+  transition: transform 0.2s;
+  transform: translateY(36px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-displacement-down {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-after-dragged-blocks {
+  transition: transform 0.2s;
+  transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-after-dragged-blocks {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
+  transition: transform 0.2s;
+  transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
+  transition: transform 0.2s;
+  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-dragging {
+  opacity: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: -9999;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   display: flex;
   align-items: center;
@@ -2328,9 +2361,11 @@ iframe[name=editor-canvas] {
   padding-left: 0;
   padding-right: 0;
 }
+.block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
   box-shadow: none;
 }
+.block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
   content: "";
   position: absolute;
@@ -2343,19 +2378,14 @@ iframe[name=editor-canvas] {
   z-index: 2;
   pointer-events: none;
 }
-.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
-  box-shadow: none;
-}
 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
   right: 0;
 }
+.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
 .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   z-index: 1;
 }
-.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
-  box-shadow: none;
-}
 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
   opacity: 1;
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
@@ -2504,6 +2534,10 @@ iframe[name=editor-canvas] {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 
+.block-editor-list-view-draggable-chip {
+  opacity: 0.8;
+}
+
 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
@@ -2595,6 +2629,22 @@ iframe[name=editor-canvas] {
   border-radius: 4px;
 }
 
+.block-editor-list-view-drop-indicator--preview {
+  pointer-events: none;
+}
+.block-editor-list-view-drop-indicator--preview .components-popover__content {
+  overflow: hidden !important;
+}
+.block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  height: 36px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
+}
+
 .block-editor-list-view-placeholder {
   padding: 0;
   margin: 0;
@@ -2746,7 +2796,8 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3385,6 +3436,8 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
   position: relative;
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
   content: "·";
@@ -3393,10 +3446,6 @@ iframe[name=editor-canvas] {
   right: 0;
   bottom: 16px;
 }
-.block-editor-block-contextual-toolbar .block-editor-block-parent-selector__button {
-  position: relative;
-  top: -1px;
-}
 
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
@@ -3458,6 +3507,22 @@ iframe[name=editor-canvas] {
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
 }
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
+    position: relative;
+  }
+  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: #1e1e1e;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    margin-top: -0.5px;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-left: 6px;
@@ -3477,16 +3542,6 @@ iframe[name=editor-canvas] {
   padding-left: 12px;
   padding-right: 12px;
 }
-@media (min-width: 600px) {
-  .show-icon-labels .is-up-button.is-up-button.is-up-button {
-    margin-right: 0;
-    border-radius: 0;
-    order: 1;
-  }
-  .show-icon-labels .is-down-button.is-down-button.is-down-button {
-    order: 2;
-  }
-}
 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
   width: auto;
 }
@@ -4255,7 +4310,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4270,7 +4325,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4285,7 +4340,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4300,7 +4355,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4315,7 +4370,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4330,7 +4385,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4345,7 +4400,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4360,7 +4415,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.17.0",
+	"version": "12.18.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.49.0",
-		"@wordpress/api-fetch": "^6.46.0",
-		"@wordpress/blob": "^3.49.0",
-		"@wordpress/blocks": "^12.26.0",
-		"@wordpress/commands": "^0.20.0",
-		"@wordpress/components": "^25.15.0",
-		"@wordpress/compose": "^6.26.0",
-		"@wordpress/data": "^9.19.0",
-		"@wordpress/date": "^4.49.0",
-		"@wordpress/deprecated": "^3.49.0",
-		"@wordpress/dom": "^3.49.0",
-		"@wordpress/element": "^5.26.0",
-		"@wordpress/escape-html": "^2.49.0",
-		"@wordpress/hooks": "^3.49.0",
-		"@wordpress/html-entities": "^3.49.0",
-		"@wordpress/i18n": "^4.49.0",
-		"@wordpress/icons": "^9.40.0",
-		"@wordpress/is-shallow-equal": "^4.49.0",
-		"@wordpress/keyboard-shortcuts": "^4.26.0",
-		"@wordpress/keycodes": "^3.49.0",
-		"@wordpress/notices": "^4.17.0",
-		"@wordpress/preferences": "^3.26.0",
-		"@wordpress/private-apis": "^0.31.0",
-		"@wordpress/rich-text": "^6.26.0",
-		"@wordpress/style-engine": "^1.32.0",
-		"@wordpress/token-list": "^2.49.0",
-		"@wordpress/url": "^3.50.0",
-		"@wordpress/warning": "^2.49.0",
-		"@wordpress/wordcount": "^3.49.0",
+		"@wordpress/a11y": "^3.50.0",
+		"@wordpress/api-fetch": "^6.47.0",
+		"@wordpress/blob": "^3.50.0",
+		"@wordpress/blocks": "^12.27.0",
+		"@wordpress/commands": "^0.21.0",
+		"@wordpress/components": "^25.16.0",
+		"@wordpress/compose": "^6.27.0",
+		"@wordpress/data": "^9.20.0",
+		"@wordpress/date": "^4.50.0",
+		"@wordpress/deprecated": "^3.50.0",
+		"@wordpress/dom": "^3.50.0",
+		"@wordpress/element": "^5.27.0",
+		"@wordpress/escape-html": "^2.50.0",
+		"@wordpress/hooks": "^3.50.0",
+		"@wordpress/html-entities": "^3.50.0",
+		"@wordpress/i18n": "^4.50.0",
+		"@wordpress/icons": "^9.41.0",
+		"@wordpress/is-shallow-equal": "^4.50.0",
+		"@wordpress/keyboard-shortcuts": "^4.27.0",
+		"@wordpress/keycodes": "^3.50.0",
+		"@wordpress/notices": "^4.18.0",
+		"@wordpress/preferences": "^3.27.0",
+		"@wordpress/private-apis": "^0.32.0",
+		"@wordpress/rich-text": "^6.27.0",
+		"@wordpress/style-engine": "^1.33.0",
+		"@wordpress/token-list": "^2.50.0",
+		"@wordpress/url": "^3.51.0",
+		"@wordpress/warning": "^2.50.0",
+		"@wordpress/wordcount": "^3.50.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
+	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
 }

package/src/components/block-canvas/style.scss

@@ -1,6 +1,13 @@
 iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
-	background-color: $white;
 	display: block;
 }
+
+iframe[name="editor-canvas"]:not(.has-history) {
+	background-color: $white;
+}
+
+iframe[name="editor-canvas"].has-history {
+	padding: $grid-unit-60 $grid-unit-60 0;
+}

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

@@ -17,12 +17,15 @@ import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-pr
 import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
+	appendToOwnerDocument,
 	children,
 	clientIds,
 	cloneClassname,
+	elementId,
 	onDragStart,
 	onDragEnd,
 	fadeWhenDisabled = false,
+	dragComponent,
 } ) => {
 	const {
 		srcRootClientId,
@@ -181,6 +184,7 @@ const BlockDraggable = ( {
 
 	return (
 		<Draggable
+			appendToOwnerDocument={ appendToOwnerDocument }
 			cloneClassname={ cloneClassname }
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
@@ -210,12 +214,19 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip
-					count={ clientIds.length }
-					icon={ icon }
-					fadeWhenDisabled
-				/>
+				// Check against `undefined` so that `null` can be used to disable
+				// the default drag component.
+				dragComponent !== undefined ? (
+					dragComponent
+				) : (
+					<BlockDraggableChip
+						count={ clientIds.length }
+						icon={ icon }
+						fadeWhenDisabled
+					/>
+				)
 			}
+			elementId={ elementId }
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {

package/src/components/block-edit/context.js

@@ -5,6 +5,7 @@ import { createContext, useContext } from '@wordpress/element';
 
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+export const blockEditingModeKey = Symbol( 'blockEditingMode' );
 
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',