@wordpress/edit-site 6.30.0 → 6.30.1-next.6870dfe5b.0

package/build-style/style-rtl.css

@@ -238,7 +238,8 @@
   }
 }
 
-.dataviews-wrapper {
+.dataviews-wrapper,
+.dataviews-picker-wrapper {
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -351,7 +352,8 @@
 /**
  * Applying a consistent 24px padding when DataViews are placed within cards.
  */
-.components-card__body:has(> .dataviews-wrapper) {
+.components-card__body:has(> .dataviews-wrapper),
+.components-card__body:has(> .dataviews-picker-wrapper) {
   padding: 8px 0 0;
   overflow: hidden;
 }
@@ -360,15 +362,25 @@
 .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
   padding-inline: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
   padding-inline-start: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
   padding-inline-end: 24px;
 }
 
@@ -941,6 +953,15 @@
   z-index: 1000001;
 }
 
+.dataviews-picker-footer__bulk-selection {
+  align-self: flex-start;
+  height: 32px;
+}
+
+.dataviews-picker-footer__actions {
+  align-self: flex-end;
+}
+
 .dataviews-selection-checkbox {
   --checkbox-input-size: 24px;
   line-height: 0;
@@ -1052,7 +1073,7 @@
   color: #757575;
 }
 
-.dataviews-view-grid {
+.dataviews-view-grid-items {
   margin-bottom: auto;
   display: grid;
   gap: 32px;
@@ -1061,21 +1082,22 @@
   padding: 0 48px 24px;
   container-type: inline-size;
   /**
-   * Match the padding applied to other DataViews components at the same
-   * max-width.
-   */
+  	* 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: 430px) {
-  .dataviews-view-grid {
+  .dataviews-view-grid-items {
     padding-right: 24px;
     padding-left: 24px;
   }
 }
 @media not (prefers-reduced-motion) {
-  .dataviews-view-grid {
+  .dataviews-view-grid-items {
     transition: padding ease-out 0.1s;
   }
 }
+
 .dataviews-view-grid .dataviews-view-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -1674,6 +1696,167 @@ div.dataviews-view-list {
   color: #1e1e1e;
 }
 
+.dataviews-view-grid-items {
+  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: 430px) {
+  .dataviews-view-grid-items {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid-items {
+    transition: padding ease-out 0.1s;
+  }
+}
+
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card {
+  height: 100%;
+  justify-content: flex-start;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
+  padding: 8px 0 4px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
+  width: fit-content;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  color: #1e1e1e;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
+  outline: none;
+}
+.dataviews-view-picker-grid:focus-visible [data-active-item=true] {
+  outline: 2px solid var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox {
+  top: 8px !important;
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox input {
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media {
+  width: 100%;
+  aspect-ratio: 1/1;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__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;
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
+  padding: 0 0 12px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
+  min-height: 24px;
+  line-height: 20px;
+  padding-top: 2px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
+  min-height: 24px;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
+  width: 35%;
+  color: #757575;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
+  display: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
+  padding-bottom: 12px;
+}
+
+.dataviews-view-picker-grid__field-value:empty,
+.dataviews-view-picker-grid__field:empty {
+  display: none;
+}
+
+.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+  position: absolute;
+  top: -9999em;
+  right: 8px;
+  z-index: 1;
+}
+@media (hover: none) {
+  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+    top: 8px;
+  }
+}
+
+.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
+  top: 8px;
+}
+
+.dataviews-view-picker-grid__media--clickable {
+  cursor: pointer;
+}
+
+.dataviews-view-picker-grid-group__header {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 48px;
+}
+
 .dataviews-controls__datetime {
   border: none;
   padding: 0;
@@ -1799,6 +1982,10 @@ div.dataviews-view-list {
   margin-bottom: 16px;
 }
 
+.dataforms-layouts-row__field-control {
+  width: 100%;
+}
+
 .fields-create-template-part-modal {
   z-index: 1000001;
 }
@@ -3344,7 +3531,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _hy9cp_slide-from-right {
+@keyframes _1hvec_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -3354,7 +3541,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _hy9cp_slide-from-left {
+@keyframes _1hvec_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -3410,10 +3597,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _hy9cp_slide-from-left;
+  animation-name: _1hvec_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _hy9cp_slide-from-right;
+  animation-name: _1hvec_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/build-style/style.css

@@ -238,7 +238,8 @@
   }
 }
 
-.dataviews-wrapper {
+.dataviews-wrapper,
+.dataviews-picker-wrapper {
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -351,7 +352,8 @@
 /**
  * Applying a consistent 24px padding when DataViews are placed within cards.
  */
-.components-card__body:has(> .dataviews-wrapper) {
+.components-card__body:has(> .dataviews-wrapper),
+.components-card__body:has(> .dataviews-picker-wrapper) {
   padding: 8px 0 0;
   overflow: hidden;
 }
@@ -360,15 +362,25 @@
 .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
   padding-inline: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
   padding-inline-start: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
   padding-inline-end: 24px;
 }
 
@@ -941,6 +953,15 @@
   z-index: 1000001;
 }
 
+.dataviews-picker-footer__bulk-selection {
+  align-self: flex-start;
+  height: 32px;
+}
+
+.dataviews-picker-footer__actions {
+  align-self: flex-end;
+}
+
 .dataviews-selection-checkbox {
   --checkbox-input-size: 24px;
   line-height: 0;
@@ -1052,7 +1073,7 @@
   color: #757575;
 }
 
-.dataviews-view-grid {
+.dataviews-view-grid-items {
   margin-bottom: auto;
   display: grid;
   gap: 32px;
@@ -1061,21 +1082,22 @@
   padding: 0 48px 24px;
   container-type: inline-size;
   /**
-   * Match the padding applied to other DataViews components at the same
-   * max-width.
-   */
+  	* 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: 430px) {
-  .dataviews-view-grid {
+  .dataviews-view-grid-items {
     padding-left: 24px;
     padding-right: 24px;
   }
 }
 @media not (prefers-reduced-motion) {
-  .dataviews-view-grid {
+  .dataviews-view-grid-items {
     transition: padding ease-out 0.1s;
   }
 }
+
 .dataviews-view-grid .dataviews-view-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -1674,6 +1696,167 @@ div.dataviews-view-list {
   color: #1e1e1e;
 }
 
+.dataviews-view-grid-items {
+  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: 430px) {
+  .dataviews-view-grid-items {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid-items {
+    transition: padding ease-out 0.1s;
+  }
+}
+
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card {
+  height: 100%;
+  justify-content: flex-start;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
+  padding: 8px 0 4px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
+  width: fit-content;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  color: #1e1e1e;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
+  outline: none;
+}
+.dataviews-view-picker-grid:focus-visible [data-active-item=true] {
+  outline: 2px solid var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox {
+  top: 8px !important;
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox input {
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media {
+  width: 100%;
+  aspect-ratio: 1/1;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__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;
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
+  padding: 0 0 12px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
+  min-height: 24px;
+  line-height: 20px;
+  padding-top: 2px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
+  min-height: 24px;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
+  width: 35%;
+  color: #757575;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
+  display: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
+  padding-bottom: 12px;
+}
+
+.dataviews-view-picker-grid__field-value:empty,
+.dataviews-view-picker-grid__field:empty {
+  display: none;
+}
+
+.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+  position: absolute;
+  top: -9999em;
+  left: 8px;
+  z-index: 1;
+}
+@media (hover: none) {
+  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+    top: 8px;
+  }
+}
+
+.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
+  top: 8px;
+}
+
+.dataviews-view-picker-grid__media--clickable {
+  cursor: pointer;
+}
+
+.dataviews-view-picker-grid-group__header {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 48px;
+}
+
 .dataviews-controls__datetime {
   border: none;
   padding: 0;
@@ -1799,6 +1982,10 @@ div.dataviews-view-list {
   margin-bottom: 16px;
 }
 
+.dataforms-layouts-row__field-control {
+  width: 100%;
+}
+
 .fields-create-template-part-modal {
   z-index: 1000001;
 }
@@ -3345,7 +3532,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _hy9cp_slide-from-right {
+@keyframes _1hvec_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -3355,7 +3542,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _hy9cp_slide-from-left {
+@keyframes _1hvec_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -3411,10 +3598,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _hy9cp_slide-from-left;
+  animation-name: _1hvec_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _hy9cp_slide-from-right;
+  animation-name: _1hvec_slide-from-right;
 }
 
 .edit-site-sidebar-button {