@wordpress/edit-site 6.36.0 → 6.36.1-next.738bb1424.0

package/build-style/style.css

@@ -196,27 +196,21 @@
   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;
+  padding: 16px 24px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-@container (max-width: 430px) {
-  .admin-ui-page__header {
-    padding: 16px 24px;
-  }
+.admin-ui-page__sidebar-toggle-slot:empty {
+  display: none;
 }
+
 .admin-ui-page__header-subtitle {
   padding-block-end: 8px;
   color: #757575;
@@ -235,14 +229,9 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 20px;
+  padding: 16px 24px;
 }
 
-@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;
@@ -380,7 +369,7 @@
 .dataviews__view-actions,
 .dataviews-filters__container {
   box-sizing: border-box;
-  padding: 16px 48px;
+  padding: 16px 24px;
   flex-shrink: 0;
   position: sticky;
   left: 0;
@@ -395,7 +384,7 @@
 }
 .dataviews-no-results,
 .dataviews-loading {
-  padding: 0 48px;
+  padding: 0 24px;
   flex-grow: 1;
   display: flex;
   align-items: center;
@@ -417,11 +406,6 @@
   .dataviews-filters__container {
     padding: 12px 24px;
   }
-  .dataviews-no-results,
-  .dataviews-loading {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
 }
 .dataviews-title-field {
   font-size: 13px;
@@ -483,7 +467,7 @@
 }
 
 /**
- * Applying a consistent 24px padding when DataViews are placed within cards.
+ * When DataViews are placed within cards, apply a consistent top padding.
  */
 .components-card__body:has(> .dataviews-wrapper),
 .components-card__body:has(> .dataviews-picker-wrapper) {
@@ -491,35 +475,6 @@
   overflow: hidden;
 }
 
-.components-card__body:has(> .dataviews-wrapper) .dataviews__view-actions,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-filters__container,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
-  padding-inline: 24px;
-}
-
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
-  padding-inline-start: 24px;
-}
-
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
-.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
-  padding-inline-end: 24px;
-}
-
 .dataviews-bulk-actions-footer__item-count {
   color: #1e1e1e;
   font-weight: 499;
@@ -1121,7 +1076,7 @@
   bottom: 0;
   left: 0;
   background-color: inherit;
-  padding: 12px 48px;
+  padding: 12px 24px;
   border-top: 1px solid #f0f0f0;
   flex-shrink: 0;
 }
@@ -1135,11 +1090,6 @@
   z-index: 2;
 }
 
-@container (max-width: 430px) {
-  .dataviews-footer {
-    padding: 12px 24px;
-  }
-}
 @container (max-width: 560px) {
   .dataviews-footer {
     flex-direction: column !important;
@@ -1266,31 +1216,22 @@
   gap: 32px;
   grid-template-rows: max-content;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-  padding: 0 48px 24px;
+  padding: 0 24px 24px;
   container-type: inline-size;
-  /**
-  	* Breakpoints were adjusted from media queries breakpoints to account for
-  	* the sidebar width. This was done to match the existing styles we had.
-  	*/
 }
 
-@container (max-width: 430px) {
-  .dataviews-view-grid-items {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-}
 @media not (prefers-reduced-motion) {
   .dataviews-view-grid-items {
     transition: padding ease-out 0.1s;
   }
 }
 .dataviews-view-grid {
-  padding: 0 48px 24px;
+  padding: 0 24px 24px;
   display: flex;
   flex-direction: column;
   gap: 32px;
   container-type: inline-size;
+  margin-bottom: auto;
 }
 
 @media not (prefers-reduced-motion) {
@@ -1298,12 +1239,6 @@
     transition: padding ease-out 0.1s;
   }
 }
-@container (max-width: 430px) {
-  .dataviews-view-grid {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-}
 .dataviews-view-grid .dataviews-view-grid__row {
   display: grid;
   gap: 32px;
@@ -1504,16 +1439,10 @@
   font-weight: 499;
   color: #1e1e1e;
   margin: 0 0 8px 0;
-  padding: 0 48px;
+  padding: 0 24px;
   container-type: inline-size;
 }
 
-@container (max-width: 430px) {
-  .dataviews-view-grid__group-header {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-}
 div.dataviews-view-list {
   list-style-type: none;
 }
@@ -1588,29 +1517,35 @@ div.dataviews-view-list {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 
-.dataviews-view-list div[role=row]:not(.is-selected) .dataviews-view-list__title-field,
-.dataviews-view-list div[role=article]:not(.is-selected) .dataviews-view-list__title-field {
-  color: #1e1e1e;
-}
-
 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
 .dataviews-view-list div[role=article]:not(.is-selected):hover,
 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
-  background-color: #f8f8f8;
-}
-
-.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__title-field,
-.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__title-field,
-.dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__title-field,
-.dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__fields,
-.dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__title-field,
-.dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__fields,
-.dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__title-field,
-.dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__fields,
-.dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__title-field,
-.dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__fields {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+}
+
+.dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):hover + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected).is-hovered + div[role=article], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=row], .dataviews-view-list div[role=row]:not(.is-selected):focus-within + div[role=article],
+.dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=row],
+.dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=article],
+.dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=row],
+.dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=article],
+.dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=row],
+.dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=article] {
+  border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+}
+
+.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
+.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
+.dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-title-field,
+.dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
+.dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field,
+.dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field,
+.dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
+.dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
+.dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
+.dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
   color: var(--wp-admin-theme-color);
 }
 
@@ -1618,19 +1553,19 @@ div.dataviews-view-list {
 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
-  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
   color: #1e1e1e;
 }
 
-.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
-.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
-.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
-.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
-.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
-.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
-.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
-.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
-  color: var(--wp-admin-theme-color);
+.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
+.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
+.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
+.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field,
+.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
+.dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
+.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
+.dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
+  color: #1e1e1e;
 }
 
 .dataviews-view-list .dataviews-view-list__item {
@@ -1701,8 +1636,11 @@ div.dataviews-view-list {
   flex-grow: 1;
 }
 
-.dataviews-view-list .dataviews-view-list__fields {
+.dataviews-view-list .dataviews-view-list__field {
   color: #757575;
+}
+
+.dataviews-view-list .dataviews-view-list__fields {
   display: flex;
   gap: 12px;
   row-gap: 4px;
@@ -1769,7 +1707,7 @@ div.dataviews-view-list {
 .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
   position: sticky;
   right: 0;
-  background-color: inherit;
+  background-color: var(--wp-dataviews-color-background, #fff);
 }
 
 .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
@@ -1802,22 +1740,18 @@ div.dataviews-view-list {
 
 .dataviews-view-table tr td:first-child,
 .dataviews-view-table tr th:first-child {
-  padding-left: 48px;
+  padding-left: 24px;
 }
 
 .dataviews-view-table tr td:last-child,
 .dataviews-view-table tr th:last-child {
-  padding-right: 48px;
+  padding-right: 24px;
 }
 
 .dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
 
-.dataviews-view-table tr.is-hovered, .dataviews-view-table tr.is-hovered .dataviews-view-table__actions-column--sticky {
-  background-color: #f8f8f8;
-}
-
 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
   opacity: 0;
 }
@@ -1836,27 +1770,20 @@ div.dataviews-view-list {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 
-.dataviews-view-table tr.is-selected:hover {
-  background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 8%, #fff);
-}
-
 .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
   background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
 }
 
-.dataviews-view-table tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
-  background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 8%, #fff);
+.dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table.has-bulk-actions tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+  opacity: 1;
 }
 
-.dataviews-view-table.has-bulk-actions tr:not(.is-selected).is-hovered, .dataviews-view-table.has-bulk-actions tr:not(.is-selected).is-hovered .dataviews-view-table__actions-column--sticky {
-  background-color: #f8f8f8;
+.dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky {
+  background-color: var(--wp-dataviews-color-background, #fff);
 }
 
-.dataviews-view-table.has-bulk-actions tr:focus-within .components-checkbox-control__input,
-.dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table.has-bulk-actions tr.is-hovered .components-checkbox-control__input,
-.dataviews-view-table.has-bulk-actions tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table.has-bulk-actions tr:hover .components-checkbox-control__input,
-.dataviews-view-table.has-bulk-actions tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-  opacity: 1;
+.dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
+  background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
 }
 
 .dataviews-view-table thead {
@@ -1971,16 +1898,6 @@ div.dataviews-view-list {
   padding-right: 0;
 }
 
-@container (max-width: 430px) {
-  .dataviews-view-table tr td:first-child,
-  .dataviews-view-table tr th:first-child {
-    padding-left: 24px;
-  }
-  .dataviews-view-table tr td:last-child,
-  .dataviews-view-table tr th:last-child {
-    padding-right: 24px;
-  }
-}
 .dataviews-view-table-selection-checkbox {
   --checkbox-input-size: 24px;
 }
@@ -2024,12 +1941,12 @@ div.dataviews-view-list {
 
 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
   font-weight: 499;
-  padding: 12px 48px;
+  padding: 12px 24px;
   color: #1e1e1e;
 }
 
 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
-.dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-primary) {
+.dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data) {
   width: 1%;
 }
 
@@ -2227,7 +2144,7 @@ div.dataviews-view-list {
 
 .dataviews-view-activity {
   margin: 0 0 auto;
-  padding: 8px 48px;
+  padding: 8px 24px;
 }
 
 .dataviews-view-activity .dataviews-view-activity__group-header {
@@ -2455,6 +2372,10 @@ div.dataviews-view-list {
   align-items: flex-start !important;
 }
 
+.dataforms-layouts-panel__field--label-position-none {
+  align-items: center !important;
+}
+
 .dataforms-layouts-panel__field-label {
   width: 38%;
   flex-shrink: 0;
@@ -2469,6 +2390,19 @@ div.dataviews-view-list {
   align-self: center;
 }
 
+.dataforms-layouts-panel__field-label.has-error {
+  color: #cc1818;
+}
+
+.dataforms-layouts-panel__field-label-error-content {
+  cursor: help;
+  fill: #cc1818;
+}
+
+.dataforms-layouts-panel__field-label-error-content svg {
+  fill: currentColor;
+}
+
 .dataforms-layouts-panel__field-control {
   flex-grow: 1;
   min-height: 32px;
@@ -3049,25 +2983,31 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 }
 
 .font-library-modal .components-modal__content {
-  padding-top: 0;
-  margin-bottom: 70px;
+  padding: 0;
+  margin-bottom: 90px;
 }
 
-.font-library-modal .font-library-modal__subtitle {
+.font-library-modal .font-library__subtitle {
   text-transform: uppercase;
   font-weight: 499;
   font-size: 11px;
 }
 
-.font-library-modal .components-navigator-screen {
-  padding: 3px;
+.font-library-modal__tab-panel {
+  height: calc(100% - 50px);
 }
 
-.font-library-modal__tabpanel-layout {
-  margin-top: 32px;
+.font-library__tabpanel-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.font-library-modal__tabpanel-layout .font-library-modal__loading {
+.font-library__tabpanel-layout > div {
+  flex-grow: 1;
+}
+
+.font-library__tabpanel-layout .font-library__loading {
   width: 100%;
   height: 100%;
   display: flex;
@@ -3077,36 +3017,40 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   align-items: center;
   justify-content: center;
   padding-top: 124px;
+  box-sizing: border-box;
 }
 
-.font-library-modal__footer {
-  border-top: 1px solid #ddd;
-  margin: 0 -32px -32px;
-  padding: 16px 32px;
-  position: absolute;
-  bottom: 32px;
+.font-library__tabpanel-layout .components-navigator-screen {
+  padding: 24px;
   width: 100%;
-  height: 70px;
-  background-color: #fff;
 }
 
-.font-library-modal__category-select {
-  min-width: 40%;
+.font-library__footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  border-top: 1px solid #ddd;
+  padding: 24px;
+  background-color: #fff;
+  box-sizing: border-box;
+  flex-grow: 0 !important;
+  flex-shrink: 0;
+  height: 90px;
 }
 
-.font-library-modal__page-selection {
+.font-library__page-selection {
   font-size: 11px;
   font-weight: 499;
   text-transform: uppercase;
 }
 
 @media (min-width: 600px) {
-  .font-library-modal__page-selection .font-library-modal__page-selection-trigger {
+  .font-library__page-selection .font-library__page-selection-trigger {
     font-size: 11px !important;
     font-weight: 499;
   }
 }
-.font-library-modal__fonts-title {
+.font-library__fonts-title {
   text-transform: uppercase;
   font-size: 11px;
   font-weight: 600;
@@ -3114,51 +3058,55 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   margin-bottom: 0;
 }
 
-.font-library-modal__fonts-list {
+.font-library__fonts-list {
   list-style: none;
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.font-library-modal__fonts-list-item {
+.font-library__fonts-list-item {
   margin-bottom: 0;
 }
 
-.font-library-modal__font-card {
+.font-library__font-card {
+  box-sizing: border-box;
   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 {
+.font-library__font-card:hover {
   background-color: #f0f0f0;
 }
 
-.font-library-modal__font-card .font-library-modal__font-card__name {
+.font-library__font-card:focus {
+  position: relative;
+}
+
+.font-library__font-card .font-library__font-card__name {
   font-weight: bold;
 }
 
-.font-library-modal__font-card .font-library-modal__font-card__count {
+.font-library__font-card .font-library__font-card__count {
   color: #757575;
 }
 
-.font-library-modal__font-card .font-library-modal__font-variant_demo-image {
+.font-library__font-card .font-library__font-variant_demo-image {
   display: block;
   height: 24px;
   width: auto;
 }
 
-.font-library-modal__font-card .font-library-modal__font-variant_demo-text {
+.font-library__font-card .font-library__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 {
+  .font-library__font-card .font-library__font-variant_demo-text {
     transition: opacity 0.3s ease-in-out;
   }
 }
@@ -3167,16 +3115,10 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   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 {
+.font-library__upload-area {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -3184,16 +3126,16 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   width: 100%;
 }
 
-button.font-library-modal__upload-area {
+button.font-library__upload-area {
   background-color: #f0f0f0;
 }
 
-.font-library-modal__local-fonts {
-  margin: 0 auto;
+.font-library__local-fonts {
+  margin: 24px auto;
   width: 80%;
 }
 
-.font-library-modal__local-fonts .font-library-modal__upload-area__text {
+.font-library__local-fonts .font-library__upload-area__text {
   color: #757575;
 }
 
@@ -3223,11 +3165,11 @@ button.font-library-modal__upload-area {
   justify-content: center;
 }
 
-.font-library-modal__select-all {
+.font-library__select-all {
   padding: 16px 16px 16px 17px;
 }
 
-.font-library-modal__select-all .components-checkbox-control__label {
+.font-library__select-all .components-checkbox-control__label {
   padding-left: 16px;
 }
 
@@ -3475,7 +3417,6 @@ button.font-library-modal__upload-area {
   max-width: 100%;
   display: block;
   width: 100%;
-  clip-path: border-box;
 }
 
 .global-styles-ui-typography-preview {
@@ -3500,10 +3441,6 @@ button.font-library-modal__upload-area {
   color: #757575;
 }
 
-.global-styles-ui-screen {
-  margin: 12px 16px 16px;
-}
-
 .global-styles-ui-screen-typography__indicator {
   height: 24px;
   width: 24px;
@@ -3516,7 +3453,7 @@ button.font-library-modal__upload-area {
 
 .global-styles-ui-block-types-search {
   margin-bottom: 10px;
-  padding: 0 20px;
+  padding: 0 16px;
 }
 
 .global-styles-ui-screen-typography__font-variants-count {
@@ -3535,10 +3472,6 @@ button.font-library-modal__upload-area {
   row-gap: 12px;
 }
 
-.global-styles-ui-header__description {
-  padding: 0 16px;
-}
-
 .global-styles-ui-header {
   margin-bottom: 0 !important;
 }
@@ -3716,15 +3649,15 @@ button.font-library-modal__upload-area {
   border-radius: 2px;
 }
 
+.global-styles-ui-screen-root__active-style-tile-preview {
+  clip-path: border-box;
+}
+
 .global-styles-ui-color-palette-panel,
 .global-styles-ui-gradient-palette-panel {
   padding: 16px;
 }
 
-.components-navigator-screen {
-  padding: 12px;
-}
-
 .edit-site-custom-template-modal__contents-wrapper {
   height: 100%;
   justify-content: flex-start !important;
@@ -5196,124 +5129,4 @@ body.js.site-editor-php {
 }
 .edit-site .interface-interface-skeleton {
   top: 0;
-}
-
-body.admin-color-light {
-  --wp-admin-theme-color: #0085ba;
-  --wp-admin-theme-color--rgb: 0, 133, 186;
-  --wp-admin-theme-color-darker-10: rgb(0, 114.7661290323, 160.5);
-  --wp-admin-theme-color-darker-10--rgb: 0, 114.7661290323, 160.5;
-  --wp-admin-theme-color-darker-20: rgb(0, 96.5322580645, 135);
-  --wp-admin-theme-color-darker-20--rgb: 0, 96.5322580645, 135;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-light {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-modern {
-  --wp-admin-theme-color: #3858e9;
-  --wp-admin-theme-color--rgb: 56, 88, 233;
-  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
-  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
-  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
-  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-modern {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-blue {
-  --wp-admin-theme-color: #096484;
-  --wp-admin-theme-color--rgb: 9, 100, 132;
-  --wp-admin-theme-color-darker-10: rgb(7.3723404255, 81.914893617, 108.1276595745);
-  --wp-admin-theme-color-darker-10--rgb: 7.3723404255, 81.914893617, 108.1276595745;
-  --wp-admin-theme-color-darker-20: rgb(5.7446808511, 63.829787234, 84.2553191489);
-  --wp-admin-theme-color-darker-20--rgb: 5.7446808511, 63.829787234, 84.2553191489;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-blue {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-coffee {
-  --wp-admin-theme-color: #46403c;
-  --wp-admin-theme-color--rgb: 70, 64, 60;
-  --wp-admin-theme-color-darker-10: rgb(56.2692307692, 51.4461538462, 48.2307692308);
-  --wp-admin-theme-color-darker-10--rgb: 56.2692307692, 51.4461538462, 48.2307692308;
-  --wp-admin-theme-color-darker-20: rgb(42.5384615385, 38.8923076923, 36.4615384615);
-  --wp-admin-theme-color-darker-20--rgb: 42.5384615385, 38.8923076923, 36.4615384615;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-coffee {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-ectoplasm {
-  --wp-admin-theme-color: #523f6d;
-  --wp-admin-theme-color--rgb: 82, 63, 109;
-  --wp-admin-theme-color-darker-10: rgb(69.8430232558, 53.6598837209, 92.8401162791);
-  --wp-admin-theme-color-darker-10--rgb: 69.8430232558, 53.6598837209, 92.8401162791;
-  --wp-admin-theme-color-darker-20: rgb(57.6860465116, 44.3197674419, 76.6802325581);
-  --wp-admin-theme-color-darker-20--rgb: 57.6860465116, 44.3197674419, 76.6802325581;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-ectoplasm {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-midnight {
-  --wp-admin-theme-color: #e14d43;
-  --wp-admin-theme-color--rgb: 225, 77, 67;
-  --wp-admin-theme-color-darker-10: rgb(221.4908256881, 56.1788990826, 45.0091743119);
-  --wp-admin-theme-color-darker-10--rgb: 221.4908256881, 56.1788990826, 45.0091743119;
-  --wp-admin-theme-color-darker-20: rgb(207.8348623853, 44.2201834862, 33.1651376147);
-  --wp-admin-theme-color-darker-20--rgb: 207.8348623853, 44.2201834862, 33.1651376147;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-midnight {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-ocean {
-  --wp-admin-theme-color: #627c83;
-  --wp-admin-theme-color--rgb: 98, 124, 131;
-  --wp-admin-theme-color-darker-10: rgb(87.0873362445, 110.192139738, 116.4126637555);
-  --wp-admin-theme-color-darker-10--rgb: 87.0873362445, 110.192139738, 116.4126637555;
-  --wp-admin-theme-color-darker-20: rgb(76.1746724891, 96.384279476, 101.8253275109);
-  --wp-admin-theme-color-darker-20--rgb: 76.1746724891, 96.384279476, 101.8253275109;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-ocean {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-sunrise {
-  --wp-admin-theme-color: #dd823b;
-  --wp-admin-theme-color--rgb: 221, 130, 59;
-  --wp-admin-theme-color-darker-10: rgb(216.8782608696, 116.1847826087, 37.6217391304);
-  --wp-admin-theme-color-darker-10--rgb: 216.8782608696, 116.1847826087, 37.6217391304;
-  --wp-admin-theme-color-darker-20: rgb(195.147826087, 104.5434782609, 33.852173913);
-  --wp-admin-theme-color-darker-20--rgb: 195.147826087, 104.5434782609, 33.852173913;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-sunrise {
-    --wp-admin-border-width-focus: 1.5px;
-  }
 }