@wordpress/edit-site 6.26.1-next.719a03cbe.0 → 6.27.1-next.46f643fa0.0

package/build-style/posts-rtl.css

@@ -400,7 +400,9 @@
   line-height: 1.4;
 }
 .dataviews-filters__summary-popover .components-popover__content {
-  width: 230px;
+  width: 100%;
+  min-width: 230px;
+  max-width: 250px;
   border-radius: 4px;
 }
 .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
@@ -1045,9 +1047,22 @@
 
 .dataviews-view-grid {
   margin-bottom: auto;
+  display: grid;
+  gap: 32px;
   grid-template-rows: max-content;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   padding: 0 48px 24px;
   container-type: inline-size;
+  /**
+   * Breakpoints were adjusted from media queries breakpoints to account for
+   * the sidebar width. This was done to match the existing styles we had.
+   */
+}
+@container (max-width: 480px) {
+  .dataviews-view-grid {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
 }
 @media not (prefers-reduced-motion) {
   .dataviews-view-grid {
@@ -1087,7 +1102,7 @@
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
-  background-color: #f0f0f0;
+  background-color: #fff;
   border-radius: 4px;
   position: relative;
 }
@@ -1141,40 +1156,6 @@
   padding-bottom: 12px;
 }
 
-.dataviews-view-grid.dataviews-view-grid {
-  /**
-   * Breakpoints were adjusted from media queries breakpoints to account for
-   * the sidebar width. This was done to match the existing styles we had.
-   */
-}
-@container (max-width: 480px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    padding-right: 24px;
-    padding-left: 24px;
-  }
-}
-@container (min-width: 480px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@container (min-width: 780px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@container (min-width: 1140px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-@container (min-width: 1520px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
   display: none;
@@ -1202,6 +1183,14 @@
   cursor: pointer;
 }
 
+.dataviews-view-grid__group-header {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 48px;
+}
+
 div.dataviews-view-list {
   list-style-type: none;
 }
@@ -1315,7 +1304,7 @@ div.dataviews-view-list {
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
-  background-color: #f0f0f0;
+  background-color: #fff;
   border-radius: 4px;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper img {
@@ -1567,6 +1556,26 @@ div.dataviews-view-list {
 
 .dataviews-column-primary__media {
   max-width: 60px;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  background-color: #fff;
+  border-radius: 4px;
+}
+.dataviews-column-primary__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.dataviews-column-primary__media::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
 }
 
 .dataviews-controls__datetime {
@@ -1574,11 +1583,24 @@ div.dataviews-view-list {
   padding: 0;
 }
 
-.dataviews-controls__datetime-number,
-.dataviews-controls__datetime-unit {
+.dataviews-controls__relative-date-number,
+.dataviews-controls__relative-date-unit {
   flex: 1 1 50%;
 }
 
+.dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
+.dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+.dataviews-controls__date-preset {
+  border: 1px solid #ddd;
+}
+.dataviews-controls__date-preset:active {
+  background-color: #000;
+}
+
 .dataforms-layouts-panel__field {
   width: 100%;
   min-height: 32px;
@@ -1835,8 +1857,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   /* stylelint-enable  */
   position: relative;
   color: #fff;
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   overflow: hidden;
   padding: 0;
   display: flex;
@@ -1871,8 +1893,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
   display: flex;
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   justify-content: center;
   align-items: center;
 }
@@ -2012,7 +2034,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _q7qsb_slide-from-right {
+@keyframes _7yqd8_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2022,7 +2044,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _q7qsb_slide-from-left {
+@keyframes _7yqd8_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2078,10 +2100,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _q7qsb_slide-from-left;
+  animation-name: _7yqd8_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _q7qsb_slide-from-right;
+  animation-name: _7yqd8_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -2090,7 +2112,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   justify-content: space-between;
   gap: 8px;
   margin-left: 12px;
-  height: 60px;
+  height: 64px;
 }
 
 .edit-site-site-hub__actions {
@@ -2098,8 +2120,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 
 .edit-site-site-hub__view-mode-toggle-container {
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   flex-shrink: 0;
 }
 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {

package/build-style/posts.css

@@ -400,7 +400,9 @@
   line-height: 1.4;
 }
 .dataviews-filters__summary-popover .components-popover__content {
-  width: 230px;
+  width: 100%;
+  min-width: 230px;
+  max-width: 250px;
   border-radius: 4px;
 }
 .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
@@ -1045,9 +1047,22 @@
 
 .dataviews-view-grid {
   margin-bottom: auto;
+  display: grid;
+  gap: 32px;
   grid-template-rows: max-content;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   padding: 0 48px 24px;
   container-type: inline-size;
+  /**
+   * Breakpoints were adjusted from media queries breakpoints to account for
+   * the sidebar width. This was done to match the existing styles we had.
+   */
+}
+@container (max-width: 480px) {
+  .dataviews-view-grid {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }
 @media not (prefers-reduced-motion) {
   .dataviews-view-grid {
@@ -1087,7 +1102,7 @@
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
-  background-color: #f0f0f0;
+  background-color: #fff;
   border-radius: 4px;
   position: relative;
 }
@@ -1141,40 +1156,6 @@
   padding-bottom: 12px;
 }
 
-.dataviews-view-grid.dataviews-view-grid {
-  /**
-   * Breakpoints were adjusted from media queries breakpoints to account for
-   * the sidebar width. This was done to match the existing styles we had.
-   */
-}
-@container (max-width: 480px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-}
-@container (min-width: 480px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@container (min-width: 780px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@container (min-width: 1140px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-@container (min-width: 1520px) {
-  .dataviews-view-grid.dataviews-view-grid {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
   display: none;
@@ -1202,6 +1183,14 @@
   cursor: pointer;
 }
 
+.dataviews-view-grid__group-header {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 48px;
+}
+
 div.dataviews-view-list {
   list-style-type: none;
 }
@@ -1315,7 +1304,7 @@ div.dataviews-view-list {
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
-  background-color: #f0f0f0;
+  background-color: #fff;
   border-radius: 4px;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper img {
@@ -1567,6 +1556,26 @@ div.dataviews-view-list {
 
 .dataviews-column-primary__media {
   max-width: 60px;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  background-color: #fff;
+  border-radius: 4px;
+}
+.dataviews-column-primary__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.dataviews-column-primary__media::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-controls__datetime {
@@ -1574,11 +1583,24 @@ div.dataviews-view-list {
   padding: 0;
 }
 
-.dataviews-controls__datetime-number,
-.dataviews-controls__datetime-unit {
+.dataviews-controls__relative-date-number,
+.dataviews-controls__relative-date-unit {
   flex: 1 1 50%;
 }
 
+.dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
+.dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+.dataviews-controls__date-preset {
+  border: 1px solid #ddd;
+}
+.dataviews-controls__date-preset:active {
+  background-color: #000;
+}
+
 .dataforms-layouts-panel__field {
   width: 100%;
   min-height: 32px;
@@ -1835,8 +1857,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   /* stylelint-enable  */
   position: relative;
   color: #fff;
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   overflow: hidden;
   padding: 0;
   display: flex;
@@ -1871,8 +1893,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
   display: flex;
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   justify-content: center;
   align-items: center;
 }
@@ -2012,7 +2034,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _q7qsb_slide-from-right {
+@keyframes _7yqd8_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2022,7 +2044,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _q7qsb_slide-from-left {
+@keyframes _7yqd8_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2078,10 +2100,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _q7qsb_slide-from-left;
+  animation-name: _7yqd8_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _q7qsb_slide-from-right;
+  animation-name: _7yqd8_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -2090,7 +2112,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   justify-content: space-between;
   gap: 8px;
   margin-right: 12px;
-  height: 60px;
+  height: 64px;
 }
 
 .edit-site-site-hub__actions {
@@ -2098,8 +2120,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 }
 
 .edit-site-site-hub__view-mode-toggle-container {
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   flex-shrink: 0;
 }
 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {