@wordpress/edit-site 6.27.0 → 6.28.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 {
@@ -447,10 +449,13 @@
   align-items: center;
   box-sizing: border-box;
 }
+.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
+  cursor: default;
+}
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
   padding-inline-end: 28px;
 }
-.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
+.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
   background: #e0e0e0;
   color: #1e1e1e;
 }
@@ -1045,9 +1050,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 +1105,7 @@
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
-  background-color: #f0f0f0;
+  background-color: #fff;
   border-radius: 4px;
   position: relative;
 }
@@ -1141,40 +1159,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;
@@ -1203,8 +1187,8 @@
 }
 
 .dataviews-view-grid__group-header {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 15px;
+  font-weight: 500;
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 48px;
@@ -1323,7 +1307,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 {
@@ -1387,7 +1371,6 @@ div.dataviews-view-list {
 .dataviews-view-table td,
 .dataviews-view-table th {
   padding: 12px;
-  white-space: nowrap;
 }
 .dataviews-view-table td.dataviews-view-table__actions-column,
 .dataviews-view-table th.dataviews-view-table__actions-column {
@@ -1415,6 +1398,11 @@ div.dataviews-view-list {
   padding-left: 0;
   width: 1%;
 }
+.dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
+.dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
+  max-width: auto;
+  min-width: auto;
+}
 .dataviews-view-table tr {
   border-top: 1px solid #f0f0f0;
 }
@@ -1533,6 +1521,8 @@ div.dataviews-view-list {
 }
 .dataviews-view-table .dataviews-view-table__actions-column {
   width: 1%;
+  max-width: inherit;
+  min-width: inherit;
 }
 .dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
   opacity: 1;
@@ -1575,6 +1565,38 @@ 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-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
+.dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
+  min-width: 15ch;
+  max-width: 80ch;
+}
+
+.dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
+  font-weight: 500;
+  padding: 12px 48px;
+  color: #1e1e1e;
 }
 
 .dataviews-controls__datetime {
@@ -1582,11 +1604,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 +1864,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 {
@@ -2466,22 +2518,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   border-top: 1px solid #ddd;
 }
 
-.editor-sidebar {
-  width: 280px;
-}
-.editor-sidebar > .components-panel {
-  border-right: 0;
-  border-left: 0;
-  margin-bottom: -1px;
-  margin-top: -1px;
-}
-.editor-sidebar > .components-panel > .components-panel__header {
-  background: #f0f0f0;
-}
-.editor-sidebar .block-editor-block-inspector__card {
-  margin: 0;
-}
-
 .edit-site-global-styles-sidebar {
   display: flex;
   flex-direction: column;
@@ -2719,26 +2755,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;
-  text-wrap: balance;
-  text-wrap: pretty;
-}
-.dataviews-view-table .page-templates-description {
-  margin-bottom: 8px;
-  display: block;
-}
 
 .edit-site-page-templates .dataviews-pagination {
   z-index: 2;
@@ -2822,8 +2838,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 +2869,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;
@@ -2866,7 +2882,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 }
 .edit-site-editor__back-icon.has-site-icon {
   background-color: hsla(0deg, 0%, 100%, 0.6);
-  -webkit-backdrop-filter: saturate(180%) blur(15px);
   backdrop-filter: saturate(180%) blur(15px);
 }
 
@@ -3082,8 +3097,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 +3133,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 +3220,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _uamd0_slide-from-right {
+@keyframes _i1bme_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -3215,7 +3230,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _uamd0_slide-from-left {
+@keyframes _i1bme_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -3271,10 +3286,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: _i1bme_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _uamd0_slide-from-right;
+  animation-name: _i1bme_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -3489,9 +3504,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 +3585,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 +3593,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 +3931,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 {