@wordpress/edit-site 6.1.0 → 6.3.0

package/build-style/style.css

@@ -213,19 +213,6 @@
 .dataviews-view-table tr .dataviews-view-table-header-button {
   gap: 4px;
 }
-.dataviews-view-table tr th:first-child, .dataviews-view-table tr th:last-child,
-.dataviews-view-table tr td:first-child,
-.dataviews-view-table tr td:last-child {
-  transition: padding ease-out 0.1s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .dataviews-view-table tr th:first-child, .dataviews-view-table tr th:last-child,
-.dataviews-view-table tr td:first-child,
-.dataviews-view-table tr td:last-child {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .dataviews-view-table tr td:first-child,
 .dataviews-view-table tr th:first-child {
   padding-left: 48px;
@@ -287,9 +274,12 @@
   box-shadow: inset 0 -1px 0 #f0f0f0;
   padding-top: 8px;
   padding-bottom: 8px;
+  padding-left: 12px;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
+}
+.dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
   padding-left: 4px;
 }
 .dataviews-view-table tbody td {
@@ -339,7 +329,6 @@
   color: #757575;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: block;
   width: 100%;
 }
 .dataviews-view-list__primary-field a,
@@ -424,17 +413,12 @@
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
-.dataviews-view-grid .dataviews-view-grid__card.is-selected .page-pages-preview-field__button::after {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-}
 .dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
   background-color: #f0f0f0;
   border-radius: 4px;
-  overflow: hidden;
   position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
@@ -515,7 +499,7 @@
   right: 0;
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  padding-right: 32px;
+  padding-right: 24px;
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
   opacity: 1;
@@ -607,7 +591,7 @@
   display: none;
 }
 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
-  line-height: 20px;
+  line-height: 24px;
   display: inline-flex;
 }
 .dataviews-view-list .dataviews-view-list__item-actions {
@@ -817,10 +801,10 @@
   border-radius: 16px;
   border: 1px solid transparent;
   cursor: pointer;
-  padding: 0 12px;
-  height: 32px;
+  padding: 4px 12px;
+  min-height: 32px;
   background: #f0f0f0;
-  color: #757575;
+  color: #2f2f2f;
   position: relative;
   display: flex;
   align-items: center;
@@ -1108,18 +1092,6 @@
   align-items: flex-start;
 }
 
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-::view-transition-old(frame),
-::view-transition-new(frame) {
-  animation-duration: 0;
-}
-
-/* stylelint-enable */
-.edit-site-visual-editor__editor-canvas {
-  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-  view-transition-name: frame;
-  /* stylelint-enable */
-}
 .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));
@@ -1199,7 +1171,8 @@
   color: #757575;
 }
 
-.edit-site-global-styles-font-families__add-fonts {
+.edit-site-global-styles-font-families__add-fonts,
+.edit-site-global-styles-font-families__manage-fonts {
   justify-content: center;
 }
 
@@ -1667,70 +1640,6 @@
   z-index: 1;
 }
 
-.edit-site-page-pages__featured-image {
-  height: 100%;
-  object-fit: cover;
-  width: 100%;
-}
-
-.edit-site-page-pages__featured-image-wrapper {
-  height: 100%;
-  width: 100%;
-  border-radius: 4px;
-}
-.edit-site-page-pages__featured-image-wrapper.is-layout-table:not(:has(.page-pages-preview-field__button)), .edit-site-page-pages__featured-image-wrapper.is-layout-table .page-pages-preview-field__button {
-  width: 32px;
-  height: 32px;
-  display: block;
-  border-radius: 4px;
-  position: relative;
-  overflow: hidden;
-  background-color: #f0f0f0;
-  flex-grow: 0 !important;
-}
-.edit-site-page-pages__featured-image-wrapper.is-layout-table:not(:has(.page-pages-preview-field__button))::after, .edit-site-page-pages__featured-image-wrapper.is-layout-table .page-pages-preview-field__button::after {
-  border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  content: "";
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.page-pages-preview-field__button {
-  box-shadow: none;
-  border: none;
-  padding: 0;
-  background-color: unset;
-  box-sizing: border-box;
-  cursor: pointer;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.page-pages-preview-field__button:focus-visible {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-
-.edit-site-page-pages-title span {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.edit-site-page-pages__title-badge {
-  background: #f0f0f0;
-  color: #757575;
-  padding: 0 4px;
-  border-radius: 2px;
-  font-size: 12px;
-  font-weight: 400;
-  flex-shrink: 0;
-}
-
 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
   top: 0;
 }
@@ -1759,10 +1668,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  border-radius: 3px 3px 0 0;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
   width: 96px;
@@ -1781,7 +1686,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1878,7 +1783,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
 }
 .page-templates-preview-field .page-templates-preview-field__button {
   box-shadow: none;
@@ -1889,7 +1793,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 .page-templates-preview-field .page-templates-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1901,9 +1805,6 @@
 .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
   height: 100%;
 }
-.page-templates-preview-field.is-viewtype-grid .page-templates-preview-field__button {
-  border-radius: 3px 3px 0 0;
-}
 .page-templates-preview-field.is-viewtype-table {
   border-radius: 2px;
   position: relative;
@@ -1978,47 +1879,6 @@
   }
 }
 
-.edit-site-table-wrapper {
-  width: 100%;
-  padding: 32px;
-}
-
-.edit-site-table {
-  width: 100%;
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-  position: relative;
-}
-.edit-site-table a {
-  text-decoration: none;
-}
-.edit-site-table th {
-  text-align: left;
-  font-weight: normal;
-  padding: 0 16px 16px;
-  color: #757575;
-}
-.edit-site-table td {
-  padding: 16px;
-}
-.edit-site-table td,
-.edit-site-table th {
-  vertical-align: center;
-}
-.edit-site-table td:first-child,
-.edit-site-table th:first-child {
-  padding-left: 0;
-}
-.edit-site-table td:last-child,
-.edit-site-table th:last-child {
-  padding-right: 0;
-  text-align: right;
-}
-.edit-site-table tr {
-  border-bottom: 1px solid #f0f0f0;
-}
-
 .edit-site-editor__editor-interface {
   opacity: 1;
   transition: opacity 0.1s ease-out;
@@ -2139,6 +1999,17 @@
   position: relative;
   width: 100%;
   z-index: 2;
+  /*
+   * The SiteHubMobile component is displayed
+   * for pages that do not have a sidebar,
+   * yet it needs the Sidebar component for the React context.
+   *
+   * This removes the padding in this scenario.
+   * See https://github.com/WordPress/gutenberg/pull/63118
+   */
+}
+.edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
+  padding: 0;
 }
 
 .edit-site-layout__canvas-container {
@@ -2342,9 +2213,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar__content {
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  contain: content;
 }
 
-@keyframes _w89s1_slide-from-right {
+@keyframes _ld46o_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2354,7 +2227,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _w89s1_slide-from-left {
+@keyframes _ld46o_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2410,10 +2283,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _w89s1_slide-from-left;
+  animation-name: _ld46o_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _w89s1_slide-from-right;
+  animation-name: _ld46o_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2871,6 +2744,82 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   background: #fff;
 }
 
+.posts-list-page__featured-image {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.posts-list-page__featured-image-wrapper {
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+}
+.posts-list-page__featured-image-wrapper.is-layout-table:not(:has(.posts-list-page-preview-field__button)), .posts-list-page__featured-image-wrapper.is-layout-table .posts-list-page-preview-field__button {
+  width: 32px;
+  height: 32px;
+  display: block;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  background-color: #f0f0f0;
+  flex-grow: 0 !important;
+}
+.posts-list-page__featured-image-wrapper.is-layout-table:not(:has(.posts-list-page-preview-field__button))::after, .posts-list-page__featured-image-wrapper.is-layout-table .posts-list-page-preview-field__button::after {
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.posts-list-page-preview-field__button {
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  background-color: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+}
+.posts-list-page-preview-field__button:focus-visible {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+
+.dataviews-view-grid__card.is-selected .posts-list-page-preview-field__button::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+}
+
+.posts-list-page-title span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.posts-list-page-title-badge {
+  background: #f0f0f0;
+  color: #757575;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 12px;
+  font-weight: 400;
+  flex-shrink: 0;
+}
+
+.posts-list-page-post-author-field__icon-container {
+  height: 24px;
+}
+.posts-list-page-post-author-field__icon-container svg {
+  fill: currentColor;
+}
+
 .edit-site-resizable-frame__inner {
   position: relative;
 }
@@ -2969,7 +2918,8 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   justify-content: center;
   padding-top: 120px;
 }
-.font-library-modal__tabpanel-layout .font-library-modal__tabpanel-layout__footer {
+
+.font-library-modal__footer {
   border-top: 1px solid #ddd;
   margin: 0 -32px -32px;
   padding: 16px 32px;
@@ -2980,6 +2930,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   background-color: #fff;
 }
 
+.font-library-modal__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+}
+
 .font-library-modal__tabpanel-layout .components-base-control__field {
   margin-bottom: 0;
 }
@@ -3135,6 +3092,19 @@ button.font-library-modal__upload-area {
   outline-color: var(--wp-admin-theme-color);
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+
+/* stylelint-enable */
 body.js #wpadminbar {
   display: none;
 }