@wordpress/edit-site 6.1.0 → 6.3.0

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

@@ -2,7 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { trash, pages, drafts, unseen, inbox } from '@wordpress/icons';
+
+import {
+	trash,
+	pages,
+	drafts,
+	published,
+	scheduled,
+	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
@@ -28,7 +40,7 @@ export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
 	},
 };
 
-const DEFAULT_PAGE_BASE = {
+const DEFAULT_POST_BASE = {
 	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
@@ -38,111 +50,120 @@ 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' ],
+	fields: [ 'title', 'author', 'status' ],
 	layout: {
 		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
 	},
 };
 
-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: pages,
-			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: pages,
-			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: inbox,
-			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: unseen,
-			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,13 +2,12 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * 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';
@@ -18,6 +17,7 @@ export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
+	const DEFAULT_VIEWS = useDefaultViews( { postType } );
 	if ( ! postType ) {
 		return null;
 	}

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

@@ -26,10 +26,7 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import ColorVariations from '../global-styles/variations/variations-color';
 import TypographyVariations from '../global-styles/variations/variations-typography';
-import {
-	useColorVariations,
-	useTypographyVariations,
-} from '../global-styles/hooks';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const noop = () => {};
 
@@ -75,8 +72,12 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		};
 	}, [] );
 
-	const colorVariations = useColorVariations();
-	const typographyVariations = useTypographyVariations();
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( [
+		'color',
+	] );
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( [ 'typography' ] );
+
 	const gap = 3;
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -22,7 +22,12 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 		titleHasChanged && notEmptyString( editedMenuTitle );
 
 	return (
-		<Modal title={ __( 'Rename' ) } onRequestClose={ onClose }>
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
 			<form className="sidebar-navigation__rename-modal-form">
 				<VStack spacing="3">
 					<TextControl
@@ -31,6 +36,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }
+						label={ __( 'Name' ) }
 					/>
 					<HStack justify="right">
 						<Button
@@ -43,7 +49,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 
 						<Button
 							__next40pxDefaultSize
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"

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

@@ -58,13 +58,21 @@ export default function usePatternCategories() {
 
 		// Update the category counts to reflect user registered patterns.
 		userPatterns.forEach( ( pattern ) => {
-			pattern.categories?.forEach( ( category ) => {
+			pattern.wp_pattern_category?.forEach( ( catId ) => {
+				const category = userPatternCategories.find(
+					( cat ) => cat.id === catId
+				)?.name;
 				if ( categoryMap[ category ] ) {
 					categoryMap[ category ].count += 1;
 				}
 			} );
 			// If the pattern has no categories, add it to uncategorized.
-			if ( ! pattern.categories?.length ) {
+			if (
+				! pattern.wp_pattern_category?.length ||
+				! pattern.wp_pattern_category.some( ( catId ) =>
+					userPatternCategories.find( ( cat ) => cat.id === catId )
+				)
+			) {
 				categoryMap.uncategorized.count += 1;
 			}
 		} );

package/src/components/site-hub/index.js

@@ -11,11 +11,12 @@ import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { memo, forwardRef } from '@wordpress/element';
+import { memo, forwardRef, useContext } from '@wordpress/element';
 import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +24,8 @@ import { filterURLForDisplay } from '@wordpress/url';
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
+const { useHistory } = unlock( routerPrivateApis );
+import { SidebarNavigationContext } from '../sidebar';
 
 const SiteHub = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
@@ -103,3 +106,83 @@ const SiteHub = memo(
 );
 
 export default SiteHub;
+
+export const SiteHubMobile = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const history = useHistory();
+		const { navigate } = useContext( SidebarNavigationContext );
+
+		const { homeUrl, siteTitle } = useSelect( ( select ) => {
+			const {
+				getSite,
+				getUnstableBase, // Site index.
+			} = select( coreStore );
+			const _site = getSite();
+			return {
+				homeUrl: getUnstableBase()?.home,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
+			};
+		}, [] );
+		const { open: openCommandCenter } = useDispatch( commandsStore );
+
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
+					>
+						<Button
+							ref={ ref }
+							label={ __( 'Go to Site Editor' ) }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5)',
+								borderRadius: 4,
+							} }
+							onClick={ () => {
+								history.push( {} );
+								navigate( 'back' );
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</div>
+
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
+						<HStack
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
+						>
+							<Button
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
+						</HStack>
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -27,7 +27,7 @@ const postTypesWithoutParentTemplate = [
 	PATTERN_TYPES.user,
 ];
 
-const authorizedPostTypes = [ 'page' ];
+const authorizedPostTypes = [ 'page', 'post' ];
 
 function useResolveEditedEntityAndContext( { postId, postType } ) {
 	const {
@@ -213,7 +213,8 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
 			return { postType, postId };
 		}
-
+		// TODO: for post types lists we should probably not render the front page, but maybe a placeholder
+		// with a message like "Select a page" or something similar.
 		if ( homepageId ) {
 			return { postType: 'page', postId: homepageId };
 		}

package/src/deprecated.js

@@ -6,8 +6,13 @@ import {
 	PluginSidebar as EditorPluginSidebar,
 	PluginSidebarMoreMenuItem as EditorPluginSidebarMoreMenuItem,
 } from '@wordpress/editor';
+import { getPath } from '@wordpress/url';
 import deprecated from '@wordpress/deprecated';
 
+const isSiteEditor = getPath( window.location.href )?.includes(
+	'site-editor.php'
+);
+
 const deprecateSlot = ( name ) => {
 	deprecated( `wp.editPost.${ name }`, {
 		since: '6.6',
@@ -20,6 +25,9 @@ const deprecateSlot = ( name ) => {
  * @see PluginMoreMenuItem in @wordpress/editor package.
  */
 export function PluginMoreMenuItem( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
 	deprecateSlot( 'PluginMoreMenuItem' );
 	return <EditorPluginMoreMenuItem { ...props } />;
 }
@@ -28,6 +36,9 @@ export function PluginMoreMenuItem( props ) {
  * @see PluginSidebar in @wordpress/editor package.
  */
 export function PluginSidebar( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
 	deprecateSlot( 'PluginSidebar' );
 	return <EditorPluginSidebar { ...props } />;
 }
@@ -36,6 +47,9 @@ export function PluginSidebar( props ) {
  * @see PluginSidebarMoreMenuItem in @wordpress/editor package.
  */
 export function PluginSidebarMoreMenuItem( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
 	deprecateSlot( 'PluginSidebarMoreMenuItem' );
 	return <EditorPluginSidebarMoreMenuItem { ...props } />;
 }

package/src/hooks/commands/use-set-command-context.js

@@ -10,6 +10,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container';
 
 const { useCommandContext } = unlock( commandsPrivateApis );
 
@@ -25,6 +26,9 @@ export default function useSetCommandContext() {
 			hasBlockSelected: getBlockSelectionStart(),
 		};
 	}, [] );
+
+	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
+
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 	if ( canvasMode === 'edit' ) {
@@ -33,5 +37,13 @@ export default function useSetCommandContext() {
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
 	}
+	if ( hasEditorCanvasContainer ) {
+		/*
+		 * The editor canvas overlay will likely be deprecated in the future, so for now we clear the command context
+		 * to remove the suggested commands that may not make sense with Style Book or Style Revisions open.
+		 * See https://github.com/WordPress/gutenberg/issues/62216.
+		 */
+		commandContext = '';
+	}
 	useCommandContext( commandContext );
 }

package/src/hooks/push-changes-to-global-styles/index.js

@@ -339,7 +339,7 @@ function PushChangesToGlobalStylesControl( {
 			<Button
 				__next40pxDefaultSize
 				variant="secondary"
-				__experimentalIsFocusable
+				accessibleWhenDisabled
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>