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

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -0,0 +1,227 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHeading as Heading,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import DataViewItem from './dataview-item';
+import AddNewItem from './add-new-view';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+const EMPTY_ARRAY = [];
+
+function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const [ title, setTitle ] = useState( currentTitle );
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await editEntityRecord(
+					'postType',
+					'wp_dataviews',
+					dataviewId,
+					{
+						title,
+					}
+				);
+				setIsRenaming( false );
+			} }
+		>
+			<VStack spacing="5">
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ __( 'My view' ) }
+					className="patterns-create-modal__name-input"
+				/>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							setIsRenaming( false );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title }
+					>
+						{ __( 'Rename' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+function CustomDataViewItem( { dataviewId, isActive } ) {
+	const {
+		params: { path },
+	} = useLocation();
+	const history = useHistory();
+	const { dataview } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord } = select( coreStore );
+			return {
+				dataview: getEditedEntityRecord(
+					'postType',
+					'wp_dataviews',
+					dataviewId
+				),
+			};
+		},
+		[ dataviewId ]
+	);
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const type = useMemo( () => {
+		const viewContent = JSON.parse( dataview.content );
+		return viewContent.type;
+	}, [ dataview.content ] );
+	const [ isRenaming, setIsRenaming ] = useState( false );
+	return (
+		<>
+			<DataViewItem
+				title={ dataview.title }
+				type={ type }
+				isActive={ isActive }
+				isCustom="true"
+				customViewId={ dataviewId }
+				suffix={
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Actions' ) }
+						toggleProps={ {
+							style: {
+								color: 'inherit',
+							},
+						} }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								<MenuItem
+									onClick={ () => {
+										setIsRenaming( true );
+										onClose();
+									} }
+								>
+									{ __( 'Rename' ) }
+								</MenuItem>
+								<MenuItem
+									onClick={ async () => {
+										await deleteEntityRecord(
+											'postType',
+											'wp_dataviews',
+											dataview.id,
+											{
+												force: true,
+											}
+										);
+										if ( isActive ) {
+											history.replace( {
+												path,
+											} );
+										}
+										onClose();
+									} }
+									isDestructive
+								>
+									{ __( 'Delete' ) }
+								</MenuItem>
+							</MenuGroup>
+						) }
+					</DropdownMenu>
+				}
+			/>
+			{ isRenaming && (
+				<Modal
+					title={ __( 'Rename view' ) }
+					onRequestClose={ () => {
+						setIsRenaming( false );
+					} }
+				>
+					<RenameItemModalContent
+						dataviewId={ dataviewId }
+						setIsRenaming={ setIsRenaming }
+						currentTitle={ dataview.title }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+export function useCustomDataViews( type ) {
+	const customDataViews = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		const dataViewTypeRecords = getEntityRecords(
+			'taxonomy',
+			'wp_dataviews_type',
+			{ slug: type }
+		);
+		if ( ! dataViewTypeRecords || dataViewTypeRecords.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		const dataViews = getEntityRecords( 'postType', 'wp_dataviews', {
+			wp_dataviews_type: dataViewTypeRecords[ 0 ].id,
+			orderby: 'date',
+			order: 'asc',
+		} );
+		if ( ! dataViews ) {
+			return EMPTY_ARRAY;
+		}
+		return dataViews;
+	} );
+	return customDataViews;
+}
+
+export default function CustomDataViewsList( { type, activeView, isCustom } ) {
+	const customDataViews = useCustomDataViews( type );
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-dataviews__group-header">
+				<Heading level={ 2 }>{ __( 'Custom Views' ) }</Heading>
+			</div>
+			<ItemGroup>
+				{ customDataViews.map( ( customViewRecord ) => {
+					return (
+						<CustomDataViewItem
+							key={ customViewRecord.id }
+							dataviewId={ customViewRecord.id }
+							isActive={
+								isCustom === 'true' &&
+								Number( activeView ) === customViewRecord.id
+							}
+						/>
+					);
+				} ) }
+				<AddNewItem type={ type } />
+			</ItemGroup>
+		</>
+	);
+}

package/src/components/sidebar-dataviews/dataview-item.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { page, columns, pullRight } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { unlock } from '../../lock-unlock';
+const { useLocation } = unlock( routerPrivateApis );
+
+function getDataViewIcon( type ) {
+	const icons = { list: page, grid: columns, 'side-by-side': pullRight };
+	return icons[ type ];
+}
+
+export default function DataViewItem( {
+	title,
+	slug,
+	customViewId,
+	type,
+	icon,
+	isActive,
+	isCustom,
+	suffix,
+} ) {
+	const {
+		params: { path },
+	} = useLocation();
+
+	const iconToUse = icon || getDataViewIcon( type );
+
+	const linkInfo = useLink( {
+		path,
+		activeView: isCustom === 'true' ? customViewId : slug,
+		isCustom,
+	} );
+	return (
+		<HStack
+			justify="flex-start"
+			className={ classnames(
+				'edit-site-sidebar-dataviews-dataview-item',
+				{
+					'is-selected': isActive,
+				}
+			) }
+		>
+			<SidebarNavigationItem
+				icon={ iconToUse }
+				{ ...linkInfo }
+				aria-current={ isActive ? 'true' : undefined }
+			>
+				{ title }
+			</SidebarNavigationItem>
+			{ suffix }
+		</HStack>
+	);
+}

package/src/components/sidebar-dataviews/default-views.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { trash } from '@wordpress/icons';
+
+const DEFAULT_PAGE_BASE = {
+	type: 'list',
+	search: '',
+	filters: [],
+	page: 1,
+	perPage: 20,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	// All fields are visible by default, so it's
+	// better to keep track of the hidden ones.
+	hiddenFields: [ 'date', 'featured-image' ],
+	layout: {},
+};
+
+const DEFAULT_VIEWS = {
+	page: [
+		{
+			title: __( 'All' ),
+			slug: 'all',
+			view: DEFAULT_PAGE_BASE,
+		},
+		{
+			title: __( 'Drafts' ),
+			slug: 'drafts',
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{ field: 'status', operator: 'in', value: 'draft' },
+				],
+			},
+		},
+		{
+			title: __( 'Trash' ),
+			slug: 'trash',
+			icon: trash,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{ field: 'status', operator: 'in', value: 'trash' },
+				],
+			},
+		},
+	],
+};
+
+export default DEFAULT_VIEWS;

package/src/components/sidebar-dataviews/index.js

@@ -2,64 +2,56 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { page, columns } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { useLink } from '../routes/link';
-import { default as DEFAULT_VIEWS } from '../page-pages/default-views';
+
+import { default as DEFAULT_VIEWS } from './default-views';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
-import SidebarNavigationItem from '../sidebar-navigation-item';
-
-function getDataViewIcon( dataview ) {
-	const icons = { list: page, grid: columns };
-	return icons[ dataview.view.type ];
-}
-
-function DataViewItem( { dataview, isActive } ) {
-	const {
-		params: { path },
-	} = useLocation();
-
-	const icon = getDataViewIcon( dataview );
+import DataViewItem from './dataview-item';
+import CustomDataViewsList from './custom-dataviews-list';
 
-	const linkInfo = useLink( {
-		path,
-		activeView: dataview.slug,
-	} );
-	return (
-		<SidebarNavigationItem
-			icon={ icon }
-			{ ...linkInfo }
-			aria-current={ isActive ? 'true' : undefined }
-		>
-			{ dataview.title }
-		</SidebarNavigationItem>
-	);
-}
+const PATH_TO_TYPE = {
+	'/pages': 'page',
+};
 
 export default function DataViewsSidebarContent() {
 	const {
-		params: { path, activeView = 'all' },
+		params: { path, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	if ( ! path || path !== '/pages' ) {
+	if ( ! path || ! PATH_TO_TYPE[ path ] ) {
 		return null;
 	}
+	const type = PATH_TO_TYPE[ path ];
 
 	return (
-		<ItemGroup>
-			{ DEFAULT_VIEWS.map( ( dataview ) => {
-				return (
-					<DataViewItem
-						key={ dataview.slug }
-						dataview={ dataview }
-						isActive={ dataview.slug === activeView }
-					/>
-				);
-			} ) }
-		</ItemGroup>
+		<>
+			<ItemGroup>
+				{ DEFAULT_VIEWS[ type ].map( ( dataview ) => {
+					return (
+						<DataViewItem
+							key={ dataview.slug }
+							slug={ dataview.slug }
+							title={ dataview.title }
+							icon={ dataview.icon }
+							type={ dataview.view.type }
+							isActive={
+								isCustom === 'false' &&
+								dataview.slug === activeView
+							}
+							isCustom="false"
+						/>
+					);
+				} ) }
+			</ItemGroup>
+			<CustomDataViewsList
+				activeView={ activeView }
+				type={ type }
+				isCustom="true"
+			/>
+		</>
 	);
 }

package/src/components/sidebar-dataviews/style.scss

@@ -0,0 +1,22 @@
+.edit-site-sidebar-navigation-screen-dataviews__group-header {
+	margin-top: $grid-unit-40;
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
+}
+
+.edit-site-sidebar-dataviews-dataview-item {
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		color: $gray-200;
+		background: $gray-800;
+	}
+
+	&.is-selected {
+		background: var(--wp-admin-theme-color);
+		color: $white;
+	}
+}

package/src/components/sidebar-edit-mode/default-sidebar.js

@@ -6,11 +6,7 @@ import {
 	ComplementaryAreaMoreMenuItem,
 } from '@wordpress/interface';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function DefaultSidebar( {
 	className,
@@ -24,7 +20,11 @@ export default function DefaultSidebar( {
 	panelClassName,
 } ) {
 	const showIconLabels = useSelect(
-		( select ) => select( editSiteStore ).getSettings().showIconLabels,
+		( select ) =>
+			!! select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		[]
 	);
 

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -11,8 +11,9 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -21,7 +22,7 @@ import { store as editSiteStore } from '../../../store';
 import SwapTemplateButton from './swap-template-button';
 import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../../lock-unlock';
-import usePageContentBlocks from '../../block-editor/block-editor-provider/use-page-content-blocks';
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants';
 
 const POPOVER_PROPS = {
 	className: 'edit-site-page-panels-edit-template__dropdown',
@@ -29,8 +30,8 @@ const POPOVER_PROPS = {
 };
 
 export default function EditTemplate() {
-	const { hasResolved, template, isTemplateHidden, postType } = useSelect(
-		( select ) => {
+	const { hasPostContentBlocks, hasResolved, template, isTemplateHidden } =
+		useSelect( ( select ) => {
 			const { getEditedPostContext, getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
 			const { getCanvasMode, getPageContentFocusType } = unlock(
@@ -38,15 +39,15 @@ export default function EditTemplate() {
 			);
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
+			const { __experimentalGetGlobalBlocksByName } =
+				select( blockEditorStore );
 			const _context = getEditedPostContext();
 			const _postType = getEditedPostType();
-			const queryArgs = [
-				'postType',
-				getEditedPostType(),
-				getEditedPostId(),
-			];
-
+			const queryArgs = [ 'postType', _postType, getEditedPostId() ];
 			return {
+				hasPostContentBlocks: !! __experimentalGetGlobalBlocksByName(
+					Object.keys( PAGE_CONTENT_BLOCK_TYPES )
+				).length,
 				context: _context,
 				hasResolved: hasFinishedResolution(
 					'getEditedEntityRecord',
@@ -58,21 +59,12 @@ export default function EditTemplate() {
 					getPageContentFocusType() === 'hideTemplate',
 				postType: _postType,
 			};
-		},
-		[]
-	);
-
-	const [ blocks ] = useEntityBlockEditor( 'postType', postType );
+		}, [] );
 
 	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 	// Disable reason: `useDispatch` can't be called conditionally.
 	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
 	const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
-	// Check if there are any post content block types in the blocks tree.
-	const pageContentBlocks = usePageContentBlocks( {
-		blocks,
-		isPageContentFocused: true,
-	} );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -108,12 +100,13 @@ export default function EditTemplate() {
 							<SwapTemplateButton onClick={ onClose } />
 						</MenuGroup>
 						<ResetDefaultTemplate onClick={ onClose } />
-						{ !! pageContentBlocks?.length && (
+						{ hasPostContentBlocks && (
 							<MenuGroup>
 								<MenuItem
 									icon={
 										! isTemplateHidden ? check : undefined
 									}
+									isPressed={ ! isTemplateHidden }
 									onClick={ () => {
 										setPageContentFocusType(
 											isTemplateHidden

package/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
+import { PostURLPanel } from '@wordpress/editor';
+
 /**
  * Internal dependencies
  */
@@ -32,6 +34,7 @@ export default function PageSummary( {
 				postType={ postType }
 			/>
 			<EditTemplate />
+			<PostURLPanel />
 		</VStack>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/reset-default-template.js

@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
 import { MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecord } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -14,14 +14,12 @@ import {
 	useEditedPostContext,
 	useIsPostsPage,
 } from './hooks';
-import { store as editSiteStore } from '../../../store';
 
 export default function ResetDefaultTemplate( { onClick } ) {
 	const currentTemplateSlug = useCurrentTemplateSlug();
 	const isPostsPage = useIsPostsPage();
 	const { postType, postId } = useEditedPostContext();
-	const entity = useEntityRecord( 'postType', postType, postId );
-	const { setPage } = useDispatch( editSiteStore );
+	const { editEntityRecord } = useDispatch( coreStore );
 	// The default template in a post is indicated by an empty string.
 	if ( ! currentTemplateSlug || isPostsPage ) {
 		return null;
@@ -30,11 +28,14 @@ export default function ResetDefaultTemplate( { onClick } ) {
 		<MenuGroup>
 			<MenuItem
 				onClick={ async () => {
-					entity.edit( { template: '' }, { undoIgnore: true } );
+					editEntityRecord(
+						'postType',
+						postType,
+						postId,
+						{ template: '' },
+						{ undoIgnore: true }
+					);
 					onClick();
-					await setPage( {
-						context: { postType, postId },
-					} );
 				} }
 			>
 				{ __( 'Use default template' ) }

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -84,4 +84,9 @@
 	.components-popover__content {
 		min-width: 240px;
 	}
+	.components-button.is-pressed,
+	.components-button.is-pressed:hover {
+		background: inherit;
+		color: inherit;
+	}
 }