@wordpress/edit-site 6.42.0 → 6.43.1-next.v.202604091042.0

package/src/components/post-list/quick-edit-modal.js

@@ -22,7 +22,12 @@ const { usePostFields, PostCardPanel } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [ 'status', 'date', 'author', 'discussion' ];
 
-export function QuickEditModal( { postType, postId, closeModal } ) {
+export function QuickEditModal( {
+	postType,
+	postId,
+	closeModal,
+	quickEditForm,
+} ) {
 	const isBulk = postId.length > 1;
 
 	const [ localEdits, setLocalEdits ] = useState( {} );
@@ -93,61 +98,21 @@ export function QuickEditModal( { postType, postId, closeModal } ) {
 	);
 
 	const form = useMemo( () => {
-		const allFields = [
-			{
-				id: 'featured_media',
-				layout: {
-					type: 'regular',
-					labelPosition: 'none',
-				},
-			},
-			{
-				id: 'post-content-info',
-				layout: { type: 'regular', labelPosition: 'none' },
-			},
-			{
-				id: 'status',
-				label: __( 'Status' ),
-				children: [
-					{
-						id: 'status',
-						layout: { type: 'regular', labelPosition: 'none' },
-					},
-					'scheduled_date',
-					'password',
-				],
-			},
-			'author',
-			'date',
-			'slug',
-			'parent',
-			{
-				id: 'discussion',
-				label: __( 'Discussion' ),
-				children: [
-					{
-						id: 'comment_status',
-						layout: { type: 'regular', labelPosition: 'none' },
-					},
-					'ping_status',
-				],
-			},
-			'template',
-		];
-
+		if ( ! quickEditForm ) {
+			return { layout: { type: 'panel' }, fields: [] };
+		}
+		if ( ! isBulk ) {
+			return quickEditForm;
+		}
 		return {
-			layout: {
-				type: 'panel',
-			},
-			fields: isBulk
-				? allFields.filter( ( field ) =>
-						fieldsWithBulkEditSupport.includes(
-							typeof field === 'string' ? field : field.id
-						)
-				  )
-				: allFields,
+			...quickEditForm,
+			fields: ( quickEditForm.fields ?? [] ).filter( ( field ) =>
+				fieldsWithBulkEditSupport.includes(
+					typeof field === 'string' ? field : field.id
+				)
+			),
 		};
-	}, [ isBulk ] );
+	}, [ isBulk, quickEditForm ] );
 
 	const onChange = ( edits ) => {
 		const currentData = { ...record, ...localEdits };

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

@@ -68,6 +68,8 @@
 	}
 }
 
+// TODO: These styles should be absorbed by DataForm API.
+// @see https://github.com/WordPress/gutenberg/issues/75916
 .fields-controls__password {
 	border-top: $border-width solid $gray-200;
 	padding-top: $grid-unit-20;

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

@@ -3,34 +3,51 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import {
+	trash,
+	pages,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+import { useViewConfig } from '@wordpress/views';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import DataViewItem from './dataview-item';
-import { getDefaultViews } from '../post-list/view-utils';
+import SidebarNavigationItem from '../sidebar-navigation-item';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function DataViewsSidebarContent( { postType } ) {
+const SLUG_TO_ICON = {
+	all: pages,
+	published,
+	future: scheduled,
+	drafts,
+	pending,
+	private: notAllowed,
+	trash,
+};
+const defaultResolveIcon = ( view ) => {
+	return SLUG_TO_ICON[ view.slug ];
+};
+
+export default function DataViewsSidebarContent( {
+	postType,
+	resolveIcon = defaultResolveIcon,
+} ) {
 	const {
+		path,
 		query: { activeView = 'all' },
 	} = useLocation();
-	const postTypeObject = useSelect(
-		( select ) => {
-			const { getPostType } = select( coreStore );
-			return getPostType( postType );
-		},
-		[ postType ]
-	);
-	const defaultViews = useMemo(
-		() => getDefaultViews( postTypeObject ),
-		[ postTypeObject ]
-	);
+	const { view_list: viewList } = useViewConfig( {
+		kind: 'postType',
+		name: postType,
+	} );
 	if ( ! postType ) {
 		return null;
 	}
@@ -38,16 +55,21 @@ export default function DataViewsSidebarContent( { postType } ) {
 	return (
 		<>
 			<ItemGroup className="edit-site-sidebar-dataviews">
-				{ defaultViews.map( ( dataview ) => {
+				{ viewList?.map( ( view ) => {
+					const isActive = view.slug === activeView;
+					const slug = view.slug === 'all' ? undefined : view.slug;
+					const icon = resolveIcon( view );
 					return (
-						<DataViewItem
-							key={ dataview.slug }
-							slug={ dataview.slug }
-							title={ dataview.title }
-							icon={ dataview.icon }
-							type={ dataview.view.type }
-							isActive={ dataview.slug === activeView }
-						/>
+						<SidebarNavigationItem
+							key={ view.slug }
+							icon={ icon }
+							to={ addQueryArgs( path, {
+								activeView: slug,
+							} ) }
+							aria-current={ isActive ? 'true' : undefined }
+						>
+							{ view.title }
+						</SidebarNavigationItem>
 					);
 				} ) }
 			</ItemGroup>

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

@@ -5,19 +5,3 @@
 	margin-left: -$grid-unit-20;
 	margin-right: -$grid-unit-20;
 }
-
-.edit-site-sidebar-dataviews-dataview-item {
-	border-radius: $radius-small;
-
-	&:hover,
-	&:focus,
-	&[aria-current] {
-		color: $gray-200;
-	}
-
-	&.is-selected {
-		background: $gray-800;
-		font-weight: $font-weight-medium;
-		color: $white;
-	}
-}

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

@@ -9,6 +9,22 @@ import { DataForm } from '@wordpress/dataviews';
 import { MediaEdit } from '@wordpress/fields';
 
 const fields = [
+	{
+		id: 'title',
+		type: 'text',
+		label: __( 'Site Title' ),
+		description: __(
+			"Displays in your site's layout via the Site Title block."
+		),
+	},
+	{
+		id: 'description',
+		type: 'text',
+		label: __( 'Site Tagline' ),
+		description: __(
+			"In a few words, explain what this site is about. Displays in your site's layout via the Site Tagline block."
+		),
+	},
 	{
 		id: 'site_logo',
 		type: 'media',
@@ -42,7 +58,7 @@ const form = {
 		type: 'regular',
 		labelPosition: 'top',
 	},
-	fields: [ 'site_logo', 'site_icon' ],
+	fields: [ 'title', 'description', 'site_logo', 'site_icon' ],
 };
 
 export default function SidebarIdentity() {

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

@@ -6,9 +6,11 @@ import {
 	__experimentalItem as Item,
 } from '@wordpress/components';
 import { getTemplatePartIcon } from '@wordpress/editor';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewConfig } from '@wordpress/views';
 
 /**
  * Internal dependencies
@@ -28,70 +30,44 @@ import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
-	templatePartAreas,
-	patternCategories,
+	templatePartViews,
+	patternViews,
+	templatePartCounts,
+	patternCounts,
 	currentCategory,
 	currentType,
 } ) {
-	const [ allPatterns, ...otherPatterns ] = patternCategories;
-
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-			<CategoryItem
-				key="all"
-				count={ Object.values( templatePartAreas )
-					.map( ( { templateParts } ) => templateParts?.length || 0 )
-					.reduce( ( acc, val ) => acc + val, 0 ) }
-				icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
-				label={ __( 'All template parts' ) }
-				id={ TEMPLATE_PART_ALL_AREAS_CATEGORY }
-				type={ TEMPLATE_PART_POST_TYPE }
-				isActive={
-					currentCategory === TEMPLATE_PART_ALL_AREAS_CATEGORY &&
-					currentType === TEMPLATE_PART_POST_TYPE
-				}
-			/>
-			{ Object.entries( templatePartAreas ).map(
-				( [ area, { label, templateParts, icon } ] ) => (
-					<CategoryItem
-						key={ area }
-						count={ templateParts?.length }
-						icon={ getTemplatePartIcon( icon ) }
-						label={ label }
-						id={ area }
-						type={ TEMPLATE_PART_POST_TYPE }
-						isActive={
-							currentCategory === area &&
-							currentType === TEMPLATE_PART_POST_TYPE
-						}
-					/>
-				)
-			) }
-			<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
-			{ allPatterns && (
+			{ templatePartViews?.map( ( view ) => (
 				<CategoryItem
-					key={ allPatterns.name }
-					count={ allPatterns.count }
-					label={ allPatterns.label }
-					icon={ file }
-					id={ allPatterns.name }
-					type={ PATTERN_TYPES.user }
+					key={ view.slug }
+					count={ templatePartCounts[ view.slug ] }
+					icon={ getTemplatePartIcon(
+						view.slug === TEMPLATE_PART_ALL_AREAS_CATEGORY
+							? undefined
+							: view.slug
+					) }
+					label={ view.title }
+					id={ view.slug }
+					type={ TEMPLATE_PART_POST_TYPE }
 					isActive={
-						currentCategory === `${ allPatterns.name }` &&
-						currentType === PATTERN_TYPES.user
+						currentCategory === view.slug &&
+						currentType === TEMPLATE_PART_POST_TYPE
 					}
 				/>
-			) }
-			{ otherPatterns.map( ( category ) => (
+			) ) }
+			<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
+			{ patternViews?.map( ( view ) => (
 				<CategoryItem
-					key={ category.name }
-					count={ category.count }
-					label={ category.label }
+					key={ view.slug }
+					count={ patternCounts[ view.slug ] }
+					label={ view.title }
 					icon={ file }
-					id={ category.name }
+					id={ view.slug }
 					type={ PATTERN_TYPES.user }
 					isActive={
-						currentCategory === `${ category.name }` &&
+						currentCategory === `${ view.slug }` &&
 						currentType === PATTERN_TYPES.user
 					}
 				/>
@@ -110,9 +86,38 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 			? PATTERN_DEFAULT_CATEGORY
 			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
 
-	const { templatePartAreas, hasTemplateParts, isLoading } =
+	const { view_list: templatePartViews } = useViewConfig( {
+		kind: 'postType',
+		name: TEMPLATE_PART_POST_TYPE,
+	} );
+	const { view_list: patternViews } = useViewConfig( {
+		kind: 'postType',
+		name: PATTERN_TYPES.user,
+	} );
+
+	const { templatePartAreas, isLoading, hasTemplateParts } =
 		useTemplatePartAreas();
-	const { patternCategories, hasPatterns } = usePatternCategories();
+	const templatePartCounts = useMemo( () => {
+		const counts = { [ TEMPLATE_PART_ALL_AREAS_CATEGORY ]: 0 };
+		Object.entries( templatePartAreas ).forEach(
+			( [ area, { templateParts } ] ) => {
+				const count = templateParts?.length || 0;
+				counts[ area ] = count;
+				counts[ TEMPLATE_PART_ALL_AREAS_CATEGORY ] += count;
+			}
+		);
+		return counts;
+	}, [ templatePartAreas ] );
+	const { patternCategories } = usePatternCategories();
+	const patternCounts = useMemo( () => {
+		const counts = {};
+		patternCategories.forEach( ( cat ) => {
+			counts[ cat.name ] = cat.count;
+		} );
+		return counts;
+	}, [ patternCategories ] );
+
+	const hasPatterns = patternCounts[ PATTERN_DEFAULT_CATEGORY ] > 0;
 
 	return (
 		<SidebarNavigationScreen
@@ -133,8 +138,10 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 								</ItemGroup>
 							) }
 							<CategoriesGroup
-								templatePartAreas={ templatePartAreas }
-								patternCategories={ patternCategories }
+								templatePartViews={ templatePartViews }
+								patternViews={ patternViews }
+								templatePartCounts={ templatePartCounts }
+								patternCounts={ patternCounts }
 								currentCategory={ currentCategory }
 								currentType={ postType }
 							/>

package/src/components/sidebar-navigation-screen-templates-browse/content-legacy.js

@@ -1,79 +1,59 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecords } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import {
+	commentAuthorAvatar,
+	layout,
+	plugins as pluginIcon,
+	globe,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useAddedBy } from '../page-templates/hooks';
-import { layout } from '@wordpress/icons';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-const EMPTY_ARRAY = [];
-
-function TemplateDataviewItem( { template, isActive } ) {
-	const { text, icon } = useAddedBy( template.type, template.id );
-
-	return (
-		<SidebarNavigationItem
-			to={ addQueryArgs( '/template', { activeView: text } ) }
-			icon={ icon }
-			aria-current={ isActive }
-		>
-			{ text }
-		</SidebarNavigationItem>
-	);
-}
+import DataViewsSidebarContent from '../sidebar-dataviews';
 
+const SOURCE_TO_ICON = {
+	user: commentAuthorAvatar,
+	theme: layout,
+	plugin: pluginIcon,
+	site: globe,
+};
 export default function DataviewsTemplatesSidebarContent() {
-	const {
-		query: { activeView = 'all' },
-	} = useLocation();
-	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-		per_page: -1,
-	} );
-	const firstItemPerAuthorText = useMemo( () => {
-		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
-			const author = template.author_text;
-			if ( author && ! acc[ author ] ) {
-				acc[ author ] = template;
-			}
-			return acc;
-		}, {} );
-		return (
-			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
-			EMPTY_ARRAY
+	const authorSourceMap = useSelect( ( select ) => {
+		const templates = select( coreStore ).getEntityRecords(
+			'postType',
+			TEMPLATE_POST_TYPE,
+			{ per_page: -1 }
 		);
-	}, [ records ] );
+		if ( ! templates ) {
+			return {};
+		}
+		const map = {};
+		for ( const template of templates ) {
+			if (
+				template.author_text &&
+				template.original_source &&
+				! map[ template.author_text ]
+			) {
+				map[ template.author_text ] = template.original_source;
+			}
+		}
+		return map;
+	}, [] );
+
+	const resolveIcon = ( view ) => {
+		const source = authorSourceMap[ view.slug ];
+		return SOURCE_TO_ICON[ source ] ?? layout;
+	};
 
 	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
-			<SidebarNavigationItem
-				to="/template"
-				icon={ layout }
-				aria-current={ activeView === 'all' }
-			>
-				{ __( 'All templates' ) }
-			</SidebarNavigationItem>
-			{ firstItemPerAuthorText.map( ( template ) => {
-				return (
-					<TemplateDataviewItem
-						key={ template.author_text }
-						template={ template }
-						isActive={ activeView === template.author_text }
-					/>
-				);
-			} ) }
-		</ItemGroup>
+		<DataViewsSidebarContent
+			postType={ TEMPLATE_POST_TYPE }
+			resolveIcon={ resolveIcon }
+		/>
 	);
 }

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

@@ -4,15 +4,17 @@
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import Editor from '../editor';
-import { isClassicThemeWithStyleBookSupport } from './utils';
+import { isClassicThemeWithStyleBookSupport, isThemeDataLoaded } from './utils';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ||
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ||
 				isClassicThemeWithStyleBookSupport( siteData ) ? (
 				<SidebarNavigationScreenMain />
 			) : (
@@ -27,8 +29,10 @@ export const homeRoute = {
 			) : undefined;
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ||
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ||
 				isClassicThemeWithStyleBookSupport( siteData ) ? (
 				<SidebarNavigationScreenMain />
 			) : (

package/src/components/site-editor-routes/navigation-item.js

@@ -10,6 +10,7 @@ import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
+import { isThemeDataLoaded } from './utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -29,24 +30,30 @@ export const navigationItemRoute = {
 	path: '/wp_navigation/:postId',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
 		preview( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<Editor />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<MobileNavigationItemView />
 			) : (
 				<SidebarNavigationScreenUnsupported />

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

@@ -10,6 +10,7 @@ import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
+import { isThemeDataLoaded } from './utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -29,8 +30,10 @@ export const navigationRoute = {
 	path: '/navigation',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreenNavigationMenus backPath="/" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
@@ -41,8 +44,10 @@ export const navigationRoute = {
 			return isBlockTheme ? <Editor /> : undefined;
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<MobileNavigationView />
 			) : (
 				<SidebarNavigationScreenUnsupported />