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

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 ] );
+}

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+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';
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		mobile: <Editor isPostsList />,
+		preview: <Editor isPostsList />,
+	},
+};

package/src/components/posts-app-routes/posts-list-view-quick-edit.js

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

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import Editor from '../editor';
+
+export const postsListViewRoute = {
+	name: 'posts-list-view',
+	match: ( params ) => {
+		return (
+			params.isCustom !== 'true' &&
+			( params.layout ?? 'list' ) === 'list' &&
+			! params.quickEdit &&
+			params.postType === 'post' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		preview: <Editor isPostsList />,
+		mobile: <PostList postType="post" />,
+	},
+	widths: {
+		content: 380,
+	},
+};

package/src/components/posts-app-routes/posts-view-quick-edit.js

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

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+export const postsViewRoute = {
+	name: 'posts-view',
+	match: ( params ) => {
+		return (
+			( params.isCustom === 'true' ||
+				( params.layout ?? 'list' ) !== 'list' ) &&
+			! params.quickEdit &&
+			params.postType === 'post' &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		mobile: <PostList postType="post" />,
+	},
+};

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

@@ -18,7 +18,7 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.components-item-group {
+	.edit-site-sidebar-navigation-screen-details-footer {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}
@@ -127,9 +127,14 @@
 	bottom: 0;
 	background-color: $gray-900;
 	gap: 0;
-	padding: $grid-unit-20 0;
+	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
+
+	.components-item-group {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
 }
 
 /* In general style overrides are discouraged.

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

@@ -1,28 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import {
-	Icon,
-	__experimentalItemGroup as ItemGroup,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { backup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import {
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-} from '../sidebar-navigation-screen-details-panel';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenDetailsFooter( {
 	record,
+	revisionsCount,
 	...otherProps
 } ) {
 	/*
@@ -34,9 +25,20 @@ export default function SidebarNavigationScreenDetailsFooter( {
 	const hrefProps = {};
 	const lastRevisionId =
 		record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
-	const revisionsCount =
-		record?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-	// Enable the revisions link if there is a last revision and there are more than one revisions.
+
+	// Use incoming prop first, then the record's version history, if available.
+	revisionsCount =
+		revisionsCount ||
+		record?._links?.[ 'version-history' ]?.[ 0 ]?.count ||
+		0;
+
+	/*
+	 * Enable the revisions link if there is a last revision and there is more than one revision.
+	 * This link is used for theme assets, e.g., templates, which have no database record until they're edited.
+	 * For these files there's only a "revision" after they're edited twice,
+	 * which means the revision.php page won't display a proper diff.
+	 * See: https://github.com/WordPress/gutenberg/issues/49164.
+	 */
 	if ( lastRevisionId && revisionsCount > 1 ) {
 		hrefProps.href = addQueryArgs( 'revision.php', {
 			revision: record?._links[ 'predecessor-version' ][ 0 ].id,
@@ -44,33 +46,20 @@ export default function SidebarNavigationScreenDetailsFooter( {
 		hrefProps.as = 'a';
 	}
 	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
+		<ItemGroup
+			size="large"
+			className="edit-site-sidebar-navigation-screen-details-footer"
+		>
 			<SidebarNavigationItem
-				aria-label={ __( 'Revisions' ) }
+				icon={ backup }
 				{ ...hrefProps }
 				{ ...otherProps }
 			>
-				<SidebarNavigationScreenDetailsPanelRow justify="space-between">
-					<SidebarNavigationScreenDetailsPanelLabel>
-						{ __( 'Last modified' ) }
-					</SidebarNavigationScreenDetailsPanelLabel>
-					<SidebarNavigationScreenDetailsPanelValue>
-						{ createInterpolateElement(
-							sprintf(
-								/* translators: %s: is the relative time when the post was last modified. */
-								__( '<time>%s</time>' ),
-								humanTimeDiff( record.modified )
-							),
-							{
-								time: <time dateTime={ record.modified } />,
-							}
-						) }
-					</SidebarNavigationScreenDetailsPanelValue>
-					<Icon
-						className="edit-site-sidebar-navigation-screen-details-footer__icon"
-						icon={ backup }
-					/>
-				</SidebarNavigationScreenDetailsPanelRow>
+				{ sprintf(
+					/* translators: %d: Number of Styles revisions. */
+					_n( '%d Revision', '%d Revisions', revisionsCount ),
+					revisionsCount
+				) }
 			</SidebarNavigationItem>
 		</ItemGroup>
 	);

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

@@ -5,8 +5,4 @@
 	div.edit-site-sidebar-navigation-item.components-item[aria-current] {
 		background: none;
 	}
-	.edit-site-sidebar-navigation-screen-details-footer__icon {
-		margin-left: auto;
-		fill: $gray-600;
-	}
 }

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

@@ -48,24 +48,15 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 export default function SidebarNavigationScreenGlobalStyles() {
 	const history = useHistory();
 	const { params } = useLocation();
-	const { revisions, isLoading: isLoadingRevisions } =
-		useGlobalStylesRevisions();
+	const {
+		revisions,
+		isLoading: isLoadingRevisions,
+		revisionsCount,
+	} = useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { revisionsCount } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-		return {
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
@@ -95,10 +86,9 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
 	// If there are no revisions, do not render a footer.
-	const hasRevisions = revisionsCount > 0;
-	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
-		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
+		!! revisionsCount && ! isLoadingRevisions;
+
 	return (
 		<>
 			<SidebarNavigationScreen
@@ -114,6 +104,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 					shouldShowGlobalStylesFooter && (
 						<SidebarNavigationScreenDetailsFooter
 							record={ revisions?.[ 0 ] }
+							revisionsCount={ revisionsCount }
 							onClick={ openRevisions }
 						/>
 					)

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

@@ -27,6 +27,14 @@
 			color: $white;
 		}
 	}
+
+	.block-editor-list-view-block__menu {
+		color: $gray-600;
+		&:hover,
+		&:focus {
+			color: $white;
+		}
+	}
 }
 
 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {

package/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js

@@ -69,7 +69,7 @@ export default function usePatternCategories() {
 			// If the pattern has no categories, add it to uncategorized.
 			if (
 				! pattern.wp_pattern_category?.length ||
-				! pattern.wp_pattern_category.some( ( catId ) =>
+				! pattern.wp_pattern_category?.some( ( catId ) =>
 					userPatternCategories.find( ( cat ) => cat.id === catId )
 				)
 			) {

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -18,7 +17,8 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
 		[]
 	);
 
@@ -43,7 +43,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 		const key = accumulator[ item.area ]
 			? item.area
 			: TEMPLATE_PART_AREA_DEFAULT_CATEGORY;
-		accumulator[ key ].templateParts.push( item );
+		accumulator[ key ]?.templateParts?.push( item );
 		return accumulator;
 	}, knownAreas );
 

package/src/components/site-editor-routes/README.md

@@ -2,7 +2,7 @@
 
 ## Areas
 
-When `canvasMode` is not `edit`, the areas avaliable to use are:
+When `canvasMode` is not `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |
@@ -12,7 +12,7 @@ When `canvasMode` is not `edit`, the areas avaliable to use are:
 | `edit` | Rendered if provided. | Not rendered. |
 | `mobile` | Not rendered | Rendered as full-screen, if provided. |
 
-When `canvasMode` is `edit`, the areas avaliable to use are:
+When `canvasMode` is `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |

package/src/components/site-editor-routes/index.js

@@ -15,7 +15,6 @@ import { navigationViewRoute } from './navigation-view';
 import { navigationEditRoute } from './navigation-edit';
 import { navigationItemEditRoute } from './navigation-item-edit';
 import { navigationItemViewRoute } from './navigation-item-view';
-import { stylesEditRoute } from './styles-edit';
 import { stylesViewRoute } from './styles-view';
 import { patternsEditRoute } from './patterns-edit';
 import { patternsViewRoute } from './patterns-view';
@@ -40,7 +39,6 @@ const routes = [
 	patternsViewRoute,
 	patternsEditRoute,
 	stylesViewRoute,
-	stylesEditRoute,
 	navigationItemViewRoute,
 	navigationItemEditRoute,
 	navigationViewRoute,

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

@@ -4,7 +4,7 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 	margin-right: $grid-unit-15;
-	height: $grid-unit-70;
+	height: $header-height;
 }
 
 .edit-site-site-hub__actions {

package/src/components/style-book/examples.tsx

@@ -150,7 +150,18 @@ function getOverviewBlockExamples(
 				name: blockName,
 				title: blockType.title,
 				category: 'overview',
-				blocks: getBlockFromExample( blockName, blockType.example ),
+				/*
+				 * CSS generated from style attributes will take precedence over global styles CSS,
+				 * so remove the style attribute from the example to ensure the example
+				 * demonstrates changes to global styles.
+				 */
+				blocks: getBlockFromExample( blockName, {
+					...blockType.example,
+					attributes: {
+						...blockType.example.attributes,
+						style: undefined,
+					},
+				} ),
 			};
 			examples.push( blockExample );
 		}
@@ -179,7 +190,18 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 			name: blockType.name,
 			title: blockType.title,
 			category: blockType.category,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
+			/*
+			 * CSS generated from style attributes will take precedence over global styles CSS,
+			 * so remove the style attribute from the example to ensure the example
+			 * demonstrates changes to global styles.
+			 */
+			blocks: getBlockFromExample( blockType.name, {
+				...blockType.example,
+				attributes: {
+					...blockType.example.attributes,
+					style: undefined,
+				},
+			} ),
 		} ) );
 	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
 

package/src/index.js

@@ -10,10 +10,7 @@ import {
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { createRoot, StrictMode } from '@wordpress/element';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
@@ -88,15 +85,6 @@ export function initializeEditor( id, settings ) {
 
 	dispatch( editSiteStore ).updateSettings( settings );
 
-	// Keep the defaultTemplateTypes in the core/editor settings too,
-	// so that they can be selected with core/editor selectors in any editor.
-	// This is needed because edit-site doesn't initialize with EditorProvider,
-	// which internally uses updateEditorSettings as well.
-	dispatch( editorStore ).updateEditorSettings( {
-		defaultTemplateTypes: settings.defaultTemplateTypes,
-		defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
-	} );
-
 	// Prevent the default browser action for files dropped outside of dropzones.
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );