@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/save-hub/style.scss

@@ -18,4 +18,11 @@
 	&[aria-disabled="true"]:hover {
 		color: inherit;
 	}
+
+	&:not(.is-primary) {
+		&.is-busy,
+		&.is-busy[aria-disabled="true"]:hover {
+			color: $gray-900;
+		}
+	}
 }

package/src/components/sidebar/index.js

@@ -59,8 +59,7 @@ function SidebarScreens() {
 			{ window?.__experimentalAdminViews && (
 				<NavigatorScreen path="/pages">
 					<SidebarNavigationScreen
-						title={ __( 'All Pages' ) }
-						description={ __( 'Manage your pages.' ) }
+						title={ __( 'Pages' ) }
 						backPath="/page"
 						content={ <DataViewsSidebarContent /> }
 					/>

package/src/components/sidebar-dataviews/add-new-view.js

@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import DEFAULT_VIEWS from './default-views';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+function AddNewItemModalContent( { type, setIsAdding } ) {
+	const {
+		params: { path },
+	} = useLocation();
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const [ title, setTitle ] = useState( '' );
+	const [ isSaving, setIsSaving ] = useState( false );
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				setIsSaving( true );
+				const { getEntityRecords } = resolveSelect( coreStore );
+				let dataViewTaxonomyId;
+				const dataViewTypeRecords = await getEntityRecords(
+					'taxonomy',
+					'wp_dataviews_type',
+					{ slug: type }
+				);
+				if ( dataViewTypeRecords && dataViewTypeRecords.length > 0 ) {
+					dataViewTaxonomyId = dataViewTypeRecords[ 0 ].id;
+				} else {
+					const record = await saveEntityRecord(
+						'taxonomy',
+						'wp_dataviews_type',
+						{ name: type }
+					);
+					if ( record && record.id ) {
+						dataViewTaxonomyId = record.id;
+					}
+				}
+				const savedRecord = await saveEntityRecord(
+					'postType',
+					'wp_dataviews',
+					{
+						title,
+						status: 'publish',
+						wp_dataviews_type: dataViewTaxonomyId,
+						content: JSON.stringify(
+							DEFAULT_VIEWS[ type ][ 0 ].view
+						),
+					}
+				);
+				history.push( {
+					path,
+					activeView: savedRecord.id,
+					isCustom: 'true',
+				} );
+				setIsSaving( false );
+				setIsAdding( 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={ () => {
+							setIsAdding( false );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSaving }
+						isBusy={ isSaving }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default function AddNewItem( { type } ) {
+	const [ isAdding, setIsAdding ] = useState( false );
+	return (
+		<>
+			<SidebarNavigationItem
+				icon={ plus }
+				onClick={ () => {
+					setIsAdding( true );
+				} }
+				className="dataviews__siderbar-content-add-new-item"
+			>
+				{ __( 'New view' ) }
+			</SidebarNavigationItem>
+			{ isAdding && (
+				<Modal
+					title={ __( 'Add new view' ) }
+					onRequestClose={ () => {
+						setIsAdding( false );
+					} }
+				>
+					<AddNewItemModalContent
+						type={ type }
+						setIsAdding={ setIsAdding }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,229 @@
+/**
+ * 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' ) }
+						className="edit-site-sidebar-dataviews-dataview-item__dropdown-menu"
+						toggleProps={ {
+							style: {
+								color: 'inherit',
+							},
+							size: 'small',
+						} }
+					>
+						{ ( { 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,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { trash } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IN } from '../dataviews/constants';
+
+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: OPERATOR_IN, value: 'draft' },
+				],
+			},
+		},
+		{
+			title: __( 'Trash' ),
+			slug: 'trash',
+			icon: trash,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{ field: 'status', operator: OPERATOR_IN, value: 'trash' },
+				],
+			},
+		},
+	],
+};
+
+export default DEFAULT_VIEWS;

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

@@ -2,65 +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, icon } ) {
-	const {
-		params: { path },
-	} = useLocation();
-
-	const _icon = 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 }
-						icon={ dataview.icon }
-						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,29 @@
+.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 {
+	border-radius: $radius-block-ui;
+	padding-right: $grid-unit-10;
+
+	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
+		min-width: initial;
+	}
+
+	&: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'
+			),
 		[]
 	);