@wordpress/edit-site 5.18.0 → 5.19.0

package/build-style/style.css

@@ -475,7 +475,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: none;
   margin: 0;
 }
-.interface-pinned-items .components-button:nth-last-child(1), .interface-pinned-items .components-button:nth-last-child(2) {
+.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"], .interface-pinned-items .components-button[aria-controls="edit-site:global-styles"] {
   display: flex;
 }
 .interface-pinned-items .components-button svg {
@@ -787,6 +787,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: block;
   width: 100%;
   height: 100%;
+  background: #fff;
 }
 .edit-site-visual-editor .edit-site-visual-editor__editor-canvas {
   height: 100%;
@@ -819,7 +820,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   	See: https://github.com/WordPress/gutenberg/issues/40450
   */
 }
-.edit-site-visual-editor.is-view-mode .block-editor-block-contextual-toolbar {
+.edit-site-visual-editor.is-view-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: none;
 }
 
@@ -908,6 +909,98 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 }
 
+.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  left: 0;
+}
+@media (min-width: 783px) {
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+.auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0;
+}
+@media (min-width: 783px) {
+  .folded .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+
+body.is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0 !important;
+}
+
+.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 31;
+  display: block;
+  width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 180px;
+    position: fixed;
+    top: 32px;
+    min-height: initial;
+    display: flex;
+    height: 60px;
+    align-items: center;
+    width: calc(100% - 180px);
+  }
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 240px;
+    top: 0;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 80px;
+    width: calc(100% + 40px - 180px);
+  }
+  .is-fullscreen-mode .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 144px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
+  }
+}
+
 .edit-site-canvas-loader {
   width: 100%;
   height: 100%;
@@ -918,7 +1011,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   opacity: 0;
   align-items: center;
   justify-content: center;
-  animation: 0.5s ease 1s edit-site-canvas-loader__fade-in-animation;
+  animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1729,6 +1822,9 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
+.edit-site-list__rename-modal {
+  z-index: 1000001;
+}
 @media (min-width: 782px) {
   .edit-site-list__rename-modal .components-base-control {
     width: 320px;
@@ -2021,9 +2117,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   fill: #fff;
 }
 .edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon {
-  display: inline-flex;
-}
-.edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon svg {
   fill: currentcolor;
 }
 
@@ -2168,15 +2261,34 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-sizing: content-box;
 }
 
-.edit-site-page-panels__edit-template-preview {
-  border: 1px solid #e0e0e0;
-  height: 200px;
-  max-height: 200px;
-  overflow: hidden;
+.edit-site-swap-template-modal {
+  z-index: 1000001;
 }
 
-.edit-site-page-panels__edit-template-button {
-  justify-content: center;
+.edit-site-page-panels__swap-template__confirm-modal__actions {
+  margin-top: 24px;
+}
+
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+  padding-top: 2px;
+}
+@media (min-width: 782px) {
+  .edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+    column-count: 3;
+  }
+}
+@media (min-width: 1280px) {
+  .edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+    column-count: 4;
+  }
+}
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+}
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__item:not(:focus):not(:hover) .block-editor-block-preview__container {
+  box-shadow: 0 0 0 1px #ddd;
 }
 
 .edit-site-change-status__content .components-popover__content {
@@ -2196,10 +2308,15 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-summary-field .components-dropdown {
-  flex-grow: 1;
+  width: 70%;
 }
 .edit-site-summary-field .edit-site-summary-field__trigger {
-  width: 100%;
+  max-width: 100%;
+  display: block;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .edit-site-summary-field .edit-site-summary-field__label {
   width: 30%;
@@ -3188,10 +3305,13 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar__notice.is-dismissible {
   padding-right: 8px;
 }
+.edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]) {
+  color: #ccc;
+}
 .edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus,
 .edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active,
 .edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: #f0f0f0;
+  color: #fff;
 }
 
 /* In general style overrides are discouraged.
@@ -3212,6 +3332,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
   color: #e0e0e0 !important;
   background: #2f2f2f !important;
+  border-radius: 2px;
 }
 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
   border: 4px !important;
@@ -3220,20 +3341,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #949494;
 }
 
-.edit-site-sidebar-navigation-screen-details-footer {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-}
-
-.edit-site-sidebar-navigation-screen-global-styles__revisions {
-  border-radius: 2px;
-}
-.edit-site-sidebar-navigation-screen-global-styles__revisions:not(:hover) {
-  color: #e0e0e0;
+.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
+.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
+.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
+  background: none;
 }
-.edit-site-sidebar-navigation-screen-global-styles__revisions:not(:hover) .edit-site-sidebar-navigation-screen-global-styles__revisions__label {
-  color: #949494;
+.edit-site-sidebar-navigation-screen-details-footer .edit-site-sidebar-navigation-screen-details-footer__icon {
+  margin-left: auto;
+  fill: #949494;
 }
 
 .sidebar-navigation__more-menu .components-button {
@@ -3352,10 +3467,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   margin-right: 8px;
 }
 
-.edit-site-sidebar-navigation-screen-pattern__lock-icon {
-  display: inline-flex;
-}
-
 .edit-site-sidebar-navigation-screen-patterns__group {
   margin-bottom: 24px;
 }
@@ -3560,10 +3671,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #fff;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
-  display: none;
-}
-
 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
   margin-left: auto;
   margin-right: auto;
@@ -3701,6 +3808,106 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   width: 100%;
 }
 
+.font-library-modal .components-modal__header {
+  border-bottom: none;
+}
+.font-library-modal .components-modal__content {
+  padding-top: 0;
+}
+.font-library-modal .font-library-modal__subtitle {
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 11px;
+}
+
+.font-library-modal__tab-layout main {
+  padding-bottom: 4rem;
+}
+.font-library-modal__tab-layout footer {
+  border-top: 1px solid #e5e5e5;
+  margin: 0 -32px -32px;
+  padding: 16px 32px;
+  position: absolute;
+  bottom: 32px;
+  width: 100%;
+  background-color: #fff;
+}
+
+.font-library-modal__fonts-grid .font-library-modal__fonts-grid__main {
+  display: flex;
+  flex-direction: column;
+}
+
+.font-library-modal__font-card {
+  border: 1px solid #e5e5e5;
+  height: auto;
+  padding: 1rem;
+  margin-top: -1px;
+  /* To collapse the margin with the previous element */
+}
+.font-library-modal__font-card .font-library-modal__font-card__name {
+  font-weight: bold;
+}
+.font-library-modal__font-card .font-library-modal__font-card__count {
+  color: #6e6e6e;
+}
+
+.font-library-modal__library-font-variant {
+  border: 1px solid #e5e5e5;
+  padding: 1rem;
+  margin-top: -1px;
+  /* To collapse the margin with the previous element */
+}
+
+.font-library-modal__font-variant {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 1rem;
+}
+
+.font-library-modal__tab-panel [role=tablist] {
+  position: sticky;
+  top: 0;
+  width: calc(100% + 64px);
+  border-bottom: 1px solid #e6e6e6;
+  background: #fff;
+  margin: 0 -32px;
+  padding: 0 16px;
+  z-index: 1;
+}
+
+.font-library-modal__upload-area {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100px;
+  width: 100%;
+  background-color: #f0f0f0;
+}
+
+.font-library-modal__font-name {
+  font-weight: bold;
+}
+
+.font-library-modal__font-filename {
+  color: #6e6e6e;
+}
+
+.font-library-modal__font-variant_demo-wrapper {
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+.font-library-modal__font-variant_demo-wrapper::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 30vw;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
+}
+
 body.js #wpadminbar {
   display: none;
 }