@wordpress/edit-site 7.3.0 → 7.4.0

package/src/components/page-templates/fields.js

@@ -1,195 +0,0 @@
-import clsx from 'clsx';
-import {
-	Icon as WCIcon,
-	__experimentalHStack as HStack,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-import { parse } from '@wordpress/blocks';
-import { BlockPreview } from '@wordpress/block-editor';
-import {
-	EditorProvider,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import {
-	privateApis as corePrivateApis,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { useAddedBy } from './hooks';
-import { useDefaultTemplateTypes } from '../add-new-template/utils';
-import usePatternSettings from '../page-patterns/use-pattern-settings';
-import { unlock } from '../../lock-unlock';
-
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
-const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
-const { useStyle } = unlock( editorPrivateApis );
-
-function useAllDefaultTemplateTypes() {
-	const defaultTemplateTypes = useDefaultTemplateTypes();
-	const { records: staticRecords } = useEntityRecordsWithPermissions(
-		'root',
-		'registeredTemplate'
-	);
-	return [
-		...defaultTemplateTypes,
-		...staticRecords
-			?.filter( ( record ) => ! record.is_custom )
-			.map( ( record ) => {
-				return {
-					slug: record.slug,
-					title: record.title.rendered,
-					description: record.description,
-				};
-			} ),
-	];
-}
-
-function PreviewField( { item } ) {
-	const settings = usePatternSettings();
-	const backgroundColor = useStyle( 'color.background' ) ?? 'white';
-	const blocks = useMemo( () => {
-		return parse( item.content.raw );
-	}, [ item.content.raw ] );
-
-	const isEmpty = ! blocks?.length;
-	// Wrap everything in a block editor provider to ensure 'styles' that are needed
-	// for the previews are synced between the site editor store and the block editor store.
-	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
-	// render patterns inside the previews.
-	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
-	// the block editor settings are needed in context where we don't have the block editor.
-	// Explore how we can solve this in a better way.
-	return (
-		<EditorProvider post={ item } settings={ settings }>
-			<div
-				className="page-templates-preview-field"
-				style={ { backgroundColor } }
-			>
-				{ isEmpty && __( 'Empty template' ) }
-				{ ! isEmpty && (
-					<BlockPreview.Async>
-						<BlockPreview blocks={ blocks } />
-					</BlockPreview.Async>
-				) }
-			</div>
-		</EditorProvider>
-	);
-}
-
-export const previewField = {
-	label: __( 'Preview' ),
-	id: 'preview',
-	render: PreviewField,
-	enableSorting: false,
-};
-
-export const descriptionField = {
-	label: __( 'Description' ),
-	id: 'description',
-	render: window?.__experimentalTemplateActivate
-		? function RenderDescription( { item } ) {
-				const defaultTemplateTypes = useAllDefaultTemplateTypes();
-				const defaultTemplateType = defaultTemplateTypes.find(
-					( type ) => type.slug === item.slug
-				);
-				return item.description
-					? decodeEntities( item.description )
-					: defaultTemplateType?.description;
-		  }
-		: ( { item } ) => {
-				return item.description && decodeEntities( item.description );
-		  },
-	enableSorting: false,
-	enableGlobalSearch: true,
-};
-
-function AuthorField( { item } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ imageUrl && (
-				<div
-					className={ clsx( 'fields-controls__author-avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ ! imageUrl && (
-				<div className="fields-controls__author-icon">
-					<WCIcon icon={ icon } />
-				</div>
-			) }
-			<span className="fields-controls__author-name">{ text }</span>
-		</HStack>
-	);
-}
-
-export const authorField = {
-	label: __( 'Author' ),
-	id: 'author',
-	getValue: ( { item } ) => item.author_text ?? item.author,
-	render: AuthorField,
-};
-
-export const activeField = {
-	label: __( 'Status' ),
-	id: 'active',
-	type: 'boolean',
-	getValue: ( { item } ) => item._isActive,
-	render: function Render( { item } ) {
-		const activeLabel = item._isCustom
-			? _x( 'Active when used', 'template' )
-			: _x( 'Active', 'template' );
-		const activeIntent = item._isCustom ? 'info' : 'success';
-		const isActive = item._isActive;
-		return (
-			<WCBadge intent={ isActive ? activeIntent : 'default' }>
-				{ isActive ? activeLabel : _x( 'Inactive', 'template' ) }
-			</WCBadge>
-		);
-	},
-};
-
-export const useThemeField = () => {
-	const activeTheme = useSelect( ( select ) =>
-		select( coreStore ).getCurrentTheme()
-	);
-	return useMemo(
-		() => ( {
-			label: __( 'Compatible Theme' ),
-			id: 'theme',
-			getValue: ( { item } ) => item.theme,
-			render: function Render( { item } ) {
-				if ( item.theme === activeTheme.stylesheet ) {
-					return <WCBadge intent="success">{ item.theme }</WCBadge>;
-				}
-				return <WCBadge intent="error">{ item.theme }</WCBadge>;
-			},
-		} ),
-		[ activeTheme ]
-	);
-};
-
-export const slugField = {
-	label: __( 'Template Type' ),
-	id: 'slug',
-	getValue: ( { item } ) => item.slug,
-	render: function Render( { item } ) {
-		const defaultTemplateTypes = useAllDefaultTemplateTypes();
-		const defaultTemplateType = defaultTemplateTypes.find(
-			( type ) => type.slug === item.slug
-		);
-		return defaultTemplateType?.title || _x( 'Custom', 'template type' );
-	},
-};

package/src/components/page-templates/hooks.js

@@ -1,93 +0,0 @@
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import {
-	commentAuthorAvatar as authorIcon,
-	layout as themeIcon,
-	plugins as pluginIcon,
-	globe as globeIcon,
-} from '@wordpress/icons';
-import { TEMPLATE_ORIGINS } from '../../utils/constants';
-
-/** @typedef {'wp_template'|'wp_template_part'} TemplateType */
-
-/**
- * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
- *
- * @typedef AddedByData
- * @type {Object}
- * @property {AddedByType}       type         The type of the data.
- * @property {React.JSX.Element} icon         The icon to display.
- * @property {string}            [imageUrl]   The optional image URL to display.
- * @property {string}            [text]       The text to display.
- * @property {boolean}           isCustomized Whether the template has been customized.
- *
- * @param    {TemplateType}      postType     The template post type.
- * @param    {number}            postId       The template post id.
- * @return {AddedByData} The added by object or null.
- */
-export function useAddedBy( postType, postId ) {
-	return useSelect(
-		( select ) => {
-			const { getEntityRecord, getUser, getEditedEntityRecord } =
-				select( coreStore );
-			const template = getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
-			const originalSource = template?.original_source;
-			const authorText = template?.author_text;
-
-			switch ( originalSource ) {
-				case 'theme': {
-					return {
-						type: originalSource,
-						icon: themeIcon,
-						text: authorText,
-						isCustomized:
-							template.source === TEMPLATE_ORIGINS.custom,
-					};
-				}
-				case 'plugin': {
-					return {
-						type: originalSource,
-						icon: pluginIcon,
-						text: authorText,
-						isCustomized:
-							template.source === TEMPLATE_ORIGINS.custom,
-					};
-				}
-				case 'site': {
-					const siteData = getEntityRecord(
-						'root',
-						'__unstableBase'
-					);
-					return {
-						type: originalSource,
-						icon: globeIcon,
-						imageUrl: siteData?.site_logo
-							? getEntityRecord(
-									'postType',
-									'attachment',
-									siteData.site_logo
-							  )?.source_url
-							: undefined,
-						text: authorText,
-						isCustomized: false,
-					};
-				}
-				default: {
-					const user = getUser( template.author );
-					return {
-						type: 'user',
-						icon: authorIcon,
-						imageUrl: user?.avatar_urls?.[ 48 ],
-						text: authorText ?? user?.name,
-						isCustomized: false,
-					};
-				}
-			}
-		},
-		[ postType, postId ]
-	);
-}

package/src/components/page-templates/index.js

@@ -1,369 +0,0 @@
-import { Page } from '@wordpress/admin-ui';
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
-import { useState, useMemo, useCallback } from '@wordpress/element';
-import {
-	privateApis as corePrivateApis,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEvent } from '@wordpress/compose';
-import { useView } from '@wordpress/views';
-import { Modal } from '@wordpress/components';
-import { store as noticesStore } from '@wordpress/notices';
-import AddNewTemplate from '../add-new-template';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import {
-	useEditPostAction,
-	useSetActiveTemplateAction,
-} from '../dataviews-actions';
-import {
-	authorField,
-	descriptionField,
-	previewField,
-	activeField,
-	slugField,
-	useThemeField,
-} from './fields';
-import {
-	defaultLayouts,
-	DEFAULT_VIEW,
-	getActiveViewOverridesForTab,
-} from './view-utils';
-
-const { usePostActions, usePostFields, templateTitleField } =
-	unlock( editorPrivateApis );
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
-
-export default function PageTemplates() {
-	const { path, query } = useLocation();
-	const { activeView = 'active', postId } = query;
-	const [ selection, setSelection ] = useState( [ postId ] );
-	const [ selectedRegisteredTemplate, setSelectedRegisteredTemplate ] =
-		useState( false );
-	const defaultView = DEFAULT_VIEW;
-	const activeViewOverrides = useMemo(
-		() => getActiveViewOverridesForTab( activeView ),
-		[ activeView ]
-	);
-	const { view, updateView, isModified, resetToDefault } = useView( {
-		kind: 'postType',
-		name: TEMPLATE_POST_TYPE,
-		slug: 'default',
-		defaultView,
-		activeViewOverrides,
-		queryParams: {
-			page: query.pageNumber,
-			search: query.search,
-		},
-		onChangeQueryParams: ( newQueryParams ) => {
-			history.navigate(
-				addQueryArgs( path, {
-					...query,
-					pageNumber: newQueryParams.page,
-					search: newQueryParams.search || undefined,
-				} )
-			);
-		},
-	} );
-
-	const { activeTemplatesOption, activeTheme, defaultTemplateTypes } =
-		useSelect( ( select ) => {
-			const { getEntityRecord, getCurrentTheme } = select( coreStore );
-			return {
-				activeTemplatesOption: getEntityRecord( 'root', 'site' )
-					?.active_templates,
-				activeTheme: getCurrentTheme(),
-				defaultTemplateTypes:
-					select( coreStore ).getCurrentTheme()
-						?.default_template_types,
-			};
-		} );
-	// Todo: this will have to be better so that we're not fetching all the
-	// records all the time. Active templates query will need to move server
-	// side.
-	const { records: userRecords, isResolving: isLoadingUserRecords } =
-		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
-			per_page: -1,
-			combinedTemplates: false,
-		} );
-	const { records: staticRecords, isResolving: isLoadingStaticData } =
-		useEntityRecordsWithPermissions( 'root', 'registeredTemplate', {
-			// This should not be needed, the endpoint returns all registered
-			// templates, but it's not possible right now to turn off pagination
-			// for entity configs.
-			per_page: -1,
-		} );
-
-	const activeTemplates = useMemo( () => {
-		const _active = [ ...staticRecords ];
-		if ( activeTemplatesOption ) {
-			for ( const activeSlug in activeTemplatesOption ) {
-				const activeId = activeTemplatesOption[ activeSlug ];
-				// Replace the template in the array.
-				const template = userRecords.find(
-					( userRecord ) =>
-						userRecord.id === activeId &&
-						userRecord.theme === activeTheme.stylesheet
-				);
-				if ( template ) {
-					const index = _active.findIndex(
-						( { slug } ) => slug === template.slug
-					);
-					if ( index !== -1 ) {
-						_active[ index ] = template;
-					} else {
-						_active.push( template );
-					}
-				}
-			}
-		}
-		return _active;
-	}, [ userRecords, staticRecords, activeTemplatesOption, activeTheme ] );
-
-	let isLoadingData;
-	if ( activeView === 'active' ) {
-		isLoadingData = isLoadingUserRecords || isLoadingStaticData;
-	} else if ( activeView === 'user' ) {
-		isLoadingData = isLoadingUserRecords;
-	} else {
-		isLoadingData = isLoadingStaticData;
-	}
-
-	const records = useMemo( () => {
-		function isCustom( record ) {
-			// For registered templates, the is_custom field is defined.
-			return (
-				record.is_custom ??
-				// For user templates it's custom if the is_wp_suggestion meta
-				// field is not set and the slug is not found in the default
-				// template types.
-				( ! record.meta?.is_wp_suggestion &&
-					! defaultTemplateTypes.some(
-						( type ) => type.slug === record.slug
-					) )
-			);
-		}
-
-		let _records;
-		if ( activeView === 'active' ) {
-			// Don't show active custom templates in the active view.
-			_records = activeTemplates.filter(
-				( record ) => ! isCustom( record )
-			);
-		} else if ( activeView === 'user' ) {
-			_records = userRecords;
-		} else {
-			_records = staticRecords;
-		}
-		return _records.map( ( record ) => ( {
-			...record,
-			_isActive: activeTemplates.some(
-				( template ) => template.id === record.id
-			),
-			_isCustom: isCustom( record ),
-		} ) );
-	}, [
-		activeTemplates,
-		defaultTemplateTypes,
-		userRecords,
-		staticRecords,
-		activeView,
-	] );
-
-	const users = useSelect(
-		( select ) => {
-			const { getUser } = select( coreStore );
-			return records.reduce( ( acc, record ) => {
-				if ( record.author_text ) {
-					if ( ! acc[ record.author_text ] ) {
-						acc[ record.author_text ] = record.author_text;
-					}
-				} else if ( record.author ) {
-					if ( ! acc[ record.author ] ) {
-						acc[ record.author ] = getUser( record.author );
-					}
-				}
-				return acc;
-			}, {} );
-		},
-		[ records ]
-	);
-
-	const history = useHistory();
-	const onChangeSelection = useCallback(
-		( items ) => {
-			setSelection( items );
-			if ( view?.type === 'list' ) {
-				history.navigate(
-					addQueryArgs( path, {
-						postId: items.length === 1 ? items[ 0 ] : undefined,
-					} )
-				);
-			}
-		},
-		[ history, path, view?.type ]
-	);
-
-	const postTypeFields = usePostFields( {
-		postType: TEMPLATE_POST_TYPE,
-	} );
-	const dateField = postTypeFields.find( ( field ) => field.id === 'date' );
-	const themeField = useThemeField();
-	const fields = useMemo( () => {
-		const _fields = [
-			previewField,
-			templateTitleField,
-			descriptionField,
-			activeField,
-			slugField,
-		];
-		if ( activeView === 'user' ) {
-			_fields.push( themeField );
-			if ( dateField ) {
-				_fields.push( dateField );
-			}
-		}
-		const elements = [];
-		for ( const author in users ) {
-			elements.push( {
-				value: users[ author ]?.id ?? author,
-				label: users[ author ]?.name ?? author,
-			} );
-		}
-		_fields.push( {
-			...authorField,
-			elements,
-		} );
-		return _fields;
-	}, [ users, activeView, themeField, dateField ] );
-
-	const { data, paginationInfo } = useMemo( () => {
-		return filterSortAndPaginate( records, view, fields );
-	}, [ records, view, fields ] );
-
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const _title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						history.navigate( `/template?activeView=user` );
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post or template, e.g: "Hello world".
-								__( '"%s" successfully created.' ),
-								decodeEntities( _title ) || __( '(no title)' )
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											history.navigate(
-												`/${ newItem.type }/${ newItem.id }?canvas=edit`
-											);
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ history, createSuccessNotice ]
-	);
-	const postTypeActions = usePostActions( {
-		postType: TEMPLATE_POST_TYPE,
-		context: 'list',
-		onActionPerformed,
-	} );
-	const editAction = useEditPostAction();
-	const setActiveTemplateAction = useSetActiveTemplateAction();
-	const actions = useMemo(
-		() =>
-			activeView === 'user'
-				? [ setActiveTemplateAction, editAction, ...postTypeActions ]
-				: [ setActiveTemplateAction, ...postTypeActions ],
-		[ postTypeActions, setActiveTemplateAction, editAction, activeView ]
-	);
-
-	const onChangeView = useEvent( ( newView ) => {
-		updateView( newView );
-		if ( newView.type !== view.type ) {
-			// Retrigger the routing areas resolution.
-			history.invalidate();
-		}
-	} );
-
-	const duplicateAction = actions.find(
-		( action ) => action.id === 'duplicate-post'
-	);
-
-	return (
-		<Page
-			className="edit-site-page-templates"
-			title={ __( 'Templates' ) }
-			headingLevel={ 2 }
-			actions={ <AddNewTemplate /> }
-		>
-			<DataViews
-				key={ activeView }
-				paginationInfo={ paginationInfo }
-				fields={ fields }
-				actions={ actions }
-				data={ data }
-				isLoading={ isLoadingData }
-				view={ view }
-				onChangeView={ onChangeView }
-				onChangeSelection={ onChangeSelection }
-				isItemClickable={ () => true }
-				onClickItem={ ( item ) => {
-					if ( typeof item.id === 'string' ) {
-						setSelectedRegisteredTemplate( item );
-					} else {
-						history.navigate(
-							`/${ item.type }/${ item.id }?canvas=edit`
-						);
-					}
-				} }
-				selection={ selection }
-				defaultLayouts={ defaultLayouts }
-				onReset={
-					isModified
-						? () => {
-								resetToDefault();
-								history.invalidate();
-						  }
-						: false
-				}
-			/>
-			{ selectedRegisteredTemplate && duplicateAction && (
-				<Modal
-					title={ __( 'Duplicate' ) }
-					onRequestClose={ () => setSelectedRegisteredTemplate() }
-					size="small"
-				>
-					<duplicateAction.RenderModal
-						items={ [ selectedRegisteredTemplate ] }
-						closeModal={ () => setSelectedRegisteredTemplate() }
-					/>
-				</Modal>
-			) }
-		</Page>
-	);
-}

package/src/components/page-templates/view-utils.js

@@ -1,50 +0,0 @@
-export const defaultLayouts = {
-	table: {
-		showMedia: false,
-	},
-	grid: {
-		showMedia: true,
-	},
-	list: {
-		showMedia: false,
-	},
-};
-
-export const DEFAULT_VIEW = {
-	type: 'grid',
-	perPage: 20,
-	sort: {
-		field: 'title',
-		direction: 'asc',
-	},
-	titleField: 'title',
-	descriptionField: 'description',
-	mediaField: 'preview',
-	fields: [ 'author', 'active', 'slug', 'theme' ],
-	filters: [],
-	...defaultLayouts.grid,
-};
-
-export function getActiveViewOverridesForTab( activeView ) {
-	// User view: sort by date, newest first
-	if ( activeView === 'user' ) {
-		return {
-			sort: { field: 'date', direction: 'desc' },
-		};
-	}
-	// Active view: no overrides
-	if ( activeView === 'active' ) {
-		return {};
-	}
-	// Author-based view: filter by author
-	return {
-		filters: [
-			{
-				field: 'author',
-				operator: 'is',
-				value: activeView,
-				isLocked: true,
-			},
-		],
-	};
-}