@wordpress/edit-site 6.27.0 → 6.28.0

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 {
@@ -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-left: 24px;
+    padding-right: 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-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;
@@ -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-right: 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;
+  left: 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 {
@@ -2467,22 +2519,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-left: 0;
-  border-right: 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;
@@ -2720,26 +2756,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;
-  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;
@@ -2823,8 +2839,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 +2870,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;
@@ -2867,7 +2883,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);
 }
 
@@ -3083,8 +3098,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 +3134,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 +3221,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;
@@ -3216,7 +3231,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;
@@ -3272,10 +3287,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 {
@@ -3490,9 +3505,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 +3586,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 +3594,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 +3932,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.27.0",
+	"version": "6.28.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,46 +30,46 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.27.0",
-		"@wordpress/api-fetch": "^7.27.0",
-		"@wordpress/blob": "^4.27.0",
-		"@wordpress/block-editor": "^15.0.0",
-		"@wordpress/block-library": "^9.27.0",
-		"@wordpress/blocks": "^15.0.0",
-		"@wordpress/commands": "^1.27.0",
-		"@wordpress/components": "^30.0.0",
-		"@wordpress/compose": "^7.27.0",
-		"@wordpress/core-commands": "^1.27.0",
-		"@wordpress/core-data": "^7.27.0",
-		"@wordpress/data": "^10.27.0",
-		"@wordpress/dataviews": "^5.0.0",
-		"@wordpress/date": "^5.27.0",
-		"@wordpress/deprecated": "^4.27.0",
-		"@wordpress/dom": "^4.27.0",
-		"@wordpress/editor": "^14.27.0",
-		"@wordpress/element": "^6.27.0",
-		"@wordpress/escape-html": "^3.27.0",
-		"@wordpress/fields": "^0.19.0",
-		"@wordpress/hooks": "^4.27.0",
-		"@wordpress/html-entities": "^4.27.0",
-		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^10.27.0",
-		"@wordpress/keyboard-shortcuts": "^5.27.0",
-		"@wordpress/keycodes": "^4.27.0",
-		"@wordpress/media-utils": "^5.27.0",
-		"@wordpress/notices": "^5.27.0",
-		"@wordpress/patterns": "^2.27.0",
-		"@wordpress/plugins": "^7.27.0",
-		"@wordpress/preferences": "^4.27.0",
-		"@wordpress/primitives": "^4.27.0",
-		"@wordpress/private-apis": "^1.27.0",
-		"@wordpress/reusable-blocks": "^5.27.0",
-		"@wordpress/router": "^1.27.0",
-		"@wordpress/style-engine": "^2.27.0",
-		"@wordpress/url": "^4.27.0",
-		"@wordpress/viewport": "^6.27.0",
-		"@wordpress/widgets": "^4.27.0",
-		"@wordpress/wordcount": "^4.27.0",
+		"@wordpress/a11y": "^4.28.0",
+		"@wordpress/api-fetch": "^7.28.0",
+		"@wordpress/blob": "^4.28.0",
+		"@wordpress/block-editor": "^15.1.0",
+		"@wordpress/block-library": "^9.28.0",
+		"@wordpress/blocks": "^15.1.0",
+		"@wordpress/commands": "^1.28.0",
+		"@wordpress/components": "^30.1.0",
+		"@wordpress/compose": "^7.28.0",
+		"@wordpress/core-commands": "^1.28.0",
+		"@wordpress/core-data": "^7.28.0",
+		"@wordpress/data": "^10.28.0",
+		"@wordpress/dataviews": "^6.0.0",
+		"@wordpress/date": "^5.28.0",
+		"@wordpress/deprecated": "^4.28.0",
+		"@wordpress/dom": "^4.28.0",
+		"@wordpress/editor": "^14.28.0",
+		"@wordpress/element": "^6.28.0",
+		"@wordpress/escape-html": "^3.28.0",
+		"@wordpress/fields": "^0.20.0",
+		"@wordpress/hooks": "^4.28.0",
+		"@wordpress/html-entities": "^4.28.0",
+		"@wordpress/i18n": "^6.1.0",
+		"@wordpress/icons": "^10.28.0",
+		"@wordpress/keyboard-shortcuts": "^5.28.0",
+		"@wordpress/keycodes": "^4.28.0",
+		"@wordpress/media-utils": "^5.28.0",
+		"@wordpress/notices": "^5.28.0",
+		"@wordpress/patterns": "^2.28.0",
+		"@wordpress/plugins": "^7.28.0",
+		"@wordpress/preferences": "^4.28.0",
+		"@wordpress/primitives": "^4.28.0",
+		"@wordpress/private-apis": "^1.28.0",
+		"@wordpress/reusable-blocks": "^5.28.0",
+		"@wordpress/router": "^1.28.0",
+		"@wordpress/style-engine": "^2.28.0",
+		"@wordpress/url": "^4.28.0",
+		"@wordpress/viewport": "^6.28.0",
+		"@wordpress/widgets": "^4.28.0",
+		"@wordpress/wordcount": "^4.28.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
+	"gitHead": "28cc2098f5ee28f89096b638533796538f495f72"
 }

package/src/components/editor/style.scss

@@ -63,8 +63,8 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 60px;
-	height: 60px;
+	width: $header-height;
+	height: $header-height;
 	display: flex;
 	align-items: center;
 	justify-content: center;

package/src/components/global-styles-sidebar/style.scss

@@ -1,22 +1,3 @@
-.editor-sidebar {
-	width: $sidebar-width;
-
-	> .components-panel {
-		border-left: 0;
-		border-right: 0;
-		margin-bottom: -1px;
-		margin-top: -1px;
-
-		> .components-panel__header {
-			background: $gray-100;
-		}
-	}
-
-	.block-editor-block-inspector__card {
-		margin: 0;
-	}
-}
-
 .edit-site-global-styles-sidebar {
 	display: flex;
 	flex-direction: column;

package/src/components/media/index.js

@@ -4,7 +4,7 @@
 import { useEntityRecord } from '@wordpress/core-data';
 
 function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
-	const { record: media } = useEntityRecord( 'root', 'media', id );
+	const { record: media } = useEntityRecord( 'postType', 'attachment', id );
 	const currentSize = size.find(
 		( s ) => !! media?.media_details?.sizes?.[ s ]
 	);

package/src/components/page-templates/fields.js

@@ -69,13 +69,7 @@ export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',
 	render: ( { item } ) => {
-		return (
-			item.description && (
-				<span className="page-templates-description">
-					{ decodeEntities( item.description ) }
-				</span>
-			)
-		);
+		return item.description && decodeEntities( item.description );
 	},
 	enableSorting: false,
 	enableGlobalSearch: true,

package/src/components/page-templates/hooks.js

@@ -35,12 +35,8 @@ import { TEMPLATE_ORIGINS } from '../../utils/constants';
 export function useAddedBy( postType, postId ) {
 	return useSelect(
 		( select ) => {
-			const {
-				getEntityRecord,
-				getMedia,
-				getUser,
-				getEditedEntityRecord,
-			} = select( coreStore );
+			const { getEntityRecord, getUser, getEditedEntityRecord } =
+				select( coreStore );
 			const template = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -77,7 +73,11 @@ export function useAddedBy( postType, postId ) {
 						type: originalSource,
 						icon: globeIcon,
 						imageUrl: siteData?.site_logo
-							? getMedia( siteData.site_logo )?.source_url
+							? getEntityRecord(
+									'postType',
+									'attachment',
+									siteData.site_logo
+							  )?.source_url
 							: undefined,
 						text: authorText,
 						isCustomized: false,

package/src/components/page-templates/index.js

@@ -35,13 +35,6 @@ const EMPTY_ARRAY = [];
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		showMedia: false,
-		layout: {
-			styles: {
-				author: {
-					width: '1%',
-				},
-			},
-		},
 	},
 	[ LAYOUT_GRID ]: {
 		showMedia: true,

package/src/components/page-templates/style.scss

@@ -25,28 +25,6 @@
 		max-height: 160px;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
-
-		&::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: $radius-medium;
-		}
-	}
-}
-
-.page-templates-description {
-	max-width: 50em;
-	text-wrap: balance; // Fallback for Safari
-	text-wrap: pretty;
-
-	.dataviews-view-table & {
-		margin-bottom: $grid-unit-10;
-		display: block;
 	}
 }
 
@@ -56,7 +34,6 @@
 	}
 }
 
-
 .page-templates-author-field__avatar {
 	flex-shrink: 0;
 	overflow: hidden;