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

package/build-style/style.css

@@ -468,7 +468,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
-  gap: 4px;
+  gap: 8px;
   margin-right: -4px;
 }
 .interface-pinned-items .components-button {
@@ -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;
 }
@@ -577,6 +581,337 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 48px;
 }
 
+.dataviews-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  scroll-padding-bottom: 64px;
+}
+.dataviews-wrapper > div {
+  min-height: 100%;
+}
+
+.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: 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;
+}
+
+.dataviews-filters-options {
+  margin: 32px 0 16px;
+}
+
+.dataviews-view-table {
+  width: 100%;
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+  position: relative;
+  color: #757575;
+}
+.dataviews-view-table a {
+  text-decoration: none;
+  color: #1e1e1e;
+  font-weight: 500;
+}
+.dataviews-view-table th {
+  text-align: left;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  font-weight: normal;
+  font-size: 13px;
+}
+.dataviews-view-table td,
+.dataviews-view-table th {
+  padding: 12px;
+  min-width: 160px;
+}
+.dataviews-view-table td[data-field-id=actions],
+.dataviews-view-table th[data-field-id=actions] {
+  text-align: right;
+}
+.dataviews-view-table tr {
+  border-bottom: 1px solid #f0f0f0;
+}
+.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-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-view-table tr:last-child {
+  border-bottom: 0;
+}
+.dataviews-view-table tr:hover td {
+  background-color: #f8f8f8;
+}
+.dataviews-view-table thead tr {
+  border: 0;
+}
+.dataviews-view-table thead th {
+  position: sticky;
+  top: -1px;
+  background-color: #fff;
+  box-shadow: inset 0 -1px 0 #f0f0f0;
+  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-view-grid {
+  margin-bottom: 24px;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  padding: 0 32px;
+}
+@media (min-width: 1080px) {
+  .dataviews-view-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+}
+@media (min-width: 1440px) {
+  .dataviews-view-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  }
+}
+.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-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;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.dataviews-view-grid .dataviews-view-grid__media > * {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-view-grid .dataviews-view-grid__primary-field {
+  min-height: 24px;
+}
+.dataviews-view-grid .dataviews-view-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
+  color: #757575;
+}
+.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+  color: #1e1e1e;
+}
+
+.dataviews-view-list {
+  margin: 0;
+  padding: 8px;
+}
+.dataviews-view-list li {
+  margin: 0;
+}
+.dataviews-view-list li .dataviews-view-list__item-wrapper {
+  position: relative;
+  padding-right: 24px;
+  border-radius: 4px;
+}
+.dataviews-view-list li .dataviews-view-list__item-wrapper::after {
+  position: absolute;
+  content: "";
+  top: 100%;
+  left: 24px;
+  right: 24px;
+  background: #f0f0f0;
+  height: 1px;
+}
+.dataviews-view-list li:not(.is-selected):hover {
+  color: var(--wp-admin-theme-color);
+}
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
+  color: 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-view-list .dataviews-view-list__item h3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-list .dataviews-view-list__media-wrapper {
+  min-width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.dataviews-view-list .dataviews-view-list__media-wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+.dataviews-view-list .dataviews-view-list__media-placeholder {
+  min-width: 32px;
+  height: 32px;
+  background-color: #e0e0e0;
+}
+.dataviews-view-list .dataviews-view-list__fields {
+  color: #757575;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field {
+  margin-right: 12px;
+}
+.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;
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+  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;
@@ -608,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 {
@@ -771,7 +1107,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 6px;
 }
 
-.edit-site-block-editor__block-list.is-navigation-block {
+.edit-site-editor-canvas__block-list.is-navigation-block {
   padding: 24px;
 }
 
@@ -789,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));
@@ -812,16 +1145,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .edit-site-visual-editor.is-view-mode {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-  /*
-  	Temporary to hide the contextual toolbar in view mode.
-  	See: https://github.com/WordPress/gutenberg/pull/46298
-  	This rule can possibly be removed once the
-  	contextual toolbar has been redesigned.
-  	See: https://github.com/WordPress/gutenberg/issues/40450
-  */
-}
-.edit-site-visual-editor.is-view-mode .block-editor-block-contextual-toolbar.is-fixed {
-  display: none;
 }
 
 .edit-site-visual-editor__back-button {
@@ -834,6 +1157,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #f0f0f0;
 }
 
+.is-distraction-free .edit-site-visual-editor__back-button {
+  display: none;
+}
+
 .resizable-editor__drag-handle {
   position: absolute;
   top: 0;
@@ -983,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;
@@ -1036,126 +1360,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   color: rgba(30, 30, 30, 0.62);
 }
 
-.dataviews-wrapper {
-  width: 100%;
-  height: calc(100% - 32px * 2);
-  overflow: auto;
-  padding: 32px 32px 0;
-}
-.dataviews-wrapper > div {
-  min-height: 100%;
-}
-
-.dataviews-pagination {
-  margin-top: auto;
-  position: sticky;
-  bottom: 0;
-  background-color: #fff;
-  padding: 16px 0;
-  border-top: 1px solid #e0e0e0;
-}
-
-.dataviews-filters-options {
-  margin: 32px 0 16px;
-}
-
-.dataviews-list-view {
-  width: 100%;
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-  position: relative;
-}
-.dataviews-list-view a {
-  text-decoration: none;
-}
-.dataviews-list-view th {
-  text-align: left;
-  font-weight: normal;
-  padding: 0 16px 16px;
-  color: #757575;
-}
-.dataviews-list-view td,
-.dataviews-list-view th {
-  padding: 12px;
-}
-.dataviews-list-view td[data-field-id=actions],
-.dataviews-list-view th[data-field-id=actions] {
-  text-align: right;
-}
-.dataviews-list-view tr {
-  border-bottom: 1px solid #f0f0f0;
-}
-.dataviews-list-view tr:last-child {
-  border-bottom: 0;
-}
-.dataviews-list-view thead tr {
-  border: 0;
-}
-.dataviews-list-view thead th {
-  position: sticky;
-  top: -32px;
-  background-color: #fff;
-  box-shadow: inset 0 -1px 0 #e0e0e0;
-}
-
-.dataviews-grid-view {
-  margin-bottom: 24px;
-  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-}
-@media (min-width: 1080px) {
-  .dataviews-grid-view {
-    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-  }
-}
-@media (min-width: 1440px) {
-  .dataviews-grid-view {
-    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
-  }
-}
-.dataviews-grid-view .dataviews-view-grid__card h3 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.dataviews-grid-view .dataviews-view-grid__media {
-  width: 100%;
-  min-height: 200px;
-  aspect-ratio: 1/1;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.dataviews-grid-view .dataviews-view-grid__media > * {
-  -o-object-fit: cover;
-     object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-.dataviews-grid-view .dataviews-view-grid__title {
-  min-height: 24px;
-}
-.dataviews-grid-view .dataviews-view-grid__title a {
-  color: #1e1e1e;
-  text-decoration: none;
-  font-weight: 500;
-}
-.dataviews-grid-view .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 {
-  color: #757575;
-}
-.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
-  color: #1e1e1e;
-}
-
-.dataviews-action-modal {
-  z-index: 1000001;
-}
-
 .edit-site-global-styles-preview {
   display: flex;
   align-items: center;
@@ -1332,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;
@@ -1346,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);
@@ -1370,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));
@@ -1391,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 12px 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 {
@@ -1409,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 {
@@ -1426,14 +1639,17 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 12px;
 }
 
+.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
   color: #949494;
   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 {
   width: 16px;
   height: 16px;
@@ -1445,6 +1661,53 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 24px auto !important;
 }
 
+.edit-site-global-styles-screen-revisions__changes {
+  margin-bottom: 4px;
+  text-align: left;
+  color: #1e1e1e;
+  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;
@@ -1464,7 +1727,11 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   flex-shrink: 2;
   overflow: hidden;
   height: 100%;
-  padding-right: 2px;
+}
+@media (min-width: 782px) {
+  .edit-site-header-edit-mode .edit-site-header-edit-mode__start {
+    padding-right: 2px;
+  }
 }
 .edit-site-header-edit-mode .edit-site-header-edit-mode__end {
   display: flex;
@@ -1475,22 +1742,20 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   align-items: center;
   height: 100%;
   flex-grow: 1;
-  margin: 0 8px;
+  margin: 0 16px;
   justify-content: center;
   min-width: 0;
 }
-.edit-site-header-edit-mode .block-editor-block-contextual-toolbar.is-fixed {
-  border: none;
-}
 
 .edit-site-header-edit-mode__toolbar {
   display: flex;
   align-items: center;
-  padding-left: 8px;
+  padding-left: 16px;
+  gap: 8px;
 }
-@media (min-width: 600px) {
+@media (min-width: 782px) {
   .edit-site-header-edit-mode__toolbar {
-    padding-left: 24px;
+    padding-left: 20px;
   }
 }
 @media (min-width: 1280px) {
@@ -1498,13 +1763,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
     padding-right: 8px;
   }
 }
-.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle {
-  margin-right: 8px;
-  min-width: 32px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-}
 .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
   transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 }
@@ -1524,18 +1782,8 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-header-edit-mode__actions {
   display: inline-flex;
   align-items: center;
-  padding-right: 4px;
-  gap: 4px;
-}
-@media (min-width: 600px) {
-  .edit-site-header-edit-mode__actions {
-    padding-right: 10px;
-  }
-}
-@media (min-width: 600px) {
-  .edit-site-header-edit-mode__actions {
-    gap: 8px;
-  }
+  padding-right: 8px;
+  gap: 8px;
 }
 
 .edit-site-header-edit-mode__preview-options {
@@ -1546,41 +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: 36px;
-  min-width: 36px;
-  padding: 6px;
-}
-.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 {
-  margin-right: 8px;
-  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;
 }
@@ -1590,184 +1803,71 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-header-edit-mode.show-icon-labels .components-button.has-icon::after {
   content: attr(aria-label);
 }
-.edit-site-header-edit-mode.show-icon-labels .components-button.has-icon[aria-disabled=true] {
-  background-color: transparent;
-}
-.edit-site-header-edit-mode.show-icon-labels .is-tertiary:active {
-  box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-  background-color: transparent;
-}
-.edit-site-header-edit-mode.show-icon-labels .edit-site-save-button__button {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-.edit-site-header-edit-mode.show-icon-labels .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
-  content: none;
-}
-.edit-site-header-edit-mode.show-icon-labels .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
-.edit-site-header-edit-mode.show-icon-labels .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-  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;
-}
-
-.has-fixed-toolbar .selected-block-tools-wrapper {
-  overflow-x: scroll;
-}
-.has-fixed-toolbar .selected-block-tools-wrapper.is-collapsed {
-  display: none;
-}
-.has-fixed-toolbar .edit-site-header-edit-mode__center.is-collapsed {
-  display: none;
-}
-
-.edit-site-header-edit-mode__block-tools-toggle {
-  margin-left: 2px;
-}
-
-.edit-site-document-actions {
-  display: flex;
-  align-items: center;
-  height: 36px;
-  justify-content: space-between;
-  min-width: 0;
-  background: #f0f0f0;
-  border-radius: 4px;
-  width: min(100%, 450px);
-}
-.has-fixed-toolbar .edit-site-document-actions {
-  width: min(100%, 380px);
-}
-.edit-site-document-actions:hover {
-  background-color: #e0e0e0;
-}
-.edit-site-document-actions .components-button {
-  border-radius: 4px;
-}
-.edit-site-document-actions .components-button:hover {
-  color: var(--wp-block-synced-color);
-  background: #e0e0e0;
-}
-@media (min-width: 960px) {
-  .edit-site-document-actions {
-    width: min(100%, 450px);
-  }
-}
-.edit-site-document-actions.is-synced-entity .edit-site-document-actions__title {
-  color: var(--wp-block-synced-color);
-}
-.edit-site-document-actions.is-synced-entity .edit-site-document-actions__title h1 {
-  color: var(--wp-block-synced-color);
-}
-
-.edit-site-document-actions__command {
-  flex-grow: 1;
-  color: var(--wp-block-synced-color);
-  overflow: hidden;
-}
-
-.edit-site-document-actions__title {
-  flex-grow: 1;
-  overflow: hidden;
-}
-@media (min-width: 600px) {
-  .edit-site-document-actions__title {
-    padding-left: 32px;
-  }
-}
-.edit-site-document-actions__title:hover {
-  color: var(--wp-block-synced-color);
-}
-.edit-site-document-actions__title .block-editor-block-icon {
-  min-width: 24px;
-  flex-shrink: 0;
-}
-.edit-site-document-actions__title h1 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 50%;
+.edit-site-header-edit-mode.show-icon-labels .components-button.has-icon[aria-disabled=true] {
+  background-color: transparent;
 }
-.edit-site-document-actions.is-page .edit-site-document-actions__title {
-  color: #2f2f2f;
+.edit-site-header-edit-mode.show-icon-labels .is-tertiary:active {
+  box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+  background-color: transparent;
 }
-.edit-site-document-actions.is-page .edit-site-document-actions__title h1 {
-  color: #2f2f2f;
+.edit-site-header-edit-mode.show-icon-labels .edit-site-save-button__button {
+  padding-left: 6px;
+  padding-right: 6px;
 }
-.edit-site-document-actions.is-animated .edit-site-document-actions__title {
-  animation: edit-site-document-actions__slide-in-left 0.3s;
+.edit-site-header-edit-mode.show-icon-labels .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
+  content: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-document-actions.is-animated .edit-site-document-actions__title {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
+.edit-site-header-edit-mode.show-icon-labels .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
+.edit-site-header-edit-mode.show-icon-labels .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+  height: 36px;
+  padding: 0 8px;
 }
-.edit-site-document-actions.is-animated.is-page .edit-site-document-actions__title {
-  animation: edit-site-document-actions__slide-in-right 0.3s;
+.edit-site-header-edit-mode.show-icon-labels .block-editor-block-mover {
+  border-left: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-document-actions.is-animated.is-page .edit-site-document-actions__title {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
+.edit-site-header-edit-mode.show-icon-labels .block-editor-block-mover::before {
+  content: "";
+  width: 1px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background-color: #ddd;
+  margin-left: 8px;
 }
 
-.edit-site-document-actions__shortcut {
-  color: #2f2f2f;
-  min-width: 32px;
-  display: none;
+.has-fixed-toolbar .selected-block-tools-wrapper {
+  overflow-x: scroll;
 }
-@media (min-width: 600px) {
-  .edit-site-document-actions__shortcut {
-    display: initial;
-  }
+.has-fixed-toolbar .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
+  border-bottom: 0;
 }
-
-.edit-site-document-actions__back.components-button.has-icon.has-text {
-  min-width: 36px;
-  flex-shrink: 0;
-  color: #757575;
-  gap: 0;
-  z-index: 1;
-  position: absolute;
+.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar-group,
+.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar {
+  border-right: none;
 }
-.edit-site-document-actions__back.components-button.has-icon.has-text:hover {
-  color: currentColor;
-  background-color: transparent;
+.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar-group::after,
+.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar::after {
+  content: "";
+  width: 1px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background-color: #ddd;
+  margin-left: 8px;
 }
-.edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
-  animation: edit-site-document-actions__slide-in-left 0.3s;
+.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
+.has-fixed-toolbar .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
+  display: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
+.has-fixed-toolbar .selected-block-tools-wrapper.is-collapsed {
+  display: none;
 }
-
-@keyframes edit-site-document-actions__slide-in-right {
-  from {
-    transform: translateX(-15%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+.has-fixed-toolbar .edit-site-header-edit-mode__center.is-collapsed {
+  display: none;
 }
-@keyframes edit-site-document-actions__slide-in-left {
-  from {
-    transform: translateX(15%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+
+.edit-site-header-edit-mode__block-tools-toggle {
+  margin-left: 2px;
 }
+
 .edit-site-list-header {
   position: relative;
   align-items: center;
@@ -1956,13 +2056,13 @@ 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;
   }
 }
 
 .edit-site-page-header {
-  padding: 0 32px;
-  min-height: 60px;
+  padding: 16px 32px;
+  min-height: 72px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
@@ -1990,7 +2090,10 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-page-pages__featured-image {
-  border-radius: 2px;
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  display: block;
 }
 
 .edit-site-patterns {
@@ -2056,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;
@@ -2201,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;
 }
@@ -2335,46 +2487,10 @@ 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-swap-template-modal {
-  z-index: 1000001;
-}
-
 .edit-site-page-panels__swap-template__confirm-modal__actions {
   margin-top: 24px;
 }
 
-.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
-  column-count: 2;
-  column-gap: 24px;
-  padding-top: 2px;
-}
-@media (min-width: 782px) {
-  .edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
-    column-count: 3;
-  }
-}
-@media (min-width: 1280px) {
-  .edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
-    column-count: 4;
-  }
-}
-.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
-  break-inside: avoid-column;
-}
-.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__item:not(:focus):not(:hover) .block-editor-block-preview__container {
-  box-shadow: 0 0 0 1px #ddd;
-}
-
 .edit-site-change-status__content .components-popover__content {
   min-width: 320px;
   padding: 16px;
@@ -2400,15 +2516,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   text-overflow: ellipsis;
 }
 
-.edit-site-page-panels-edit-template__dropdown .components-popover__content {
-  min-width: 240px;
-}
-.edit-site-page-panels-edit-template__dropdown .components-button.is-pressed,
-.edit-site-page-panels-edit-template__dropdown .components-button.is-pressed:hover {
-  background: inherit;
-  color: inherit;
-}
-
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
@@ -2551,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;
@@ -2708,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;
 }
@@ -2933,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;
 }
@@ -3044,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;
@@ -3064,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%;
 }
 
@@ -3187,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 {
@@ -3215,7 +3245,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   flex-grow: 1;
   overflow-y: auto;
 }
-.edit-site-sidebar__content .components-navigator-screen {
+
+.edit-site-sidebar__screen-wrapper {
   scrollbar-width: thin;
   scrollbar-gutter: stable both-edges;
   scrollbar-color: transparent transparent;
@@ -3224,28 +3255,29 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   display: flex;
   flex-direction: column;
   height: 100%;
+  padding: 0 12px;
 }
-.edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar {
+.edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
-.edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-track {
+.edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
   background-color: transparent;
 }
-.edit-site-sidebar__content .components-navigator-screen::-webkit-scrollbar-thumb {
+.edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
   background-color: transparent;
   border-radius: 8px;
   border: 3px solid transparent;
   background-clip: padding-box;
 }
-.edit-site-sidebar__content .components-navigator-screen:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__content .components-navigator-screen:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__content .components-navigator-screen:focus-within::-webkit-scrollbar-thumb {
+.edit-site-sidebar__screen-wrapper:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus-within::-webkit-scrollbar-thumb {
   background-color: #757575;
 }
-.edit-site-sidebar__content .components-navigator-screen:hover, .edit-site-sidebar__content .components-navigator-screen:focus, .edit-site-sidebar__content .components-navigator-screen:focus-within {
+.edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
   scrollbar-color: #757575 transparent;
 }
 @media (hover: none) {
-  .edit-site-sidebar__content .components-navigator-screen {
+  .edit-site-sidebar__screen-wrapper {
     scrollbar-color: #757575 transparent;
   }
 }
@@ -3253,12 +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;
-}
-
-.edit-site-sidebar__content > div {
-  padding: 0 12px;
+  margin: 0 16px;
+  padding: 16px 0;
 }
 
 .edit-site-sidebar-button {
@@ -3528,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;
 }
@@ -3744,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 {
@@ -3852,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;
@@ -3966,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;
@@ -4010,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);
@@ -4027,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;
 }
 
@@ -4083,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;
 }