@wordpress/edit-site 6.1.0 → 6.3.0

package/build-style/posts-rtl.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-right: 48px;
@@ -287,9 +274,12 @@
   box-shadow: inset 0 -1px 0 #f0f0f0;
   padding-top: 8px;
   padding-bottom: 8px;
+  padding-right: 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-right: 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 @@
   left: 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-left: 32px;
+  padding-left: 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;
@@ -1004,6 +988,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 {
@@ -1266,9 +1261,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 _61x0r_slide-from-right {
+@keyframes _qixpa_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -1278,7 +1275,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _61x0r_slide-from-left {
+@keyframes _qixpa_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -1334,10 +1331,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _61x0r_slide-from-left;
+  animation-name: _qixpa_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _61x0r_slide-from-right;
+  animation-name: _qixpa_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -1461,6 +1458,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%;
+  right: 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;
 }
@@ -1704,4 +1777,11 @@ body .media-frame select.attachment-filters:last-of-type {
 .no-js #gutenberg-posts-dashboard {
   min-height: 0;
   position: static;
+}
+#gutenberg-posts-dashboard .components-editor-notices__snackbar {
+  position: fixed;
+  left: 0;
+  bottom: 16px;
+  padding-right: 16px;
+  padding-left: 16px;
 }

package/build-style/posts.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;
@@ -1004,6 +988,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 {
@@ -1266,9 +1261,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 _61x0r_slide-from-right {
+@keyframes _qixpa_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -1278,7 +1275,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _61x0r_slide-from-left {
+@keyframes _qixpa_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -1334,10 +1331,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _61x0r_slide-from-left;
+  animation-name: _qixpa_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _61x0r_slide-from-right;
+  animation-name: _qixpa_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -1461,6 +1458,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;
 }
@@ -1704,4 +1777,11 @@ body .media-frame select.attachment-filters:last-of-type {
 .no-js #gutenberg-posts-dashboard {
   min-height: 0;
   position: static;
+}
+#gutenberg-posts-dashboard .components-editor-notices__snackbar {
+  position: fixed;
+  right: 0;
+  bottom: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
 }