@wordpress/edit-site 6.27.0 → 6.27.1-next.46f643fa0.0

package/build-style/style-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;
@@ -1323,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 {
@@ -1575,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 {
@@ -1582,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;
@@ -1829,11 +1843,28 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   height: 16px;
 }
 
-.dataviews-view-table__cell-content-wrapper .fields-controls__featured-image-image,
-.dataviews-view-table__cell-content-wrapper .fields-controls__featured-image-placeholder {
+.dataviews-view-grid__media .fields-controls__featured-image-image,
+.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
+.dataviews-view-list__media-wrapper .fields-controls__featured-image-image,
+.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 4px;
+}
+.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
+.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+  box-shadow: none;
+  background: #f0f0f0;
+}
+
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder {
   width: 32px;
   height: 32px;
-  display: block;
 }
 
 .fields-controls__template-modal {
@@ -2719,16 +2750,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   text-wrap: balance;
   text-wrap: pretty;
 }
-.dataviews-view-table .page-templates-preview-field::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;
-}
 
 .page-templates-description {
   max-width: 50em;
@@ -2822,8 +2843,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   /* stylelint-enable */
   top: 0;
   right: 0;
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   z-index: 100;
 }
 .edit-site-editor__view-mode-toggle .components-button {
@@ -2853,8 +2874,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   position: absolute;
   top: 0;
   right: 0;
-  width: 60px;
-  height: 60px;
+  width: 64px;
+  height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3082,8 +3103,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;
@@ -3118,8 +3139,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;
 }
@@ -3205,7 +3226,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _uamd0_slide-from-right {
+@keyframes _gzxpw_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -3215,7 +3236,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _uamd0_slide-from-left {
+@keyframes _gzxpw_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -3271,10 +3292,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _uamd0_slide-from-left;
+  animation-name: _gzxpw_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _uamd0_slide-from-right;
+  animation-name: _gzxpw_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -3489,9 +3510,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-left: -16px;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
-  width: 100%;
-}
 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   white-space: normal;
 }
@@ -3573,7 +3591,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 {
@@ -3581,8 +3599,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 {
@@ -3919,7 +3937,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   top: 0;
   align-items: center;
   justify-content: center;
-  padding-top: 120px;
+  padding-top: 124px;
 }
 
 .font-library-modal__footer {

package/build-style/style.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;
@@ -1323,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 {
@@ -1575,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 {
@@ -1582,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;
@@ -1829,11 +1843,28 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   height: 16px;
 }
 
-.dataviews-view-table__cell-content-wrapper .fields-controls__featured-image-image,
-.dataviews-view-table__cell-content-wrapper .fields-controls__featured-image-placeholder {
+.dataviews-view-grid__media .fields-controls__featured-image-image,
+.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
+.dataviews-view-list__media-wrapper .fields-controls__featured-image-image,
+.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 4px;
+}
+.dataviews-view-grid__media .fields-controls__featured-image-placeholder,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder,
+.dataviews-view-list__media-wrapper .fields-controls__featured-image-placeholder {
+  box-shadow: none;
+  background: #f0f0f0;
+}
+
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-image,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media .fields-controls__featured-image-placeholder {
   width: 32px;
   height: 32px;
-  display: block;
 }
 
 .fields-controls__template-modal {
@@ -2720,16 +2751,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   text-wrap: balance;
   text-wrap: pretty;
 }
-.dataviews-view-table .page-templates-preview-field::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;
-}
 
 .page-templates-description {
   max-width: 50em;
@@ -2823,8 +2844,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   /* stylelint-enable */
   top: 0;
   left: 0;
-  height: 60px;
-  width: 60px;
+  height: 64px;
+  width: 64px;
   z-index: 100;
 }
 .edit-site-editor__view-mode-toggle .components-button {
@@ -2854,8 +2875,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   position: absolute;
   top: 0;
   left: 0;
-  width: 60px;
-  height: 60px;
+  width: 64px;
+  height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3083,8 +3104,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;
@@ -3119,8 +3140,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;
 }
@@ -3206,7 +3227,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _uamd0_slide-from-right {
+@keyframes _gzxpw_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -3216,7 +3237,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _uamd0_slide-from-left {
+@keyframes _gzxpw_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -3272,10 +3293,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _uamd0_slide-from-left;
+  animation-name: _gzxpw_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _uamd0_slide-from-right;
+  animation-name: _gzxpw_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -3490,9 +3511,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-right: -16px;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
-  width: 100%;
-}
 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   white-space: normal;
 }
@@ -3574,7 +3592,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 {
@@ -3582,8 +3600,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 {
@@ -3920,7 +3938,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   top: 0;
   align-items: center;
   justify-content: center;
-  padding-top: 120px;
+  padding-top: 124px;
 }
 
 .font-library-modal__footer {