@wordpress/edit-site 5.25.0 → 5.25.1-next.79a6196f.0

package/build-style/style.css

@@ -569,6 +569,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
+  display: none;
+}
+
 .interface-preferences-modal__option + .interface-preferences-modal__option {
   margin-top: 16px;
 }
@@ -588,15 +592,43 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 100%;
 }
 
-.dataviews__filters-view-actions {
+.dataviews-filters__view-actions {
   padding: 12px 32px;
 }
+.dataviews-filters__view-actions .components-search-control {
+  flex-grow: 1;
+  max-width: 240px;
+}
+
+.dataviews-filters-button {
+  position: relative;
+}
+
+.dataviews-filters-count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 16px;
+  color: var(--wp-components-color-accent-inverted, #fff);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-radius: 8px;
+  min-width: 16px;
+  padding: 0 4px;
+  transform: translateX(40%) translateY(-40%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 300;
+}
 
 .dataviews-pagination {
   margin-top: auto;
   position: sticky;
   bottom: 0;
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(6px);
+          backdrop-filter: blur(6px);
   padding: 12px 32px;
   border-top: 1px solid #f0f0f0;
   color: #757575;
@@ -606,7 +638,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 32px 0 16px;
 }
 
-.dataviews-table-view {
+.dataviews-view-table {
   width: 100%;
   text-indent: 0;
   border-color: inherit;
@@ -614,74 +646,117 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   position: relative;
   color: #757575;
 }
-.dataviews-table-view a {
+.dataviews-view-table a {
   text-decoration: none;
   color: #1e1e1e;
   font-weight: 500;
 }
-.dataviews-table-view th {
+.dataviews-view-table th {
   text-align: left;
   color: var(--wp-components-color-foreground, #1e1e1e);
   font-weight: normal;
   font-size: 13px;
 }
-.dataviews-table-view td,
-.dataviews-table-view th {
+.dataviews-view-table td,
+.dataviews-view-table th {
   padding: 12px;
   min-width: 160px;
 }
-.dataviews-table-view td[data-field-id=actions],
-.dataviews-table-view th[data-field-id=actions] {
+.dataviews-view-table td[data-field-id=actions],
+.dataviews-view-table th[data-field-id=actions] {
   text-align: right;
 }
-.dataviews-table-view tr {
+.dataviews-view-table tr {
   border-bottom: 1px solid #f0f0f0;
 }
-.dataviews-table-view tr td:first-child,
-.dataviews-table-view tr th:first-child {
+.dataviews-view-table tr .dataviews-view-table-header-button {
+  gap: 4px;
+}
+.dataviews-view-table tr td:first-child,
+.dataviews-view-table tr th:first-child {
   padding-left: 32px;
 }
-.dataviews-table-view tr td:last-child,
-.dataviews-table-view tr th:last-child {
+.dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
+.dataviews-view-table tr td:first-child .dataviews-view-table-header,
+.dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
+.dataviews-view-table tr th:first-child .dataviews-view-table-header {
+  margin-left: -8px;
+}
+.dataviews-view-table tr td:last-child,
+.dataviews-view-table tr th:last-child {
   padding-right: 32px;
 }
-.dataviews-table-view tr:last-child {
+.dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-table-view thead tr {
+.dataviews-view-table tr:hover td {
+  background-color: #f8f8f8;
+}
+.dataviews-view-table thead tr {
   border: 0;
 }
-.dataviews-table-view thead th {
+.dataviews-view-table thead th {
   position: sticky;
   top: -1px;
-  background-color: #fafafa;
+  background-color: #fff;
   box-shadow: inset 0 -1px 0 #f0f0f0;
-  border-top: 1px solid #f0f0f0;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  z-index: 1;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  padding-left: 4px;
+}
+.dataviews-view-table .dataviews-view-table-header-button {
+  padding: 4px 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
+  color: #1e1e1e;
+}
+.dataviews-view-table .dataviews-view-table-header-button span {
+  speak: none;
+}
+.dataviews-view-table .dataviews-view-table-header-button span:empty {
+  display: none;
+}
+.dataviews-view-table .dataviews-view-table-header {
+  padding-left: 4px;
 }
 
-.dataviews-grid-view {
+.dataviews-view-grid {
   margin-bottom: 24px;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   padding: 0 32px;
 }
 @media (min-width: 1080px) {
-  .dataviews-grid-view {
+  .dataviews-view-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 }
 @media (min-width: 1440px) {
-  .dataviews-grid-view {
+  .dataviews-view-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 }
-.dataviews-grid-view .dataviews-view-grid__card h3 {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field .dataviews-view-grid__title-field {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
+  font-size: 13px;
+  width: 100%;
 }
-.dataviews-grid-view .dataviews-view-grid__media {
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field .dataviews-view-grid__title-field a,
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field button.dataviews-view-grid__title-field {
+  font-weight: 500;
+  color: #1e1e1e;
+  text-decoration: none;
+}
+.dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
@@ -689,76 +764,98 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 4px;
   overflow: hidden;
 }
-.dataviews-grid-view .dataviews-view-grid__media > * {
+.dataviews-view-grid .dataviews-view-grid__media > * {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100%;
   height: 100%;
 }
-.dataviews-grid-view .dataviews-view-grid__primary-field {
+.dataviews-view-grid .dataviews-view-grid__primary-field {
   min-height: 24px;
 }
-.dataviews-grid-view .dataviews-view-grid__primary-field a {
-  color: #1e1e1e;
-  text-decoration: none;
-  font-weight: 500;
-}
-.dataviews-grid-view .dataviews-view-grid__fields {
+.dataviews-view-grid .dataviews-view-grid__fields {
   position: relative;
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
   color: #757575;
 }
-.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
 
-.dataviews-list-view {
+.dataviews-view-list {
   margin: 0;
+  padding: 8px;
 }
-.dataviews-list-view li {
-  border-bottom: 1px solid #f0f0f0;
+.dataviews-view-list li {
   margin: 0;
 }
-.dataviews-list-view li:first-child {
-  border-top: 1px solid #f0f0f0;
+.dataviews-view-list li .dataviews-view-list__item-wrapper {
+  position: relative;
+  padding-right: 24px;
+  border-radius: 4px;
 }
-.dataviews-list-view li:last-child {
-  border-bottom: 0;
+.dataviews-view-list li .dataviews-view-list__item-wrapper::after {
+  position: absolute;
+  content: "";
+  top: 100%;
+  left: 24px;
+  right: 24px;
+  background: #f0f0f0;
+  height: 1px;
 }
-.dataviews-list-view .dataviews-list-view__item {
-  padding: 12px 32px;
-  cursor: default;
+.dataviews-view-list li:not(.is-selected):hover {
+  color: var(--wp-admin-theme-color);
 }
-.dataviews-list-view .dataviews-list-view__item:focus, .dataviews-list-view .dataviews-list-view__item:hover {
-  background-color: #f8f8f8;
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
+  color: var(--wp-admin-theme-color);
 }
-.dataviews-list-view .dataviews-list-view__item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper {
+  background-color: var(--wp-admin-theme-color);
+  color: #fff;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .components-button,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .components-button {
+  color: #fff;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper::after,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper::after {
+  background: transparent;
+}
+.dataviews-view-list .dataviews-view-list__item {
+  padding: 12px 0 12px 24px;
+  width: 100%;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus::before {
+  position: absolute;
+  content: "";
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  z-index: -1;
+  border-radius: 4px;
 }
-.dataviews-list-view .dataviews-list-view__item h3 {
+.dataviews-view-list .dataviews-view-list__item h3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dataviews-list-view .dataviews-list-view__item-selected,
-.dataviews-list-view .dataviews-list-view__item-selected:hover {
-  background-color: #f0f0f0;
-}
-.dataviews-list-view .dataviews-list-view__item-selected:focus,
-.dataviews-list-view .dataviews-list-view__item-selected:hover:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.dataviews-list-view .dataviews-list-view__media-wrapper {
+.dataviews-view-list .dataviews-view-list__media-wrapper {
   min-width: 32px;
   height: 32px;
   border-radius: 4px;
   overflow: hidden;
   position: relative;
 }
-.dataviews-list-view .dataviews-list-view__media-wrapper::after {
+.dataviews-view-list .dataviews-view-list__media-wrapper::after {
   content: "";
   position: absolute;
   top: 0;
@@ -768,26 +865,38 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
-.dataviews-list-view .edit-site-page-pages__featured-image,
-.dataviews-list-view .dataviews-list-view__media-placeholder {
+.dataviews-view-list .dataviews-view-list__media-placeholder {
   min-width: 32px;
   height: 32px;
-}
-.dataviews-list-view .dataviews-list-view__media-placeholder {
   background-color: #e0e0e0;
 }
-.dataviews-list-view .dataviews-list-view__fields {
+.dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dataviews-list-view .dataviews-list-view__fields .dataviews-list-view__field {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field {
   margin-right: 12px;
 }
-.dataviews-list-view .dataviews-list-view__fields .dataviews-list-view__field:last-child {
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:last-child {
   margin-right: 0;
 }
+.dataviews-view-list + .dataviews-pagination {
+  justify-content: space-between;
+}
+.dataviews-view-list .dataviews-view-list__details-button {
+  align-self: center;
+  opacity: 0;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__details-button,
+.dataviews-view-list li:hover .dataviews-view-list__details-button,
+.dataviews-view-list li:focus-within .dataviews-view-list__details-button {
+  opacity: 1;
+}
+.dataviews-view-list li.is-selected .dataviews-view-list__details-button:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
+}
 
 .dataviews-action-modal {
   z-index: 1000001;
@@ -798,6 +907,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 0 32px;
 }
 
+.dataviews-filters__custom-menu-radio-item-prefix {
+  display: block;
+  width: 24px;
+}
+
 .edit-site-custom-template-modal__contents-wrapper {
   height: 100%;
   justify-content: flex-start !important;
@@ -829,7 +943,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 600px) {
   .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
-    overflow: scroll;
+    max-height: 224px;
+    overflow-y: auto;
   }
 }
 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
@@ -1010,9 +1125,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   height: 100%;
   background: #fff;
 }
-.edit-site-visual-editor .edit-site-visual-editor__editor-canvas {
-  height: 100%;
-}
 .edit-site-visual-editor .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));
@@ -1198,9 +1310,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   font-size: 13px;
   color: #1e1e1e;
 }
-.edit-site-code-editor__toolbar .components-button svg {
-  order: 1;
-}
 
 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
   border: 1px solid #949494;
@@ -1427,13 +1536,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   fill: currentColor;
 }
 
-.edit-site-global-styles-screen-revisions {
-  margin: 16px;
-}
-
 .edit-site-global-styles-screen-revisions__revisions-list {
   list-style: none;
-  margin: 0;
+  margin: 0 16px 16px 16px;
+  flex-grow: 1;
 }
 .edit-site-global-styles-screen-revisions__revisions-list li {
   margin-bottom: 0;
@@ -1441,9 +1547,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles-screen-revisions__revision-item {
   position: relative;
-  padding-left: 16px;
-  overflow: hidden;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
 }
 .edit-site-global-styles-screen-revisions__revision-item:hover {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
@@ -1465,6 +1571,12 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   left: 17px;
   transform: translate(-50%, -50%);
   z-index: 1;
+  border: 4px solid transparent;
+}
+.edit-site-global-styles-screen-revisions__revision-item.is-selected {
+  border-radius: 2px;
+  outline: 3px solid transparent;
+  outline-offset: -2px;
 }
 .edit-site-global-styles-screen-revisions__revision-item.is-selected::before {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
@@ -1486,11 +1598,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   width: 100%;
   height: auto;
   display: block;
-  padding: 12px 12px 8px 24px;
-}
-.edit-site-global-styles-screen-revisions__revision-item .edit-site-global-styles-screen-revisions__revision-button:focus, .edit-site-global-styles-screen-revisions__revision-item .edit-site-global-styles-screen-revisions__revision-button:active {
-  outline: 0;
-  box-shadow: none;
+  padding: 12px 12px 8px 40px;
+  z-index: 1;
+  position: relative;
+  outline-offset: -2px;
 }
 
 .is-selected {
@@ -1504,9 +1615,16 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   color: var(--wp-admin-theme-color);
 }
 
-.edit-site-global-styles-screen-revisions__button {
-  justify-content: center;
-  width: 100%;
+.edit-site-global-styles-screen-revisions__apply-button.is-primary,
+.edit-site-global-styles-screen-revisions__applied-text {
+  align-self: flex-start;
+  margin: 0 12px 12px 40px;
+}
+
+.edit-site-global-styles-screen-revisions__applied-text {
+  color: #949494;
+  font-size: 12px;
+  font-style: italic;
 }
 
 .edit-site-global-styles-screen-revisions__description {
@@ -1527,8 +1645,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   display: flex;
   justify-content: start;
   width: 100%;
-  align-items: center;
+  align-items: flex-start;
   font-size: 12px;
+  text-align: left;
 }
 .edit-site-global-styles-screen-revisions__changes img,
 .edit-site-global-styles-screen-revisions__meta img {
@@ -1549,6 +1668,46 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   line-height: 1.4;
 }
 
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
+  justify-content: space-between;
+  gap: 2px;
+}
+.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-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-text {
+  font-size: 12px;
+  will-change: opacity;
+}
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary {
+  font-size: 28px;
+  font-weight: 200;
+  color: #1e1e1e;
+  margin-bottom: 4px;
+  line-height: 1.2;
+}
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+}
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:hover {
+  background: transparent;
+}
+
+.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-header-edit-mode {
   height: 60px;
   align-items: center;
@@ -1635,40 +1794,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   opacity: 0;
 }
 
-.edit-site-header-edit-mode__document-tools {
-  display: flex;
-  border: none;
-}
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
-  height: 32px;
-  min-width: 32px;
-  padding: 4px;
-}
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon.is-pressed,
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
-  background: #1e1e1e;
-}
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon:focus:not(:disabled),
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
-  outline: 1px solid transparent;
-}
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-button.has-icon::before,
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon::before {
-  display: none;
-}
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
-  min-width: 32px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-}
-.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
-  width: auto;
-  padding: 0 8px;
-}
-
 .edit-site-header-edit-mode.show-icon-labels .components-button.has-icon {
   width: auto;
 }
@@ -1697,9 +1822,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   height: 36px;
   padding: 0 8px;
 }
-.edit-site-header-edit-mode.show-icon-labels .edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
-  margin-left: 8px;
-}
 .edit-site-header-edit-mode.show-icon-labels .block-editor-block-mover {
   border-left: none;
 }
@@ -1923,11 +2045,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   color: #757575;
 }
 
-.edit-site-list-title__customized-info {
-  font-size: 1.3em;
-  font-weight: 600;
-}
-
 .edit-site-page {
   color: #2f2f2f;
   background: #fff;
@@ -1939,7 +2056,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 @media (min-width: 782px) {
   .edit-site-page {
     border-radius: 8px;
-    margin: 24px 24px 24px 0;
+    margin: 16px 16px 16px 0;
   }
 }
 
@@ -1974,8 +2091,9 @@ body.is-fullscreen-mode .edit-site-list-header {
 
 .edit-site-page-pages__featured-image {
   border-radius: 4px;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
+  display: block;
 }
 
 .edit-site-patterns {
@@ -2041,28 +2159,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   background: #757575;
   color: #f0f0f0;
 }
-.edit-site-patterns .edit-site-patterns__grid-pagination {
-  border-top: 1px solid #2f2f2f;
-  background: #1e1e1e;
-  padding: 24px 32px;
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
-}
-.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary {
-  width: 32px;
-  height: 32px;
-  color: #f0f0f0;
-  background-color: #2f2f2f;
-  justify-content: center;
-}
-.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:disabled {
-  color: #949494;
-  background: none;
-}
-.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
-  background-color: #757575;
-}
 
 .edit-site-patterns__header {
   position: sticky;
@@ -2186,6 +2282,77 @@ body.is-fullscreen-mode .edit-site-list-header {
   width: 384px;
 }
 
+.edit-site-patterns__pagination {
+  padding: 24px 32px;
+  border-top: 1px solid #2f2f2f;
+  background: #1e1e1e;
+  position: sticky;
+  bottom: 0;
+  color: #f0f0f0;
+  z-index: 2;
+}
+.edit-site-patterns__pagination .components-button.is-tertiary {
+  background-color: #2f2f2f;
+  color: #f0f0f0;
+}
+.edit-site-patterns__pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.edit-site-patterns__pagination .components-button.is-tertiary:hover:not(:disabled) {
+  background-color: #757575;
+}
+
+/**
+ * DataViews patterns styles.
+ * TODO: when this becomes stable, consolidate styles with the above.
+ */
+.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
+  height: auto;
+}
+.edit-site-page-patterns-dataviews .edit-site-patterns__pattern-icon {
+  fill: var(--wp-block-synced-color);
+  flex-shrink: 0;
+}
+.edit-site-page-patterns-dataviews .edit-site-patterns__pattern-lock-icon {
+  min-width: min-content;
+}
+.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
+  border-bottom: 1px solid #f0f0f0;
+  min-height: 72px;
+  padding: 16px 32px;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
+  width: 350px;
+}
+.dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
+  position: relative;
+}
+.dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
+  position: absolute;
+  border: 1px solid var(--wp-admin-theme-color);
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
+  box-sizing: border-box;
+  z-index: 1;
+  background-color: #fff;
+  width: calc(100% + 2px);
+  left: -1px;
+  min-width: initial;
+  max-height: 96px;
+}
+
+@media (min-width: 600px) {
+  .dataviews-action-modal__duplicate-template-part .components-modal__frame {
+    max-width: 500px;
+  }
+}
+
 .page-templates-preview-field.is-viewtype-list .block-editor-block-preview__container {
   height: 120px;
 }
@@ -2320,16 +2487,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   font-size: 12px;
 }
 
-.edit-site-sidebar-fixed-bottom-slot {
-  position: sticky;
-  bottom: 0;
-  background: #fff;
-  display: flex;
-  padding: 16px;
-  border-top: 1px solid #ddd;
-  box-sizing: content-box;
-}
-
 .edit-site-page-panels__swap-template__confirm-modal__actions {
   margin-top: 24px;
 }
@@ -2501,10 +2658,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   min-width: auto;
 }
 
-.edit-site-template-revisions {
-  margin-left: -4px;
-}
-
 h3.edit-site-template-card__template-areas-title {
   font-weight: 500;
   margin: 0 0 8px;
@@ -2658,86 +2811,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   min-width: 24px;
 }
 
-/**
- * Note that this CSS file should be in sync with its counterpart in the other editor:
- * packages/edit-post/src/components/secondary-sidebar/style.scss
- */
-.edit-site-editor__inserter-panel,
-.edit-site-editor__list-view-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-@media (min-width: 782px) {
-  .edit-site-editor__list-view-panel {
-    width: 350px;
-  }
-}
-
-.edit-site-editor__inserter-panel-header {
-  padding-top: 8px;
-  padding-right: 8px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.edit-site-editor__inserter-panel-content,
-.edit-site-editor__list-view-panel-content {
-  height: calc(100% - 36px - 8px);
-}
-
-@media (min-width: 782px) {
-  .edit-site-editor__inserter-panel-content {
-    height: 100%;
-  }
-}
-
-.edit-site-editor__list-view-panel-header {
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-  display: flex;
-  justify-content: space-between;
-  height: 48px;
-  padding-left: 16px;
-  padding-right: 4px;
-}
-
-.edit-site-editor__list-view-panel-content {
-  height: 100%;
-  scrollbar-width: thin;
-  scrollbar-gutter: stable both-edges;
-  scrollbar-color: transparent transparent;
-  will-change: transform;
-  overflow: auto;
-  scrollbar-gutter: auto;
-  padding: 8px 6px;
-}
-.edit-site-editor__list-view-panel-content::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-.edit-site-editor__list-view-panel-content::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-.edit-site-editor__list-view-panel-content::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 8px;
-  border: 3px solid transparent;
-  background-clip: padding-box;
-}
-.edit-site-editor__list-view-panel-content:hover::-webkit-scrollbar-thumb, .edit-site-editor__list-view-panel-content:focus::-webkit-scrollbar-thumb, .edit-site-editor__list-view-panel-content:focus-within::-webkit-scrollbar-thumb {
-  background-color: #949494;
-}
-.edit-site-editor__list-view-panel-content:hover, .edit-site-editor__list-view-panel-content:focus, .edit-site-editor__list-view-panel-content:focus-within {
-  scrollbar-color: #949494 transparent;
-}
-@media (hover: none) {
-  .edit-site-editor__list-view-panel-content {
-    scrollbar-color: #949494 transparent;
-  }
-}
-
 .edit-site-welcome-guide {
   width: 312px;
 }
@@ -2883,7 +2956,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   position: fixed;
   top: 0;
   left: 0;
-  width: calc(100vw - 48px);
+  width: calc(100vw - 32px);
   height: 60px;
   z-index: 3;
 }
@@ -2994,9 +3067,9 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 @media (min-width: 782px) {
   .edit-site-layout__canvas {
-    top: 24px;
-    bottom: 24px;
-    width: calc(100% - 24px);
+    top: 16px;
+    bottom: 16px;
+    width: calc(100% - 16px);
   }
   .edit-site-layout__canvas > div {
     border-radius: 8px;
@@ -3014,13 +3087,20 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   border-radius: 0;
 }
 
+.edit-site-template-pages-list-view,
+.edit-site-page-pages-list-view {
+  max-width: 360px;
+}
+
 .edit-site-layout__canvas .interface-interface-skeleton,
-.edit-site-page-pages-preview .interface-interface-skeleton {
+.edit-site-page-pages-preview .interface-interface-skeleton,
+.edit-site-template-pages-preview .interface-interface-skeleton {
   position: relative !important;
   min-height: 100% !important;
 }
 
-.edit-site-page-pages-preview {
+.edit-site-page-pages-preview,
+.edit-site-template-pages-preview {
   height: 100%;
 }
 
@@ -3137,7 +3217,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   border-top: 1px solid #2f2f2f;
   flex-shrink: 0;
   margin: 0;
-  padding: 20px 24px;
+  padding: 20px 16px;
 }
 
 .edit-site-save-hub__button {
@@ -3205,8 +3285,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar__footer {
   border-top: 1px solid #2f2f2f;
   flex-shrink: 0;
-  margin: 0 24px;
-  padding: 24px 0;
+  margin: 0 16px;
+  padding: 16px 0;
 }
 
 .edit-site-sidebar-button {
@@ -3476,6 +3556,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   fill: #4ab866;
 }
 
+.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
+  text-transform: uppercase;
+  color: #e0e0e0;
+  padding: 24px 6px 16px 16px;
+  border-top: 1px solid #2f2f2f;
+  font-size: 11px;
+  font-weight: 500;
+}
+
 .edit-site-sidebar-navigation-details-screen-panel {
   margin: 24px 0;
 }
@@ -3692,8 +3781,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-site-hub_toggle-command-center {
   color: #e0e0e0;
 }
-.edit-site-site-hub_toggle-command-center:hover {
-  color: #f0f0f0;
+.edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
+  fill: #f0f0f0;
 }
 
 .edit-site-sidebar-navigation-screen__description {
@@ -3800,11 +3889,11 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 }
 
-.edit-site-style-book__tab-panel .components-tab-panel__tabs {
+.edit-site-style-book__tabs [role=tablist] {
   background: #fff;
   color: #1e1e1e;
 }
-.edit-site-style-book__tab-panel .components-tab-panel__tab-content {
+.edit-site-style-book__tabs [role=tabpanel] {
   bottom: 0;
   left: 0;
   overflow: auto;
@@ -3914,10 +4003,10 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   font-size: 11px;
 }
 
-.font-library-modal__tab-layout main {
+.font-library-modal__tabpanel-layout main {
   padding-bottom: 4rem;
 }
-.font-library-modal__tab-layout footer {
+.font-library-modal__tabpanel-layout footer {
   border-top: 1px solid #e5e5e5;
   margin: 0 -32px -32px;
   padding: 16px 32px;
@@ -3958,7 +4047,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding-bottom: 1rem;
 }
 
-.font-library-modal__tab-panel [role=tablist] {
+.font-library-modal__tabs [role=tablist] {
   position: sticky;
   top: 0;
   width: calc(100% + 64px);
@@ -3975,6 +4064,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   justify-content: center;
   height: 250px;
   width: 100%;
+}
+
+button.font-library-modal__upload-area {
   background-color: #f0f0f0;
 }
 
@@ -4031,6 +4123,12 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   margin: 0;
 }
 
+.edit-site-pagination .components-button.is-tertiary {
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+}
+
 body.js #wpadminbar {
   display: none;
 }