@wordpress/edit-site 6.11.0 → 6.12.1-next.082ed6819.0

package/src/components/global-styles/ui.js

@@ -20,6 +20,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -201,6 +202,11 @@ function GlobalStylesStyleBook() {
 					navigator.goTo( '/colors/palette' );
 					return;
 				}
+				if ( blockName === 'typography' ) {
+					// Go to typography Global Styles.
+					navigator.goTo( '/typography' );
+					return;
+				}
 
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
@@ -291,18 +297,52 @@ function GlobalStylesEditorCanvasContainerLink() {
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
 
-function GlobalStylesUI() {
+function useNavigatorSync( parentPath, onPathChange ) {
+	const navigator = useNavigator();
+	const { path: childPath } = navigator.location;
+	const previousParentPath = usePrevious( parentPath );
+	const previousChildPath = usePrevious( childPath );
+	useEffect( () => {
+		if ( parentPath !== childPath ) {
+			if ( parentPath !== previousParentPath ) {
+				navigator.goTo( parentPath );
+			} else if ( childPath !== previousChildPath ) {
+				onPathChange( childPath );
+			}
+		}
+	}, [
+		onPathChange,
+		parentPath,
+		previousChildPath,
+		previousParentPath,
+		childPath,
+		navigator,
+	] );
+}
+
+// This component is used to wrap the hook in order to conditionally execute it
+// when the parent component is used on controlled mode.
+function NavigationSync( { path: parentPath, onPathChange, children } ) {
+	useNavigatorSync( parentPath, onPathChange );
+	return children;
+}
+
+function GlobalStylesUI( { path, onPathChange } ) {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
 		[]
 	);
+
 	return (
 		<Navigator
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
+			{ path && onPathChange && (
+				<NavigationSync path={ path } onPathChange={ onPathChange } />
+			) }
 			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
 			</GlobalStylesNavigationScreen>

package/src/components/global-styles-renderer/index.js

@@ -10,17 +10,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
-function useGlobalStylesRenderer() {
-	const postType = useSelect( ( select ) => {
-		return select( editSiteStore ).getEditedPostType();
-	} );
-	const [ styles, settings ] = useGlobalStylesOutput(
-		postType !== TEMPLATE_POST_TYPE
-	);
+function useGlobalStylesRenderer( disableRootPadding ) {
+	const [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -41,8 +35,8 @@ function useGlobalStylesRenderer() {
 	}, [ styles, settings, updateSettings, getSettings ] );
 }
 
-export function GlobalStylesRenderer() {
-	useGlobalStylesRenderer();
+export function GlobalStylesRenderer( { disableRootPadding } ) {
+	useGlobalStylesRenderer( disableRootPadding );
 
 	return null;
 }

package/src/components/global-styles-sidebar/index.js

@@ -5,7 +5,7 @@ import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	store as editorStore,
@@ -29,7 +29,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
 	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view', path } = params;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
@@ -128,6 +128,20 @@ export default function GlobalStylesSidebar() {
 		);
 	};
 
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const previousActiveAreaRef = useRef( null );
+
+	useEffect( () => {
+		if ( path?.startsWith( '/wp_global_styles' ) && canvas === 'edit' ) {
+			previousActiveAreaRef.current =
+				getActiveComplementaryArea( 'core' );
+			enableComplementaryArea( 'core', 'edit-site/global-styles' );
+		} else if ( previousActiveAreaRef.current ) {
+			enableComplementaryArea( 'core', previousActiveAreaRef.current );
+		}
+	}, [ path, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"

package/src/components/layout/hooks.js

@@ -5,15 +5,9 @@ import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import useEditedEntityRecord from '../use-edited-entity-record';
-
 const MAX_LOADING_TIME = 10000; // 10 seconds
 
 export function useIsSiteEditorLoading() {
-	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
 	const [ loaded, setLoaded ] = useState( false );
 	const inLoadingPause = useSelect(
 		( select ) => {
@@ -64,5 +58,5 @@ export function useIsSiteEditorLoading() {
 		}
 	}, [ inLoadingPause ] );
 
-	return ! loaded || ! hasLoadedPost;
+	return ! loaded;
 }

package/src/components/layout/index.js

@@ -125,7 +125,12 @@ export default function Layout( { route } ) {
 												isResizableFrameOversized
 											}
 										/>
-										<SidebarContent routeKey={ routeKey }>
+										<SidebarContent
+											shouldAnimate={
+												routeKey !== 'styles-view'
+											}
+											routeKey={ routeKey }
+										>
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />

package/src/components/page-patterns/fields.js

@@ -10,7 +10,7 @@ import {
 	__experimentalHStack as HStack,
 	Button,
 	Tooltip,
-	Flex,
+	FlexBlock,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
@@ -25,7 +25,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import {
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
@@ -45,7 +44,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 			className="page-patterns-preview-field__button"
 			type="button"
 			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
-			aria-label={ item.title }
+			aria-label={ defaultGetTitle( item ) }
 			aria-describedby={ ariaDescribedBy }
 			aria-disabled={ item.type === PATTERN_TYPES.theme }
 		>
@@ -88,12 +87,12 @@ function PreviewField( { item } ) {
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
 				{ ! isEmpty && (
-					<Async>
+					<BlockPreview.Async>
 						<BlockPreview
 							blocks={ blocks }
 							viewportWidth={ item.viewportWidth }
 						/>
-					</Async>
+					</BlockPreview.Async>
 				) }
 			</PreviewWrapper>
 			{ !! description && (
@@ -123,12 +122,7 @@ function TitleField( { item } ) {
 	const title = decodeEntities( defaultGetTitle( item ) );
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<Flex
-				as="div"
-				gap={ 0 }
-				justify="flex-start"
-				className="edit-site-patterns__pattern-title"
-			>
+			<FlexBlock className="edit-site-patterns__pattern-title">
 				{ item.type === PATTERN_TYPES.theme ? (
 					title
 				) : (
@@ -143,7 +137,7 @@ function TitleField( { item } ) {
 						{ title }
 					</Button>
 				) }
-			</Flex>
+			</FlexBlock>
 			{ item.type === PATTERN_TYPES.theme && (
 				<Tooltip
 					placement="top"

package/src/components/page-patterns/header.js

@@ -9,7 +9,7 @@ import {
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
@@ -32,7 +32,8 @@ export default function PatternsHeader( {
 	const { patternCategories } = usePatternCategories();
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
 		[]
 	);
 

package/src/components/page-patterns/style.scss

@@ -41,10 +41,6 @@
 	flex-shrink: 0;
 }
 
-.edit-site-patterns__pattern-lock-icon {
-	min-width: min-content;
-}
-
 .edit-site-patterns__section-header {
 	border-bottom: 1px solid #f0f0f0;
 	padding: $grid-unit-20 $grid-unit-60;
@@ -77,7 +73,6 @@
 
 .edit-site-patterns__pattern-title {
 	display: block;
-	width: 100%;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/src/components/page-patterns/use-patterns.js

@@ -4,7 +4,6 @@
 import { parse } from '@wordpress/blocks';
 import { useSelect, createSelector } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -28,8 +27,7 @@ const selectTemplateParts = createSelector(
 	( select, categoryId, search = '' ) => {
 		const { getEntityRecords, isResolving: isResolvingSelector } =
 			select( coreStore );
-		const { __experimentalGetDefaultTemplatePartAreas } =
-			select( editorStore );
+
 		const query = { per_page: -1 };
 		const templateParts =
 			getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
@@ -38,7 +36,10 @@ const selectTemplateParts = createSelector(
 		// In the case where a custom template part area has been removed we need
 		// the current list of areas to cross check against so orphaned template
 		// parts can be treated as uncategorized.
-		const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+		const knownAreas =
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [];
+
 		const templatePartAreas = knownAreas.map( ( area ) => area.area );
 
 		const templatePartHasCategory = ( item, category ) => {
@@ -78,7 +79,8 @@ const selectTemplateParts = createSelector(
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 },
 		] ),
-		select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.default_template_part_areas,
 	]
 );
 
@@ -156,7 +158,7 @@ const selectPatterns = createSelector(
 				categoryId,
 				hasCategory: ( item, currentCategory ) => {
 					if ( item.type === PATTERN_TYPES.user ) {
-						return item.wp_pattern_category.some(
+						return item.wp_pattern_category?.some(
 							( catId ) =>
 								userPatternCategories.find(
 									( cat ) => cat.id === catId
@@ -173,7 +175,7 @@ const selectPatterns = createSelector(
 						return (
 							userPatternCategories?.length &&
 							( ! item.wp_pattern_category?.length ||
-								! item.wp_pattern_category.some( ( catId ) =>
+								! item.wp_pattern_category?.some( ( catId ) =>
 									userPatternCategories.find(
 										( cat ) => cat.id === catId
 									)

package/src/components/page-templates/fields.js

@@ -20,7 +20,6 @@ import { EditorProvider } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import { default as Link, useLink } from '../routes/link';
 import { useAddedBy } from './hooks';
 
@@ -63,9 +62,9 @@ function PreviewField( { item } ) {
 				>
 					{ isEmpty && __( 'Empty template' ) }
 					{ ! isEmpty && (
-						<Async>
+						<BlockPreview.Async>
 							<BlockPreview blocks={ blocks } />
-						</Async>
+						</BlockPreview.Async>
 					) }
 				</button>
 			</div>

package/src/components/page-templates/style.scss

@@ -60,6 +60,7 @@
 
 	.dataviews-view-table & {
 		margin-bottom: $grid-unit-10;
+		display: block;
 	}
 }
 

package/src/components/post-edit/index.js

@@ -18,10 +18,17 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import Page from '../page';
-import usePostFields from '../post-fields';
 import { unlock } from '../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
+
+const fieldsWithBulkEditSupport = [
+	'title',
+	'status',
+	'date',
+	'author',
+	'comment_status',
+];
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
@@ -58,27 +65,34 @@ function PostEditForm( { postType, postId } ) {
 			} ),
 		[ _fields ]
 	);
-	const form = {
-		type: 'panel',
-		fields: [
-			'featured_media',
-			'title',
-			'author',
-			'date',
-			'slug',
-			'parent',
-			'comment_status',
-		],
-	};
-
-	const fieldsWithBulkEditSupport = [
-		'title',
-		'status',
-		'date',
-		'author',
-		'comment_status',
-	];
 
+	const form = useMemo(
+		() => ( {
+			type: 'panel',
+			fields: [
+				{
+					id: 'featured_media',
+					layout: 'regular',
+				},
+				'title',
+				{
+					id: 'status',
+					label: __( 'Status & Visibility' ),
+					children: [ 'status', 'password' ],
+				},
+				'author',
+				'date',
+				'slug',
+				'parent',
+				'comment_status',
+			].filter(
+				( field ) =>
+					ids.length === 1 ||
+					fieldsWithBulkEditSupport.includes( field )
+			),
+		} ),
+		[ ids ]
+	);
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
 			if (
@@ -117,16 +131,7 @@ function PostEditForm( { postType, postId } ) {
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
-				form={
-					ids.length === 1
-						? form
-						: {
-								...form,
-								fields: form.fields.filter( ( field ) =>
-									fieldsWithBulkEditSupport.includes( field )
-								),
-						  }
-				}
+				form={ form }
 				onChange={ onChange }
 			/>
 		</VStack>

package/src/components/post-edit/style.scss

@@ -7,3 +7,10 @@
 		justify-content: center;
 	}
 }
+
+.dataforms-layouts-panel__field-dropdown {
+	.fields-controls__password {
+		border-top: $border-width solid $gray-200;
+		padding-top: $grid-unit-20;
+	}
+}

package/src/components/post-list/index.js

@@ -32,9 +32,8 @@ import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { usePrevious } from '@wordpress/compose';
-import usePostFields from '../post-fields';
 
-const { usePostActions } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
 const EMPTY_ARRAY = [];
@@ -208,9 +207,7 @@ export default function PostList( { postType } ) {
 		return found?.filters ?? [];
 	};
 
-	const { isLoading: isLoadingFields, fields: _fields } = usePostFields(
-		view.type
-	);
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields();
 	const fields = useMemo( () => {
 		const activeViewFilters = getActiveViewFilters(
 			defaultViews,
@@ -402,6 +399,14 @@ export default function PostList( { postType } ) {
 				onChangeView={ setView }
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
+				isItemClickable={ ( item ) => item.status !== 'trash' }
+				onClickItem={ ( { id } ) => {
+					history.push( {
+						postId: id,
+						postType,
+						canvas: 'edit',
+					} );
+				} }
 				getItemId={ getItemId }
 				defaultLayouts={ defaultLayouts }
 				header={

package/src/components/post-list/style.scss

@@ -9,7 +9,9 @@
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-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;
@@ -46,7 +48,9 @@
 	border-radius: $grid-unit-05;
 
 	&:focus-visible {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
@@ -54,7 +58,9 @@
 
 .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);
+		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);
 	}
 }
@@ -64,6 +70,26 @@
 	overflow: hidden;
 }
 
+.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable
+.edit-site-post-list__title
+span,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable
+.edit-site-post-list__title
+span {
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	display: block;
+	flex-grow: 0;
+	color: $gray-900;
+
+	&:hover {
+		color: var(--wp-admin-theme-color);
+	}
+	@include link-reset();
+}
+
 .edit-site-post-list__title-badge {
 	background: $gray-100;
 	color: $gray-800;

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

@@ -10,17 +10,16 @@ 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 useActiveRoute from './router';
+import { useRegisterPostsAppRoutes } from '../posts-app-routes';
 import { unlock } from '../../lock-unlock';
+import useActiveRoute from '../layout/router';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function PostsLayout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
+	useRegisterPostsAppRoutes();
 	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }

package/src/components/posts-app-routes/home.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function HomeMobileView() {
+	const { params = {} } = useLocation();
+	const { canvas = 'view' } = params;
+
+	return canvas === 'edit' ? (
+		<Editor isPostsList />
+	) : (
+		<SidebarNavigationScreenMain />
+	);
+}
+
+export const homeRoute = {
+	name: 'home',
+	match: () => {
+		return true;
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <Editor isPostsList />,
+		mobile: HomeMobileView,
+	},
+};

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as siteEditorStore } from '../../store';
+import { homeRoute } from './home';
+import { postsListViewQuickEditRoute } from './posts-list-view-quick-edit';
+import { postsListViewRoute } from './posts-list-view';
+import { postsViewQuickEditRoute } from './posts-view-quick-edit';
+import { postsViewRoute } from './posts-view';
+import { postsEditRoute } from './posts-edit';
+
+const routes = [
+	postsListViewQuickEditRoute,
+	postsListViewRoute,
+	postsViewQuickEditRoute,
+	postsViewRoute,
+	postsEditRoute,
+	homeRoute,
+];
+
+export function useRegisterPostsAppRoutes() {
+	const registry = useRegistry();
+	const { registerRoute } = unlock( useDispatch( siteEditorStore ) );
+	useEffect( () => {
+		registry.batch( () => {
+			routes.forEach( registerRoute );
+		} );
+	}, [ registry, registerRoute ] );
+}