@wordpress/edit-post 6.6.0 → 6.9.0

package/src/components/sidebar/post-template/form.js

@@ -0,0 +1,140 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { addTemplate } from '@wordpress/icons';
+import { Notice, SelectControl, Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+import PostTemplateCreateModal from './create-modal';
+
+export default function PostTemplateForm( { onClose } ) {
+	const {
+		isPostsPage,
+		availableTemplates,
+		fetchedTemplates,
+		selectedTemplateSlug,
+		canCreate,
+		canEdit,
+	} = useSelect( ( select ) => {
+		const editorSettings = select( editorStore ).getEditorSettings();
+		const siteSettings = select( coreStore ).getEntityRecord(
+			'root',
+			'site'
+		);
+		const _isPostsPage =
+			select( editorStore ).getCurrentPostId() ===
+			siteSettings?.page_for_posts;
+		const canCreateTemplates = select( coreStore ).canUser(
+			'create',
+			'templates'
+		);
+		return {
+			isPostsPage: _isPostsPage,
+			availableTemplates: editorSettings.availableTemplates,
+			fetchedTemplates: select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{
+					post_type: select( editorStore ).getCurrentPostType(),
+					per_page: -1,
+				}
+			),
+			selectedTemplateSlug:
+				select( editorStore ).getEditedPostAttribute( 'template' ),
+			canCreate: canCreateTemplates && ! _isPostsPage,
+			canEdit:
+				canCreateTemplates &&
+				editorSettings.supportsTemplateMode &&
+				!! select( editPostStore ).getEditedPostTemplate(),
+		};
+	}, [] );
+
+	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 { __unstableSwitchToTemplateMode } = useDispatch( editPostStore );
+
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+
+	return (
+		<div className="edit-post-post-template__form">
+			<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 }
+			/>
+			{ isPostsPage ? (
+				<Notice
+					className="edit-post-post-template__notice"
+					status="warning"
+					isDismissible={ false }
+				>
+					{ __( 'The posts page template cannot be changed.' ) }
+				</Notice>
+			) : (
+				<SelectControl
+					hideLabelFromVision
+					label={ __( 'Template' ) }
+					value={ selectedOption?.value ?? '' }
+					options={ options }
+					onChange={ ( slug ) =>
+						editPost( { template: slug || '' } )
+					}
+				/>
+			) }
+			{ canEdit && (
+				<p>
+					<Button
+						variant="link"
+						onClick={ () => __unstableSwitchToTemplateMode() }
+					>
+						{ __( 'Edit template' ) }
+					</Button>
+				</p>
+			) }
+			{ isCreateModalOpen && (
+				<PostTemplateCreateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</div>
+	);
+}

package/src/components/sidebar/post-template/index.js

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import PostTemplateForm from './form';
+
+export default function PostTemplate() {
+	const anchorRef = useRef();
+
+	const isVisible = 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;
+		}
+
+		const canCreateTemplates =
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
+		return canCreateTemplates;
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<PanelRow className="edit-post-post-template" ref={ anchorRef }>
+			<span>{ __( 'Template' ) }</span>
+			<Dropdown
+				popoverProps={ { anchorRef } }
+				position="bottom left"
+				className="edit-post-post-template__dropdown"
+				contentClassName="edit-post-post-template__dialog"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostTemplateToggle
+						isOpen={ isOpen }
+						onClick={ onToggle }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PostTemplateForm onClose={ onClose } />
+				) }
+			/>
+		</PanelRow>
+	);
+}
+
+function PostTemplateToggle( { isOpen, onClick } ) {
+	const templateTitle = useSelect( ( select ) => {
+		const templateSlug =
+			select( editorStore ).getEditedPostAttribute( 'template' );
+
+		const settings = select( editorStore ).getEditorSettings();
+		if ( settings.availableTemplates[ templateSlug ] ) {
+			return settings.availableTemplates[ templateSlug ];
+		}
+
+		const template = select( coreStore )
+			.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
+			?.find( ( { slug } ) => slug === templateSlug );
+
+		return template?.title.rendered;
+	}, [] );
+
+	return (
+		<Button
+			className="edit-post-post-template__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={
+				templateTitle
+					? sprintf(
+							// translators: %s: Name of the currently selected template.
+							__( 'Select template: %s' ),
+							templateTitle
+					  )
+					: __( 'Select template' )
+			}
+			onClick={ onClick }
+		>
+			{ templateTitle ?? __( '(none)' ) }
+		</Button>
+	);
+}

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

@@ -0,0 +1,46 @@
+.edit-post-post-template {
+	width: 100%;
+	justify-content: flex-start;
+
+	span {
+		display: block;
+		width: 45%;
+	}
+}
+
+.edit-post-post-template__dropdown {
+	max-width: 55%;
+}
+
+.components-button.edit-post-post-template__toggle {
+	display: inline-block;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.edit-post-post-template__dialog {
+	z-index: z-index(".edit-post-post-template__dialog");
+}
+
+.edit-post-post-template__form {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+
+.edit-post-post-template__create-modal {
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-post-post-template__create-form {
+	@include break-medium() {
+		width: $grid-unit * 40;
+	}
+}

package/src/components/sidebar/post-visibility/style.scss

@@ -1,6 +1,6 @@
 .edit-post-post-visibility {
 	width: 100%;
-	justify-content: left;
+	justify-content: flex-start;
 
 	span {
 		display: block;
@@ -8,7 +8,8 @@
 	}
 }
 
-.edit-post-post-visibility__dialog .components-popover__content {
-	// sidebar width - padding - horizontal borders
-	width: $sidebar-width - $grid-unit-20 - $border-width * 2;
+.edit-post-post-visibility__dialog .editor-post-visibility {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
 }

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

@@ -25,7 +25,6 @@ import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
-import Template from '../template';
 import TemplateSummary from '../template-summary';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -86,7 +85,6 @@ const SettingsSidebar = () => {
 			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
 				<>
 					<PostStatus />
-					<Template />
 					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
 					<PostLink />

package/src/components/start-page-options/index.js

@@ -3,7 +3,7 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
@@ -17,17 +17,42 @@ import { store as editorStore } from '@wordpress/editor';
  */
 import { store as editPostStore } from '../../store';
 
+function useStartPatterns() {
+	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
+	// and it has no postTypes declares and the current post type is page or if
+	// the current post type is part of the postTypes declared.
+	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
+		( select ) => {
+			const { __experimentalGetPatternsByBlockTypes } =
+				select( blockEditorStore );
+			const { getCurrentPostType } = select( editorStore );
+			return {
+				// get pa
+				blockPatternsWithPostContentBlockType:
+					__experimentalGetPatternsByBlockTypes(
+						'core/post-content'
+					),
+				postType: getCurrentPostType(),
+			};
+		},
+		[]
+	);
+
+	return useMemo( () => {
+		// filter patterns without postTypes declared if the current postType is page
+		// or patterns that declare the current postType in its post type array.
+		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
+			return (
+				( postType === 'page' && ! pattern.postTypes ) ||
+				( Array.isArray( pattern.postTypes ) &&
+					pattern.postTypes.includes( postType ) )
+			);
+		} );
+	}, [ postType, blockPatternsWithPostContentBlockType ] );
+}
+
 function PatternSelection( { onChoosePattern } ) {
-	const { blockPatterns } = useSelect( ( select ) => {
-		const { __experimentalGetPatternsByBlockTypes } = select(
-			blockEditorStore
-		);
-		return {
-			blockPatterns: __experimentalGetPatternsByBlockTypes(
-				'core/post-content'
-			),
-		};
-	}, [] );
+	const blockPatterns = useStartPatterns();
 	const shownBlockPatterns = useAsyncList( blockPatterns );
 	const { resetEditorBlocks } = useDispatch( editorStore );
 	return (
@@ -52,33 +77,28 @@ export default function StartPageOptions() {
 	const [ modalState, setModalState ] = useState(
 		START_PAGE_MODAL_STATES.INITIAL
 	);
+	const blockPatterns = useStartPatterns();
+	const hasStartPattern = blockPatterns.length > 0;
 	const shouldOpenModel = useSelect(
 		( select ) => {
-			if ( modalState !== START_PAGE_MODAL_STATES.INITIAL ) {
+			if (
+				! hasStartPattern ||
+				modalState !== START_PAGE_MODAL_STATES.INITIAL
+			) {
 				return false;
 			}
-			const { __experimentalGetPatternsByBlockTypes } = select(
-				blockEditorStore
-			);
-			const {
-				getCurrentPostType,
-				getEditedPostContent,
-				isEditedPostSaveable,
-			} = select( editorStore );
-			const { isEditingTemplate, isFeatureActive } = select(
-				editPostStore
-			);
+			const { getEditedPostContent, isEditedPostSaveable } =
+				select( editorStore );
+			const { isEditingTemplate, isFeatureActive } =
+				select( editPostStore );
 			return (
-				getCurrentPostType() === 'page' &&
 				! isEditedPostSaveable() &&
 				'' === getEditedPostContent() &&
 				! isEditingTemplate() &&
-				! isFeatureActive( 'welcomeGuide' ) &&
-				__experimentalGetPatternsByBlockTypes( 'core/post-content' )
-					.length >= 1
+				! isFeatureActive( 'welcomeGuide' )
 			);
 		},
-		[ modalState ]
+		[ modalState, hasStartPattern ]
 	);
 
 	useEffect( () => {

package/src/components/visual-editor/block-inspector-button.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,8 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as editPostStore } from '../../store';
 
+const noop = () => {};
+
 export function BlockInspectorButton( { onClick = noop, small = false } ) {
 	const { shortcut, areAdvancedSettingsOpened } = useSelect(
 		( select ) => ( {
@@ -29,9 +26,8 @@ export function BlockInspectorButton( { onClick = noop, small = false } ) {
 		} ),
 		[]
 	);
-	const { openGeneralSidebar, closeGeneralSidebar } = useDispatch(
-		editPostStore
-	);
+	const { openGeneralSidebar, closeGeneralSidebar } =
+		useDispatch( editPostStore );
 
 	const label = areAdvancedSettingsOpened
 		? __( 'Hide more settings' )

package/src/editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { forEach, size, map, without } from 'lodash';
+import { forEach, map, without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -56,9 +56,8 @@ function Editor( {
 				getEditedPostTemplate,
 				getHiddenBlockTypes,
 			} = select( editPostStore );
-			const { getEntityRecord, getPostType, getEntityRecords } = select(
-				coreStore
-			);
+			const { getEntityRecord, getPostType, getEntityRecords } =
+				select( coreStore );
 			const { getEditorSettings } = select( editorStore );
 			const { getBlockTypes } = select( blocksStore );
 			const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
@@ -75,8 +74,8 @@ function Editor( {
 			} else {
 				postObject = getEntityRecord( 'postType', postType, postId );
 			}
-			const supportsTemplateMode = getEditorSettings()
-				.supportsTemplateMode;
+			const supportsTemplateMode =
+				getEditorSettings().supportsTemplateMode;
 			const isViewable = getPostType( postType )?.viewable ?? false;
 
 			return {
@@ -104,9 +103,8 @@ function Editor( {
 		[ postType, postId ]
 	);
 
-	const { updatePreferredStyleVariations, setIsInserterOpened } = useDispatch(
-		editPostStore
-	);
+	const { updatePreferredStyleVariations, setIsInserterOpened } =
+		useDispatch( editPostStore );
 
 	const editorSettings = useMemo( () => {
 		const result = {
@@ -128,7 +126,7 @@ function Editor( {
 		};
 
 		// Omit hidden block types if exists and non-empty.
-		if ( size( hiddenBlockTypes ) > 0 ) {
+		if ( hiddenBlockTypes.length > 0 ) {
 			// Defer to passed setting for `allowedBlockTypes` if provided as
 			// anything other than `true` (where `true` is equivalent to allow
 			// all block types).

package/src/editor.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import memize from 'memize';
-import { size, map, without } from 'lodash';
+import { map, without } from 'lodash';
 import { I18nManager } from 'react-native';
 
 /**
@@ -62,7 +62,7 @@ class Editor extends Component {
 		};
 
 		// Omit hidden block types if exists and non-empty.
-		if ( size( hiddenBlockTypes ) > 0 ) {
+		if ( hiddenBlockTypes.length > 0 ) {
 			if ( settings.allowedBlockTypes === undefined ) {
 				// If no specific flags for allowedBlockTypes are set, assume `true`
 				// meaning allow all block types.
@@ -92,12 +92,15 @@ class Editor extends Component {
 			() => {
 				if ( this.postTitleRef ) {
 					this.postTitleRef.focus();
+				} else {
+					// If the post title ref is not available, we postpone setting focus to when it's available.
+					this.focusTitleWhenAvailable = true;
 				}
 			}
 		);
 
-		this.subscriptionParentFeaturedImageIdNativeUpdated = subscribeFeaturedImageIdNativeUpdated(
-			( payload ) => {
+		this.subscriptionParentFeaturedImageIdNativeUpdated =
+			subscribeFeaturedImageIdNativeUpdated( ( payload ) => {
 				editEntityRecord(
 					'postType',
 					postType,
@@ -107,8 +110,7 @@ class Editor extends Component {
 						undoIgnore: true,
 					}
 				);
-			}
-		);
+			} );
 	}
 
 	componentWillUnmount() {
@@ -122,6 +124,11 @@ class Editor extends Component {
 	}
 
 	setTitleRef( titleRef ) {
+		if ( this.focusTitleWhenAvailable && ! this.postTitleRef ) {
+			this.focusTitleWhenAvailable = false;
+			titleRef.focus();
+		}
+
 		this.postTitleRef = titleRef;
 	}
 

package/src/plugins/copy-content-menu-item/index.js

@@ -25,5 +25,5 @@ export default function CopyContentMenuItem() {
 
 	const ref = useCopyToClipboard( getText, onSuccess );
 
-	return <MenuItem ref={ ref }>{ __( 'Copy all content' ) }</MenuItem>;
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
 }