@wordpress/edit-site 5.22.0 → 5.23.0

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

@@ -21,12 +21,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';
 
@@ -41,6 +42,8 @@ const {
 	DropdownMenuGroupV2,
 	DropdownMenuItemV2,
 	DropdownMenuSeparatorV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
 } = unlock( componentsPrivateApis );
 
 const EMPTY_OBJECT = {};
@@ -63,6 +66,27 @@ function HeaderMenu( { dataView, header } ) {
 		return text;
 	}
 	const sortedDirection = header.column.getIsSorted();
+
+	let filter;
+	if (
+		header.column.columnDef.filters?.length > 0 &&
+		header.column.columnDef.filters.some(
+			( f ) => 'string' === typeof f && f === 'in'
+		)
+	) {
+		filter = {
+			field: header.column.columnDef.id,
+			elements: [
+				{
+					value: '',
+					label: __( 'All' ),
+				},
+				...( header.column.columnDef.elements || [] ),
+			],
+		};
+	}
+	const isFilterable = !! filter;
+
 	return (
 		<DropdownMenuV2
 			align="start"
@@ -119,6 +143,92 @@ function HeaderMenu( { dataView, header } ) {
 						{ __( 'Hide' ) }
 					</DropdownMenuItemV2>
 				) }
+				{ isFilterable && (
+					<DropdownMenuGroupV2>
+						<DropdownSubMenuV2
+							key={ filter.field }
+							trigger={
+								<DropdownSubMenuTriggerV2
+									prefix={ <Icon icon={ funnel } /> }
+									suffix={
+										<Icon icon={ chevronRightSmall } />
+									}
+								>
+									{ __( 'Filter by' ) }
+								</DropdownSubMenuTriggerV2>
+							}
+						>
+							{ 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
+								);
+
+								// Set the empty item as active if the filter is not set.
+								if ( ! columnFilter && element.value === '' ) {
+									isActive = true;
+								}
+
+								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 (
+									<DropdownMenuItemV2
+										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 !== 'in'
+														);
+													}
+												);
+
+											if ( element.value === '' ) {
+												dataView.setColumnFilters(
+													otherFilters
+												);
+											} else {
+												dataView.setColumnFilters( [
+													...otherFilters,
+													{
+														[ filter.field +
+														':in' ]: element.value,
+													},
+												] );
+											}
+										} }
+									>
+										{ element.label }
+									</DropdownMenuItemV2>
+								);
+							} ) }
+						</DropdownSubMenuV2>
+					</DropdownMenuGroupV2>
+				) }
 			</WithSeparators>
 		</DropdownMenuV2>
 	);
@@ -156,7 +266,7 @@ function ViewList( {
 		} );
 		if ( actions?.length ) {
 			_columns.push( {
-				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+				header: __( 'Actions' ),
 				id: 'actions',
 				cell: ( props ) => {
 					return (
@@ -186,6 +296,58 @@ 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 dataView = useReactTable( {
 		data,
 		columns,
@@ -203,6 +365,7 @@ function ViewList( {
 				  ]
 				: [],
 			globalFilter: view.search,
+			columnFilters: toTanStackColumnFilters( view.filters ),
 			pagination: {
 				pageIndex: view.page,
 				pageSize: view.perPage,
@@ -261,7 +424,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 ) => {
@@ -304,6 +474,7 @@ function ViewList( {
 												header.column.columnDef
 													.maxWidth || undefined,
 										} }
+										data-field-id={ header.id }
 									>
 										<HeaderMenu
 											dataView={ dataView }

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,37 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } 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,
+} from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useMemo } 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 +52,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,10 +90,11 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		isLoaded: hasLoadedPost,
 	} = useEditedEntityRecord();
 
-	const { id: editedPostId, type: editedPostType } = editedPost;
+	const { type: editedPostType } = editedPost;
 
 	const {
 		context,
+		contextPost,
 		editorMode,
 		canvasMode,
 		blockEditorMode,
@@ -92,6 +104,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		showIconLabels,
 		showBlockBreadcrumbs,
 		hasPageContentFocus,
+		pageContentFocusType,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -100,14 +113,24 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 			isInserterOpened,
 			isListViewOpened,
 			hasPageContentFocus: _hasPageContentFocus,
+			getPageContentFocusType,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { getEntityRecord } = select( coreDataStore );
+		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(),
 			blockEditorMode: __unstableGetEditorMode(),
@@ -125,9 +148,9 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 				'showBlockBreadcrumbs'
 			),
 			hasPageContentFocus: _hasPageContentFocus(),
+			pageContentFocusType: getPageContentFocusType(),
 		};
 	}, [] );
-	const { setEditedPostContext } = useDispatch( editSiteStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -142,23 +165,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 +187,131 @@ 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 ) );
+	const mode = useMemo( () => {
+		if ( isViewMode ) {
+			return postWithTemplate ? 'template-locked' : 'all';
+		}
+
+		if ( isEditMode && pageContentFocusType === 'hideTemplate' ) {
+			return 'post-only';
+		}
+
+		if ( postWithTemplate && hasPageContentFocus ) {
+			return 'template-locked';
+		}
+
+		if ( postWithTemplate && ! hasPageContentFocus ) {
+			return 'template-only';
+		}
+
+		return 'all';
+	}, [
+		isViewMode,
+		isEditMode,
+		postWithTemplate,
+		pageContentFocusType,
+		hasPageContentFocus,
+	] );
 
 	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 }
+					mode={ mode }
 				>
-					<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 />
-									) }
-								</>
-							}
-							contentProps={ contentProps }
-							secondarySidebar={
-								isEditMode &&
-								( ( shouldShowInserter && (
-									<InserterSidebar />
-								) ) ||
-									( shouldShowListView && (
-										<ListViewSidebar
-											listViewToggleElement={
-												listViewToggleElement
-											}
-										/>
-									) ) )
+					<SidebarComplementaryAreaFills />
+					{ isEditMode && <StartTemplateOptions /> }
+					<InterfaceSkeleton
+						isDistractionFree={ true }
+						enableRegionNavigation={ false }
+						className={ classnames(
+							'edit-site-editor__interface-skeleton',
+							{
+								'show-icon-labels': showIconLabels,
 							}
-							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={
+										hasPageContentFocus
+											? __( 'Page' )
+											: __( 'Template' )
+									}
+								/>
+							)
+						}
+						labels={ {
+							...interfaceLabels,
+							secondarySidebar: secondarySidebarLabel,
+						} }
+					/>
+				</EditorProvider>
+			) }
 		</>
 	);
 }