@wordpress/edit-site 6.2.0 → 6.4.0

package/src/components/{page-pages → post-list}/style.scss

@@ -1,16 +1,16 @@
-.edit-site-page-pages__featured-image {
+.edit-site-post-list__featured-image {
 	height: 100%;
 	object-fit: cover;
 	width: 100%;
 }
 
-.edit-site-page-pages__featured-image-wrapper {
+.edit-site-post-list__featured-image-wrapper {
 	height: 100%;
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.page-pages-preview-field__button)),
-	&.is-layout-table .page-pages-preview-field__button {
+	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)),
+	&.is-layout-table .edit-site-post-list__featured-image-button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
@@ -33,7 +33,7 @@
 	}
 }
 
-.page-pages-preview-field__button {
+.edit-site-post-list__featured-image-button {
 	box-shadow: none;
 	border: none;
 	padding: 0;
@@ -43,7 +43,7 @@
 	overflow: hidden;
 	height: 100%;
 	width: 100%;
-	border-radius: 3px 3px 0 0;
+	border-radius: $grid-unit-05;
 
 	&:focus-visible {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -52,12 +52,19 @@
 	}
 }
 
-.edit-site-page-pages-title span {
+.dataviews-view-grid__card.is-selected {
+	.edit-site-post-list__featured-image-button::after {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+}
+
+.edit-site-post-list__title span {
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.edit-site-page-pages__title-badge {
+.edit-site-post-list__title-badge {
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
@@ -65,4 +72,14 @@
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+}
+
+.edit-site-post-list__status-icon {
+	height: $grid-unit-30;
+	width: $grid-unit-30;
+	svg {
+		fill: currentColor;
+		margin-left: -$grid-unit-05;
+	}
 }

package/src/components/posts-app/index.js

@@ -10,29 +10,27 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import Page from '../page';
+import useLayoutAreas from './router';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
-const defaultRoute = {
-	key: 'index',
-	areas: {
-		sidebar: 'Empty Sidebar',
-		content: <Page>Welcome to Posts</Page>,
-		preview: undefined,
-		mobile: <Page>Welcome to Posts</Page>,
-	},
-};
+function PostsLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	const route = useLayoutAreas();
+	return <Layout route={ route } />;
+}
 
 export default function PostsApp() {
 	return (
 		<GlobalStylesProvider>
 			<UnsavedChangesWarning />
 			<RouterProvider>
-				<Layout route={ defaultRoute } />
+				<PostsLayout />
 			</RouterProvider>
 		</GlobalStylesProvider>
 	);

package/src/components/posts-app/router.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function useLayoutAreas() {
+	const { params = {} } = useLocation();
+	const { postType, layout, canvas } = params;
+	const labels = useSelect(
+		( select ) => {
+			return select( coreStore ).getPostType( postType )?.labels;
+		},
+		[ postType ]
+	);
+
+	// Posts list.
+	if ( [ 'post' ].includes( postType ) ) {
+		const isListLayout = layout === 'list' || ! layout;
+		return {
+			key: 'posts-list',
+			areas: {
+				sidebar: (
+					<SidebarNavigationScreen
+						title={ labels?.name }
+						isRoot
+						content={ <DataViewsSidebarContent /> }
+					/>
+				),
+				content: <PostList postType={ postType } />,
+				preview: ( isListLayout || canvas === 'edit' ) && (
+					<Editor isPostsList />
+				),
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isPostsList />
+					) : (
+						<PostList postType={ postType } />
+					),
+			},
+			widths: {
+				content: isListLayout ? 380 : undefined,
+			},
+		};
+	}
+
+	// Fallback shows the home page preview
+	return {
+		key: 'default',
+		areas: {
+			sidebar: <SidebarNavigationScreenMain />,
+			preview: <Editor isPostsList />,
+			mobile: canvas === 'edit' && <Editor isPostsList />,
+		},
+	};
+}

package/src/components/revisions/index.js

@@ -25,6 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -74,7 +75,6 @@ function Revisions( { userConfig, blocks } ) {
 				name="revisions"
 				tabIndex={ 0 }
 			>
-				<EditorStyles styles={ editorStyles } />
 				<style>
 					{
 						// Forming a "block formatting context" to prevent margin collapsing.
@@ -88,6 +88,14 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
+						{ /*
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
+						 */ }
+						<EditorStyles styles={ editorStyles } />
+						<__unstableBlockStyleVariationOverridesWithConfig
+							config={ mergedConfig }
+						/>
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</Iframe>

package/src/components/save-panel/index.js

@@ -155,7 +155,7 @@ export default function SavePanel() {
 					onClick={ () => setIsSaveViewOpened( true ) }
 					aria-haspopup="dialog"
 					disabled={ disabled }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 				>
 					{ __( 'Open save panel' ) }
 				</Button>

package/src/components/sidebar/style.scss

@@ -1,6 +1,12 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
+	// Prevents horizontal overflow while animating screen transitions
+	overflow-x: hidden;
+	// Mark this section of the DOM as isolated, providing performance benefits
+	// by limiting calculations of layout, style and paint to a DOM subtree rather
+	// than the entire page.
+	contain: content;
 }
 
 @keyframes local--slide-from-right {

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

@@ -19,7 +19,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { DEFAULT_VIEWS } from './default-views';
+import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -29,6 +29,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
+	const DEFAULT_VIEWS = useDefaultViews( { postType: type } );
 	return (
 		<form
 			onSubmit={ async ( event ) => {

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

@@ -61,6 +61,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 				<HStack justify="right">
 					<Button
 						variant="tertiary"
+						__next40pxDefaultSize
 						onClick={ () => {
 							setIsRenaming( false );
 						} }
@@ -71,8 +72,9 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title }
+						__next40pxDefaultSize
 					>
-						{ __( 'Rename' ) }
+						{ __( 'Save' ) }
 					</Button>
 				</HStack>
 			</VStack>
@@ -160,10 +162,12 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 			/>
 			{ isRenaming && (
 				<Modal
-					title={ __( 'Rename view' ) }
+					title={ __( 'Rename' ) }
 					onRequestClose={ () => {
 						setIsRenaming( false );
 					} }
+					focusOnMount="firstContentElement"
+					size="small"
 				>
 					<RenameItemModalContent
 						dataviewId={ dataviewId }

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+
 import {
 	trash,
 	pages,
@@ -11,6 +12,9 @@ import {
 	pending,
 	notAllowed,
 } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,21 +26,35 @@ import {
 	OPERATOR_IS_ANY,
 } from '../../utils/constants';
 
-export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
+export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
+		layout: {
+			primaryField: 'title',
+			styles: {
+				'featured-image': {
+					width: '1%',
+				},
+				title: {
+					maxWidth: 300,
+				},
+			},
+		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'featured-image',
-		primaryField: 'title',
+		layout: {
+			mediaField: 'featured-image',
+			primaryField: 'title',
+		},
 	},
 	[ LAYOUT_LIST ]: {
-		primaryField: 'title',
-		mediaField: 'featured-image',
+		layout: {
+			primaryField: 'title',
+			mediaField: 'featured-image',
+		},
 	},
 };
 
-const DEFAULT_PAGE_BASE = {
+const DEFAULT_POST_BASE = {
 	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
@@ -46,111 +64,118 @@ const DEFAULT_PAGE_BASE = {
 		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: {
-		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
-	},
+	fields: [ 'title', 'author', 'status' ],
+	layout: defaultLayouts[ LAYOUT_LIST ].layout,
 };
 
-export const DEFAULT_VIEWS = {
-	page: [
-		{
-			title: __( 'All pages' ),
-			slug: 'all',
-			icon: pages,
-			view: DEFAULT_PAGE_BASE,
+export function useDefaultViews( { postType } ) {
+	const labels = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return getPostType( postType )?.labels;
 		},
-		{
-			title: __( 'Published' ),
-			slug: 'published',
-			icon: published,
-			view: {
-				...DEFAULT_PAGE_BASE,
-				filters: [
-					{
-						field: 'status',
-						operator: OPERATOR_IS_ANY,
-						value: 'publish',
+		[ postType ]
+	);
+	return useMemo( () => {
+		return {
+			[ postType ]: [
+				{
+					title: labels?.all_items || __( 'All items' ),
+					slug: 'all',
+					icon: pages,
+					view: DEFAULT_POST_BASE,
+				},
+				{
+					title: __( 'Published' ),
+					slug: 'published',
+					icon: published,
+					view: {
+						...DEFAULT_POST_BASE,
+						filters: [
+							{
+								field: 'status',
+								operator: OPERATOR_IS_ANY,
+								value: 'publish',
+							},
+						],
 					},
-				],
-			},
-		},
-		{
-			title: __( 'Scheduled' ),
-			slug: 'future',
-			icon: scheduled,
-			view: {
-				...DEFAULT_PAGE_BASE,
-				filters: [
-					{
-						field: 'status',
-						operator: OPERATOR_IS_ANY,
-						value: 'future',
+				},
+				{
+					title: __( 'Scheduled' ),
+					slug: 'future',
+					icon: scheduled,
+					view: {
+						...DEFAULT_POST_BASE,
+						filters: [
+							{
+								field: 'status',
+								operator: OPERATOR_IS_ANY,
+								value: 'future',
+							},
+						],
 					},
-				],
-			},
-		},
-		{
-			title: __( 'Drafts' ),
-			slug: 'drafts',
-			icon: drafts,
-			view: {
-				...DEFAULT_PAGE_BASE,
-				filters: [
-					{
-						field: 'status',
-						operator: OPERATOR_IS_ANY,
-						value: 'draft',
+				},
+				{
+					title: __( 'Drafts' ),
+					slug: 'drafts',
+					icon: drafts,
+					view: {
+						...DEFAULT_POST_BASE,
+						filters: [
+							{
+								field: 'status',
+								operator: OPERATOR_IS_ANY,
+								value: 'draft',
+							},
+						],
 					},
-				],
-			},
-		},
-		{
-			title: __( 'Pending' ),
-			slug: 'pending',
-			icon: pending,
-			view: {
-				...DEFAULT_PAGE_BASE,
-				filters: [
-					{
-						field: 'status',
-						operator: OPERATOR_IS_ANY,
-						value: 'pending',
+				},
+				{
+					title: __( 'Pending' ),
+					slug: 'pending',
+					icon: pending,
+					view: {
+						...DEFAULT_POST_BASE,
+						filters: [
+							{
+								field: 'status',
+								operator: OPERATOR_IS_ANY,
+								value: 'pending',
+							},
+						],
 					},
-				],
-			},
-		},
-		{
-			title: __( 'Private' ),
-			slug: 'private',
-			icon: notAllowed,
-			view: {
-				...DEFAULT_PAGE_BASE,
-				filters: [
-					{
-						field: 'status',
-						operator: OPERATOR_IS_ANY,
-						value: 'private',
+				},
+				{
+					title: __( 'Private' ),
+					slug: 'private',
+					icon: notAllowed,
+					view: {
+						...DEFAULT_POST_BASE,
+						filters: [
+							{
+								field: 'status',
+								operator: OPERATOR_IS_ANY,
+								value: 'private',
+							},
+						],
 					},
-				],
-			},
-		},
-		{
-			title: __( 'Trash' ),
-			slug: 'trash',
-			icon: trash,
-			view: {
-				...DEFAULT_PAGE_BASE,
-				filters: [
-					{
-						field: 'status',
-						operator: OPERATOR_IS_ANY,
-						value: 'trash',
+				},
+				{
+					title: __( 'Trash' ),
+					slug: 'trash',
+					icon: trash,
+					view: {
+						...DEFAULT_POST_BASE,
+						filters: [
+							{
+								field: 'status',
+								operator: OPERATOR_IS_ANY,
+								value: 'trash',
+							},
+						],
 					},
-				],
-			},
-		},
-	],
-};
+				},
+			],
+		};
+	}, [ labels, postType ] );
+}

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

@@ -2,22 +2,57 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useRef, useEffect } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
-
-import { DEFAULT_VIEWS } from './default-views';
+import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
-const { useLocation } = unlock( routerPrivateApis );
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+/**
+ * Hook to switch to table layout when switching to the trash view.
+ * When going out of the trash view, it switches back to the previous layout if
+ * there was an automatic switch to table layout.
+ */
+function useSwitchToTableOnTrash() {
+	const {
+		params: { activeView, layout, ...restParams },
+	} = useLocation();
+	const history = useHistory();
+	const viewToSwitchOutOfTrash = useRef( undefined );
+	const previousActiveView = usePrevious( activeView );
+	useEffect( () => {
+		if ( activeView === 'trash' && previousActiveView !== 'trash' ) {
+			viewToSwitchOutOfTrash.current = layout || 'list';
+			history.push( { ...restParams, layout: 'table', activeView } );
+		} else if (
+			previousActiveView === 'trash' &&
+			activeView !== 'trash' &&
+			viewToSwitchOutOfTrash.current
+		) {
+			history.push( {
+				...restParams,
+				layout: viewToSwitchOutOfTrash.current,
+				activeView,
+			} );
+			viewToSwitchOutOfTrash.current = undefined;
+		}
+	}, [ previousActiveView, activeView, layout, history, restParams ] );
+}
+
 export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
+	useSwitchToTableOnTrash();
+	const DEFAULT_VIEWS = useDefaultViews( { postType } );
 	if ( ! postType ) {
 		return null;
 	}

package/src/components/sidebar-navigation-screen-global-styles/content.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import ColorVariations from '../global-styles/variations/variations-color';
+import TypographyVariations from '../global-styles/variations/variations-typography';
+
+const noop = () => {};
+
+export default function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings(),
+		};
+	}, [] );
+
+	const gap = 3;
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
+				<StyleVariationsContainer gap={ gap } />
+				<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
+				<TypographyVariations
+					title={ __( 'Typography' ) }
+					gap={ gap }
+				/>
+			</VStack>
+		</BlockEditorProvider>
+	);
+}