@wordpress/block-editor 17.0.0 → 17.1.0

package/build-style/content.css

@@ -122,11 +122,6 @@
 .block-editor-block-icon.has-colors svg {
   fill: currentColor;
 }
-@media (forced-colors: active) {
-  .block-editor-block-icon.has-colors svg {
-    fill: CanvasText;
-  }
-}
 .block-editor-block-icon svg {
   min-width: 20px;
   min-height: 20px;
@@ -159,9 +154,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout {
   position: relative;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::-moz-selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::-moz-selection {
-  background: transparent;
-}
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;
 }
@@ -191,11 +183,15 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[draggable=true]:not(.is-multi-selected),
+.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[data-draggable=true]:not(.is-multi-selected),
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus {
   outline: none;
 }
 .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,
+.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[draggable=true]:not(.is-multi-selected)::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[data-draggable=true]:not(.is-multi-selected)::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
   content: "";
   position: absolute;
@@ -231,7 +227,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;
-     -moz-user-select: text;
           user-select: text;
 }
 
@@ -264,7 +259,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
   pointer-events: none;
   -webkit-user-select: none;
-     -moz-user-select: none;
           user-select: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
@@ -525,9 +519,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-list__layout .is-dragging iframe {
   pointer-events: none;
 }
-.block-editor-block-list__layout .is-dragging::-moz-selection {
-  background: transparent !important;
-}
 .block-editor-block-list__layout .is-dragging::selection {
   background: transparent !important;
 }
@@ -575,7 +566,8 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-variation-picker__variations svg,
 .block-editor-block-variation-picker__skip svg,
 .wp-block-group-placeholder__variations svg {
-  fill: #949494 !important;
+  fill: #949494;
+  color: #949494 !important;
 }
 .block-editor-block-variation-picker__variations .components-button,
 .block-editor-block-variation-picker__skip .components-button,
@@ -590,7 +582,8 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .block-editor-block-variation-picker__variations .components-button:hover svg,
 .block-editor-block-variation-picker__skip .components-button:hover svg,
 .wp-block-group-placeholder__variations .components-button:hover svg {
-  fill: var(--wp-admin-theme-color) !important;
+  fill: var(--wp-admin-theme-color);
+  color: var(--wp-admin-theme-color) !important;
 }
 .block-editor-block-variation-picker__variations > li,
 .block-editor-block-variation-picker__skip > li,
@@ -645,7 +638,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   border: none;
 }
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter {
-  visibility: visible;
+  opacity: 1;
 }
 .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child:has(.block-editor-button-block-appender)::after {
   border: none;
@@ -904,12 +897,14 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding: 0 2px;
 }
 
-.rich-text [contenteditable=false]::-moz-selection {
+.rich-text [contenteditable=false]::selection {
   background-color: transparent;
 }
 
-.rich-text [contenteditable=false]::selection {
-  background-color: transparent;
+.is-selected .non-breaking-space {
+  outline: 1px solid currentColor;
+  outline-offset: -1px;
+  opacity: 0.8;
 }
 
 .block-editor-warning {

package/build-style/style-rtl.css

@@ -258,9 +258,9 @@
 }
 
 .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
-  width: 226px;
+  width: auto;
 }
-.block-editor-global-styles-background-panel__media-replace-popover .components-button {
+.block-editor-global-styles-background-panel__media-replace-popover .components-menu-item__button.components-button {
   padding: 0 8px;
 }
 .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
@@ -296,11 +296,6 @@ iframe[name=editor-canvas] {
 .block-editor-block-icon.has-colors svg {
   fill: currentColor;
 }
-@media (forced-colors: active) {
-  .block-editor-block-icon.has-colors svg {
-    fill: CanvasText;
-  }
-}
 .block-editor-block-icon svg {
   min-width: 20px;
   min-height: 20px;
@@ -856,9 +851,7 @@ iframe[name=editor-canvas] {
   padding: 0 13px;
   position: relative;
   -webkit-user-select: none;
-     -moz-user-select: none;
           user-select: none;
-  width: -moz-max-content;
   width: max-content;
 }
 .block-editor-block-draggable-chip svg {
@@ -960,6 +953,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-manager__checklist-item .block-editor-block-icon {
   margin-left: 10px;
   fill: #1e1e1e;
+  color: #1e1e1e;
 }
 
 .block-editor-block-manager__results {
@@ -1160,7 +1154,6 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-popover .components-popover__content {
   margin: 0 !important;
   min-width: auto;
-  width: -moz-max-content;
   width: max-content;
   overflow-y: visible;
 }
@@ -1257,8 +1250,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
   text-align: start;
-  -moz-text-align-last: center;
-       text-align-last: center;
+  text-align-last: center;
 }
 
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
@@ -1363,20 +1355,17 @@ iframe[name=editor-canvas] {
   justify-content: center;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-  -moz-column-gap: 24px;
-       column-gap: 24px;
+  column-gap: 24px;
   display: block;
   width: 100%;
   padding: 32px;
   padding-bottom: 0;
   padding-top: 0;
-  -moz-column-count: 2;
-       column-count: 2;
+  column-count: 2;
 }
 @media (min-width: 1440px) {
   .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-    -moz-column-count: 3;
-         column-count: 3;
+    column-count: 3;
   }
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
@@ -1398,8 +1387,7 @@ iframe[name=editor-canvas] {
   color: var(--wp-admin-theme-color);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
-  -moz-column-break-inside: avoid;
-       break-inside: avoid-column;
+  break-inside: avoid-column;
   margin-bottom: 24px;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
@@ -1804,9 +1792,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles__shadow-indicator {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  appearance: none;
   background: none;
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
@@ -2088,14 +2074,6 @@ iframe[name=editor-canvas] {
     animation-fill-mode: forwards;
   }
 }
-.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before {
-  box-shadow: none;
-  outline: none;
-}
-.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
 
 .block-editor-grid-item-mover__move-vertical-button-container {
   display: flex;
@@ -2543,7 +2521,7 @@ iframe[name=editor-canvas] {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -2699,8 +2677,7 @@ iframe[name=editor-canvas] {
 .link-preview-button__image {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   border-radius: 2px;
 }
 
@@ -2764,6 +2741,9 @@ iframe[name=editor-canvas] {
   position: relative;
   transform: translateY(0);
 }
+.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
+  z-index: 1;
+}
 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
   cursor: grab;
 }
@@ -2776,11 +2756,6 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
   fill: currentColor;
 }
-@media (forced-colors: active) {
-  .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
-    fill: CanvasText;
-  }
-}
 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
   color: inherit;
 }
@@ -2794,20 +2769,42 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
-.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
+  --focus-color: var(--wp-block-synced-color);
+}
+.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
+  --focus-color: var(--wp-block-synced-color);
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
   color: #fff;
 }
-.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-}
-.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-}
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
+  --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+  outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+@media (forced-colors: active) {
+  .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
+    background: SelectedItem;
+  }
+  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
+    color: SelectedItemText;
+  }
+  .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
+    fill: SelectedItemText;
+  }
+  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
+    forced-color-adjust: none;
+  }
+  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
+    --focus-color: CanvasText;
+  }
+  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
+    --focus-color: SelectedItemText;
+  }
 }
 .block-editor-list-view-leaf.is-first-selected td:first-child {
   border-top-right-radius: 2px;
@@ -2932,27 +2929,27 @@ iframe[name=editor-canvas] {
 .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;
+  outline: 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;
   top: 0;
-  left: -29px;
+  left: -28px;
   bottom: 0;
   right: 0;
   border-radius: inherit;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+  outline-offset: 1px;
+  box-shadow: 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
   z-index: 2;
   pointer-events: none;
 }
 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
   left: 0;
 }
-.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-  z-index: 1;
-}
 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
   opacity: 1;
 }
@@ -3681,170 +3678,6 @@ iframe[name=editor-canvas] {
   row-gap: 0;
 }
 
-.block-editor-content-only-controls__link {
-  width: 100%;
-  border-color: #ccc;
-}
-
-.block-editor-content-only-controls__link-row {
-  align-items: center;
-}
-
-.block-editor-content-only-controls__link-title {
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.block-editor-content-only-controls__media {
-  width: 100%;
-  border-color: #ccc;
-  padding-left: 32px;
-}
-
-.block-editor-content-only-controls__media-replace-flow {
-  display: block;
-}
-
-.block-editor-content-only-controls__media-row {
-  align-items: center;
-}
-
-.block-editor-content-only-controls__media-placeholder {
-  width: 24px;
-  height: 24px;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-  display: inline-block;
-  padding: 0;
-  background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-}
-
-.block-editor-content-only-controls__media-title {
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.block-editor-content-only-controls__media-thumbnail {
-  width: 20px;
-  height: 20px;
-  border-radius: 2px;
-  align-self: center;
-  overflow: hidden;
-}
-.block-editor-content-only-controls__media-thumbnail img {
-  width: 100% !important;
-  height: 100% !important;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-.block-editor-content-only-controls {
-  position: relative;
-}
-
-.block-editor-content-only-controls__media-reset {
-  position: absolute;
-  left: 0;
-  top: 8px;
-  margin: auto 8px auto;
-  opacity: 0;
-  border-radius: 2px;
-}
-@media not (prefers-reduced-motion) {
-  .block-editor-content-only-controls__media-reset {
-    transition: opacity 0.1s ease-in-out;
-  }
-}
-.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
-  opacity: 1;
-}
-@media (hover: none) {
-  .block-editor-content-only-controls__media-reset {
-    opacity: 1;
-  }
-}
-
-.block-editor-content-only-controls__rich-text {
-  width: 100%;
-  margin: 0;
-  background: #fff;
-  color: #1e1e1e;
-  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
-  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
-  border-radius: var(--wpds-border-radius-sm, 2px);
-}
-@media (min-width: 600px) {
-  .block-editor-content-only-controls__rich-text {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
-  }
-}
-.block-editor-content-only-controls__rich-text:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
-  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
-}
-.block-editor-content-only-controls__rich-text:focus {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
-  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
-  border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
-  box-shadow: none;
-}
-.block-editor-content-only-controls__rich-text::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.block-editor-content-only-controls__rich-text::placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.block-editor-content-only-controls__rich-text {
-  border-color: #949494;
-}
-.block-editor-content-only-controls__rich-text::-moz-placeholder {
-  color: color-mix(in srgb, #1e1e1e, transparent 38%);
-}
-.block-editor-content-only-controls__rich-text::placeholder {
-  color: color-mix(in srgb, #1e1e1e, transparent 38%);
-}
-.block-editor-content-only-controls__rich-text {
-  min-height: 40px;
-  padding: 12px;
-}
-
-.block-editor-block-fields__container {
-  padding: 0 16px 16px;
-}
-.block-editor-block-fields__container:first-of-type {
-  padding-block-start: 8px;
-  /*
-   * Add border for the entire content controls and remove the similar border
-   * for tools panel.
-   */
-  border-block-start: 1px solid #e0e0e0;
-}
-
-.block-editor-block-fields__header {
-  padding: 8px 0;
-  margin-bottom: 4px;
-}
-
-.block-editor-block-fields__header-icon {
-  flex: 0 0 24px;
-}
-
-.block-editor-block-fields__header-title {
-  flex: 1;
-  /* Override the default margin on a h2 element. */
-  margin: 0 !important;
-}
-
 .block-editor-hooks__block-hooks {
   /**
    * Un-reverse the flex direction for the toggle's label.
@@ -3859,14 +3692,6 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
-.block-editor-hooks__position-control-item {
-  /**
-   * Try to make items match the width of the anchor, subtract any margin on
-   * items to calculate the correct inner width.
-   */
-  max-inline-size: max(var(--anchor-width) - 2 * var(--wp-ui-popup-padding), 223px);
-}
-
 .block-editor-hooks__position-control-item-hint {
   color: var(--wpds-color-foreground-content-neutral-weak, #707070);
   margin-block-start: 4px;
@@ -4193,7 +4018,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 12px;
+  gap: 12px;
 }
 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
   margin-bottom: 0;
@@ -4381,10 +4206,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-left: 8px;
 }
 
-.block-editor-inserter__preview-container__popover {
-  top: 16px !important;
-}
-
 .block-editor-inserter__preview-container {
   display: none;
   width: 280px;
@@ -4527,7 +4348,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 8px;
+  gap: 8px;
 }
 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
   margin-bottom: 0;
@@ -4589,7 +4410,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;
-  grid-gap: 32px;
+  gap: 32px;
   grid-template-columns: repeat(1, 1fr);
   margin-bottom: 16px;
 }
@@ -4939,4 +4760,50 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   display: flex;
   align-items: center;
   justify-content: start;
+}
+
+/* The stop element is invisible, so its focus indication is drawn around the
+   canvas it stands for. For the iframed canvas it is an overlay instead of
+   an outline, because Safari paints an outline on an iframe element
+   underneath the iframe's content. */
+.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
+}
+
+.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
+  outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
+  outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+}
+
+/* Looks like a tooltip. Shown at the top of the canvas while the stop is
+   focused. Sticky, because on the widgets screen the stop spans scrolling
+   content and the hint must stay in view; anywhere else there is nothing
+   to scroll and it stays at the top of the canvas. */
+.block-editor-writing-flow__canvas-stop-hint {
+  display: none;
+  position: sticky;
+  top: 16px;
+  margin-inline: auto;
+  width: fit-content;
+  z-index: 2;
+  background: #000;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  border-radius: 4px;
+  color: #f0f0f0;
+  text-align: center;
+  line-height: 1.4;
+  font-size: 12px;
+  padding: 4px 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
+  display: block;
 }