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

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

@@ -9,21 +9,10 @@ import { useEffect } from '@wordpress/element';
  */
 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';
+import { postsRoute } from './posts';
+import { postItemRoute } from './post-item';
 
-const routes = [
-	postsListViewQuickEditRoute,
-	postsListViewRoute,
-	postsViewQuickEditRoute,
-	postsViewRoute,
-	postsEditRoute,
-	homeRoute,
-];
+const routes = [ postItemRoute, postsRoute ];
 
 export function useRegisterPostsAppRoutes() {
 	const registry = useRegistry();

package/src/components/posts-app-routes/{posts-edit.js → post-item.js}

@@ -6,25 +6,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PostList from '../post-list';
+import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import Editor from '../editor';
 
-export const postsEditRoute = {
-	name: 'posts-edit',
-	match: ( params ) => {
-		return params.postType === 'post' && params.canvas === 'edit';
-	},
+export const postItemRoute = {
+	name: 'post-item',
+	path: '/post/:postId',
 	areas: {
 		sidebar: (
 			<SidebarNavigationScreen
 				title={ __( 'Posts' ) }
 				isRoot
-				content={ <DataViewsSidebarContent /> }
+				content={ <DataViewsSidebarContent postType="post" /> }
 			/>
 		),
-		content: <PostList postType="post" />,
 		mobile: <Editor isPostsList />,
 		preview: <Editor isPostsList />,
 	},

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

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePostsView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? <Editor /> : <PostList postType="post" />;
+}
+
+export const postsRoute = {
+	name: 'posts',
+	path: '/',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent postType="post" /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		preview( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? <Editor isPostsList /> : undefined;
+		},
+		mobile: <MobilePostsView />,
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+			return hasQuickEdit ? (
+				<PostEdit postType="post" postId={ query.postId } />
+			) : undefined;
+		},
+	},
+	widths: {
+		content( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? 380 : undefined;
+		},
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+			return hasQuickEdit ? 380 : undefined;
+		},
+	},
+};

package/src/components/resizable-frame/index.js

@@ -20,6 +20,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { addQueryArgs } from '@wordpress/url';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -88,8 +89,8 @@ function ResizableFrame( {
 	innerContentStyle,
 } ) {
 	const history = useHistory();
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { path, query } = useLocation();
+	const { canvas = 'view' } = query;
 	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
@@ -158,12 +159,10 @@ function ResizableFrame( {
 			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
-			history.push(
-				{
-					...params,
+			history.navigate(
+				addQueryArgs( path, {
 					canvas: 'edit',
-				},
-				undefined,
+				} ),
 				{
 					transition: 'canvas-mode-edit-transition',
 				}

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

@@ -31,7 +31,7 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
-const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
 	let activateSaveLabel;
 	if ( isDirtyProps.isDirty ) {
@@ -75,14 +75,20 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 				onSave,
 				saveEnabled: true,
 				saveLabel: activateSaveLabel,
+				renderDialog,
 			} }
 		/>
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog } ) => {
 	if ( isPreviewingTheme() ) {
-		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
+		return (
+			<EntitiesSavedStatesForPreview
+				onClose={ onClose }
+				renderDialog={ renderDialog }
+			/>
+		);
 	}
 	return (
 		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
@@ -90,8 +96,8 @@ const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 };
 
 export default function SavePanel() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
 	const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => {
 		const {
 			__experimentalGetDirtyEntityRecords,

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

@@ -14,6 +14,7 @@ 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';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -22,10 +23,11 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function AddNewItemModalContent( { type, setIsAdding } ) {
 	const history = useHistory();
+	const { path } = useLocation();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
@@ -64,14 +66,12 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						content: JSON.stringify( defaultViews[ 0 ].view ),
 					}
 				);
-				const {
-					params: { postType },
-				} = history.getLocationWithParams();
-				history.push( {
-					postType,
-					activeView: savedRecord.id,
-					isCustom: 'true',
-				} );
+				history.navigate(
+					addQueryArgs( path, {
+						activeView: savedRecord.id,
+						isCustom: 'true',
+					} )
+				);
 				setIsSaving( false );
 				setIsAdding( false );
 			} }

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

@@ -9,11 +9,11 @@ import clsx from 'clsx';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { VIEW_LAYOUTS } from '@wordpress/dataviews';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
@@ -28,9 +28,7 @@ export default function DataViewItem( {
 	isCustom,
 	suffix,
 } ) {
-	const {
-		params: { postType },
-	} = useLocation();
+	const { path } = useLocation();
 
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
@@ -39,12 +37,11 @@ export default function DataViewItem( {
 	if ( activeView === 'all' ) {
 		activeView = undefined;
 	}
-	const linkInfo = useLink( {
-		postType,
+	const query = {
 		layout: type,
 		activeView,
 		isCustom: isCustom ? 'true' : undefined,
-	} );
+	};
 	return (
 		<HStack
 			justify="flex-start"
@@ -54,7 +51,7 @@ export default function DataViewItem( {
 		>
 			<SidebarNavigationItem
 				icon={ iconToUse }
-				{ ...linkInfo }
+				to={ addQueryArgs( path, query ) }
 				aria-current={ isActive ? 'true' : undefined }
 			>
 				{ title }

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

@@ -27,28 +27,9 @@ import {
 } from '../../utils/constants';
 
 export const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		layout: {
-			primaryField: 'title',
-			styles: {
-				title: {
-					maxWidth: 300,
-				},
-			},
-		},
-	},
-	[ LAYOUT_GRID ]: {
-		layout: {
-			mediaField: 'featured_media',
-			primaryField: 'title',
-		},
-	},
-	[ LAYOUT_LIST ]: {
-		layout: {
-			primaryField: 'title',
-			mediaField: 'featured_media',
-		},
-	},
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
 };
 
 const DEFAULT_POST_BASE = {
@@ -61,8 +42,10 @@ const DEFAULT_POST_BASE = {
 		field: 'date',
 		direction: 'desc',
 	},
-	fields: [ 'title', 'author', 'status' ],
-	layout: defaultLayouts[ LAYOUT_LIST ].layout,
+	titleField: 'title',
+	mediaField: 'featured_media',
+	fields: [ 'author', 'status' ],
+	...defaultLayouts[ LAYOUT_LIST ],
 };
 
 export function useDefaultViews( { postType } ) {

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

@@ -14,9 +14,9 @@ import CustomDataViewsList from './custom-dataviews-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function DataViewsSidebarContent() {
+export default function DataViewsSidebarContent( { postType } ) {
 	const {
-		params: { postType, activeView = 'all', isCustom = 'false' },
+		query: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
 	const defaultViews = useDefaultViews( { postType } );
 	if ( ! postType ) {

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

@@ -19,11 +19,11 @@
 	&:focus,
 	&[aria-current] {
 		color: $gray-200;
-		background: $gray-800;
 	}
 
 	&.is-selected {
-		background: var(--wp-admin-theme-color);
+		background: $gray-800;
+		font-weight: $font-weight-medium;
 		color: $white;
 	}
 }

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

@@ -9,6 +9,7 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
-const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
@@ -63,28 +63,23 @@ const GlobalStylesPageActions = ( {
 };
 
 export default function GlobalStylesUIWrapper() {
-	const { params } = useLocation();
+	const { path, query } = useLocation();
 	const history = useHistory();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view' } = query;
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const pathWithPrefix = params.path;
-	const [ path, onPathChange ] = useMemo( () => {
-		const processedPath = pathWithPrefix.substring(
-			GLOBAL_STYLES_PATH_PREFIX.length
-		);
+	const [ section, onChangeSection ] = useMemo( () => {
 		return [
-			processedPath ? processedPath : '/',
-			( newPath ) => {
-				history.push( {
-					path:
-						! newPath || newPath === '/'
-							? GLOBAL_STYLES_PATH_PREFIX
-							: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
-				} );
+			query.section ?? '/',
+			( updatedSection ) => {
+				history.navigate(
+					addQueryArgs( path, {
+						section: updatedSection,
+					} )
+				);
 			},
 		];
-	}, [ pathWithPrefix, history ] );
+	}, [ path, query.section, history ] );
 
 	return (
 		<>
@@ -100,7 +95,10 @@ export default function GlobalStylesUIWrapper() {
 				className="edit-site-styles"
 				title={ __( 'Styles' ) }
 			>
-				<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
+				<GlobalStylesUI
+					path={ section }
+					onPathChange={ onChangeSection }
+				/>
 			</Page>
 			{ canvas === 'view' && isStyleBookOpened && (
 				<StyleBook
@@ -111,17 +109,13 @@ export default function GlobalStylesUIWrapper() {
 						// Match '/blocks/core%2Fbutton' and
 						// '/blocks/core%2Fbutton/typography', but not
 						// '/blocks/core%2Fbuttons'.
-						path ===
-							`/wp_global_styles/blocks/${ encodeURIComponent(
-								blockName
-							) }` ||
-						path.startsWith(
-							`/wp_global_styles/blocks/${ encodeURIComponent(
-								blockName
-							) }/`
+						section ===
+							`/blocks/${ encodeURIComponent( blockName ) }` ||
+						section.startsWith(
+							`/blocks/${ encodeURIComponent( blockName ) }/`
 						)
 					}
-					path={ path }
+					path={ section }
 					onSelect={ ( blockName ) => {
 						if (
 							STYLE_BOOK_COLOR_GROUPS.find(
@@ -129,17 +123,17 @@ export default function GlobalStylesUIWrapper() {
 							)
 						) {
 							// Go to color palettes Global Styles.
-							onPathChange( '/colors/palette' );
+							onChangeSection( '/colors/palette' );
 							return;
 						}
 						if ( blockName === 'typography' ) {
 							// Go to typography Global Styles.
-							onPathChange( '/typography' );
+							onChangeSection( '/typography' );
 							return;
 						}
 
 						// Now go to the selected block.
-						onPathChange(
+						onChangeSection(
 							`/blocks/${ encodeURIComponent( blockName ) }`
 						);
 					} }

package/src/components/sidebar-navigation-item/index.js

@@ -22,7 +22,7 @@ import { useContext } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { SidebarNavigationContext } from '../sidebar';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLink } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationItem( {
 	className,
@@ -30,7 +30,7 @@ export default function SidebarNavigationItem( {
 	withChevron = false,
 	suffix,
 	uid,
-	params,
+	to,
 	onClick,
 	children,
 	...props
@@ -42,12 +42,13 @@ export default function SidebarNavigationItem( {
 		if ( onClick ) {
 			onClick( e );
 			navigate( 'forward' );
-		} else if ( params ) {
+		} else if ( to ) {
 			e.preventDefault();
-			history.push( params );
+			history.navigate( to );
 			navigate( 'forward', `[id="${ uid }"]` );
 		}
 	}
+	const linkProps = useLink( to );
 
 	return (
 		<Item
@@ -56,8 +57,9 @@ export default function SidebarNavigationItem( {
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
-			onClick={ handleClick }
 			id={ uid }
+			onClick={ handleClick }
+			href={ to ? linkProps.href : undefined }
 			{ ...props }
 		>
 			<HStack justify="flex-start">

package/src/components/sidebar-navigation-item/style.scss

@@ -9,7 +9,6 @@
 	&:focus,
 	&[aria-current="true"] {
 		color: $gray-200;
-		background: $gray-800;
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
 			fill: $gray-200;
@@ -17,7 +16,7 @@
 	}
 
 	&[aria-current="true"] {
-		background: var(--wp-admin-theme-color);
+		background: $gray-800;
 		color: $white;
 	}
 

package/src/components/sidebar-navigation-screen/index.js

@@ -83,7 +83,7 @@ export default function SidebarNavigationScreen( {
 					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								history.push( backPath );
+								history.navigate( backPath );
 								navigate( 'back' );
 							} }
 							icon={ icon }
@@ -97,7 +97,7 @@ export default function SidebarNavigationScreen( {
 							label={
 								dashboardLinkText || __( 'Go to the Dashboard' )
 							}
-							href={ dashboardLink || 'index.php' }
+							href={ dashboardLink }
 						/>
 					) }
 					<Heading

package/src/components/sidebar-navigation-screen/style.scss

@@ -18,7 +18,7 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.edit-site-sidebar-navigation-screen-details-footer {
+	.components-item-group {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}
@@ -131,7 +131,7 @@
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
 
-	.components-item-group {
+	.edit-site-sidebar-navigation-screen-details-footer {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}

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

@@ -2,54 +2,26 @@
  * 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"
 		>
-			<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>
+			<StyleVariationsContainer gap={ gap } />
+			<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
+			<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />
+		</VStack>
 	);
 }