@wordpress/editor 14.32.0 → 14.32.1-next.ff1cebbba.0

package/build-style/style.css

@@ -1,12 +1,6 @@
 @charset "UTF-8";
 /**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
+ * Typography
  */
 /**
  * SCSS Variables.
@@ -15,6 +9,9 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Colors
+ */
 /**
  * Fonts & basic variables.
  */
@@ -50,6 +47,62 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
+  --wp-editor-canvas-background: #ddd;
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
 /**
  * Colors
  */
@@ -95,6 +148,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -110,9 +166,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -135,6 +188,75 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.admin-ui-page {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+  color: #2f2f2f;
+  position: relative;
+  z-index: 1;
+  flex-flow: column;
+  container: admin-ui-page/inline-size;
+}
+
+@media not (prefers-reduced-motion) {
+  .admin-ui-page {
+    transition: width ease-out 0.2s;
+  }
+}
+.admin-ui-page__header {
+  padding: 16px 48px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  position: sticky;
+  top: 0;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__header {
+    padding: 16px 24px;
+  }
+}
+.admin-ui-page__header-subtitle {
+  padding-block-end: 8px;
+  color: #757575;
+  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.admin-ui-page__content {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-ui-page__content.has-padding {
+  padding: 16px 20px;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__content.has-padding {
+    padding: 16px 24px;
+  }
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
+  display: none;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 /**
  * Colors
  */
@@ -180,6 +302,19 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+.interface-complementary-area-header {
+  background: #fff;
+  padding-right: 8px;
+  gap: 4px;
+}
+
+.interface-complementary-area-header .interface-complementary-area-header__title {
+  margin: 0 auto 0 0;
+}
+
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -195,9 +330,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -220,39 +352,13 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-:root {
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
-  --wp-admin-theme-color: #007cba;
-  --wp-admin-theme-color--rgb: 0, 124, 186;
-  --wp-admin-theme-color-darker-10: #006ba1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
-  --wp-admin-theme-color-darker-20: #005a87;
-  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  :root {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-.interface-complementary-area-header {
-  background: #fff;
-  padding-right: 8px;
-  gap: 4px;
-}
-.interface-complementary-area-header .interface-complementary-area-header__title {
-  margin: 0 auto 0 0;
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
   height: 100%;
   overflow: auto;
 }
+
 @media (min-width: 600px) {
   .interface-complementary-area {
     -webkit-overflow-scrolling: touch;
@@ -268,23 +374,28 @@
   position: relative;
   z-index: 0;
 }
+
 .interface-complementary-area .components-panel__header {
   position: sticky;
   top: 0;
   z-index: 1;
 }
+
 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 0;
 }
+
 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
   margin-top: 0;
 }
+
 .interface-complementary-area h2 {
   font-size: 13px;
   font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+
 .interface-complementary-area h3 {
   font-size: 11px;
   text-transform: uppercase;
@@ -292,20 +403,24 @@
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+
 .interface-complementary-area hr {
   border-top: none;
   border-bottom: 1px solid #f0f0f0;
   margin: 1.5em 0;
 }
+
 .interface-complementary-area div.components-toolbar-group,
 .interface-complementary-area div.components-toolbar {
   box-shadow: none;
   margin-bottom: 1.5em;
 }
+
 .interface-complementary-area div.components-toolbar-group:last-child,
 .interface-complementary-area div.components-toolbar:last-child {
   margin-bottom: 0;
 }
+
 .interface-complementary-area .block-editor-skip-to-selected-block:focus {
   top: auto;
   right: 10px;
@@ -323,26 +438,25 @@
     height: calc(100% + 32px);
   }
   body.js.is-fullscreen-mode #adminmenumain,
-body.js.is-fullscreen-mode #wpadminbar {
+  body.js.is-fullscreen-mode #wpadminbar {
     display: none;
   }
   body.js.is-fullscreen-mode #wpcontent,
-body.js.is-fullscreen-mode #wpfooter {
+  body.js.is-fullscreen-mode #wpfooter {
     margin-left: 0;
   }
 }
-
 html.interface-interface-skeleton__html-container {
   position: fixed;
   width: 100%;
 }
+
 @media (min-width: 782px) {
   html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
 }
-
 .interface-interface-skeleton {
   display: flex;
   flex-direction: row;
@@ -354,6 +468,7 @@ html.interface-interface-skeleton__html-container {
   right: 0;
   bottom: 0;
 }
+
 @media (min-width: 783px) {
   .interface-interface-skeleton {
     top: 32px;
@@ -362,7 +477,6 @@ html.interface-interface-skeleton__html-container {
     top: 0;
   }
 }
-
 .interface-interface-skeleton__editor {
   display: flex;
   flex-direction: column;
@@ -373,13 +487,14 @@ html.interface-interface-skeleton__html-container {
 .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */
   left: 0;
 }
+
 @media (min-width: 783px) {
   .interface-interface-skeleton {
     left: 160px;
   }
 }
-
 .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }
+
 @media (min-width: 783px) {
   .auto-fold .interface-interface-skeleton {
     left: 36px;
@@ -390,17 +505,16 @@ html.interface-interface-skeleton__html-container {
     left: 160px;
   }
 }
-
 /* Sidebar manually collapsed. */
 .folded .interface-interface-skeleton {
   left: 0;
 }
+
 @media (min-width: 783px) {
   .folded .interface-interface-skeleton {
     left: 36px;
   }
 }
-
 body.is-fullscreen-mode .interface-interface-skeleton {
   left: 0 !important;
 }
@@ -412,12 +526,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   overscroll-behavior-y: none;
 }
+
 @media (min-width: 782px) {
   .has-footer .interface-interface-skeleton__body {
     padding-bottom: 25px;
   }
 }
-
 .interface-interface-skeleton__content {
   flex-grow: 1;
   display: flex;
@@ -425,12 +539,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__content {
     z-index: auto;
   }
 }
-
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
   flex-shrink: 0;
@@ -443,35 +557,35 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #1e1e1e;
   width: auto;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar,
-.interface-interface-skeleton__sidebar {
+  .interface-interface-skeleton__sidebar {
     position: relative !important;
   }
 }
-
 .interface-interface-skeleton__sidebar {
   border-top: 1px solid #e0e0e0;
   overflow: hidden;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
     box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133);
     outline: 1px solid transparent;
   }
 }
-
 .interface-interface-skeleton__secondary-sidebar {
   border-top: 1px solid #e0e0e0;
   right: 0;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133);
     outline: 1px solid transparent;
   }
 }
-
 .interface-interface-skeleton__header {
   flex-shrink: 0;
   height: auto;
@@ -494,6 +608,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   z-index: 90;
   display: none;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__footer {
     display: flex;
@@ -520,6 +635,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   background: #fff;
   width: 100vw;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__actions {
     width: 280px;
@@ -529,9 +645,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   top: auto;
   bottom: 0;
 }
+
 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
   top: 46px;
 }
+
 @media (min-width: 782px) {
   .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-left: 1px solid #ddd;
@@ -541,27 +659,32 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     top: 0;
   }
 }
-
 .interface-pinned-items {
   display: flex;
-  gap: 8px;
 }
+
 .interface-pinned-items .components-button {
   display: none;
   margin: 0;
 }
+
 .interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"] {
   display: flex;
 }
+
 .interface-pinned-items .components-button svg {
   max-width: 24px;
   max-height: 24px;
 }
+
 @media (min-width: 600px) {
   .interface-pinned-items .components-button {
     display: flex;
   }
 }
+.interface-pinned-items {
+  gap: 8px;
+}
 
 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
   /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
@@ -608,11 +731,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .editor-collab-sidebar {
   height: 100%;
+  overflow: hidden;
 }
 
 .editor-collab-sidebar-panel {
   padding: 16px;
   height: 100%;
+  overflow: hidden;
 }
 
 .editor-collab-sidebar-panel__thread {
@@ -621,6 +746,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 8px;
   border: 1px solid #ddd;
   background-color: #f0f0f0;
+  overflow: hidden;
+  width: auto;
 }
 .editor-collab-sidebar-panel__thread.is-selected {
   background-color: #fff;
@@ -630,9 +757,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
   outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
 }
-
-.editor-collab-sidebar-panel__child-thread {
-  margin-top: 15px;
+.editor-collab-sidebar-panel__thread.is-floating {
+  left: 16px;
+  right: 16px;
+  position: absolute;
+  margin-top: 16px;
 }
 
 .editor-collab-sidebar-panel__user-name {
@@ -664,27 +793,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: var(--wp-admin-border-width-focus);
 }
 
-.editor-collab-sidebar-panel__thread-overlay {
-  background-color: rgba(0, 0, 0, 0.7);
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  padding: 15px;
-  border-radius: 8px;
-  color: #fff;
-}
-.editor-collab-sidebar-panel__thread-overlay p {
-  margin-bottom: 15px;
-}
-.editor-collab-sidebar-panel__thread-overlay button {
-  padding: 4px 10px;
-  color: #fff;
-}
-
 .editor-collab-sidebar-panel__comment-status {
   margin-left: auto;
 }
@@ -713,6 +821,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   font-weight: 500;
 }
 
+.editor-collab-sidebar-panel__resolution-text {
+  font-style: italic;
+}
+
 .editor-collab-sidebar-panel__comment-form textarea {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -723,9 +835,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: 0 0 0 transparent;
   border-radius: 2px;
   border: 1px solid #949494;
-  padding: 9px 11px;
-  line-height: 20px !important;
-  display: block;
 }
 @media not (prefers-reduced-motion) {
   .editor-collab-sidebar-panel__comment-form textarea {
@@ -753,6 +862,38 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .editor-collab-sidebar-panel__comment-form textarea:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
+.editor-collab-sidebar-panel__comment-form textarea {
+  padding: 9px 11px;
+  line-height: 20px !important;
+  display: block;
+}
+
+.editor-collab-sidebar-panel__skip-to-comment,
+.editor-collab-sidebar-panel__skip-to-block {
+  position: absolute;
+  top: -9999px;
+  right: -9999px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  background: #fff !important;
+  z-index: -1;
+}
+.editor-collab-sidebar-panel__skip-to-comment:focus,
+.editor-collab-sidebar-panel__skip-to-block:focus {
+  overflow: visible;
+  clip-path: none;
+  z-index: 1;
+  right: 8px;
+}
+
+.editor-collab-sidebar-panel__skip-to-comment:focus {
+  top: 8px;
+}
+
+.editor-collab-sidebar-panel__skip-to-block:focus {
+  top: auto;
+  bottom: 8px;
+}
 
 .comment-avatar-indicator {
   position: relative;
@@ -884,6 +1025,24 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-width: 235px;
 }
 
+.editor-block-visibility__disabled-blocks-count {
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  box-shadow: -32px 0 0 0 #fff, 32px 0 0 0 #fff;
+  padding: 8px;
+  background-color: #fff;
+  text-align: center;
+  position: sticky;
+  top: -5px;
+  z-index: 2;
+}
+.editor-block-visibility__disabled-blocks-count ~ .block-editor-block-manager__content .block-editor-block-manager__category-title {
+  top: 31px;
+}
+.editor-block-visibility__disabled-blocks-count .is-link {
+  margin-left: 12px;
+}
+
 .editor-blog-title-dropdown__content .components-popover__content {
   min-width: 320px;
   padding: 16px;
@@ -1074,10 +1233,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 1px 0;
 }
 
-.editor-document-outline.has-no-headings {
-  text-align: center;
-  color: #757575;
-}
 .editor-document-outline.has-no-headings > svg {
   margin-top: 28px;
 }
@@ -1085,6 +1240,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding-left: 32px;
   padding-right: 32px;
 }
+.editor-document-outline.has-no-headings {
+  text-align: center;
+  color: #757575;
+}
 
 .editor-document-tools {
   display: inline-flex;
@@ -1096,7 +1255,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 782px) {
   .editor-document-tools .editor-document-tools__left > .editor-history__redo,
-.editor-document-tools .editor-document-tools__left > .editor-history__undo {
+  .editor-document-tools .editor-document-tools__left > .editor-history__undo {
     display: inline-flex;
   }
 }
@@ -1262,20 +1421,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .editor-header {
   box-sizing: border-box;
-  height: 64px;
-  background: #fff;
-  display: grid;
-  grid-auto-flow: row;
-  grid-template: auto/64px minmax(0, max-content) minmax(min-content, 1fr) 64px;
-  align-items: center;
-  max-width: 100vw;
-  justify-content: space-between;
 }
 .editor-header *,
 .editor-header *::before,
 .editor-header *::after {
   box-sizing: inherit;
 }
+.editor-header {
+  height: 64px;
+  background: #fff;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template: auto/64px minmax(0, max-content) minmax(min-content, 1fr) 64px;
+}
 .editor-header:has(> .editor-header__center) {
   grid-template: auto/64px min-content 1fr min-content 64px;
 }
@@ -1289,6 +1447,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     gap: 16px;
   }
 }
+.editor-header {
+  align-items: center;
+  max-width: 100vw;
+  justify-content: space-between;
+}
 @media (min-width: 280px) {
   .editor-header {
     flex-wrap: nowrap;
@@ -1297,10 +1460,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .editor-header__toolbar {
   grid-column: 1/3;
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  clip-path: inset(-2px);
 }
 .editor-header__toolbar > :first-child {
   margin-inline: 16px 0;
@@ -1313,6 +1472,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     margin-inline: 0;
   }
 }
+.editor-header__toolbar {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  clip-path: inset(-2px);
+}
 @media (min-width: 480px) {
   .editor-header__toolbar {
     clip-path: none;
@@ -1355,21 +1520,25 @@ body.is-fullscreen-mode .interface-interface-skeleton {
  */
 .editor-header__settings {
   grid-column: 3/-1;
+}
+.editor-header:has(> .editor-header__center) .editor-header__settings {
+  grid-column: 4/-1;
+}
+.editor-header__settings {
   justify-self: end;
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
   padding-right: 4px;
-  gap: 8px;
-}
-.editor-header:has(> .editor-header__center) .editor-header__settings {
-  grid-column: 4/-1;
 }
 @media (min-width: 600px) {
   .editor-header__settings {
     padding-right: 8px;
   }
 }
+.editor-header__settings {
+  gap: 8px;
+}
 
 /**
  * Show icon labels.
@@ -1417,9 +1586,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 600px) {
   .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
-.show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.show-icon-labels .editor-header .interface-pinned-items .components-button {
+  .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
+  .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
+  .show-icon-labels .editor-header .interface-pinned-items .components-button {
     padding-left: 12px;
     padding-right: 12px;
   }
@@ -1516,15 +1685,17 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .editor-inserter-sidebar {
   box-sizing: border-box;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
 }
 .editor-inserter-sidebar *,
 .editor-inserter-sidebar *::before,
 .editor-inserter-sidebar *::after {
   box-sizing: inherit;
 }
+.editor-inserter-sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
 .editor-inserter-sidebar__content {
   height: 100%;
@@ -1589,13 +1760,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .editor-list-view-sidebar__list-view-panel-content,
 .editor-list-view-sidebar__list-view-container > .document-outline {
   height: 100%;
-  scrollbar-width: thin;
-  scrollbar-gutter: stable both-edges;
-  scrollbar-color: transparent transparent;
-  will-change: transform;
-  overflow: auto;
-  scrollbar-gutter: auto;
-  padding: 4px;
 }
 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar,
 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar {
@@ -1619,18 +1783,34 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .editor-list-view-sidebar__list-view-container > .document-outline:focus-within::-webkit-scrollbar-thumb {
   background-color: #949494;
 }
+.editor-list-view-sidebar__list-view-panel-content,
+.editor-list-view-sidebar__list-view-container > .document-outline {
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: transparent transparent;
+}
 .editor-list-view-sidebar__list-view-panel-content:hover, .editor-list-view-sidebar__list-view-panel-content:focus, .editor-list-view-sidebar__list-view-panel-content:focus-within,
 .editor-list-view-sidebar__list-view-container > .document-outline:hover,
 .editor-list-view-sidebar__list-view-container > .document-outline:focus,
 .editor-list-view-sidebar__list-view-container > .document-outline:focus-within {
   scrollbar-color: #949494 transparent;
 }
+.editor-list-view-sidebar__list-view-panel-content,
+.editor-list-view-sidebar__list-view-container > .document-outline {
+  will-change: transform;
+}
 @media (hover: none) {
   .editor-list-view-sidebar__list-view-panel-content,
-.editor-list-view-sidebar__list-view-container > .document-outline {
+  .editor-list-view-sidebar__list-view-container > .document-outline {
     scrollbar-color: #949494 transparent;
   }
 }
+.editor-list-view-sidebar__list-view-panel-content,
+.editor-list-view-sidebar__list-view-container > .document-outline {
+  overflow: auto;
+  scrollbar-gutter: auto;
+  padding: 4px;
+}
 
 .editor-list-view-sidebar__list-view-container {
   display: flex;
@@ -1767,6 +1947,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .editor-post-featured-image {
   padding: 0;
 }
+.editor-post-featured-image .hidden {
+  display: none;
+}
 .editor-post-featured-image .components-spinner {
   position: absolute;
   top: 50%;
@@ -2003,7 +2186,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 480px) {
   .editor-post-publish-panel__header-publish-button,
-.editor-post-publish-panel__header-cancel-button {
+  .editor-post-publish-panel__header-cancel-button {
     max-width: 160px;
   }
 }
@@ -2124,6 +2307,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .editor-post-publish-panel {
   box-sizing: border-box;
+}
+.editor-post-publish-panel *,
+.editor-post-publish-panel *::before,
+.editor-post-publish-panel *::after {
+  box-sizing: inherit;
+}
+.editor-post-publish-panel {
   position: fixed;
   z-index: 100001;
   background: #fff;
@@ -2133,11 +2323,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   left: 0;
   overflow: auto;
 }
-.editor-post-publish-panel *,
-.editor-post-publish-panel *::before,
-.editor-post-publish-panel *::after {
-  box-sizing: inherit;
-}
 @media (min-width: 782px) {
   .editor-post-publish-panel {
     z-index: 99998;
@@ -2157,8 +2342,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   body.is-fullscreen-mode .editor-post-publish-panel {
     top: 0;
   }
-}
-@media (min-width: 782px) {
   [role=region]:focus .editor-post-publish-panel {
     transform: translateX(0%);
   }
@@ -2350,20 +2533,24 @@ textarea.editor-post-text-editor {
   font-family: Menlo, Consolas, monaco, monospace;
   line-height: 2.4;
   min-height: 200px;
-  padding: 16px;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px !important;
 }
 @media not (prefers-reduced-motion) {
   textarea.editor-post-text-editor {
     transition: border 0.1s ease-out, box-shadow 0.1s linear;
   }
 }
+textarea.editor-post-text-editor {
+  padding: 16px;
+}
 @media (min-width: 600px) {
   textarea.editor-post-text-editor {
     padding: 24px;
   }
 }
+textarea.editor-post-text-editor {
+  /* Fonts smaller than 16px causes mobile safari to zoom. */
+  font-size: 16px !important;
+}
 @media (min-width: 600px) {
   textarea.editor-post-text-editor {
     font-size: 15px !important;
@@ -2720,16 +2907,18 @@ textarea.editor-post-text-editor:-ms-input-placeholder {
 
 .editor-text-editor {
   box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  flex-grow: 1;
 }
 .editor-text-editor *,
 .editor-text-editor *::before,
 .editor-text-editor *::after {
   box-sizing: inherit;
 }
+.editor-text-editor {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  flex-grow: 1;
+}
 .editor-text-editor .editor-post-title:not(.is-raw-text),
 .editor-text-editor .editor-post-title.is-raw-text textarea {
   max-width: none;
@@ -2743,7 +2932,7 @@ textarea.editor-post-text-editor:-ms-input-placeholder {
 }
 @media (min-width: 600px) {
   .editor-text-editor .editor-post-title:not(.is-raw-text),
-.editor-text-editor .editor-post-title.is-raw-text textarea {
+  .editor-text-editor .editor-post-title.is-raw-text textarea {
     padding: 24px;
   }
 }
@@ -2796,12 +2985,14 @@ textarea.editor-post-text-editor:-ms-input-placeholder {
 .editor-visual-editor {
   position: relative;
   display: flex;
-  background-color: #ddd;
-  align-items: center;
+  background-color: var(--wp-editor-canvas-background);
 }
 .editor-visual-editor iframe[name=editor-canvas] {
   background-color: transparent;
 }
+.editor-visual-editor {
+  align-items: center;
+}
 .editor-visual-editor.is-resizable {
   max-height: 100%;
 }