@wordpress/editor 13.31.0 → 13.33.0

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -105,6 +105,364 @@
   }
 }
 
+.components-panel__header.interface-complementary-area-header__small {
+  background: #fff;
+  padding-right: 4px;
+}
+.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  margin: 0;
+}
+@media (min-width: 782px) {
+  .components-panel__header.interface-complementary-area-header__small {
+    display: none;
+  }
+}
+
+.interface-complementary-area-header {
+  background: #fff;
+  padding-right: 4px;
+}
+.interface-complementary-area-header .interface-complementary-area-header__title {
+  margin: 0;
+}
+.interface-complementary-area-header .components-button.has-icon {
+  display: none;
+  margin-left: auto;
+}
+.interface-complementary-area-header .components-button.has-icon ~ .components-button {
+  margin-left: 0;
+}
+@media (min-width: 782px) {
+  .interface-complementary-area-header .components-button.has-icon {
+    display: flex;
+  }
+}
+
+@media (min-width: 782px) {
+  .components-panel__header + .interface-complementary-area-header {
+    margin-top: 0;
+  }
+}
+
+.interface-complementary-area {
+  background: #fff;
+  color: #1e1e1e;
+}
+@media (min-width: 600px) {
+  .interface-complementary-area {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@media (min-width: 782px) {
+  .interface-complementary-area {
+    width: 280px;
+  }
+}
+.interface-complementary-area .components-panel {
+  border: none;
+  position: relative;
+  z-index: 0;
+}
+.interface-complementary-area .components-panel__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  top: 48px;
+}
+@media (min-width: 782px) {
+  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+    top: 0;
+  }
+}
+.interface-complementary-area p:not(.components-base-control__help) {
+  margin-top: 0;
+}
+.interface-complementary-area h2 {
+  font-size: 13px;
+  color: #1e1e1e;
+  margin-bottom: 1.5em;
+}
+.interface-complementary-area h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  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;
+  bottom: 10px;
+  left: auto;
+}
+
+@media (min-width: 782px) {
+  body.js.is-fullscreen-mode {
+    margin-top: -32px;
+    height: calc(100% + 32px);
+  }
+  body.js.is-fullscreen-mode #adminmenumain,
+body.js.is-fullscreen-mode #wpadminbar {
+    display: none;
+  }
+  body.js.is-fullscreen-mode #wpcontent,
+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 {
+    position: initial;
+    width: initial;
+  }
+}
+
+.interface-interface-skeleton {
+  display: flex;
+  flex-direction: row;
+  height: auto;
+  max-height: 100%;
+  position: fixed;
+  top: 46px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+@media (min-width: 783px) {
+  .interface-interface-skeleton {
+    top: 32px;
+  }
+  .is-fullscreen-mode .interface-interface-skeleton {
+    top: 0;
+  }
+}
+
+.interface-interface-skeleton__editor {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 100%;
+  overflow: hidden;
+}
+
+.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;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .interface-interface-skeleton {
+    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;
+}
+
+.interface-interface-skeleton__body {
+  flex-grow: 1;
+  display: flex;
+  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;
+  flex-direction: column;
+  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;
+  position: absolute;
+  z-index: 100000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+  color: #1e1e1e;
+  width: auto;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__secondary-sidebar,
+.interface-interface-skeleton__sidebar {
+    position: relative !important;
+  }
+  .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
+.is-sidebar-opened .interface-interface-skeleton__sidebar {
+    z-index: 90;
+  }
+}
+
+.interface-interface-skeleton__sidebar {
+  overflow: auto;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__sidebar {
+    border-left: 1px solid #e0e0e0;
+  }
+}
+
+.interface-interface-skeleton__secondary-sidebar {
+  right: 0;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__secondary-sidebar {
+    border-right: 1px solid #e0e0e0;
+  }
+}
+
+.interface-interface-skeleton__header {
+  flex-shrink: 0;
+  height: auto;
+  border-bottom: 1px solid #e0e0e0;
+  z-index: 30;
+  color: #1e1e1e;
+}
+
+.interface-interface-skeleton__footer {
+  height: auto;
+  flex-shrink: 0;
+  border-top: 1px solid #e0e0e0;
+  color: #1e1e1e;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  z-index: 90;
+  display: none;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__footer {
+    display: flex;
+  }
+}
+.interface-interface-skeleton__footer .block-editor-block-breadcrumb {
+  z-index: 30;
+  display: flex;
+  background: #fff;
+  height: 24px;
+  align-items: center;
+  font-size: 13px;
+  padding: 0 18px;
+}
+
+.interface-interface-skeleton__actions {
+  z-index: 100000;
+  position: fixed !important;
+  top: -9999em;
+  bottom: auto;
+  left: auto;
+  right: 0;
+  color: #1e1e1e;
+  background: #fff;
+  width: 100vw;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__actions {
+    width: 280px;
+  }
+}
+.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+  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;
+    top: 32px;
+  }
+  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+    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;
+  }
+}
+
 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
   /* stylelint-disable */
   font: normal 20px/1 dashicons;
@@ -226,16 +584,22 @@
   min-width: 0;
   background: #f0f0f0;
   border-radius: 4px;
-  width: min(100%, 450px);
+  width: min(100%, 416px);
 }
 .editor-document-bar:hover {
   background-color: #e0e0e0;
 }
 .editor-document-bar .components-button {
   border-radius: 4px;
+  transition: all 0.1s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-document-bar .components-button {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 .editor-document-bar .components-button:hover {
-  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 @media (min-width: 960px) {
@@ -253,20 +617,17 @@
 .editor-document-bar__title {
   flex-grow: 1;
   overflow: hidden;
-  color: #2f2f2f;
+  color: #1e1e1e;
   gap: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-@media (min-width: 600px) {
+@media (min-width: 782px) {
   .editor-document-bar__title {
-    padding-left: 32px;
+    padding-left: 24px;
   }
 }
-.editor-document-bar__title:hover {
-  color: var(--wp-block-synced-color);
-}
 .editor-document-bar.is-global .editor-document-bar__title {
   color: var(--wp-block-synced-color);
 }
@@ -278,13 +639,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 50%;
+  max-width: 70%;
   color: currentColor;
 }
 
 .editor-document-bar__shortcut {
   color: #2f2f2f;
-  min-width: 32px;
+  min-width: 24px;
   display: none;
 }
 @media (min-width: 782px) {
@@ -302,7 +663,7 @@
   position: absolute;
 }
 .editor-document-bar__back.components-button.has-icon.has-text:hover {
-  color: var(--wp-block-synced-color);
+  color: #1e1e1e;
   background-color: transparent;
 }
 
@@ -393,11 +754,13 @@
   display: inline-flex;
   align-items: center;
 }
-.editor-document-tools .editor-document-tools__left > .components-button {
+.editor-document-tools .editor-document-tools__left > .editor-history__redo,
+.editor-document-tools .editor-document-tools__left > .editor-history__undo {
   display: none;
 }
-@media (min-width: 600px) {
-  .editor-document-tools .editor-document-tools__left > .components-button {
+@media (min-width: 782px) {
+  .editor-document-tools .editor-document-tools__left > .editor-history__redo,
+.editor-document-tools .editor-document-tools__left > .editor-history__undo {
     display: inline-flex;
   }
 }
@@ -451,16 +814,6 @@
   gap: 8px;
   margin-right: 8px;
 }
-@media (min-width: 782px) {
-  .editor-document-tools__left {
-    padding-left: 20px;
-  }
-}
-@media (min-width: 1280px) {
-  .editor-document-tools__left {
-    padding-right: 8px;
-  }
-}
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
   min-width: 32px;
@@ -566,6 +919,54 @@
   }
 }
 
+.editor-keyboard-shortcut-help-modal__section {
+  margin: 0 0 2rem 0;
+}
+.editor-keyboard-shortcut-help-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.editor-keyboard-shortcut-help-modal__shortcut {
+  display: flex;
+  align-items: baseline;
+  padding: 0.6rem 0;
+  border-top: 1px solid #ddd;
+  margin-bottom: 0;
+}
+.editor-keyboard-shortcut-help-modal__shortcut:last-child {
+  border-bottom: 1px solid #ddd;
+}
+.editor-keyboard-shortcut-help-modal__shortcut:empty {
+  display: none;
+}
+.editor-keyboard-shortcut-help-modal__shortcut-term {
+  font-weight: 600;
+  margin: 0 0 0 1rem;
+  text-align: right;
+}
+.editor-keyboard-shortcut-help-modal__shortcut-description {
+  flex: 1;
+  margin: 0;
+  flex-basis: auto;
+}
+.editor-keyboard-shortcut-help-modal__shortcut-key-combination {
+  display: block;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+.editor-keyboard-shortcut-help-modal__shortcut-key-combination + .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
+  margin-top: 10px;
+}
+.editor-keyboard-shortcut-help-modal__shortcut-key {
+  padding: 0.25rem 0.5rem;
+  border-radius: 8%;
+  margin: 0 0.2rem 0 0.2rem;
+}
+.editor-keyboard-shortcut-help-modal__shortcut-key:last-child {
+  margin: 0 0 0 0.2rem;
+}
+
 .editor-list-view-sidebar {
   height: 100%;
   display: flex;
@@ -584,7 +985,7 @@
   background: #fff;
   order: 1;
   align-self: center;
-  margin-right: 8px;
+  margin-right: 12px;
 }
 
 .editor-list-view-sidebar__tabs-tablist {
@@ -682,6 +1083,36 @@
   width: 100%;
 }
 
+.editor-action-modal {
+  z-index: 1000001;
+}
+
+.editor-post-card-panel__content {
+  flex-grow: 1;
+}
+.editor-post-card-panel__title {
+  width: 100%;
+}
+.editor-post-card-panel__title.editor-post-card-panel__title {
+  margin: 3px 0 0 0;
+}
+.editor-post-card-panel__icon {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+}
+.editor-post-card-panel__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 8px;
+}
+.editor-post-card-panel__description {
+  color: #757575;
+}
+.editor-post-card-panel__description .components-text {
+  color: inherit;
+}
+
 .editor-post-excerpt__textarea {
   width: 100%;
   margin-bottom: 10px;
@@ -700,7 +1131,6 @@
 
 .editor-post-featured-image__container {
   position: relative;
-  aspect-ratio: 2/1;
 }
 .editor-post-featured-image__container:hover .editor-post-featured-image__actions, .editor-post-featured-image__container:focus .editor-post-featured-image__actions, .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions {
   opacity: 1;
@@ -713,8 +1143,9 @@
   transition: all 0.1s ease-out;
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
   overflow: hidden;
-  outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
+  min-height: 80px;
+  margin-bottom: 16px;
   display: flex;
   justify-content: center;
 }
@@ -728,6 +1159,7 @@
 
 .editor-post-featured-image__preview {
   height: auto;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
 }
 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
   object-fit: cover;
@@ -832,15 +1264,6 @@
   align-items: center;
 }
 
-.editor-post-publish-button__button.has-changes-dot::before {
-  background: currentcolor;
-  border-radius: 4px;
-  content: "";
-  height: 8px;
-  margin: auto 5px auto -3px;
-  width: 8px;
-}
-
 .editor-post-publish-panel {
   background: #fff;
 }
@@ -1067,6 +1490,62 @@
   line-height: 16px;
 }
 
+.editor-post-status {
+  max-width: 100%;
+  margin-bottom: 16px;
+}
+.editor-post-status .editor-post-status-trigger {
+  padding: 1px;
+  height: auto;
+  border-radius: 16px;
+}
+.editor-post-status .editor-post-status-label {
+  border-radius: 16px;
+  display: inline-flex;
+  padding: 0 12px 0 12px;
+  background: rgba(30, 30, 30, 0.04);
+  height: 32px;
+  align-items: center;
+  color: #1e1e1e;
+}
+.editor-post-status .editor-post-status-label.has-icon {
+  padding: 0 8px 0 12px;
+}
+.editor-post-status .editor-post-status-label.has-icon:hover {
+  background: rgba(30, 30, 30, 0.08);
+}
+.editor-post-status .editor-post-status-label.has-status-publish, .editor-post-status .editor-post-status-label.has-status-private, .editor-post-status .editor-post-status-label.has-status-future {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  color: var(--wp-admin-theme-color);
+}
+.editor-post-status .editor-post-status-label.has-status-publish:hover, .editor-post-status .editor-post-status-label.has-status-private:hover, .editor-post-status .editor-post-status-label.has-status-future:hover {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+
+.editor-change-status__password-fieldset {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 16px;
+}
+
+.editor-change-status__content .components-popover__content {
+  min-width: 320px;
+  padding: 16px;
+}
+.editor-change-status__content .editor-change-status__options .components-base-control__field > .components-v-stack {
+  gap: 12px;
+}
+.editor-change-status__content .editor-change-status__options .components-radio-control__option {
+  align-items: flex-start;
+}
+.editor-change-status__content .editor-change-status__options label .components-text {
+  display: block;
+  margin-top: 4px;
+}
+.editor-change-status__content .editor-change-status__password-legend {
+  padding: 0;
+  margin-bottom: 8px;
+}
+
 .editor-post-sync-status__value {
   padding: 6px 0 6px 12px;
 }
@@ -1225,16 +1704,12 @@
   margin: 8px;
 }
 
-.editor-post-url__link-label {
-  font-size: 13px;
-  font-weight: 400;
-  margin: 0;
-}
-
 /* rtl:begin:ignore */
 .editor-post-url__link {
   direction: ltr;
   word-break: break-word;
+  margin-top: 4px;
+  color: #757575;
 }
 
 /* rtl:end:ignore */
@@ -1242,6 +1717,10 @@
   font-weight: 600;
 }
 
+.editor-post-url__input input.components-input-control__input {
+  padding-inline-start: 0 !important;
+}
+
 .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1384,6 +1863,31 @@
   justify-content: space-between;
 }
 
+.editor-start-page-options__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+}
+@media (min-width: 782px) {
+  .editor-start-page-options__modal-content .block-editor-block-patterns-list {
+    column-count: 3;
+  }
+}
+@media (min-width: 1280px) {
+  .editor-start-page-options__modal-content .block-editor-block-patterns-list {
+    column-count: 4;
+  }
+}
+.editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 24px;
+}
+.editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  min-height: 100px;
+}
+.editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+}
+
 .table-of-contents__popover.components-popover .components-popover__content {
   min-width: 380px;
 }
@@ -1453,11 +1957,23 @@
   font-weight: 600;
 }
 
-.editor-template-validation-notice {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.editor-template-areas {
+  margin-top: 16px;
 }
-.editor-template-validation-notice .components-button {
-  margin-left: 5px;
+.editor-template-areas__list {
+  margin: 0;
+}
+.editor-template-areas__list > li {
+  margin: 0;
+}
+.editor-template-areas__item {
+  width: 100%;
+}
+.editor-template-areas__item.components-button.has-icon {
+  padding: 0;
+}
+
+h3.components-heading.editor-template-areas__title {
+  font-weight: 500;
+  margin: 0 0 8px;
 }