@wordpress/edit-site 6.29.1-next.f34ab90e9.0 → 6.30.1-next.836ecdcae.0

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;
   /**
-   * Breakpoints were adjusted from media queries breakpoints to account for
-   * the sidebar width. This was done to match the existing styles we had.
-   */
+  	* 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 {
+@container (max-width: 430px) {
+  .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;
@@ -1175,9 +1197,16 @@
   top: -9999em;
   left: 8px;
   z-index: 1;
+  opacity: 0;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid__card .dataviews-selection-checkbox {
+    transition: opacity 0.1s linear;
+  }
 }
 @media (hover: none) {
   .dataviews-view-grid__card .dataviews-selection-checkbox {
+    opacity: 1;
     top: 8px;
   }
 }
@@ -1185,9 +1214,37 @@
 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+  opacity: 1;
   top: 8px;
 }
 
+.dataviews-view-grid__card .dataviews-view-grid__media-actions {
+  position: absolute;
+  top: 4px;
+  opacity: 0;
+  right: 4px;
+}
+.dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
+  background-color: #fff;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
+    transition: opacity 0.1s linear;
+  }
+}
+@media (hover: none) {
+  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
+    opacity: 1;
+    top: 4px;
+  }
+}
+
+.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
+  opacity: 1;
+}
+
 .dataviews-view-grid__media--clickable {
   cursor: pointer;
 }
@@ -1198,6 +1255,13 @@
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 48px;
+  container-type: inline-size;
+}
+@container (max-width: 430px) {
+  .dataviews-view-grid__group-header {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }
 
 div.dataviews-view-list {
@@ -1632,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;
@@ -1746,6 +1971,17 @@ div.dataviews-view-list {
   align-items: center;
 }
 
+.dataforms-layouts-card__field {
+  width: 100%;
+}
+
+.dataforms-layouts-card__field-description {
+  color: #757575;
+  display: block;
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
 .fields-create-template-part-modal {
   z-index: 1000001;
 }
@@ -3194,7 +3430,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   top: 9px;
   right: 9px;
   bottom: 9px;
-  left: 9px;
+  left: 17px;
   border-radius: 4px;
   box-shadow: none;
 }
@@ -3292,7 +3528,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _xt40e_slide-from-right {
+@keyframes _s52gx_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -3302,7 +3538,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _xt40e_slide-from-left {
+@keyframes _s52gx_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -3358,10 +3594,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _xt40e_slide-from-left;
+  animation-name: _s52gx_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _xt40e_slide-from-right;
+  animation-name: _s52gx_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.29.1-next.f34ab90e9.0",
+	"version": "6.30.1-next.836ecdcae.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,45 +30,45 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/api-fetch": "^7.29.1-next.f34ab90e9.0",
-		"@wordpress/blob": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/block-editor": "^15.2.1-next.f34ab90e9.0",
-		"@wordpress/block-library": "^9.29.1-next.f34ab90e9.0",
-		"@wordpress/blocks": "^15.2.1-next.f34ab90e9.0",
-		"@wordpress/commands": "^1.29.1-next.f34ab90e9.0",
-		"@wordpress/components": "^30.2.1-next.f34ab90e9.0",
-		"@wordpress/compose": "^7.29.1-next.f34ab90e9.0",
-		"@wordpress/core-data": "^7.29.1-next.f34ab90e9.0",
-		"@wordpress/data": "^10.29.1-next.f34ab90e9.0",
-		"@wordpress/dataviews": "^7.0.1-next.f34ab90e9.0",
-		"@wordpress/date": "^5.29.1-next.f34ab90e9.0",
-		"@wordpress/deprecated": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/dom": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/editor": "^14.29.1-next.f34ab90e9.0",
-		"@wordpress/element": "^6.29.1-next.f34ab90e9.0",
-		"@wordpress/escape-html": "^3.29.1-next.f34ab90e9.0",
-		"@wordpress/fields": "^0.21.1-next.f34ab90e9.0",
-		"@wordpress/hooks": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/html-entities": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/i18n": "^6.2.1-next.f34ab90e9.0",
-		"@wordpress/icons": "^10.29.1-next.f34ab90e9.0",
-		"@wordpress/keyboard-shortcuts": "^5.29.1-next.f34ab90e9.0",
-		"@wordpress/keycodes": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/media-utils": "^5.29.1-next.f34ab90e9.0",
-		"@wordpress/notices": "^5.29.1-next.f34ab90e9.0",
-		"@wordpress/patterns": "^2.29.1-next.f34ab90e9.0",
-		"@wordpress/plugins": "^7.29.1-next.f34ab90e9.0",
-		"@wordpress/preferences": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/primitives": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/private-apis": "^1.29.1-next.f34ab90e9.0",
-		"@wordpress/reusable-blocks": "^5.29.1-next.f34ab90e9.0",
-		"@wordpress/router": "^1.29.1-next.f34ab90e9.0",
-		"@wordpress/style-engine": "^2.29.1-next.f34ab90e9.0",
-		"@wordpress/url": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/viewport": "^6.29.1-next.f34ab90e9.0",
-		"@wordpress/widgets": "^4.29.1-next.f34ab90e9.0",
-		"@wordpress/wordcount": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/a11y": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/api-fetch": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/blob": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/block-editor": "^15.3.1-next.836ecdcae.0",
+		"@wordpress/block-library": "^9.30.1-next.836ecdcae.0",
+		"@wordpress/blocks": "^15.3.1-next.836ecdcae.0",
+		"@wordpress/commands": "^1.30.1-next.836ecdcae.0",
+		"@wordpress/components": "^30.3.2-next.836ecdcae.0",
+		"@wordpress/compose": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/core-data": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/data": "^10.30.1-next.836ecdcae.0",
+		"@wordpress/dataviews": "^8.0.2-next.836ecdcae.0",
+		"@wordpress/date": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/deprecated": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/dom": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/editor": "^14.30.1-next.836ecdcae.0",
+		"@wordpress/element": "^6.30.1-next.836ecdcae.0",
+		"@wordpress/escape-html": "^3.30.1-next.836ecdcae.0",
+		"@wordpress/fields": "^0.22.1-next.836ecdcae.0",
+		"@wordpress/hooks": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/html-entities": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/i18n": "^6.3.1-next.836ecdcae.0",
+		"@wordpress/icons": "^10.30.1-next.836ecdcae.0",
+		"@wordpress/keyboard-shortcuts": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/keycodes": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/media-utils": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/notices": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/patterns": "^2.30.1-next.836ecdcae.0",
+		"@wordpress/plugins": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/preferences": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/primitives": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/private-apis": "^1.30.1-next.836ecdcae.0",
+		"@wordpress/reusable-blocks": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/router": "^1.30.1-next.836ecdcae.0",
+		"@wordpress/style-engine": "^2.30.1-next.836ecdcae.0",
+		"@wordpress/url": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/viewport": "^6.30.1-next.836ecdcae.0",
+		"@wordpress/widgets": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/wordcount": "^4.30.1-next.836ecdcae.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "91f58004986ec6faf118825f925ac7873d171986"
+	"gitHead": "3e60b4c1e78d7b27acbf1d7dd172bbd64358a0f2"
 }

package/src/components/global-styles/font-library-modal/context.js

@@ -38,6 +38,7 @@ import { toggleFont } from './utils/toggleFont';
 import setNestedValue from '../../../utils/set-nested-value';
 
 export const FontLibraryContext = createContext( {} );
+FontLibraryContext.displayName = 'FontLibraryContext';
 
 function FontLibraryProvider( { children } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );

package/src/components/global-styles/screen-style-variations.js

@@ -6,10 +6,8 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Card, CardBody } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as editorStore } from '@wordpress/editor';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,11 +25,7 @@ function ScreenStyleVariations() {
 	const isPreviewMode = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().isPreviewMode;
 	}, [] );
-	const { setDeviceType } = useDispatch( editorStore );
 	useZoomOut( ! isPreviewMode );
-	useEffect( () => {
-		setDeviceType( 'desktop' );
-	}, [ setDeviceType ] );
 
 	return (
 		<>

package/src/components/layout/style.scss

@@ -207,10 +207,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		content: "";
 		display: block;
 		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
+		top: $grid-unit-10 + $border-width;
+		right: $grid-unit-10 + $border-width;
+		bottom: $grid-unit-10 + $border-width;
+		left: $grid-unit-20 + $border-width;
 		border-radius: $radius-medium;
 		box-shadow: none;
 

package/src/components/sidebar/index.js

@@ -16,6 +16,8 @@ import {
 import { focus } from '@wordpress/dom';
 
 export const SidebarNavigationContext = createContext( () => {} );
+SidebarNavigationContext.displayName = 'SidebarNavigationContext';
+
 // Focus a sidebar element after a navigation. The element to focus is either
 // specified by `focusSelector` (when navigating back) or it is the first
 // tabbable element (usually the "Back" button).