@wordpress/edit-site 5.23.0 → 5.24.0

package/build-style/style.css

@@ -1038,9 +1038,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .dataviews-wrapper {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 32px * 2);
   overflow: auto;
-  padding: 32px;
+  padding: 32px 32px 0;
 }
 .dataviews-wrapper > div {
   min-height: 100%;
@@ -1048,6 +1048,15 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .dataviews-pagination {
   margin-top: auto;
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+  padding: 16px 0;
+  border-top: 1px solid #e0e0e0;
+}
+
+.dataviews-filters-options {
+  margin: 32px 0 16px;
 }
 
 .dataviews-list-view {
@@ -1077,15 +1086,70 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .dataviews-list-view tr {
   border-bottom: 1px solid #f0f0f0;
 }
+.dataviews-list-view tr:last-child {
+  border-bottom: 0;
+}
+.dataviews-list-view thead tr {
+  border: 0;
+}
+.dataviews-list-view thead th {
+  position: sticky;
+  top: -32px;
+  background-color: #fff;
+  box-shadow: inset 0 -1px 0 #e0e0e0;
+}
 
-.dataviews-view-grid__media {
+.dataviews-grid-view {
+  margin-bottom: 24px;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+}
+@media (min-width: 1080px) {
+  .dataviews-grid-view {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+}
+@media (min-width: 1440px) {
+  .dataviews-grid-view {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  }
+}
+.dataviews-grid-view .dataviews-view-grid__card h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dataviews-grid-view .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
+  aspect-ratio: 1/1;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
 }
-.dataviews-view-grid__media > * {
-  max-width: 100%;
+.dataviews-grid-view .dataviews-view-grid__media > * {
   -o-object-fit: cover;
      object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-grid-view .dataviews-view-grid__title {
+  min-height: 24px;
+}
+.dataviews-grid-view .dataviews-view-grid__title a {
+  color: #1e1e1e;
+  text-decoration: none;
+  font-weight: 500;
+}
+.dataviews-grid-view .dataviews-view-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
+  color: #757575;
+}
+.dataviews-grid-view .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+  color: #1e1e1e;
 }
 
 .dataviews-action-modal {
@@ -1268,17 +1332,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   fill: currentColor;
 }
 
-[class][class].edit-site-global-styles-sidebar__revisions-count-badge {
-  align-items: center;
-  background: #2f2f2f;
-  border-radius: 2px;
-  color: #fff;
-  display: inline-flex;
-  justify-content: center;
-  min-height: 24px;
-  min-width: 24px;
-}
-
 .edit-site-global-styles-screen-revisions {
   margin: 16px;
 }
@@ -1289,54 +1342,70 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 .edit-site-global-styles-screen-revisions__revisions-list li {
   margin-bottom: 0;
-  border-left: 1px solid #ddd;
 }
 
 .edit-site-global-styles-screen-revisions__revision-item {
   position: relative;
-  padding: 8px 0 8px 12px;
+  padding-left: 16px;
+  overflow: hidden;
+  cursor: pointer;
 }
-.edit-site-global-styles-screen-revisions__revision-item:first-child {
-  padding-top: 0;
+.edit-site-global-styles-screen-revisions__revision-item:hover {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.edit-site-global-styles-screen-revisions__revision-item:last-child {
-  padding-bottom: 0;
+.edit-site-global-styles-screen-revisions__revision-item:hover .edit-site-global-styles-screen-revisions__date {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-global-styles-screen-revisions__revision-item::before, .edit-site-global-styles-screen-revisions__revision-item::after {
+  position: absolute;
+  content: "\a";
+  display: block;
 }
 .edit-site-global-styles-screen-revisions__revision-item::before {
   background: #ddd;
   border-radius: 50%;
-  content: "\a";
-  display: inline-block;
   height: 8px;
   width: 8px;
-  position: absolute;
-  top: 50%;
-  left: 0;
+  top: 18px;
+  left: 17px;
   transform: translate(-50%, -50%);
+  z-index: 1;
 }
 .edit-site-global-styles-screen-revisions__revision-item.is-selected::before {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
-
-.edit-site-global-styles-screen-revisions__revision-button {
+.edit-site-global-styles-screen-revisions__revision-item::after {
+  height: 100%;
+  left: 16px;
+  top: 0;
+  width: 0;
+  border: 0.5px solid #ddd;
+}
+.edit-site-global-styles-screen-revisions__revision-item:first-child::after {
+  top: 18px;
+}
+.edit-site-global-styles-screen-revisions__revision-item:last-child::after {
+  height: 18px;
+}
+.edit-site-global-styles-screen-revisions__revision-item .edit-site-global-styles-screen-revisions__revision-button {
   width: 100%;
   height: auto;
   display: block;
-  padding: 8px 12px;
-}
-.edit-site-global-styles-screen-revisions__revision-button:hover {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  padding: 12px 12px 12px 24px;
 }
-.edit-site-global-styles-screen-revisions__revision-button:hover .edit-site-global-styles-screen-revisions__date {
-  color: var(--wp-admin-theme-color);
+.edit-site-global-styles-screen-revisions__revision-item .edit-site-global-styles-screen-revisions__revision-button:focus, .edit-site-global-styles-screen-revisions__revision-item .edit-site-global-styles-screen-revisions__revision-button:active {
+  outline: 0;
+  box-shadow: none;
 }
 
-.is-selected .edit-site-global-styles-screen-revisions__revision-button {
+.is-selected {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  opacity: 1;
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.is-selected .edit-site-global-styles-screen-revisions__meta {
+.is-selected .edit-site-global-styles-screen-revisions__revision-button {
+  opacity: 1;
+}
+.is-selected .edit-site-global-styles-screen-revisions__date {
   color: var(--wp-admin-theme-color);
 }
 
@@ -1351,19 +1420,25 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   align-items: flex-start;
   gap: 8px;
 }
+.edit-site-global-styles-screen-revisions__description .edit-site-global-styles-screen-revisions__date {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 12px;
+}
 
 .edit-site-global-styles-screen-revisions__meta {
-  color: #757575;
+  color: #949494;
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   width: 100%;
   align-items: center;
-  text-align: left;
+  font-size: 12px;
 }
 .edit-site-global-styles-screen-revisions__meta img {
   width: 16px;
   height: 16px;
   border-radius: 100%;
+  margin-right: 8px;
 }
 
 .edit-site-global-styles-screen-revisions__loading {
@@ -1830,32 +1905,30 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon {
   display: flex;
   flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: #2f2f2f;
-  border-radius: 100%;
+  width: 24px;
+  height: 24px;
 }
 .edit-site-list-added-by__icon svg {
-  fill: #fff;
+  fill: currentColor;
 }
 
 .edit-site-list-added-by__avatar {
   flex-shrink: 0;
   overflow: hidden;
-  border-radius: 100%;
-  background: #2f2f2f;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
 }
 .edit-site-list-added-by__avatar img {
-  width: 32px;
-  height: 32px;
+  width: 20px;
+  height: 20px;
   -o-object-fit: cover;
      object-fit: cover;
   opacity: 0;
   transition: opacity 0.1s linear;
+  border-radius: 100%;
 }
 @media (prefers-reduced-motion: reduce) {
   .edit-site-list-added-by__avatar img {
@@ -2128,6 +2201,13 @@ body.is-fullscreen-mode .edit-site-list-header {
   width: 384px;
 }
 
+.page-templates-preview-field.is-viewtype-list .block-editor-block-preview__container {
+  height: 120px;
+}
+.page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
+  height: auto;
+}
+
 .edit-site-table-wrapper {
   width: 100%;
   padding: 32px;
@@ -2311,10 +2391,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-bottom: 8px;
 }
 
-.edit-site-summary-field .components-dropdown {
-  width: 70%;
-}
-.edit-site-summary-field .edit-site-summary-field__trigger {
+.edit-site-summary-field__trigger {
   max-width: 100%;
   display: block;
   text-align: left;
@@ -2322,9 +2399,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.edit-site-summary-field .edit-site-summary-field__label {
-  width: 30%;
-}
 
 .edit-site-page-panels-edit-template__dropdown .components-popover__content {
   min-width: 240px;
@@ -3127,6 +3201,9 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-save-hub__button[aria-disabled=true]:hover {
   color: inherit;
 }
+.edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
+  color: #1e1e1e;
+}
 
 @media (min-width: 600px) {
   .edit-site-save-panel__modal {
@@ -3296,6 +3373,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 
 .edit-site-sidebar-navigation-screen__actions {
+  display: flex;
   flex-shrink: 0;
 }
 
@@ -3533,6 +3611,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 .edit-site-sidebar-navigation-screen-template__added-by-description-author img {
   border-radius: 12px;
+  width: 20px;
+  height: 20px;
 }
 .edit-site-sidebar-navigation-screen-template__added-by-description-author svg {
   fill: #949494;
@@ -3541,7 +3621,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
   width: 24px;
   height: 24px;
-  margin-right: 8px;
+  margin-right: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .edit-site-sidebar-navigation-screen-template__template-area-button {
@@ -3575,6 +3658,13 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   text-transform: uppercase;
 }
 
+.edit-site-sidebar-dataviews-dataview-item {
+  border-radius: 2px;
+  padding-right: 8px;
+}
+.edit-site-sidebar-dataviews-dataview-item .edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
+  min-width: initial;
+}
 .edit-site-sidebar-dataviews-dataview-item:hover, .edit-site-sidebar-dataviews-dataview-item:focus, .edit-site-sidebar-dataviews-dataview-item[aria-current] {
   color: #e0e0e0;
   background: #2f2f2f;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.23.0",
+	"version": "5.24.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,45 +28,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.46.0",
-		"@wordpress/api-fetch": "^6.43.0",
-		"@wordpress/blob": "^3.46.0",
-		"@wordpress/block-editor": "^12.14.0",
-		"@wordpress/block-library": "^8.23.0",
-		"@wordpress/blocks": "^12.23.0",
-		"@wordpress/commands": "^0.17.0",
-		"@wordpress/components": "^25.12.0",
-		"@wordpress/compose": "^6.23.0",
-		"@wordpress/core-commands": "^0.15.0",
-		"@wordpress/core-data": "^6.23.0",
-		"@wordpress/data": "^9.16.0",
-		"@wordpress/date": "^4.46.0",
-		"@wordpress/deprecated": "^3.46.0",
-		"@wordpress/dom": "^3.46.0",
-		"@wordpress/editor": "^13.23.0",
-		"@wordpress/element": "^5.23.0",
-		"@wordpress/escape-html": "^2.46.0",
-		"@wordpress/hooks": "^3.46.0",
-		"@wordpress/html-entities": "^3.46.0",
-		"@wordpress/i18n": "^4.46.0",
-		"@wordpress/icons": "^9.37.0",
-		"@wordpress/interface": "^5.23.0",
-		"@wordpress/keyboard-shortcuts": "^4.23.0",
-		"@wordpress/keycodes": "^3.46.0",
-		"@wordpress/media-utils": "^4.37.0",
-		"@wordpress/notices": "^4.14.0",
-		"@wordpress/patterns": "^1.7.0",
-		"@wordpress/plugins": "^6.14.0",
-		"@wordpress/preferences": "^3.23.0",
-		"@wordpress/primitives": "^3.44.0",
-		"@wordpress/private-apis": "^0.28.0",
-		"@wordpress/reusable-blocks": "^4.23.0",
-		"@wordpress/router": "^0.15.0",
-		"@wordpress/style-engine": "^1.29.0",
-		"@wordpress/url": "^3.47.0",
-		"@wordpress/viewport": "^5.23.0",
-		"@wordpress/widgets": "^3.23.0",
-		"@wordpress/wordcount": "^3.46.0",
+		"@wordpress/a11y": "^3.47.0",
+		"@wordpress/api-fetch": "^6.44.0",
+		"@wordpress/blob": "^3.47.0",
+		"@wordpress/block-editor": "^12.15.0",
+		"@wordpress/block-library": "^8.24.0",
+		"@wordpress/blocks": "^12.24.0",
+		"@wordpress/commands": "^0.18.0",
+		"@wordpress/components": "^25.13.0",
+		"@wordpress/compose": "^6.24.0",
+		"@wordpress/core-commands": "^0.16.0",
+		"@wordpress/core-data": "^6.24.0",
+		"@wordpress/data": "^9.17.0",
+		"@wordpress/date": "^4.47.0",
+		"@wordpress/deprecated": "^3.47.0",
+		"@wordpress/dom": "^3.47.0",
+		"@wordpress/editor": "^13.24.0",
+		"@wordpress/element": "^5.24.0",
+		"@wordpress/escape-html": "^2.47.0",
+		"@wordpress/hooks": "^3.47.0",
+		"@wordpress/html-entities": "^3.47.0",
+		"@wordpress/i18n": "^4.47.0",
+		"@wordpress/icons": "^9.38.0",
+		"@wordpress/interface": "^5.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.24.0",
+		"@wordpress/keycodes": "^3.47.0",
+		"@wordpress/media-utils": "^4.38.0",
+		"@wordpress/notices": "^4.15.0",
+		"@wordpress/patterns": "^1.8.0",
+		"@wordpress/plugins": "^6.15.0",
+		"@wordpress/preferences": "^3.24.0",
+		"@wordpress/primitives": "^3.45.0",
+		"@wordpress/private-apis": "^0.29.0",
+		"@wordpress/reusable-blocks": "^4.24.0",
+		"@wordpress/router": "^0.16.0",
+		"@wordpress/style-engine": "^1.30.0",
+		"@wordpress/url": "^3.48.0",
+		"@wordpress/viewport": "^5.24.0",
+		"@wordpress/widgets": "^3.24.0",
+		"@wordpress/wordcount": "^3.47.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

package/src/components/actions/index.js

@@ -10,6 +10,13 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -17,55 +24,76 @@ import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export function useTrashPostAction() {
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-	const { deleteEntityRecord } = useDispatch( coreStore );
-
-	return useMemo(
-		() => ( {
-			id: 'move-to-trash',
-			label: __( 'Move to Trash' ),
-			isPrimary: true,
-			icon: trash,
-			isEligible( { status } ) {
-				return status !== 'trash';
-			},
-			async callback( post ) {
-				try {
-					await deleteEntityRecord(
-						'postType',
-						post.type,
-						post.id,
-						{},
-						{ throwOnError: true }
-					);
-					createSuccessNotice(
-						sprintf(
-							/* translators: The page's title. */
-							__( '"%s" moved to the Trash.' ),
-							decodeEntities( post.title.rendered )
-						),
-						{
-							type: 'snackbar',
-							id: 'edit-site-page-trashed',
-						}
-					);
-				} catch ( error ) {
-					const errorMessage =
-						error.message && error.code !== 'unknown_error'
-							? error.message
-							: __(
-									'An error occurred while moving the page to the trash.'
-							  );
+export const trashPostAction = {
+	id: 'move-to-trash',
+	label: __( 'Move to Trash' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	hideModalHeader: true,
+	RenderModal: ( { item: post, closeModal } ) => {
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const { deleteEntityRecord } = useDispatch( coreStore );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ sprintf(
+						// translators: %s: The page's title.
+						__( 'Are you sure you want to delete "%s"?' ),
+						decodeEntities( post.title.rendered )
+					) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							try {
+								await deleteEntityRecord(
+									'postType',
+									post.type,
+									post.id,
+									{},
+									{ throwOnError: true }
+								);
+								createSuccessNotice(
+									sprintf(
+										/* translators: The page's title. */
+										__( '"%s" moved to the Trash.' ),
+										decodeEntities( post.title.rendered )
+									),
+									{
+										type: 'snackbar',
+										id: 'edit-site-page-trashed',
+									}
+								);
+							} catch ( error ) {
+								const errorMessage =
+									error.message &&
+									error.code !== 'unknown_error'
+										? error.message
+										: __(
+												'An error occurred while moving the page to the trash.'
+										  );
 
-					createErrorNotice( errorMessage, { type: 'snackbar' } );
-				}
-			},
-		} ),
-		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
-	);
-}
+								createErrorNotice( errorMessage, {
+									type: 'snackbar',
+								} );
+							}
+						} }
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
 
 export function usePermanentlyDeletePostAction() {
 	const { createSuccessNotice, createErrorNotice } =

package/src/components/block-editor/site-editor-canvas.js

@@ -27,7 +27,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import PageContentFocusManager from '../page-content-focus-manager';
+import PageContentFocusNotifications from '../page-content-focus-notifications';
 
 const LAYOUT = {
 	type: 'default',
@@ -134,6 +134,12 @@ export default function SiteEditorCanvas() {
 													isTemplateTypeNavigation,
 											}
 										) }
+										dropZoneElement={
+											// Pass in the html element of the iframe to ensure that
+											// the drop zone extends to the very edges of the iframe,
+											// even if the template is shorter than the viewport.
+											contentRef.current?.parentNode
+										}
 										layout={ LAYOUT }
 										renderAppender={ showBlockAppender }
 									/>
@@ -143,7 +149,7 @@ export default function SiteEditorCanvas() {
 					)
 				}
 			</EditorCanvasContainer.Slot>
-			<PageContentFocusManager contentRef={ contentRef } />
+			<PageContentFocusNotifications contentRef={ contentRef } />
 		</>
 	);
 }