@wordpress/edit-site 6.33.3 → 6.34.0

package/build-style/style.css

@@ -403,7 +403,7 @@
 }
 .dataviews-title-field {
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 499;
   color: #2f2f2f;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -500,7 +500,7 @@
 
 .dataviews-bulk-actions-footer__item-count {
   color: #1e1e1e;
-  font-weight: 500;
+  font-weight: 499;
   font-size: 11px;
   text-transform: uppercase;
 }
@@ -616,7 +616,7 @@
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
-  font-weight: 500;
+  font-weight: 499;
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
@@ -1135,14 +1135,14 @@
 }
 .dataviews-pagination__page-select {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   text-transform: uppercase;
 }
 
 @media (min-width: 600px) {
   .dataviews-pagination__page-select .components-select-control__input {
     font-size: 11px !important;
-    font-weight: 500;
+    font-weight: 499;
   }
 }
 .dataviews-action-modal {
@@ -1474,7 +1474,7 @@
 
 .dataviews-view-grid__group-header {
   font-size: 15px;
-  font-weight: 500;
+  font-weight: 499;
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 48px;
@@ -1703,7 +1703,7 @@ div.dataviews-view-list {
 
 .dataviews-view-list__group-header {
   font-size: 15px;
-  font-weight: 500;
+  font-weight: 499;
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 24px;
@@ -1865,7 +1865,7 @@ div.dataviews-view-list {
   padding-left: 12px;
   font-size: 11px;
   text-transform: uppercase;
-  font-weight: 500;
+  font-weight: 499;
 }
 
 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
@@ -1898,7 +1898,7 @@ div.dataviews-view-list {
   padding: 4px 8px;
   font-size: 11px;
   text-transform: uppercase;
-  font-weight: 500;
+  font-weight: 499;
 }
 
 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
@@ -1998,7 +1998,7 @@ div.dataviews-view-list {
 }
 
 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
-  font-weight: 500;
+  font-weight: 499;
   padding: 12px 48px;
   color: #1e1e1e;
 }
@@ -2156,7 +2156,7 @@ div.dataviews-view-list {
 
 .dataviews-view-picker-grid-group__header {
   font-size: 15px;
-  font-weight: 500;
+  font-weight: 499;
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 48px;
@@ -2278,7 +2278,7 @@ div.dataviews-view-list {
 
 .dataforms-layouts-card__field-header-label {
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-weight: 500;
+  font-weight: 499;
   font-size: 15px;
   line-height: 20px;
 }
@@ -2688,193 +2688,516 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   flex: 1;
 }
 
-.edit-site-custom-template-modal__contents-wrapper {
-  height: 100%;
-  justify-content: flex-start !important;
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * 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.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Typography
+ */
+/**
+ * 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.
+ */
+@media (min-width: 782px) {
+  .font-library-modal.font-library-modal {
+    width: 65vw;
+  }
 }
-.edit-site-custom-template-modal__contents-wrapper > * {
-  width: 100%;
+.font-library-modal .components-modal__header {
+  border-bottom: none;
 }
-.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
-  margin-left: -12px;
-  margin-right: -12px;
-  width: calc(100% + 24px);
+
+.font-library-modal .components-modal__content {
+  padding-top: 0;
+  margin-bottom: 70px;
 }
-.edit-site-custom-template-modal__contents > .components-button {
-  height: auto;
+
+.font-library-modal .font-library-modal__subtitle {
+  text-transform: uppercase;
+  font-weight: 499;
+  font-size: 11px;
+}
+
+.font-library-modal .components-navigator-screen {
+  padding: 3px;
+}
+
+.font-library-modal__tabpanel-layout {
+  margin-top: 32px;
+}
+
+.font-library-modal__tabpanel-layout .font-library-modal__loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: absolute;
+  left: 0;
+  top: 0;
+  align-items: center;
   justify-content: center;
+  padding-top: 124px;
 }
-@media (min-width: 782px) {
-  .edit-site-custom-template-modal {
-    width: 456px;
-  }
+
+.font-library-modal__footer {
+  border-top: 1px solid #ddd;
+  margin: 0 -32px -32px;
+  padding: 16px 32px;
+  position: absolute;
+  bottom: 32px;
+  width: 100%;
+  height: 70px;
+  background-color: #fff;
+}
+
+.font-library-modal__category-select {
+  min-width: 40%;
+}
+
+.font-library-modal__page-selection {
+  font-size: 11px;
+  font-weight: 499;
+  text-transform: uppercase;
 }
+
 @media (min-width: 600px) {
-  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
-    max-height: 224px;
-    overflow-y: auto;
+  .font-library-modal__page-selection .font-library-modal__page-selection-trigger {
+    font-size: 11px !important;
+    font-weight: 499;
   }
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
+.font-library-modal__fonts-title {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list {
+  list-style: none;
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list-item {
+  margin-bottom: 0;
+}
+
+.font-library-modal__font-card {
+  border: 1px solid #ddd;
+  width: 100%;
+  height: auto !important;
+  padding: 16px;
+  margin-top: -1px; /* To collapse the margin with the previous element */
+  background-color: #f0f0f0;
+}
+
+.font-library-modal__font-card:hover {
+  background-color: #f0f0f0;
+}
+
+.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: #757575;
+}
+
+.font-library-modal__font-card .font-library-modal__font-variant_demo-image {
   display: block;
+  height: 24px;
+  width: auto;
+}
+
+.font-library-modal__font-card .font-library-modal__font-variant_demo-text {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+@media not (prefers-reduced-motion) {
+  .font-library-modal__font-card .font-library-modal__font-variant_demo-text {
+    transition: opacity 0.3s ease-in-out;
+  }
+}
+.font-library-modal__tablist-container {
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  margin: 0 -32px;
+  padding: 0 16px;
+  z-index: 1;
+}
+
+.font-library-modal__tablist-container [role=tablist] {
+  margin-bottom: -1px;
+}
+
+.font-library-modal__upload-area {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 256px !important;
   width: 100%;
-  text-align: left;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  height: auto;
-  padding: 8px 12px;
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
-  font-weight: 700;
-  background: none;
+
+button.font-library-modal__upload-area {
+  background-color: #f0f0f0;
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
+
+.font-library-modal__local-fonts {
+  margin: 0 auto;
+  width: 80%;
+}
+
+.font-library-modal__local-fonts .font-library-modal__upload-area__text {
+  color: #757575;
+}
+
+.font-library__google-fonts-confirm {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 64px;
+}
+
+.font-library__google-fonts-confirm p {
+  line-height: 1.4;
+}
+
+.font-library__google-fonts-confirm h2 {
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.font-library__google-fonts-confirm .components-card {
+  padding: 16px;
+  width: 400px;
+}
+
+.font-library__google-fonts-confirm .components-button {
+  width: 100%;
+  justify-content: center;
+}
+
+.font-library-modal__select-all {
+  padding: 16px 16px 16px 17px;
+}
+
+.font-library-modal__select-all .components-checkbox-control__label {
+  padding-left: 16px;
+}
+
+.global-styles-ui-pagination .components-button.is-tertiary {
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+}
+
+.global-styles-ui-screen-revisions__revisions-list {
+  list-style: none;
+  margin: 0 16px 16px 16px;
+  flex-grow: 1;
+}
+
+.global-styles-ui-screen-revisions__revisions-list li {
+  margin-bottom: 0;
+}
+
+.global-styles-ui-screen-revisions__revision-item {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+
+.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+
+.global-styles-ui-screen-revisions__revision-item:hover {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
+
+.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
   color: var(--wp-admin-theme-color);
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
+
+.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
+  position: absolute;
+  content: "\a";
+  display: block;
+}
+
+.global-styles-ui-screen-revisions__revision-item::before {
+  background: #ddd;
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  top: 18px;
+  left: 17px;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  border: 4px solid transparent;
+}
+
+.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
+  border-radius: 2px;
+  outline: 3px solid transparent;
+  outline-offset: -2px;
   color: var(--wp-admin-theme-color);
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
-  background-color: #f0f0f0;
+
+.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
+  color: var(--wp-admin-theme-color);
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+
+.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
+  background: var(--wp-admin-theme-color);
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
+
+.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
+.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
+.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
+  color: #1e1e1e;
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
-  word-break: break-all;
-  color: #757575;
+
+.global-styles-ui-screen-revisions__revision-item::after {
+  height: 100%;
+  left: 16px;
+  top: 0;
+  width: 0;
+  border: 0.5px solid #ddd;
 }
 
-.edit-site-custom-template-modal__no-results {
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  padding: 16px;
+.global-styles-ui-screen-revisions__revision-item:first-child::after {
+  top: 18px;
+}
+
+.global-styles-ui-screen-revisions__revision-item:last-child::after {
+  height: 18px;
+}
+
+.global-styles-ui-screen-revisions__revision-item-wrapper {
+  display: block;
+  padding: 12px 12px 4px 40px;
 }
 
-.edit-site-custom-generic-template__modal .components-modal__header {
-  border-bottom: none;
+.global-styles-ui-screen-revisions__apply-button.is-primary,
+.global-styles-ui-screen-revisions__applied-text {
+  align-self: flex-start;
+  margin: 4px 12px 12px 40px;
 }
-.edit-site-custom-generic-template__modal .components-modal__content::before {
-  margin-bottom: 4px;
+
+.global-styles-ui-screen-revisions__changes,
+.global-styles-ui-screen-revisions__meta,
+.global-styles-ui-screen-revisions__applied-text {
+  color: #757575;
+  font-size: 12px;
 }
 
-@media (min-width: 960px) {
-  .edit-site-add-new-template__modal {
-    max-width: 832px;
-    margin-top: 64px;
-    width: calc(100% - 128px);
-    max-height: calc(100% - 128px);
-  }
+.global-styles-ui-screen-revisions__description {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
 }
-.edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
-.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
-  fill: var(--wp-admin-theme-color);
+
+.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 12px;
 }
-.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
-  flex-grow: 1;
+
+.global-styles-ui-screen-revisions__meta {
+  display: flex;
+  justify-content: start;
+  width: 100%;
   align-items: flex-start;
+  text-align: left;
+  margin-bottom: 4px;
 }
-.edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
-  padding: 8px;
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+.global-styles-ui-screen-revisions__meta img {
+  width: 16px;
+  height: 16px;
   border-radius: 100%;
-  max-height: 40px;
-  max-width: 40px;
+  margin-right: 8px;
 }
 
-.edit-site-custom-template-modal__contents > .components-button,
-.edit-site-add-new-template__template-list__contents > .components-button {
-  padding: 32px;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ddd;
-  justify-content: center;
-  outline: 1px solid transparent;
+.global-styles-ui-screen-revisions__loading {
+  margin: 24px auto !important;
 }
-.edit-site-custom-template-modal__contents > .components-button span:first-child,
-.edit-site-add-new-template__template-list__contents > .components-button span:first-child {
-  color: #1e1e1e;
+
+.global-styles-ui-screen-revisions__changes {
+  text-align: left;
+  line-height: 1.4;
+  margin-left: 12px;
+  list-style: disc;
 }
-.edit-site-custom-template-modal__contents > .components-button span,
-.edit-site-add-new-template__template-list__contents > .components-button span {
-  color: #757575;
+
+.global-styles-ui-screen-revisions__changes li {
+  margin-bottom: 4px;
 }
-.edit-site-custom-template-modal__contents > .components-button:hover,
-.edit-site-add-new-template__template-list__contents > .components-button:hover {
-  color: var(--wp-admin-theme-color-darker-10);
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-  border-color: transparent;
+
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
+  justify-content: space-between;
+  gap: 2px;
 }
-.edit-site-custom-template-modal__contents > .components-button:hover span,
-.edit-site-add-new-template__template-list__contents > .components-button:hover span {
-  color: var(--wp-admin-theme-color);
+
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
+  position: absolute;
+  left: -1000px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
 }
-.edit-site-custom-template-modal__contents > .components-button:focus,
-.edit-site-add-new-template__template-list__contents > .components-button:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-color: transparent;
-  outline: 3px solid transparent;
+
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
+  font-size: 12px;
+  will-change: opacity;
 }
-.edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
-.edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
-  color: var(--wp-admin-theme-color);
+
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
+  color: #1e1e1e;
 }
-.edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
-.edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
-.edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
-.edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
-  grid-column: 1/-1;
+
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
+.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
+  color: #949494;
 }
 
-.edit-site-add-new-template__template-list__contents > .components-button {
-  height: 100%;
-  text-align: start;
-  align-items: flex-start;
+.global-styles-ui-screen-revisions__footer {
+  height: 56px;
+  z-index: 1;
+  position: sticky;
+  min-width: 100%;
+  bottom: 0;
+  background: #fff;
+  padding: 12px;
+  border-top: 1px solid #ddd;
 }
 
-.edit-site-visual-editor__editor-canvas.is-focused {
-  outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
-  outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+.global-styles-ui-variations_item {
+  box-sizing: border-box;
+  cursor: pointer;
 }
 
-.edit-site-canvas-loader {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  align-items: center;
-  justify-content: center;
+.global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
+  border-radius: 2px;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+  overflow: hidden;
+  position: relative;
 }
+
 @media not (prefers-reduced-motion) {
-  .edit-site-canvas-loader {
-    animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
-    animation-fill-mode: forwards;
+  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
+    transition: outline 0.1s linear;
   }
 }
-.edit-site-canvas-loader > div {
-  width: 160px;
+.global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
+  height: 32px;
 }
 
-@keyframes edit-site-canvas-loader__fade-in-animation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
+  overflow: hidden;
+}
+
+.global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
+  outline-color: rgba(0, 0, 0, 0.3);
+}
+
+.global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview, .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
+  outline-color: #1e1e1e;
+  outline-offset: 1px;
+  outline-width: var(--wp-admin-border-width-focus);
 }
-.edit-site-global-styles-preview {
+
+.global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
+  outline-color: var(--wp-admin-theme-color);
+}
+
+.global-styles-ui-preview {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2882,85 +3205,85 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   cursor: pointer;
 }
 
-.edit-site-global-styles-preview__wrapper {
+.global-styles-ui-preview__wrapper {
   max-width: 100%;
   display: block;
   width: 100%;
 }
 
-.edit-site-typography-preview {
+.global-styles-ui-typography-preview {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
   background: #f0f0f0;
   border-radius: 2px;
   overflow: hidden;
 }
 
-.edit-site-font-size__item {
+.global-styles-ui-font-size__item {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   line-break: anywhere;
 }
 
-.edit-site-font-size__item-value {
+.global-styles-ui-font-size__item-value {
   color: #757575;
 }
 
-.edit-site-global-styles-screen {
+.global-styles-ui-screen {
   margin: 12px 16px 16px;
 }
 
-.edit-site-global-styles-screen-typography__indicator {
+.global-styles-ui-screen-typography__indicator {
   height: 24px;
   width: 24px;
   font-size: 14px;
   display: flex !important;
   align-items: center;
   justify-content: center;
-  border-radius: 1px;
+  border-radius: 2px;
+}
+
+.global-styles-ui-block-types-search {
+  margin-bottom: 10px;
+  padding: 0 20px;
 }
 
-.edit-site-global-styles-screen-typography__font-variants-count {
+.global-styles-ui-screen-typography__font-variants-count {
   color: #757575;
 }
 
-.edit-site-global-styles-font-families__manage-fonts {
+.global-styles-ui-font-families__manage-fonts {
   justify-content: center;
 }
 
-.edit-site-global-styles-screen .color-block-support-panel {
+.global-styles-ui-screen .color-block-support-panel {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
   border-top: none;
-  row-gap: calc(4px * 3);
+  row-gap: 12px;
 }
 
-.edit-site-global-styles-header__description {
+.global-styles-ui-header__description {
   padding: 0 16px;
 }
 
-.edit-site-block-types-search {
-  margin-bottom: 8px;
-  padding: 0 16px;
-}
-
-.edit-site-global-styles-header {
+.global-styles-ui-header {
   margin-bottom: 0 !important;
 }
 
-.edit-site-global-styles-subtitle {
+.global-styles-ui-subtitle {
   margin-bottom: 0 !important;
   text-transform: uppercase;
-  font-weight: 500 !important;
+  font-weight: 499 !important;
   font-size: 11px !important;
 }
 
-.edit-site-global-styles-section-title {
+.global-styles-ui-section-title {
   color: #2f2f2f;
   font-weight: 600;
   line-height: 1.2;
@@ -2968,59 +3291,60 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   margin: 0;
 }
 
-.edit-site-global-styles-icon-with-current-color {
+.global-styles-ui-icon-with-current-color {
   fill: currentColor;
 }
 
-.edit-site-global-styles__color-indicator-wrapper {
+.global-styles-ui__color-indicator-wrapper {
   height: 24px;
   flex-shrink: 0;
 }
 
-.edit-site-global-styles__shadows-panel__options-container,
-.edit-site-global-styles__typography-panel__options-container {
+.global-styles-ui__shadows-panel__options-container,
+.global-styles-ui__typography-panel__options-container {
   height: 24px;
 }
 
-.edit-site-global-styles__block-preview-panel {
+.global-styles-ui__block-preview-panel {
   position: relative;
   width: 100%;
-  border: #e0e0e0 1px solid;
-  border-radius: 4px;
+  border: #ddd 1px solid;
+  border-radius: 2px;
   overflow: hidden;
 }
 
-.edit-site-global-styles__shadow-preview-panel {
+.global-styles-ui__shadow-preview-panel {
   height: 144px;
-  border: #e0e0e0 1px solid;
-  border-radius: 4px;
+  border: #ddd 1px solid;
+  border-radius: 2px;
   overflow: auto;
   background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75%, #f5f5f5 0, #f5f5f5);
   background-position: 0 0, 8px 8px;
   background-size: 16px 16px;
 }
-.edit-site-global-styles__shadow-preview-panel .edit-site-global-styles__shadow-preview-block {
-  border: #e0e0e0 1px solid;
+
+.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
+  border: #ddd 1px solid;
   border-radius: 2px;
   background-color: #fff;
   width: 60%;
   height: 60px;
 }
 
-.edit-site-global-styles__shadow-editor__dropdown-content {
+.global-styles-ui__shadow-editor__dropdown-content {
   width: 280px;
 }
 
-.edit-site-global-styles__shadow-editor-panel {
+.global-styles-ui__shadow-editor-panel {
   margin-bottom: 4px;
 }
 
-.edit-site-global-styles__shadow-editor__dropdown {
+.global-styles-ui__shadow-editor__dropdown {
   width: 100%;
   position: relative;
 }
 
-.edit-site-global-styles__shadow-editor__dropdown-toggle {
+.global-styles-ui__shadow-editor__dropdown-toggle {
   width: 100%;
   height: auto;
   padding-top: 8px;
@@ -3028,328 +3352,298 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   text-align: left;
   border-radius: inherit;
 }
-.edit-site-global-styles__shadow-editor__dropdown-toggle.is-open {
+
+.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
 
-.edit-site-global-styles__shadow-editor__remove-button {
+.global-styles-ui__shadow-editor__remove-button {
   position: absolute;
   right: 8px;
   top: 8px;
   opacity: 0;
 }
-.edit-site-global-styles__shadow-editor__remove-button.edit-site-global-styles__shadow-editor__remove-button {
+
+.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
   border: none;
 }
-.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + .edit-site-global-styles__shadow-editor__remove-button, .edit-site-global-styles__shadow-editor__remove-button:focus, .edit-site-global-styles__shadow-editor__remove-button:hover {
+
+.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
   opacity: 1;
 }
+
 @media (hover: none) {
-  .edit-site-global-styles__shadow-editor__remove-button {
+  .global-styles-ui__shadow-editor__remove-button {
     opacity: 1;
   }
 }
-
-.edit-site-global-styles-screen-css {
+.global-styles-ui-screen-css {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   margin: 16px;
 }
-.edit-site-global-styles-screen-css .components-v-stack {
+
+.global-styles-ui-screen-css .components-v-stack {
   flex: 1 1 auto;
 }
-.edit-site-global-styles-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
+
+.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
 }
-.edit-site-global-styles-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
+
+.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
 }
-.edit-site-global-styles-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
+
+.global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
   flex: 1 1 auto;
   /*rtl:ignore*/
   direction: ltr;
 }
 
-.edit-site-global-styles-screen-css-help-link {
+.global-styles-ui-screen-css-help-link {
   display: inline-block;
-  margin-top: 8px;
-}
-
-.edit-site-global-styles-screen-variations {
-  margin-top: 16px;
-  border-top: 1px solid #ddd;
-}
-.edit-site-global-styles-screen-variations > * {
-  margin: 24px 16px;
-}
-
-.edit-site-global-styles-sidebar__navigator-provider {
-  height: 100%;
-}
-
-.edit-site-global-styles-sidebar__navigator-screen {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.edit-site-global-styles-sidebar__navigator-screen .single-column {
-  grid-column: span 1;
-}
-
-.edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
-.edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
-  background: unset;
-  color: inherit;
-}
-
-.edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
-  fill: currentColor;
-}
-
-.edit-site-global-styles-screen-root__active-style-tile.edit-site-global-styles-screen-root__active-style-tile, .edit-site-global-styles-screen-root__active-style-tile.edit-site-global-styles-screen-root__active-style-tile .edit-site-global-styles-screen-root__active-style-tile-preview {
-  border-radius: 2px;
-}
-
-.edit-site-global-styles-screen-revisions__revisions-list {
-  list-style: none;
-  margin: 0 16px 16px 16px;
-  flex-grow: 1;
-}
-.edit-site-global-styles-screen-revisions__revisions-list li {
-  margin-bottom: 0;
-}
-
-.edit-site-global-styles-screen-revisions__revision-item {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-}
-.edit-site-global-styles-screen-revisions__revision-item[role=option]:active, .edit-site-global-styles-screen-revisions__revision-item[role=option]:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.edit-site-global-styles-screen-revisions__revision-item:hover {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-}
-.edit-site-global-styles-screen-revisions__revision-item:hover .edit-site-global-styles-screen-revisions__date {
-  color: var(--wp-admin-theme-color);
-}
-.edit-site-global-styles-screen-revisions__revision-item::before, .edit-site-global-styles-screen-revisions__revision-item::after {
-  position: absolute;
-  content: "\a";
-  display: block;
-}
-.edit-site-global-styles-screen-revisions__revision-item::before {
-  background: #ddd;
-  border-radius: 50%;
-  height: 8px;
-  width: 8px;
-  top: 18px;
-  left: 17px;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-  border: 4px solid transparent;
-}
-.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] {
-  border-radius: 2px;
-  outline: 3px solid transparent;
-  outline-offset: -2px;
-  color: var(--wp-admin-theme-color);
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-}
-.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__date {
-  color: var(--wp-admin-theme-color);
+  margin-top: 8px;
 }
-.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true]::before {
-  background: var(--wp-admin-theme-color);
+
+.global-styles-ui-screen-variations {
+  margin-top: 16px;
+  border-top: 1px solid #ddd;
 }
-.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__changes > li,
-.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__meta,
-.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__applied-text {
-  color: #1e1e1e;
+
+.global-styles-ui-screen-variations > * {
+  margin: 24px 16px;
 }
-.edit-site-global-styles-screen-revisions__revision-item::after {
+
+.global-styles-ui-sidebar__navigator-provider {
   height: 100%;
-  left: 16px;
-  top: 0;
-  width: 0;
-  border: 0.5px solid #ddd;
 }
-.edit-site-global-styles-screen-revisions__revision-item:first-child::after {
-  top: 18px;
+
+.global-styles-ui-sidebar__navigator-screen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.edit-site-global-styles-screen-revisions__revision-item:last-child::after {
-  height: 18px;
+
+.global-styles-ui-sidebar__navigator-screen .single-column {
+  grid-column: span 1;
 }
 
-.edit-site-global-styles-screen-revisions__revision-item-wrapper {
-  display: block;
-  padding: 12px 12px 4px 40px;
+.global-styles-ui-screen-root.global-styles-ui-screen-root,
+.global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
+  background: unset;
+  color: inherit;
 }
 
-.edit-site-global-styles-screen-revisions__apply-button.is-primary,
-.edit-site-global-styles-screen-revisions__applied-text {
-  align-self: flex-start;
-  margin: 4px 12px 12px 40px;
+.global-styles-ui-sidebar__panel .block-editor-block-icon svg {
+  fill: currentColor;
 }
 
-.edit-site-global-styles-screen-revisions__changes,
-.edit-site-global-styles-screen-revisions__meta,
-.edit-site-global-styles-screen-revisions__applied-text {
-  color: #757575;
-  font-size: 12px;
+.global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile, .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile .global-styles-ui-screen-root__active-style-tile-preview {
+  border-radius: 2px;
 }
 
-.edit-site-global-styles-screen-revisions__description {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+.global-styles-ui-color-palette-panel,
+.global-styles-ui-gradient-palette-panel {
+  padding: 16px;
 }
-.edit-site-global-styles-screen-revisions__description .edit-site-global-styles-screen-revisions__date {
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 12px;
+
+.components-navigator-screen {
+  padding: 12px;
 }
 
-.edit-site-global-styles-screen-revisions__meta {
-  display: flex;
-  justify-content: start;
+.edit-site-custom-template-modal__contents-wrapper {
+  height: 100%;
+  justify-content: flex-start !important;
+}
+.edit-site-custom-template-modal__contents-wrapper > * {
   width: 100%;
-  align-items: flex-start;
-  text-align: left;
-  margin-bottom: 4px;
 }
-.edit-site-global-styles-screen-revisions__meta img {
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-  margin-right: 8px;
+.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
+  margin-left: -12px;
+  margin-right: -12px;
+  width: calc(100% + 24px);
 }
-
-.edit-site-global-styles-screen-revisions__loading {
-  margin: 24px auto !important;
+.edit-site-custom-template-modal__contents > .components-button {
+  height: auto;
+  justify-content: center;
 }
-
-.edit-site-global-styles-screen-revisions__changes {
+@media (min-width: 782px) {
+  .edit-site-custom-template-modal {
+    width: 456px;
+  }
+}
+@media (min-width: 600px) {
+  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
+    max-height: 224px;
+    overflow-y: auto;
+  }
+}
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
+  display: block;
+  width: 100%;
   text-align: left;
-  line-height: 1.4;
-  margin-left: 12px;
-  list-style: disc;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  height: auto;
+  padding: 8px 12px;
 }
-.edit-site-global-styles-screen-revisions__changes li {
-  margin-bottom: 4px;
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
+  font-weight: 700;
+  background: none;
 }
-
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
-  justify-content: space-between;
-  gap: 2px;
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .edit-site-pagination__total {
-  position: absolute;
-  left: -1000px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
+  color: var(--wp-admin-theme-color);
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-text {
-  font-size: 12px;
-  will-change: opacity;
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
+  color: var(--wp-admin-theme-color);
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary {
-  color: #1e1e1e;
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
+  background-color: #f0f0f0;
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:disabled,
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
-  color: #949494;
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+}
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
+  word-break: break-all;
+  color: #757575;
 }
 
-.edit-site-global-styles-screen-revisions__footer {
-  height: 56px;
-  z-index: 1;
-  position: sticky;
-  min-width: 100%;
-  bottom: 0;
-  background: #fff;
-  padding: 12px;
-  border-top: 1px solid #ddd;
+.edit-site-custom-template-modal__no-results {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding: 16px;
 }
 
-.edit-site-global-styles-sidebar {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
+.edit-site-custom-generic-template__modal .components-modal__header {
+  border-bottom: none;
 }
-.edit-site-global-styles-sidebar__panel {
-  flex: 1;
+.edit-site-custom-generic-template__modal .components-modal__content::before {
+  margin-bottom: 4px;
 }
 
-.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title {
-  margin: 0;
+@media (min-width: 960px) {
+  .edit-site-add-new-template__modal {
+    max-width: 832px;
+    margin-top: 64px;
+    width: calc(100% - 128px);
+    max-height: calc(100% - 128px);
+  }
 }
-
-.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
-  flex: 1;
+.edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
+.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
+  fill: var(--wp-admin-theme-color);
 }
-
-.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
-  font-size: 15.6px;
-  font-weight: 500;
+.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
+  flex-grow: 1;
+  align-items: flex-start;
 }
-
-.edit-site-global-styles-sidebar .components-navigation__item > button span {
-  font-weight: 500;
+.edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
+  padding: 8px;
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  border-radius: 100%;
+  max-height: 40px;
+  max-width: 40px;
 }
 
-.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
-  border: 0;
+.edit-site-custom-template-modal__contents > .components-button,
+.edit-site-add-new-template__template-list__contents > .components-button {
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
+  justify-content: center;
+  outline: 1px solid transparent;
 }
-
-.edit-site-global-styles-sidebar .single-column {
-  grid-column: span 1;
+.edit-site-custom-template-modal__contents > .components-button span:first-child,
+.edit-site-add-new-template__template-list__contents > .components-button span:first-child {
+  color: #1e1e1e;
 }
-
-.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
-  grid-column: 1/-1;
+.edit-site-custom-template-modal__contents > .components-button span,
+.edit-site-add-new-template__template-list__contents > .components-button span {
+  color: #757575;
 }
-
-.edit-site-global-styles-sidebar__blocks-group {
-  padding-top: 24px;
-  border-top: 1px solid #e0e0e0;
+.edit-site-custom-template-modal__contents > .components-button:hover,
+.edit-site-add-new-template__template-list__contents > .components-button:hover {
+  color: var(--wp-admin-theme-color-darker-10);
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  border-color: transparent;
 }
-
-.edit-site-global-styles-sidebar__blocks-group-help {
-  padding: 0 16px;
+.edit-site-custom-template-modal__contents > .components-button:hover span,
+.edit-site-add-new-template__template-list__contents > .components-button:hover span {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > .components-button:focus,
+.edit-site-add-new-template__template-list__contents > .components-button:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-color: transparent;
+  outline: 3px solid transparent;
+}
+.edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
+.edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
+.edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
+.edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
+.edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
+  grid-column: 1/-1;
 }
 
-.edit-site-global-styles-color-palette-panel,
-.edit-site-global-styles-gradient-palette-panel {
-  padding: 16px;
+.edit-site-add-new-template__template-list__contents > .components-button {
+  height: 100%;
+  text-align: start;
+  align-items: flex-start;
 }
 
-.edit-site-global-styles-sidebar hr {
-  margin: 0;
+.edit-site-visual-editor__editor-canvas.is-focused {
+  outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+  outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 }
 
-.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon {
-  width: auto;
+.edit-site-canvas-loader {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  align-items: center;
+  justify-content: center;
 }
-.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
-  display: none;
+@media not (prefers-reduced-motion) {
+  .edit-site-canvas-loader {
+    animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
+    animation-fill-mode: forwards;
+  }
 }
-.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon::after {
-  content: attr(aria-label);
-  font-size: 12px;
+.edit-site-canvas-loader > div {
+  width: 160px;
 }
 
+@keyframes edit-site-canvas-loader__fade-in-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .edit-site-patterns__delete-modal {
   width: 384px;
 }
@@ -3599,7 +3893,7 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .edit-site-welcome-guide {
   width: 312px;
 }
-.edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image, .edit-site-welcome-guide.guide-styles .edit-site-welcome-guide__image {
+.edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
   background: #00a0d2;
 }
 .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
@@ -4038,7 +4332,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
   background: #2f2f2f;
   color: #fff;
-  font-weight: 500;
+  font-weight: 499;
 }
 .edit-site-sidebar-navigation-item.components-item:focus-visible {
   transform: translateZ(0);
@@ -4104,28 +4398,21 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 
 @media (min-width: 782px) {
-  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
-    max-width: 292px;
-  }
-}
-
-.edit-site-global-styles-variation-title {
-  color: #ddd;
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 500;
+  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
+    max-width: 292px;
+  }
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
   outline-color: rgba(255, 255, 255, 0.05);
 }
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
   outline-color: rgba(255, 255, 255, 0.15);
 }
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
   outline-color: #fff;
 }
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item:focus-visible .edit-site-global-styles-variations_item-preview {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
   outline-color: var(--wp-admin-theme-color);
 }
 
@@ -4201,7 +4488,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   text-transform: uppercase;
 }
 
@@ -4274,7 +4561,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 .edit-site-sidebar-dataviews-dataview-item.is-selected {
   background: #2f2f2f;
-  font-weight: 500;
+  font-weight: 499;
   color: #fff;
 }
 
@@ -4305,7 +4592,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   display: block;
   flex-grow: 1;
   font-size: 15px;
-  font-weight: 500;
+  font-weight: 499;
   overflow: hidden;
   padding-right: 16px;
   margin-left: -4px;
@@ -4384,81 +4671,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
 }
 
-.edit-site-style-book {
-  height: 100%;
-}
-.edit-site-style-book.is-button {
-  border-radius: 8px;
-}
-.edit-site-style-book {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.edit-site-style-book__iframe {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-.edit-site-style-book__iframe.is-button {
-  border-radius: 8px;
-}
-.edit-site-style-book__iframe.is-focused {
-  outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
-  outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
-}
-
-.edit-site-style-book__tablist-container {
-  flex: none;
-  display: flex;
-  width: 100%;
-  padding-right: 56px;
-  background: #fff;
-}
-
-.edit-site-style-book__tabpanel {
-  flex: 1 0 auto;
-  overflow: auto;
-}
-
-.edit-site-editor-canvas-container {
-  height: 100%;
-  background-color: var(--wp-editor-canvas-background);
-}
-.edit-site-editor-canvas-container iframe {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.edit-site-layout.is-full-canvas .edit-site-editor-canvas-container {
-  padding: 24px 24px 0;
-}
-
-.edit-site-editor-canvas-container__section {
-  background: #fff;
-  border-radius: 8px;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-@media not (prefers-reduced-motion) {
-  .edit-site-editor-canvas-container__section {
-    transition: all 0.3s;
-  }
-}
-
-.edit-site-editor-canvas-container__close-button {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  z-index: 2;
-  background: #fff;
-}
-
 .edit-site-post-edit {
   padding: 24px;
 }
@@ -4589,243 +4801,27 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   background-color: var(--wp-admin-theme-color);
 }
 
-.edit-site-push-changes-to-global-styles-control .components-button {
-  justify-content: center;
-  width: 100%;
-}
-
-@media (min-width: 782px) {
-  .font-library-modal.font-library-modal {
-    width: 65vw;
-  }
-}
-.font-library-modal .components-modal__header {
-  border-bottom: none;
-}
-.font-library-modal .components-modal__content {
-  padding-top: 0;
-  margin-bottom: 70px;
-}
-.font-library-modal .font-library-modal__subtitle {
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: 11px;
-}
-.font-library-modal .components-navigator-screen {
-  padding: 3px;
-}
-
-.font-library-modal__tabpanel-layout {
-  margin-top: 32px;
-}
-.font-library-modal__tabpanel-layout .font-library-modal__loading {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: absolute;
-  left: 0;
-  top: 0;
-  align-items: center;
-  justify-content: center;
-  padding-top: 124px;
-}
-
-.font-library-modal__footer {
-  border-top: 1px solid #ddd;
-  margin: 0 -32px -32px;
-  padding: 16px 32px;
-  position: absolute;
-  bottom: 32px;
-  width: 100%;
-  height: 70px;
-  background-color: #fff;
-}
-
-.font-library-modal__page-selection {
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-@media (min-width: 600px) {
-  .font-library-modal__page-selection .components-select-control__input {
-    font-size: 11px !important;
-    font-weight: 500;
-  }
-}
-
-.font-library-modal__fonts-title {
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.font-library-modal__fonts-list {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.font-library-modal__fonts-list-item {
-  margin-bottom: 0;
-}
-
-.font-library-modal__font-card {
-  border: 1px solid #e0e0e0;
-  width: 100%;
-  height: auto !important;
-  padding: 16px;
-  margin-top: -1px; /* To collapse the margin with the previous element */
-}
-.font-library-modal__font-card:hover {
-  background-color: #f0f0f0;
-}
-.font-library-modal__font-card:focus {
-  position: relative;
-}
-.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: #757575;
-}
-.font-library-modal__font-card .font-library-modal__font-variant_demo-image {
-  display: block;
-  height: 24px;
-  width: auto;
-}
-.font-library-modal__font-card .font-library-modal__font-variant_demo-text {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-@media not (prefers-reduced-motion) {
-  .font-library-modal__font-card .font-library-modal__font-variant_demo-text {
-    transition: opacity 0.3s ease-in-out;
-  }
-}
-
-.font-library-modal__font-variant {
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 16px;
-}
-
-.font-library-modal__tablist-container {
-  position: sticky;
-  top: 0;
-  border-bottom: 1px solid #ddd;
-  background: #fff;
-  margin: 0 -32px;
-  padding: 0 16px;
-  z-index: 1;
-}
-.font-library-modal__tablist-container [role=tablist] {
-  margin-bottom: -1px;
-}
-
-.font-library-modal__upload-area {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  height: 256px !important;
-  width: 100%;
-}
-
-button.font-library-modal__upload-area {
-  background-color: #f0f0f0;
-}
-
-.font-library-modal__local-fonts {
-  margin: 0 auto;
-  width: 80%;
-}
-.font-library-modal__local-fonts .font-library-modal__upload-area__text {
-  color: #757575;
-}
-
-.font-library__google-fonts-confirm {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 64px;
-}
-.font-library__google-fonts-confirm p {
-  line-height: 1.4;
-}
-.font-library__google-fonts-confirm h2 {
-  font-size: 1.2rem;
-  font-weight: 400;
-}
-.font-library__google-fonts-confirm .components-card {
-  padding: 16px;
-  width: 400px;
-}
-.font-library__google-fonts-confirm .components-button {
-  width: 100%;
-  justify-content: center;
-}
-
-.font-library-modal__select-all {
-  padding: 16px 16px 16px 17px;
-}
-.font-library-modal__select-all .components-checkbox-control__label {
-  padding-left: 16px;
-}
-
 .edit-site-pagination .components-button.is-tertiary {
   width: 32px;
   height: 32px;
   justify-content: center;
 }
 
-.edit-site-global-styles-variations_item {
-  box-sizing: border-box;
-  cursor: pointer;
-}
-.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
-  border-radius: 2px;
-  outline: 1px solid rgba(0, 0, 0, 0.1);
-  outline-offset: -1px;
-  overflow: hidden;
-  position: relative;
-}
-@media not (prefers-reduced-motion) {
-  .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
-    transition: outline 0.1s linear;
-  }
-}
-.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview.is-pill {
-  height: 32px;
-}
-.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview.is-pill .block-editor-iframe__scale-container {
-  overflow: hidden;
-}
-.edit-site-global-styles-variations_item:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
-  outline-color: rgba(0, 0, 0, 0.3);
-}
-.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview, .edit-site-global-styles-variations_item:focus-visible .edit-site-global-styles-variations_item-preview {
-  outline-color: #1e1e1e;
-  outline-offset: 1px;
-  outline-width: var(--wp-admin-border-width-focus);
-}
-.edit-site-global-styles-variations_item:focus-visible .edit-site-global-styles-variations_item-preview {
-  outline-color: var(--wp-admin-theme-color);
-}
-
-.edit-site-styles .edit-site-global-styles-screen-root {
+.edit-site-styles .global-styles-ui-screen-root {
   box-shadow: none;
 }
-.edit-site-styles .edit-site-global-styles-screen-root > div > hr {
+.edit-site-styles .global-styles-ui-screen-root > div > hr {
   display: none;
 }
-.edit-site-styles .edit-site-global-styles-sidebar__navigator-provider .components-tools-panel {
+.edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
   border-top: none;
 }
-.edit-site-styles .edit-site-global-styles-sidebar__navigator-provider {
+.edit-site-styles .global-styles-ui-sidebar__navigator-provider {
   overflow-y: auto;
   padding-left: 0;
   padding-right: 0;
 }
-.edit-site-styles .edit-site-global-styles-sidebar__navigator-provider .edit-site-global-styles-sidebar__navigator-screen {
+.edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
   padding-top: 12px;
   padding-left: 12px;
   padding-right: 12px;