@wordpress/editor 13.24.0 → 13.25.0

package/src/components/post-template/classic-theme.js

@@ -0,0 +1,213 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl, Dropdown, Button, Notice } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useState, useMemo } from '@wordpress/element';
+import { addTemplate } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import CreateNewTemplateModal from './create-new-template-modal';
+import { useAllowSwitchingTemplates } from './hooks';
+
+const POPOVER_PROPS = {
+	className: 'editor-post-template__dropdown',
+	placement: 'bottom-start',
+};
+
+function PostTemplateToggle( { isOpen, onClick } ) {
+	const templateTitle = useSelect( ( select ) => {
+		const templateSlug =
+			select( editorStore ).getEditedPostAttribute( 'template' );
+
+		const { supportsTemplateMode, availableTemplates } =
+			select( editorStore ).getEditorSettings();
+		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
+			return availableTemplates[ templateSlug ];
+		}
+		const template =
+			select( coreStore ).canUser( 'create', 'templates' ) &&
+			select( editorStore ).getCurrentTemplateId();
+		return (
+			template?.title ||
+			template?.slug ||
+			availableTemplates?.[ templateSlug ]
+		);
+	}, [] );
+
+	return (
+		<Button
+			className="edit-post-post-template__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={ __( 'Template options' ) }
+			onClick={ onClick }
+		>
+			{ templateTitle ?? __( 'Default template' ) }
+		</Button>
+	);
+}
+
+function PostTemplateDropdownContent( { onClose } ) {
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+	const {
+		availableTemplates,
+		fetchedTemplates,
+		selectedTemplateSlug,
+		canCreate,
+		canEdit,
+	} = useSelect(
+		( select ) => {
+			const { canUser, getEntityRecords } = select( coreStore );
+			const editorSettings = select( editorStore ).getEditorSettings();
+			const canCreateTemplates = canUser( 'create', 'templates' );
+
+			return {
+				availableTemplates: editorSettings.availableTemplates,
+				fetchedTemplates: canCreateTemplates
+					? getEntityRecords( 'postType', 'wp_template', {
+							post_type:
+								select( editorStore ).getCurrentPostType(),
+							per_page: -1,
+					  } )
+					: undefined,
+				selectedTemplateSlug:
+					select( editorStore ).getEditedPostAttribute( 'template' ),
+				canCreate:
+					allowSwitchingTemplate &&
+					canCreateTemplates &&
+					editorSettings.supportsTemplateMode,
+				canEdit:
+					allowSwitchingTemplate &&
+					canCreateTemplates &&
+					editorSettings.supportsTemplateMode &&
+					!! select( editorStore ).getCurrentTemplateId(),
+			};
+		},
+		[ allowSwitchingTemplate ]
+	);
+
+	const options = useMemo(
+		() =>
+			Object.entries( {
+				...availableTemplates,
+				...Object.fromEntries(
+					( fetchedTemplates ?? [] ).map( ( { slug, title } ) => [
+						slug,
+						title.rendered,
+					] )
+				),
+			} ).map( ( [ slug, title ] ) => ( { value: slug, label: title } ) ),
+		[ availableTemplates, fetchedTemplates ]
+	);
+
+	const selectedOption =
+		options.find( ( option ) => option.value === selectedTemplateSlug ) ??
+		options.find( ( option ) => ! option.value ); // The default option has '' value.
+
+	const { editPost } = useDispatch( editorStore );
+	const { getEditorSettings } = useSelect( editorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+
+	return (
+		<div className="editor-post-template__classic-theme-dropdown">
+			<InspectorPopoverHeader
+				title={ __( 'Template' ) }
+				help={ __(
+					'Templates define the way content is displayed when viewing your site.'
+				) }
+				actions={
+					canCreate
+						? [
+								{
+									icon: addTemplate,
+									label: __( 'Add template' ),
+									onClick: () => setIsCreateModalOpen( true ),
+								},
+						  ]
+						: []
+				}
+				onClose={ onClose }
+			/>
+			{ ! allowSwitchingTemplate ? (
+				<Notice status="warning" isDismissible={ false }>
+					{ __( 'The posts page template cannot be changed.' ) }
+				</Notice>
+			) : (
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					hideLabelFromVision
+					label={ __( 'Template' ) }
+					value={ selectedOption?.value ?? '' }
+					options={ options }
+					onChange={ ( slug ) =>
+						editPost( { template: slug || '' } )
+					}
+				/>
+			) }
+			{ canEdit && (
+				<p>
+					<Button
+						variant="link"
+						onClick={ () => {
+							setRenderingMode( 'template-only' );
+							onClose();
+							createSuccessNotice(
+								__(
+									'Editing template. Changes made here affect all posts and pages that use the template.'
+								),
+								{
+									type: 'snackbar',
+									actions: [
+										{
+											label: __( 'Go back' ),
+											onClick: () =>
+												setRenderingMode(
+													getEditorSettings()
+														.defaultRenderingMode
+												),
+										},
+									],
+								}
+							);
+						} }
+					>
+						{ __( 'Edit template' ) }
+					</Button>
+				</p>
+			) }
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</div>
+	);
+}
+
+function ClassicThemeControl() {
+	return (
+		<Dropdown
+			popoverProps={ POPOVER_PROPS }
+			focusOnMount
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />
+			) }
+			renderContent={ ( { onClose } ) => (
+				<PostTemplateDropdownContent onClose={ onClose } />
+			) }
+		/>
+	);
+}
+
+export default ClassicThemeControl;

package/src/components/post-template/create-new-template-modal.js

@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { serialize, createBlock } from '@wordpress/blocks';
+import {
+	Modal,
+	TextControl,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const DEFAULT_TITLE = __( 'Custom Template' );
+
+export default function CreateNewTemplateModal( { onClose } ) {
+	const defaultBlockTemplate = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().defaultBlockTemplate,
+		[]
+	);
+
+	const { createTemplate, setRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
+
+	const [ title, setTitle ] = useState( '' );
+
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const cancel = () => {
+		setTitle( '' );
+		onClose();
+	};
+
+	const submit = async ( event ) => {
+		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const newTemplateContent =
+			defaultBlockTemplate ??
+			serialize( [
+				createBlock(
+					'core/group',
+					{
+						tagName: 'header',
+						layout: { inherit: true },
+					},
+					[
+						createBlock( 'core/site-title' ),
+						createBlock( 'core/site-tagline' ),
+					]
+				),
+				createBlock( 'core/separator' ),
+				createBlock(
+					'core/group',
+					{
+						tagName: 'main',
+					},
+					[
+						createBlock(
+							'core/group',
+							{
+								layout: { inherit: true },
+							},
+							[ createBlock( 'core/post-title' ) ]
+						),
+						createBlock( 'core/post-content', {
+							layout: { inherit: true },
+						} ),
+					]
+				),
+			] );
+
+		await createTemplate( {
+			slug: cleanForSlug( title || DEFAULT_TITLE ),
+			content: newTemplateContent,
+			title: title || DEFAULT_TITLE,
+		} );
+
+		setIsBusy( false );
+		cancel();
+		setRenderingMode( 'template-only' );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			onRequestClose={ cancel }
+		>
+			<form
+				className="editor-post-template__create-form"
+				onSubmit={ submit }
+			>
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ DEFAULT_TITLE }
+						disabled={ isBusy }
+						help={ __(
+							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
+						) }
+					/>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ cancel }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isBusy }
+							aria-disabled={ isBusy }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/post-template/create-new-template.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CreateNewTemplateModal from './create-new-template-modal';
+import { useAllowSwitchingTemplates } from './hooks';
+
+export default function CreateNewTemplate( { onClick } ) {
+	const { canCreateTemplates } = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		return {
+			canCreateTemplates: canUser( 'create', 'templates' ),
+		};
+	}, [] );
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+
+	// The default template in a post is indicated by an empty string.
+	if ( ! canCreateTemplates || ! allowSwitchingTemplate ) {
+		return null;
+	}
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setIsCreateModalOpen( true );
+				} }
+			>
+				{ __( 'Create new template' ) }
+			</MenuItem>
+
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => {
+						setIsCreateModalOpen( false );
+						onClick();
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/post-template/hooks.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export function useEditedPostContext() {
+	return useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		return {
+			postId: getCurrentPostId(),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+}
+export function useAllowSwitchingTemplates() {
+	const { postType, postId } = useEditedPostContext();
+	return useSelect(
+		( select ) => {
+			const { getEntityRecord, getEntityRecords } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const templates = getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+			} );
+			const isPostsPage = +postId === siteSettings?.page_for_posts;
+			// If current page is set front page or posts page, we also need
+			// to check if the current theme has a template for it. If not
+			const isFrontPage =
+				postType === 'page' &&
+				+postId === siteSettings?.page_on_front &&
+				templates?.some( ( { slug } ) => slug === 'front-page' );
+			return ! isPostsPage && ! isFrontPage;
+		},
+		[ postId, postType ]
+	);
+}
+
+function useTemplates() {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+				post_type: 'page',
+			} ),
+		[]
+	);
+}
+
+export function useAvailableTemplates() {
+	const currentTemplateSlug = useCurrentTemplateSlug();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+	const templates = useTemplates();
+	return useMemo(
+		() =>
+			allowSwitchingTemplate &&
+			templates?.filter(
+				( template ) =>
+					template.is_custom &&
+					template.slug !== currentTemplateSlug &&
+					!! template.content.raw // Skip empty templates.
+			),
+		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
+	);
+}
+
+export function useCurrentTemplateSlug() {
+	const { postType, postId } = useEditedPostContext();
+	const templates = useTemplates();
+	const entityTemplate = useSelect(
+		( select ) => {
+			const post = select( coreStore ).getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			return post?.template;
+		},
+		[ postType, postId ]
+	);
+
+	if ( ! entityTemplate ) {
+		return;
+	}
+	// If a page has a `template` set and is not included in the list
+	// of the theme's templates, do not return it, in order to resolve
+	// to the current theme's default template.
+	return templates?.find( ( template ) => template.slug === entityTemplate )
+		?.slug;
+}

package/src/components/post-template/panel.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import ClassicThemeControl from './classic-theme';
+import BlockThemeControl from './block-theme';
+import PostPanelRow from '../post-panel-row';
+
+export default function PostTemplatePanel() {
+	const { templateId, isBlockTheme } = useSelect( ( select ) => {
+		const { getCurrentTemplateId, getEditorSettings } =
+			select( editorStore );
+		return {
+			templateId: getCurrentTemplateId(),
+			isBlockTheme: getEditorSettings().__unstableIsBlockBasedTheme,
+		};
+	}, [] );
+
+	const isVisible = true;
+	useSelect( ( select ) => {
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		if ( ! postType?.viewable ) {
+			return false;
+		}
+
+		const settings = select( editorStore ).getEditorSettings();
+		const hasTemplates =
+			!! settings.availableTemplates &&
+			Object.keys( settings.availableTemplates ).length > 0;
+		if ( hasTemplates ) {
+			return true;
+		}
+
+		if ( ! settings.supportsTemplateMode ) {
+			return false;
+		}
+
+		const canCreateTemplates =
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
+		return canCreateTemplates;
+	}, [] );
+
+	if ( ! isBlockTheme && isVisible ) {
+		return (
+			<PostPanelRow label={ __( 'Template' ) }>
+				<ClassicThemeControl />
+			</PostPanelRow>
+		);
+	}
+
+	if ( isBlockTheme && !! templateId ) {
+		return (
+			<PostPanelRow label={ __( 'Template' ) }>
+				<BlockThemeControl id={ templateId } />
+			</PostPanelRow>
+		);
+	}
+	return null;
+}

package/src/components/post-template/reset-default-template.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useAllowSwitchingTemplates,
+	useCurrentTemplateSlug,
+	useEditedPostContext,
+} from './hooks';
+
+export default function ResetDefaultTemplate( { onClick } ) {
+	const currentTemplateSlug = useCurrentTemplateSlug();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+	const { postType, postId } = useEditedPostContext();
+	const { editEntityRecord } = useDispatch( coreStore );
+	// The default template in a post is indicated by an empty string.
+	if ( ! currentTemplateSlug || ! allowSwitchingTemplate ) {
+		return null;
+	}
+	return (
+		<MenuItem
+			onClick={ () => {
+				editEntityRecord(
+					'postType',
+					postType,
+					postId,
+					{ template: '' },
+					{ undoIgnore: true }
+				);
+				onClick();
+			} }
+		>
+			{ __( 'Use default template' ) }
+		</MenuItem>
+	);
+}

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

@@ -0,0 +1,52 @@
+.editor-post-template__swap-template-modal {
+	z-index: z-index(".editor-post-template__swap-template-modal");
+}
+
+.editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+	}
+
+	.block-editor-block-patterns-list__item {
+		// Avoid to override the BlockPatternList component
+		// default hover and focus styles.
+		&:not(:focus):not(:hover) .block-editor-block-preview__container {
+			box-shadow: 0 0 0 1px $gray-300;
+		}
+	}
+}
+
+.editor-post-template__dropdown {
+	.components-popover__content {
+		min-width: 240px;
+	}
+	.components-button.is-pressed,
+	.components-button.is-pressed:hover {
+		background: inherit;
+		color: inherit;
+	}
+}
+
+.editor-post-template__create-form {
+	@include break-medium() {
+		width: $grid-unit * 40;
+	}
+}
+
+.editor-post-template__classic-theme-dropdown {
+	padding: $grid-unit-10;
+}