@wordpress/edit-site 5.20.1 → 5.21.1-next.f8d8eceb.0

package/build-style/style.css

@@ -1130,8 +1130,17 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .dataviews-wrapper {
   width: 100%;
+  height: 100%;
+  overflow: auto;
   padding: 32px;
 }
+.dataviews-wrapper > div {
+  min-height: 100%;
+}
+
+.dataviews-pagination {
+  margin-top: auto;
+}
 
 .dataviews-list-view {
   width: 100%;
@@ -1161,9 +1170,14 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-bottom: 1px solid #f0f0f0;
 }
 
-.dataviews__per-page-control-prefix {
-  color: #757575;
-  text-wrap: nowrap;
+.dataviews-view-grid__media {
+  width: 100%;
+  min-height: 200px;
+}
+.dataviews-view-grid__media > * {
+  max-width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .edit-site-global-styles-preview {
@@ -1250,20 +1264,27 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
+  border-radius: 2px;
 }
 .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
   padding: 2px;
   border-radius: 2px;
-  border: #e0e0e0 1px solid;
+  box-shadow: 0 0 0 1px #e0e0e0;
+  outline: 1px solid transparent;
 }
 .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-  border: #1e1e1e 1px solid;
+  box-shadow: 0 0 0 1px #1e1e1e;
+  outline-width: 3px;
 }
 .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-  border: var(--wp-admin-theme-color) 1px solid;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 }
 .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-  border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.edit-site-global-styles-variations_item:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 0;
 }
 
 .edit-site-global-styles-icon-with-current-color {
@@ -1961,6 +1982,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   z-index: 1;
 }
 
+.edit-site-page-pages__featured-image {
+  border-radius: 2px;
+}
+
 .edit-site-patterns {
   border-left: 1px solid #2f2f2f;
   background: none;
@@ -2054,6 +2079,9 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 32px 32px 16px;
   z-index: 2;
 }
+.edit-site-patterns__header .edit-site-patterns__button {
+  color: #949494;
+}
 
 .edit-site-patterns__section {
   padding: 24px 32px;
@@ -2162,6 +2190,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   color: #949494;
 }
 
+.edit-site-patterns__delete-modal {
+  width: 384px;
+}
+
 .edit-site-table-wrapper {
   width: 100%;
   padding: 32px;
@@ -3335,17 +3367,22 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   flex-shrink: 0;
 }
 
+@media (min-width: 782px) {
+  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+    max-width: 292px;
+  }
+}
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
-  border: #1e1e1e 1px solid;
+  box-shadow: 0 0 0 1px #1e1e1e;
 }
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-  border: #f0f0f0 1px solid;
+  box-shadow: 0 0 0 1px #f0f0f0;
 }
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-  border: var(--wp-admin-theme-color) 1px solid;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 }
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-  border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 .edit-site-sidebar-navigation-screen__footer {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.20.1",
+	"version": "5.21.1-next.f8d8eceb.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,44 +28,44 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.43.0",
-		"@wordpress/api-fetch": "^6.40.0",
-		"@wordpress/block-editor": "^12.11.1",
-		"@wordpress/block-library": "^8.20.1",
-		"@wordpress/blocks": "^12.20.1",
-		"@wordpress/commands": "^0.14.1",
-		"@wordpress/components": "^25.9.1",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/core-commands": "^0.12.1",
-		"@wordpress/core-data": "^6.20.1",
-		"@wordpress/data": "^9.13.1",
-		"@wordpress/date": "^4.43.0",
-		"@wordpress/deprecated": "^3.43.0",
-		"@wordpress/dom": "^3.43.0",
-		"@wordpress/editor": "^13.20.1",
-		"@wordpress/element": "^5.20.0",
-		"@wordpress/escape-html": "^2.43.0",
-		"@wordpress/hooks": "^3.43.0",
-		"@wordpress/html-entities": "^3.43.0",
-		"@wordpress/i18n": "^4.43.0",
-		"@wordpress/icons": "^9.34.0",
-		"@wordpress/interface": "^5.20.1",
-		"@wordpress/keyboard-shortcuts": "^4.20.1",
-		"@wordpress/keycodes": "^3.43.0",
-		"@wordpress/media-utils": "^4.34.0",
-		"@wordpress/notices": "^4.11.1",
-		"@wordpress/patterns": "^1.4.1",
-		"@wordpress/plugins": "^6.11.1",
-		"@wordpress/preferences": "^3.20.1",
-		"@wordpress/primitives": "^3.41.0",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/reusable-blocks": "^4.20.1",
-		"@wordpress/router": "^0.12.0",
-		"@wordpress/style-engine": "^1.26.0",
-		"@wordpress/url": "^3.44.0",
-		"@wordpress/viewport": "^5.20.1",
-		"@wordpress/widgets": "^3.20.1",
-		"@wordpress/wordcount": "^3.43.0",
+		"@wordpress/a11y": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/api-fetch": "^6.41.1-next.f8d8eceb.0",
+		"@wordpress/block-editor": "^12.12.2-next.f8d8eceb.0",
+		"@wordpress/block-library": "^8.21.1-next.f8d8eceb.0",
+		"@wordpress/blocks": "^12.21.1-next.f8d8eceb.0",
+		"@wordpress/commands": "^0.15.1-next.f8d8eceb.0",
+		"@wordpress/components": "^25.11.1-next.f8d8eceb.0",
+		"@wordpress/compose": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/core-commands": "^0.13.1-next.f8d8eceb.0",
+		"@wordpress/core-data": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/data": "^9.14.1-next.f8d8eceb.0",
+		"@wordpress/date": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/deprecated": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/dom": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/editor": "^13.21.1-next.f8d8eceb.0",
+		"@wordpress/element": "^5.21.1-next.f8d8eceb.0",
+		"@wordpress/escape-html": "^2.44.1-next.f8d8eceb.0",
+		"@wordpress/hooks": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/html-entities": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/i18n": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/icons": "^9.35.1-next.f8d8eceb.0",
+		"@wordpress/interface": "^5.21.1-next.f8d8eceb.0",
+		"@wordpress/keyboard-shortcuts": "^4.21.1-next.f8d8eceb.0",
+		"@wordpress/keycodes": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/media-utils": "^4.35.1-next.f8d8eceb.0",
+		"@wordpress/notices": "^4.12.1-next.f8d8eceb.0",
+		"@wordpress/patterns": "^1.5.1-next.f8d8eceb.0",
+		"@wordpress/plugins": "^6.12.1-next.f8d8eceb.0",
+		"@wordpress/preferences": "^3.21.1-next.f8d8eceb.0",
+		"@wordpress/primitives": "^3.42.1-next.f8d8eceb.0",
+		"@wordpress/private-apis": "^0.26.1-next.f8d8eceb.0",
+		"@wordpress/reusable-blocks": "^4.21.1-next.f8d8eceb.0",
+		"@wordpress/router": "^0.13.1-next.f8d8eceb.0",
+		"@wordpress/style-engine": "^1.27.1-next.f8d8eceb.0",
+		"@wordpress/url": "^3.45.1-next.f8d8eceb.0",
+		"@wordpress/viewport": "^5.21.1-next.f8d8eceb.0",
+		"@wordpress/widgets": "^3.21.1-next.f8d8eceb.0",
+		"@wordpress/wordcount": "^3.44.1-next.f8d8eceb.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e17f760ed0dc11cce78157d7c2f2086b1b3c09d8"
+	"gitHead": "8d8fd197e202b8104ffb1cb83048efd0a6c3faf4"
 }

package/src/components/actions/index.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { external, trash } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+/**
+ * Internal dependencies
+ */
+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 perform( 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.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+	);
+}
+
+export const viewPostAction = {
+	id: 'view-post',
+	label: __( 'View' ),
+	isPrimary: true,
+	icon: external,
+	isEligible( post ) {
+		return post.status !== 'trash';
+	},
+	perform( post ) {
+		document.location.href = post.link;
+	},
+};
+
+export function useEditPostAction() {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isEligible( { status } ) {
+				return status !== 'trash';
+			},
+			perform( post ) {
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			},
+		} ),
+		[ history ]
+	);
+}
+export const postRevisionsAction = {
+	id: 'view-post-revisions',
+	label: __( 'View revisions' ),
+	isPrimary: false,
+	isEligible: ( post ) => {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		const lastRevisionId =
+			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		const revisionsCount =
+			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return lastRevisionId && revisionsCount > 1;
+	},
+	perform( post ) {
+		const href = addQueryArgs( 'revision.php', {
+			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
+		} );
+		document.location.href = href;
+	},
+};

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -9,11 +9,9 @@ import {
 	FlexItem,
 	SearchControl,
 	TextHighlight,
+	privateApis as componentsPrivateApis,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -21,9 +19,16 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const EMPTY_ARRAY = [];
 
 function SuggestionListItem( {
@@ -31,22 +36,23 @@ function SuggestionListItem( {
 	search,
 	onSelect,
 	entityForSuggestions,
-	composite,
 } ) {
 	const baseCssClass =
 		'edit-site-custom-template-modal__suggestions_list__list-item';
 	return (
 		<CompositeItem
-			role="option"
-			as={ Button }
-			{ ...composite }
-			className={ baseCssClass }
-			onClick={ () =>
-				onSelect(
-					entityForSuggestions.config.getSpecificTemplate(
-						suggestion
-					)
-				)
+			render={
+				<Button
+					role="option"
+					className={ baseCssClass }
+					onClick={ () =>
+						onSelect(
+							entityForSuggestions.config.getSpecificTemplate(
+								suggestion
+							)
+						)
+					}
+				/>
 			}
 		>
 			<Text
@@ -112,7 +118,7 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 }
 
 function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
+	const composite = useCompositeStore( { orientation: 'vertical' } );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const suggestions = useSearchSuggestions(
 		entityForSuggestions,
@@ -136,7 +142,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 			) }
 			{ !! suggestions?.length && (
 				<Composite
-					{ ...composite }
+					store={ composite }
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
 					aria-label={ __( 'Suggestions list' ) }
@@ -148,7 +154,6 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 							search={ debouncedSearch }
 							onSelect={ onSelect }
 							entityForSuggestions={ entityForSuggestions }
-							composite={ composite }
 						/>
 					) ) }
 				</Composite>

package/src/components/block-editor/resize-handle.js

@@ -35,6 +35,7 @@ export default function ResizeHandle( {
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }
+				type="button"
 			/>
 			<VisuallyHidden
 				id={ `resizable-editor__resize-help-${ direction }` }

package/src/components/block-editor/use-site-editor-settings.js

@@ -85,19 +85,23 @@ function useArchiveLabel( templateSlug ) {
 
 export default function useSiteEditorSettings() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, canvasMode, templateType } = useSelect(
-		( select ) => {
-			const { getSettings, getCanvasMode, getEditedPostType } = unlock(
-				select( editSiteStore )
-			);
-			return {
-				storedSettings: getSettings( setIsInserterOpened ),
-				canvasMode: getCanvasMode(),
-				templateType: getEditedPostType(),
-			};
-		},
-		[ setIsInserterOpened ]
-	);
+	const { storedSettings, canvasMode, templateType, siteSettings } =
+		useSelect(
+			( select ) => {
+				const { canUser, getEntityRecord } = select( coreStore );
+				const { getSettings, getCanvasMode, getEditedPostType } =
+					unlock( select( editSiteStore ) );
+				return {
+					storedSettings: getSettings( setIsInserterOpened ),
+					canvasMode: getCanvasMode(),
+					templateType: getEditedPostType(),
+					siteSettings: canUser( 'read', 'settings' )
+						? getEntityRecord( 'root', 'site' )
+						: undefined,
+				};
+			},
+			[ setIsInserterOpened ]
+		);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -180,6 +184,8 @@ export default function useSiteEditorSettings() {
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
+			pageOnFront: siteSettings?.page_on_front,
+			pageForPosts: siteSettings?.page_for_posts,
 		};
 	}, [
 		storedSettings,
@@ -189,5 +195,7 @@ export default function useSiteEditorSettings() {
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
+		siteSettings?.page_on_front,
+		siteSettings?.page_for_posts,
 	] );
 }

package/src/components/create-template-part-modal/index.js

@@ -39,17 +39,21 @@ import {
 } from '../../utils/template-part-create';
 
 export default function CreateTemplatePartModal( {
-	closeModal,
+	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 	blocks = [],
+	confirmLabel = __( 'Create' ),
+	closeModal,
+	modalTitle = __( 'Create template part' ),
 	onCreate,
 	onError,
+	defaultTitle = '',
 } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const existingTemplateParts = useExistingTemplateParts();
 
-	const [ title, setTitle ] = useState( '' );
-	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_DEFAULT_CATEGORY );
+	const [ title, setTitle ] = useState( defaultTitle );
+	const [ area, setArea ] = useState( defaultArea );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const instanceId = useInstanceId( CreateTemplatePartModal );
 
@@ -104,7 +108,7 @@ export default function CreateTemplatePartModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create template part' ) }
+			title={ modalTitle }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>
@@ -181,7 +185,7 @@ export default function CreateTemplatePartModal( {
 							aria-disabled={ ! title || isSubmitting }
 							isBusy={ isSubmitting }
 						>
-							{ __( 'Create' ) }
+							{ confirmLabel }
 						</Button>
 					</HStack>
 				</VStack>