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

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -1,9 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { addFilter, removeFilter } from '@wordpress/hooks';
-import { useBlockEditingMode } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useBlockEditingMode,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -11,42 +13,45 @@ import { useEffect } from '@wordpress/element';
  */
 import { PAGE_CONTENT_BLOCK_TYPES } from '../../utils/constants';
 
+function DisableBlock( { clientId } ) {
+	const isDescendentOfQueryLoop = useSelect(
+		( select ) => {
+			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			return (
+				getBlockParentsByBlockName( clientId, 'core/query' ).length !==
+				0
+			);
+		},
+		[ clientId ]
+	);
+	const mode = isDescendentOfQueryLoop ? undefined : 'contentOnly';
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+	useEffect( () => {
+		if ( mode ) {
+			setBlockEditingMode( clientId, mode );
+			return () => {
+				unsetBlockEditingMode( clientId );
+			};
+		}
+	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
+}
+
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
-	useDisableNonPageContentBlocks();
-	return null;
-}
-
-/**
- * Disables non-content blocks using the `useBlockEditingMode` hook.
- */
-export function useDisableNonPageContentBlocks() {
 	useBlockEditingMode( 'disabled' );
-	useEffect( () => {
-		addFilter(
-			'editor.BlockEdit',
-			'core/edit-site/disable-non-content-blocks',
-			withDisableNonPageContentBlocks
+	const clientIds = useSelect( ( select ) => {
+		const { __experimentalGetGlobalBlocksByName } =
+			select( blockEditorStore );
+		return __experimentalGetGlobalBlocksByName(
+			Object.keys( PAGE_CONTENT_BLOCK_TYPES )
 		);
-		return () =>
-			removeFilter(
-				'editor.BlockEdit',
-				'core/edit-site/disable-non-content-blocks'
-			);
 	}, [] );
-}
 
-const withDisableNonPageContentBlocks = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const isDescendentOfQueryLoop = props.context.queryId !== undefined;
-		const isPageContent =
-			PAGE_CONTENT_BLOCK_TYPES[ props.name ] && ! isDescendentOfQueryLoop;
-		const mode = isPageContent ? 'contentOnly' : undefined;
-		useBlockEditingMode( mode );
-		return <BlockEdit { ...props } />;
-	},
-	'withDisableNonPageContentBlocks'
-);
+	return clientIds.map( ( clientId ) => {
+		return <DisableBlock key={ clientId } clientId={ clientId } />;
+	} );
+}

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

@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import PagePatterns from '../page-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
+import DataviewsTemplates from '../page-templates/dataviews-templates';
 import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
@@ -20,7 +21,11 @@ export default function PageMain() {
 	} = useLocation();
 
 	if ( path === '/wp_template/all' ) {
-		return <PageTemplates />;
+		return window?.__experimentalAdminViews ? (
+			<DataviewsTemplates />
+		) : (
+			<PageTemplates />
+		);
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {

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

@@ -6,25 +6,29 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews } from '../dataviews';
-import { DEFAULT_STATUSES, default as DEFAULT_VIEWS } from './default-views';
+import { DataViews, viewTypeSupportsMap } from '../dataviews';
+import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
 	useTrashPostAction,
+	usePermanentlyDeletePostAction,
+	useRestorePostAction,
 	postRevisionsAction,
 	viewPostAction,
 	useEditPostAction,
 } from '../actions';
+import SideEditor from './side-editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
@@ -37,73 +41,117 @@ const defaultConfigPerViewType = {
 	},
 };
 
-export default function PagePages() {
+function useView( type ) {
 	const {
-		params: { path, activeView = 'all' },
+		params: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	const initialView = DEFAULT_VIEWS.find(
-		( { slug } ) => slug === activeView
-	).view;
-	const [ view, setView ] = useState( initialView );
+	const selectedDefaultView =
+		isCustom === 'false' &&
+		DEFAULT_VIEWS[ type ].find( ( { slug } ) => slug === activeView )?.view;
+	const [ view, setView ] = useState( selectedDefaultView );
+
 	useEffect( () => {
-		setView(
-			DEFAULT_VIEWS.find( ( { slug } ) => slug === activeView ).view
+		if ( selectedDefaultView ) {
+			setView( selectedDefaultView );
+		}
+	}, [ selectedDefaultView ] );
+	const editedViewRecord = useSelect(
+		( select ) => {
+			if ( isCustom !== 'true' ) {
+				return;
+			}
+			const { getEditedEntityRecord } = select( coreStore );
+			const dataviewRecord = getEditedEntityRecord(
+				'postType',
+				'wp_dataviews',
+				Number( activeView )
+			);
+			return dataviewRecord;
+		},
+		[ activeView, isCustom ]
+	);
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const customView = useMemo( () => {
+		return (
+			editedViewRecord?.content && JSON.parse( editedViewRecord?.content )
 		);
-	}, [ path, activeView ] );
-	// Request post statuses to get the proper labels.
-	const { records: statuses } = useEntityRecords( 'root', 'status' );
-	const defaultStatuses = useMemo( () => {
-		return statuses === null
-			? DEFAULT_STATUSES
-			: statuses
-					.filter( ( { slug } ) => slug !== 'trash' )
-					.map( ( { slug } ) => slug )
-					.sort()
-					.join();
-	}, [ statuses ] );
+	}, [ editedViewRecord?.content ] );
+	const setCustomView = useCallback(
+		( viewToSet ) => {
+			editEntityRecord(
+				'postType',
+				'wp_dataviews',
+				editedViewRecord?.id,
+				{
+					content: JSON.stringify( viewToSet ),
+				}
+			);
+		},
+		[ editEntityRecord, editedViewRecord?.id ]
+	);
 
-	useEffect( () => {
-		// Only update the view if the statuses received from the endpoint
-		// are different from the DEFAULT_STATUSES provided initially.
-		//
-		// The pages endpoint depends on the status endpoint via the status filter.
-		// Initially, this code filters the pages request by DEFAULT_STATUTES,
-		// instead of using the default (publish).
-		// https://developer.wordpress.org/rest-api/reference/pages/#list-pages
-		//
-		// By doing so, it avoids a second request to the pages endpoint
-		// upon receiving the statuses when they are the same (most common scenario).
-		if ( DEFAULT_STATUSES !== defaultStatuses ) {
-			setView( {
-				...view,
-				filters: {
-					...view.filters,
-					status: defaultStatuses,
-				},
-			} );
+	if ( isCustom === 'false' ) {
+		return [ view, setView ];
+	} else if ( isCustom === 'true' && customView ) {
+		return [ customView, setCustomView ];
+	}
+	// Loading state where no the view was not found on custom views or default views.
+	return [ DEFAULT_VIEWS[ type ][ 0 ].view, setView ];
+}
+
+// See https://github.com/WordPress/gutenberg/issues/55886
+// We do not support custom statutes at the moment.
+const STATUSES = [
+	{ value: 'draft', label: __( 'Draft' ) },
+	{ value: 'future', label: __( 'Scheduled' ) },
+	{ value: 'pending', label: __( 'Pending Review' ) },
+	{ value: 'private', label: __( 'Private' ) },
+	{ value: 'publish', label: __( 'Published' ) },
+	{ value: 'trash', label: __( 'Trash' ) },
+];
+const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
+
+export default function PagePages() {
+	const postType = 'page';
+	const [ view, setView ] = useView( postType );
+	const [ selection, setSelection ] = useState( [] );
+
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if ( filter.field === 'status' && filter.operator === 'in' ) {
+				filters.status = filter.value;
+			}
+			if ( filter.field === 'author' && filter.operator === 'in' ) {
+				filters.author = filter.value;
+			}
+		} );
+		// We want to provide a different default item for the status filter
+		// than the REST API provides.
+		if ( ! filters.status || filters.status === '' ) {
+			filters.status = DEFAULT_STATUSES;
 		}
-	}, [ defaultStatuses ] );
 
-	const queryArgs = useMemo(
-		() => ( {
+		return {
 			per_page: view.perPage,
 			page: view.page,
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
 			search: view.search,
-			...view.filters,
-		} ),
-		[ view ]
-	);
+			...filters,
+		};
+	}, [ view ] );
 	const {
 		records: pages,
 		isResolving: isLoadingPages,
 		totalItems,
 		totalPages,
-	} = useEntityRecords( 'postType', 'page', queryArgs );
+	} = useEntityRecords( 'postType', postType, queryArgs );
 
-	const { records: authors } = useEntityRecords( 'root', 'user' );
+	const { records: authors, isResolving: isLoadingAuthors } =
+		useEntityRecords( 'root', 'user' );
 
 	const paginationInfo = useMemo(
 		() => ( {
@@ -137,7 +185,7 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => {
+				render: ( { item, view: { type } } ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
@@ -147,6 +195,14 @@ export default function PagePages() {
 										postType: item.type,
 										canvas: 'edit',
 									} }
+									onClick={ ( event ) => {
+										if (
+											viewTypeSupportsMap[ type ].preview
+										) {
+											event.preventDefault();
+											setSelection( [ item.id ] );
+										}
+									} }
 								>
 									{ decodeEntities(
 										item.title?.rendered || item.slug
@@ -157,7 +213,6 @@ export default function PagePages() {
 					);
 				},
 				maxWidth: 400,
-				sortingFn: 'alphanumeric',
 				enableHiding: false,
 			},
 			{
@@ -172,7 +227,7 @@ export default function PagePages() {
 						</a>
 					);
 				},
-				filters: [ 'enumeration' ],
+				filters: [ 'in' ],
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
@@ -183,20 +238,10 @@ export default function PagePages() {
 				header: __( 'Status' ),
 				id: 'status',
 				getValue: ( { item } ) =>
-					statuses?.find( ( { slug } ) => slug === item.status )
-						?.name ?? item.status,
-				filters: [
-					{
-						type: 'enumeration',
-						id: 'status',
-						resetValue: defaultStatuses,
-					},
-				],
-				elements:
-					statuses?.map( ( { slug, name } ) => ( {
-						value: slug,
-						label: name,
-					} ) ) || [],
+					STATUSES.find( ( { value } ) => value === item.status )
+						?.label ?? item.status,
+				filters: [ 'in' ],
+				elements: STATUSES,
 				enableSorting: false,
 			},
 			{
@@ -212,19 +257,28 @@ export default function PagePages() {
 				},
 			},
 		],
-		[ defaultStatuses, statuses, authors ]
+		[ authors ]
 	);
 
 	const trashPostAction = useTrashPostAction();
+	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
+	const restorePostAction = useRestorePostAction();
 	const editPostAction = useEditPostAction();
 	const actions = useMemo(
 		() => [
 			viewPostAction,
 			trashPostAction,
+			restorePostAction,
+			permanentlyDeletePostAction,
 			editPostAction,
 			postRevisionsAction,
 		],
-		[ trashPostAction, editPostAction ]
+		[
+			trashPostAction,
+			permanentlyDeletePostAction,
+			restorePostAction,
+			editPostAction,
+		]
 	);
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
@@ -248,16 +302,43 @@ export default function PagePages() {
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
-		<Page title={ __( 'Pages' ) }>
-			<DataViews
-				paginationInfo={ paginationInfo }
-				fields={ fields }
-				actions={ actions }
-				data={ pages || EMPTY_ARRAY }
-				isLoading={ isLoadingPages }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		</Page>
+		<>
+			<Page title={ __( 'Pages' ) }>
+				<DataViews
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					actions={ actions }
+					data={ pages || EMPTY_ARRAY }
+					isLoading={ isLoadingPages || isLoadingAuthors }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			</Page>
+			{ viewTypeSupportsMap[ view.type ].preview && (
+				<Page>
+					<div className="edit-site-page-pages-preview">
+						{ selection.length === 1 && (
+							<SideEditor
+								postId={ selection[ 0 ] }
+								postType={ postType }
+							/>
+						) }
+						{ selection.length !== 1 && (
+							<div
+								style={ {
+									display: 'flex',
+									flexDirection: 'column',
+									justifyContent: 'center',
+									textAlign: 'center',
+									height: '100%',
+								} }
+							>
+								<p>{ __( 'Select a page to preview' ) }</p>
+							</div>
+						) }
+					</div>
+				</Page>
+			) }
+		</>
 	);
 }

package/src/components/page-pages/side-editor.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
+
+export default function SideEditor( { postType, postId } ) {
+	useInitEditedEntity( {
+		postId,
+		postType,
+	} );
+
+	return <Editor />;
+}

package/src/components/page-patterns/grid-item.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import downloadjs from 'downloadjs';
 import { paramCase as kebabCase } from 'change-case';
 
 /**
@@ -37,6 +36,7 @@ import {
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { downloadBlob } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -118,9 +118,9 @@ function GridItem( { categoryId, item, ...props } ) {
 			syncStatus: item.patternBlock.wp_pattern_sync_status,
 		};
 
-		return downloadjs(
-			JSON.stringify( json, null, 2 ),
+		return downloadBlob(
 			`${ kebabCase( item.title || item.name ) }.json`,
+			JSON.stringify( json, null, 2 ),
 			'application/json'
 		);
 	};

package/src/components/page-patterns/patterns-list.js

@@ -12,7 +12,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, _x, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useAsyncList, useViewportMatch } from '@wordpress/compose';
@@ -33,9 +33,15 @@ import Pagination from './pagination';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const SYNC_FILTERS = {
-	all: __( 'All' ),
-	[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
-	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Not synced' ),
+	all: _x( 'All', 'Option that shows all patterns' ),
+	[ PATTERN_SYNC_TYPES.full ]: _x(
+		'Synced',
+		'Option that shows all synchronized patterns'
+	),
+	[ PATTERN_SYNC_TYPES.unsynced ]: _x(
+		'Not synced',
+		'Option that shows all patterns that are not synchronized'
+	),
 };
 
 const SYNC_DESCRIPTIONS = {

package/src/components/page-patterns/rename-category-menu-item.js

@@ -5,6 +5,10 @@ import { MenuItem } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+/**
+ * Internal dependencies
+ */
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
 /**
  * Internal dependencies
@@ -16,30 +20,43 @@ const { RenamePatternCategoryModal } = unlock( patternsPrivateApis );
 export default function RenameCategoryMenuItem( { category, onClose } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	// User created pattern categories have their properties updated when
-	// retrieved via `getUserPatternCategories`. The rename modal expects an
-	// object that will match the pattern category entity.
-	const normalizedCategory = {
-		id: category.id,
-		slug: category.slug,
-		name: category.label,
-	};
-
 	return (
 		<>
 			<MenuItem onClick={ () => setIsModalOpen( true ) }>
 				{ __( 'Rename' ) }
 			</MenuItem>
 			{ isModalOpen && (
-				<RenamePatternCategoryModal
-					category={ normalizedCategory }
+				<RenameModal
+					category={ category }
 					onClose={ () => {
 						setIsModalOpen( false );
 						onClose();
 					} }
-					overlayClassName="edit-site-list__rename-modal"
 				/>
 			) }
 		</>
 	);
 }
+
+function RenameModal( { category, onClose } ) {
+	// User created pattern categories have their properties updated when
+	// retrieved via `getUserPatternCategories`. The rename modal expects an
+	// object that will match the pattern category entity.
+	const normalizedCategory = {
+		id: category.id,
+		slug: category.slug,
+		name: category.label,
+	};
+
+	// Optimization - only use pattern categories when the modal is open.
+	const existingCategories = usePatternCategories();
+
+	return (
+		<RenamePatternCategoryModal
+			category={ normalizedCategory }
+			existingCategories={ existingCategories }
+			onClose={ onClose }
+			overlayClassName="edit-site-list__rename-modal"
+		/>
+	);
+}

package/src/components/page-patterns/use-patterns.js

@@ -17,7 +17,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { filterOutDuplicatesByName } from './utils';
 import {
-	PATTERN_CORE_SOURCES,
+	EXCLUDED_PATTERN_SOURCES,
 	PATTERN_TYPES,
 	PATTERN_SYNC_TYPES,
 	TEMPLATE_PART_POST_TYPE,
@@ -123,7 +123,8 @@ const selectThemePatterns = createSelector(
 			...( restBlockPatterns || [] ),
 		]
 			.filter(
-				( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source )
+				( pattern ) =>
+					! EXCLUDED_PATTERN_SOURCES.includes( pattern.source )
 			)
 			.filter( filterOutDuplicatesByName )
 			.filter( ( pattern ) => pattern.inserter !== false )