@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/dataviews/view-list.js

@@ -14,6 +14,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 import {
 	chevronDown,
 	chevronUp,
@@ -21,12 +22,13 @@ import {
 	check,
 	arrowUp,
 	arrowDown,
+	chevronRightSmall,
+	funnel,
 } from '@wordpress/icons';
 import {
 	Button,
 	Icon,
 	privateApis as componentsPrivateApis,
-	VisuallyHidden,
 } from '@wordpress/components';
 import { useMemo, Children, Fragment } from '@wordpress/element';
 
@@ -35,12 +37,15 @@ import { useMemo, Children, Fragment } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import ItemActions from './item-actions';
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 
 const {
-	DropdownMenuV2,
-	DropdownMenuGroupV2,
-	DropdownMenuItemV2,
-	DropdownMenuSeparatorV2,
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
 } = unlock( componentsPrivateApis );
 
 const EMPTY_OBJECT = {};
@@ -49,6 +54,7 @@ const sortingItemsInfo = {
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
 const sortIcons = { asc: chevronUp, desc: chevronDown };
+
 function HeaderMenu( { dataView, header } ) {
 	if ( header.isPlaceholder ) {
 		return null;
@@ -63,8 +69,18 @@ function HeaderMenu( { dataView, header } ) {
 		return text;
 	}
 	const sortedDirection = header.column.getIsSorted();
+
+	let filter;
+	if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
+		filter = {
+			field: header.column.columnDef.id,
+			elements: header.column.columnDef.elements || [],
+		};
+	}
+	const isFilterable = !! filter;
+
 	return (
-		<DropdownMenuV2
+		<DropdownMenu
 			align="start"
 			trigger={
 				<Button
@@ -77,10 +93,10 @@ function HeaderMenu( { dataView, header } ) {
 		>
 			<WithSeparators>
 				{ isSortable && (
-					<DropdownMenuGroupV2>
+					<DropdownMenuGroup>
 						{ Object.entries( sortingItemsInfo ).map(
 							( [ direction, info ] ) => (
-								<DropdownMenuItemV2
+								<DropdownMenuItem
 									key={ direction }
 									prefix={ <Icon icon={ info.icon } /> }
 									suffix={
@@ -103,13 +119,13 @@ function HeaderMenu( { dataView, header } ) {
 									} }
 								>
 									{ info.label }
-								</DropdownMenuItemV2>
+								</DropdownMenuItem>
 							)
 						) }
-					</DropdownMenuGroupV2>
+					</DropdownMenuGroup>
 				) }
 				{ isHidable && (
-					<DropdownMenuItemV2
+					<DropdownMenuItem
 						prefix={ <Icon icon={ unseen } /> }
 						onSelect={ ( event ) => {
 							event.preventDefault();
@@ -117,10 +133,88 @@ function HeaderMenu( { dataView, header } ) {
 						} }
 					>
 						{ __( 'Hide' ) }
-					</DropdownMenuItemV2>
+					</DropdownMenuItem>
+				) }
+				{ isFilterable && (
+					<DropdownMenuGroup>
+						<DropdownSubMenu
+							key={ filter.field }
+							trigger={
+								<DropdownSubMenuTrigger
+									prefix={ <Icon icon={ funnel } /> }
+									suffix={
+										<Icon icon={ chevronRightSmall } />
+									}
+								>
+									{ __( 'Filter by' ) }
+								</DropdownSubMenuTrigger>
+							}
+						>
+							{ filter.elements.map( ( element ) => {
+								let isActive = false;
+								const columnFilters =
+									dataView.getState().columnFilters;
+								const columnFilter = columnFilters.find(
+									( f ) =>
+										Object.keys( f )[ 0 ].split(
+											':'
+										)[ 0 ] === filter.field
+								);
+
+								if ( columnFilter ) {
+									const value =
+										Object.values( columnFilter )[ 0 ];
+									// Intentionally use loose comparison, so it does type conversion.
+									// This covers the case where a top-level filter for the same field converts a number into a string.
+									isActive = element.value == value; // eslint-disable-line eqeqeq
+								}
+
+								return (
+									<DropdownMenuItem
+										key={ element.value }
+										suffix={
+											isActive && <Icon icon={ check } />
+										}
+										onSelect={ () => {
+											const otherFilters =
+												columnFilters?.filter(
+													( f ) => {
+														const [
+															field,
+															operator,
+														] =
+															Object.keys(
+																f
+															)[ 0 ].split( ':' );
+														return (
+															field !==
+																filter.field ||
+															operator !==
+																OPERATOR_IN
+														);
+													}
+												);
+
+											dataView.setColumnFilters( [
+												...otherFilters,
+												{
+													[ filter.field + ':in' ]:
+														isActive
+															? undefined
+															: element.value,
+												},
+											] );
+										} }
+									>
+										{ element.label }
+									</DropdownMenuItem>
+								);
+							} ) }
+						</DropdownSubMenu>
+					</DropdownMenuGroup>
 				) }
 			</WithSeparators>
-		</DropdownMenuV2>
+		</DropdownMenu>
 	);
 }
 
@@ -129,7 +223,7 @@ function WithSeparators( { children } ) {
 		.filter( Boolean )
 		.map( ( child, i ) => (
 			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparatorV2 /> }
+				{ i > 0 && <DropdownMenuSeparator /> }
 				{ child }
 			</Fragment>
 		) );
@@ -141,6 +235,7 @@ function ViewList( {
 	fields,
 	actions,
 	data,
+	getItemId,
 	isLoading = false,
 	paginationInfo,
 } ) {
@@ -156,7 +251,7 @@ function ViewList( {
 		} );
 		if ( actions?.length ) {
 			_columns.push( {
-				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+				header: __( 'Actions' ),
 				id: 'actions',
 				cell: ( props ) => {
 					return (
@@ -186,8 +281,61 @@ function ViewList( {
 		);
 	}, [ view.hiddenFields ] );
 
+	/**
+	 * Transform the filters from the view format into the tanstack columns filter format.
+	 *
+	 * Input:
+	 *
+	 * view.filters = [
+	 *   { field: 'date', operator: 'before', value: '2020-01-01' },
+	 *   { field: 'date', operator: 'after', value: '2020-01-01' },
+	 * ]
+	 *
+	 * Output:
+	 *
+	 * columnFilters = [
+	 *   { "date:before": '2020-01-01' },
+	 *   { "date:after": '2020-01-01' }
+	 * ]
+	 *
+	 * @param {Array} filters The view filters to transform.
+	 * @return {Array} The transformed TanStack column filters.
+	 */
+	const toTanStackColumnFilters = ( filters ) =>
+		filters?.map( ( filter ) => ( {
+			[ filter.field + ':' + filter.operator ]: filter.value,
+		} ) );
+
+	/**
+	 * Transform the filters from the view format into the tanstack columns filter format.
+	 *
+	 * Input:
+	 *
+	 * columnFilters = [
+	 *   { "date:before": '2020-01-01'},
+	 *   { "date:after": '2020-01-01' }
+	 * ]
+	 *
+	 * Output:
+	 *
+	 * view.filters = [
+	 *   { field: 'date', operator: 'before', value: '2020-01-01' },
+	 *   { field: 'date', operator: 'after', value: '2020-01-01' },
+	 * ]
+	 *
+	 * @param {Array} filters The TanStack column filters to transform.
+	 * @return {Array} The transformed view filters.
+	 */
+	const fromTanStackColumnFilters = ( filters ) =>
+		filters.map( ( filter ) => {
+			const [ key, value ] = Object.entries( filter )[ 0 ];
+			const [ field, operator ] = key.split( ':' );
+			return { field, operator, value };
+		} );
+
+	const shownData = useAsyncList( data );
 	const dataView = useReactTable( {
-		data,
+		data: shownData,
 		columns,
 		manualSorting: true,
 		manualFiltering: true,
@@ -203,12 +351,14 @@ function ViewList( {
 				  ]
 				: [],
 			globalFilter: view.search,
+			columnFilters: toTanStackColumnFilters( view.filters ),
 			pagination: {
 				pageIndex: view.page,
 				pageSize: view.perPage,
 			},
 			columnVisibility: columnVisibility ?? EMPTY_OBJECT,
 		},
+		getRowId: getItemId,
 		onSortingChange: ( sortingUpdater ) => {
 			onChangeView( ( currentView ) => {
 				const sort =
@@ -261,7 +411,14 @@ function ViewList( {
 			} );
 		},
 		onGlobalFilterChange: ( value ) => {
-			onChangeView( { ...view, search: value, page: 0 } );
+			onChangeView( { ...view, search: value, page: 1 } );
+		},
+		onColumnFiltersChange: ( columnFiltersUpdater ) => {
+			onChangeView( {
+				...view,
+				filters: fromTanStackColumnFilters( columnFiltersUpdater() ),
+				page: 1,
+			} );
 		},
 		onPaginationChange: ( paginationUpdater ) => {
 			onChangeView( ( currentView ) => {
@@ -300,10 +457,14 @@ function ViewList( {
 											width:
 												header.column.columnDef.width ||
 												undefined,
+											minWidth:
+												header.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												header.column.columnDef
 													.maxWidth || undefined,
 										} }
+										data-field-id={ header.id }
 									>
 										<HeaderMenu
 											dataView={ dataView }
@@ -319,11 +480,14 @@ function ViewList( {
 							<tr key={ row.id }>
 								{ row.getVisibleCells().map( ( cell ) => (
 									<td
-										key={ cell.id }
+										key={ cell.column.id }
 										style={ {
 											width:
 												cell.column.columnDef.width ||
 												undefined,
+											minWidth:
+												cell.column.columnDef
+													.minWidth || undefined,
 											maxWidth:
 												cell.column.columnDef
 													.maxWidth || undefined,

package/src/components/dataviews/view-side-by-side.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import ViewList from './view-list';
+
+export function ViewSideBySide( props ) {
+	// To do: change to email-like preview list.
+	return <ViewList { ...props } />;
+}

package/src/components/editor/index.js

@@ -6,31 +6,38 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
-	BlockContextProvider,
 	BlockBreadcrumb,
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
+	BlockInspector,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
 	ComplementaryArea,
 	store as interfaceStore,
 } from '@wordpress/interface';
-import { EditorNotices, EditorSnackbars } from '@wordpress/editor';
+import {
+	EditorNotices,
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
-import BlockEditor from '../block-editor';
+import {
+	SidebarComplementaryAreaFills,
+	SidebarInspectorFill,
+} from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
 import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
@@ -46,8 +53,13 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import SiteEditorCanvas from '../block-editor/site-editor-canvas';
+import TemplatePartConverter from '../template-part-converter';
+import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+const { ExperimentalEditorProvider: EditorProvider } =
+	unlock( editorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -79,19 +91,20 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		isLoaded: hasLoadedPost,
 	} = useEditedEntityRecord();
 
-	const { id: editedPostId, type: editedPostType } = editedPost;
+	const { type: editedPostType } = editedPost;
 
 	const {
 		context,
+		contextPost,
 		editorMode,
 		canvasMode,
+		renderingMode,
 		blockEditorMode,
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
-		hasPageContentFocus,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -99,17 +112,27 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			hasPageContentFocus: _hasPageContentFocus,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { getEntityRecord } = select( coreDataStore );
+		const { getRenderingMode } = select( editorStore );
+		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
 		return {
-			context: getEditedPostContext(),
+			context: _context,
+			contextPost: _context?.postId
+				? getEntityRecord(
+						'postType',
+						_context.postType,
+						_context.postId
+				  )
+				: undefined,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
+			renderingMode: getRenderingMode(),
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
@@ -124,10 +147,9 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
-			hasPageContentFocus: _hasPageContentFocus(),
 		};
 	}, [] );
-	const { setEditedPostContext } = useDispatch( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -142,23 +164,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 	const secondarySidebarLabel = isListViewOpen
 		? __( 'List View' )
 		: __( 'Block Library' );
-	const blockContext = useMemo( () => {
-		const { postType, postId, ...nonPostFields } = context ?? {};
-		return {
-			...( hasPageContentFocus ? context : nonPostFields ),
-			queryContext: [
-				context?.queryContext || { page: 1 },
-				( newQueryContext ) =>
-					setEditedPostContext( {
-						...context,
-						queryContext: {
-							...context?.queryContext,
-							...newQueryContext,
-						},
-					} ),
-			],
-		};
-	}, [ hasPageContentFocus, context, setEditedPostContext ] );
+	const postWithTemplate = !! context?.postId;
 
 	let title;
 	if ( hasLoadedPost ) {
@@ -180,110 +186,116 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		'edit-site-editor__loading-progress'
 	);
 
-	const contentProps = isLoading
-		? {
-				'aria-busy': 'true',
-				'aria-describedby': loadingProgressId,
-		  }
-		: undefined;
+	const settings = useSpecificEditorSettings();
+	const isReady =
+		! isLoading &&
+		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
+			( ! postWithTemplate && !! editedPost ) );
+
+	// This is the only reliable way I've found to reinitialize the rendering mode
+	// when the canvas mode or the edited entity changes.
+	useEffect( () => {
+		if ( canvasMode === 'edit' && postWithTemplate ) {
+			setRenderingMode( 'template-locked' );
+		} else {
+			setRenderingMode( 'all' );
+		}
+	}, [ canvasMode, postWithTemplate, setRenderingMode ] );
 
 	return (
 		<>
-			{ isLoading ? <CanvasLoader id={ loadingProgressId } /> : null }
+			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
-			<EntityProvider kind="root" type="site">
-				<EntityProvider
-					kind="postType"
-					type={ editedPostType }
-					id={ editedPostId }
+			{ hasLoadedPost && ! editedPost && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+					) }
+				</Notice>
+			) }
+			{ isReady && (
+				<EditorProvider
+					post={ postWithTemplate ? contextPost : editedPost }
+					__unstableTemplate={
+						postWithTemplate ? editedPost : undefined
+					}
+					settings={ settings }
+					useSubRegistry={ false }
 				>
-					<BlockContextProvider value={ blockContext }>
-						<SidebarComplementaryAreaFills />
-						{ isEditMode && <StartTemplateOptions /> }
-						<InterfaceSkeleton
-							isDistractionFree={ true }
-							enableRegionNavigation={ false }
-							className={ classnames(
-								'edit-site-editor__interface-skeleton',
-								{
-									'show-icon-labels': showIconLabels,
-									'is-loading': isLoading,
-								}
-							) }
-							notices={ <EditorSnackbars /> }
-							content={
-								<>
-									<GlobalStylesRenderer />
-									{ isEditMode && <EditorNotices /> }
-									{ showVisualEditor && editedPost && (
-										<>
-											<BlockEditor />
-											<BlockRemovalWarningModal
-												rules={ blockRemovalRules }
-											/>
-											<PatternModal />
-										</>
-									) }
-									{ editorMode === 'text' &&
-										editedPost &&
-										isEditMode && <CodeEditor /> }
-									{ hasLoadedPost && ! editedPost && (
-										<Notice
-											status="warning"
-											isDismissible={ false }
-										>
-											{ __(
-												"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-											) }
-										</Notice>
-									) }
-									{ isEditMode && (
-										<KeyboardShortcutsEditMode />
-									) }
-								</>
+					<SidebarComplementaryAreaFills />
+					{ isEditMode && <StartTemplateOptions /> }
+					<InterfaceSkeleton
+						isDistractionFree={ true }
+						enableRegionNavigation={ false }
+						className={ classnames(
+							'edit-site-editor__interface-skeleton',
+							{
+								'show-icon-labels': showIconLabels,
 							}
-							contentProps={ contentProps }
-							secondarySidebar={
-								isEditMode &&
-								( ( shouldShowInserter && (
-									<InserterSidebar />
-								) ) ||
-									( shouldShowListView && (
-										<ListViewSidebar
-											listViewToggleElement={
-												listViewToggleElement
-											}
-										/>
-									) ) )
-							}
-							sidebar={
-								isEditMode &&
-								isRightSidebarOpen && (
+						) }
+						notices={ <EditorSnackbars /> }
+						content={
+							<>
+								<GlobalStylesRenderer />
+								{ isEditMode && <EditorNotices /> }
+								{ showVisualEditor && (
 									<>
-										<ComplementaryArea.Slot scope="core/edit-site" />
-										<SidebarFixedBottomSlot />
+										<TemplatePartConverter />
+										<SidebarInspectorFill>
+											<BlockInspector />
+										</SidebarInspectorFill>
+										<SiteEditorCanvas />
+										<BlockRemovalWarningModal
+											rules={ blockRemovalRules }
+										/>
+										<PatternModal />
 									</>
-								)
-							}
-							footer={
-								shouldShowBlockBreadcrumbs && (
-									<BlockBreadcrumb
-										rootLabelText={
-											hasPageContentFocus
-												? __( 'Page' )
-												: __( 'Template' )
+								) }
+								{ editorMode === 'text' && isEditMode && (
+									<CodeEditor />
+								) }
+								{ isEditMode && <KeyboardShortcutsEditMode /> }
+							</>
+						}
+						secondarySidebar={
+							isEditMode &&
+							( ( shouldShowInserter && <InserterSidebar /> ) ||
+								( shouldShowListView && (
+									<ListViewSidebar
+										listViewToggleElement={
+											listViewToggleElement
 										}
 									/>
-								)
-							}
-							labels={ {
-								...interfaceLabels,
-								secondarySidebar: secondarySidebarLabel,
-							} }
-						/>
-					</BlockContextProvider>
-				</EntityProvider>
-			</EntityProvider>
+								) ) )
+						}
+						sidebar={
+							isEditMode &&
+							isRightSidebarOpen && (
+								<>
+									<ComplementaryArea.Slot scope="core/edit-site" />
+									<SidebarFixedBottomSlot />
+								</>
+							)
+						}
+						footer={
+							shouldShowBlockBreadcrumbs && (
+								<BlockBreadcrumb
+									rootLabelText={
+										postWithTemplate &&
+										renderingMode !== 'template-only'
+											? __( 'Page' )
+											: __( 'Template' )
+									}
+								/>
+							)
+						}
+						labels={ {
+							...interfaceLabels,
+							secondarySidebar: secondarySidebarLabel,
+						} }
+					/>
+				</EditorProvider>
+			) }
 		</>
 	);
 }