@wordpress/edit-site 6.2.0 → 6.3.0

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
@@ -36,7 +40,7 @@ export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
 	},
 };
 
-const DEFAULT_PAGE_BASE = {
+const DEFAULT_POST_BASE = {
 	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
@@ -46,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: 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,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

@@ -36,6 +36,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }
+						label={ __( 'Name' ) }
 					/>
 					<HStack justify="right">
 						<Button
@@ -48,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/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 }
 			>

package/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js

@@ -2,11 +2,11 @@
  * Internal dependencies
  */
 import {
-	filterObjectByProperty,
-	removePropertyFromObject,
+	filterObjectByProperties,
+	removePropertiesFromObject,
 } from '../use-theme-style-variations-by-property';
 
-describe( 'filterObjectByProperty', () => {
+describe( 'filterObjectByProperties', () => {
 	const noop = () => {};
 	test.each( [
 		{
@@ -14,21 +14,21 @@ describe( 'filterObjectByProperty', () => {
 				foo: 'bar',
 				array: [ 1, 3, 4 ],
 			},
-			property: 'array',
+			properties: [ 'array' ],
 			expected: { array: [ 1, 3, 4 ] },
 		},
 		{
 			object: {
 				foo: 'bar',
 			},
-			property: 'does-not-exist',
+			properties: [ 'does-not-exist' ],
 			expected: {},
 		},
 		{
 			object: {
 				foo: 'bar',
 			},
-			property: false,
+			properties: false,
 			expected: {},
 		},
 		{
@@ -39,7 +39,7 @@ describe( 'filterObjectByProperty', () => {
 					},
 				},
 			},
-			property: 'null',
+			properties: [ 'null' ],
 			expected: {
 				dig: {
 					deeper: {
@@ -52,19 +52,19 @@ describe( 'filterObjectByProperty', () => {
 			object: {
 				function: noop,
 			},
-			property: 'function',
+			properties: [ 'function' ],
 			expected: {
 				function: noop,
 			},
 		},
 		{
 			object: [],
-			property: 'something',
+			properties: [ 'something' ],
 			expected: {},
 		},
 		{
 			object: {},
-			property: undefined,
+			properties: undefined,
 			expected: {},
 		},
 		{
@@ -74,7 +74,7 @@ describe( 'filterObjectByProperty', () => {
 					array: [ 1, 3, 4 ],
 				},
 			},
-			property: 'nested-object-foo',
+			properties: [ 'nested-object-foo' ],
 			expected: {
 				'nested-object': {
 					'nested-object-foo': 'bar',
@@ -82,15 +82,15 @@ describe( 'filterObjectByProperty', () => {
 			},
 		},
 	] )(
-		'should filter object by $property',
-		( { expected, object, property } ) => {
-			const result = filterObjectByProperty( object, property );
+		'should filter object by $properties',
+		( { expected, object, properties } ) => {
+			const result = filterObjectByProperties( object, properties );
 			expect( result ).toEqual( expected );
 		}
 	);
 } );
 
-describe( 'removePropertyFromObject', () => {
+describe( 'removePropertiesFromObject', () => {
 	const mockBaseVariation = {
 		settings: {
 			typography: {
@@ -188,34 +188,38 @@ describe( 'removePropertyFromObject', () => {
 		},
 	};
 
-	it( 'should return with no property', () => {
+	it( 'should return with no properties', () => {
 		const object = { test: 'me' };
-		expect( removePropertyFromObject( object, undefined ) ).toEqual(
+		expect( removePropertiesFromObject( object, undefined ) ).toEqual(
 			object
 		);
 	} );
 
-	it( 'should return with non-string property', () => {
+	it( 'should return with non-string properties', () => {
 		const object = { test: 'you' };
-		expect( removePropertyFromObject( object, true ) ).toEqual( object );
+		expect( removePropertiesFromObject( object, true ) ).toEqual( object );
 	} );
 
 	it( 'should return with empty object', () => {
 		const object = {};
-		expect( removePropertyFromObject( object, 'color' ) ).toEqual( object );
+		expect( removePropertiesFromObject( object, [ 'color' ] ) ).toEqual(
+			object
+		);
 	} );
 
 	it( 'should return with null', () => {
-		expect( removePropertyFromObject( null, 'color' ) ).toEqual( null );
+		expect( removePropertiesFromObject( null, [ 'color' ] ) ).toEqual(
+			null
+		);
 	} );
 
-	it( 'should remove the specified property from the object', () => {
+	it( 'should remove the specified properties from the object', () => {
 		expect(
-			removePropertyFromObject(
+			removePropertiesFromObject(
 				{
 					...mockBaseVariation,
 				},
-				'typography'
+				[ 'typography' ]
 			)
 		).toEqual( {
 			settings: {