Page for Posts: Display notice in template panel (#38607)

* Page for Posts: Hide template panel * Display notice * Fix typo
WordPress · Feb 8, 2022 · cd2792d · cd2792d
1 parent 3760ccf
commit cd2792d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 28 deletions.
diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php
@@ -223,6 +223,16 @@ function register_site_editor_homepage_settings() {
 			'description'  => __( 'The ID of the page that should be displayed on the front page', 'gutenberg' ),
 		)
 	);
+
+	register_setting(
+		'reading',
+		'page_for_posts',
+		array(
+			'show_in_rest' => true,
+			'type'         => 'number',
+			'description'  => __( 'The ID of the page that should display the latest posts', 'gutenberg' ),
+		)
+	);
 }
 add_action( 'init', 'register_site_editor_homepage_settings', 10 );
 

diff --git a/packages/edit-post/src/components/sidebar/template/actions.js b/packages/edit-post/src/components/sidebar/template/actions.js
@@ -25,7 +25,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../../store';
 import { createBlock, serialize } from '@wordpress/blocks';
 
-function PostTemplateActions() {
+function PostTemplateActions( { isPostsPage } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ isBusy, setIsBusy ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
@@ -128,12 +128,17 @@ function PostTemplateActions() {
 						{ __( 'Edit' ) }
 					</Button>
 				) }
-				<Button variant="link" onClick={ () => setIsModalOpen( true ) }>
-					{
-						/* translators: button to create a new template */
-						_x( 'New', 'action' )
-					}
-				</Button>
+				{ ! isPostsPage && (
+					<Button
+						variant="link"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{
+							/* translators: button to create a new template */
+							_x( 'New', 'action' )
+						}
+					</Button>
+				) }
 			</div>
 			{ isModalOpen && (
 				<Modal

diff --git a/packages/edit-post/src/components/sidebar/template/index.js b/packages/edit-post/src/components/sidebar/template/index.js
@@ -8,7 +8,7 @@ import { partial, isEmpty, map, fromPairs } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
-import { PanelBody, SelectControl } from '@wordpress/components';
+import { Notice, PanelBody, SelectControl } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -28,6 +28,7 @@ export function TemplatePanel() {
 	const {
 		isEnabled,
 		isOpened,
+		isPostsPage,
 		selectedTemplate,
 		availableTemplates,
 		fetchedTemplates,
@@ -44,10 +45,19 @@ export function TemplatePanel() {
 		const {
 			getEditedPostAttribute,
 			getEditorSettings,
+			getCurrentPostId,
 			getCurrentPostType,
 		} = select( editorStore );
-		const { getPostType, getEntityRecords, canUser } = select( coreStore );
+		const {
+			getPostType,
+			getEntityRecord,
+			getEntityRecords,
+			canUser,
+		} = select( coreStore );
+
+		const currentPostId = getCurrentPostId();
 		const currentPostType = getCurrentPostType();
+		const settings = getEntityRecord( 'root', 'site' );
 		const _isViewable = getPostType( currentPostType )?.viewable ?? false;
 		const _supportsTemplateMode =
 			select( editorStore ).getEditorSettings().supportsTemplateMode &&
@@ -61,6 +71,7 @@ export function TemplatePanel() {
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			isPostsPage: currentPostId === settings?.page_for_posts,
 			selectedTemplate: getEditedPostAttribute( 'template' ),
 			availableTemplates: getEditorSettings().availableTemplates,
 			fetchedTemplates: templateRecords,
@@ -112,25 +123,40 @@ export function TemplatePanel() {
 			opened={ isOpened }
 			onToggle={ onTogglePanel }
 		>
-			<SelectControl
-				hideLabelFromVision
-				label={ __( 'Template:' ) }
-				value={
-					Object.keys( templates ).includes( selectedTemplate )
-						? selectedTemplate
-						: ''
-				}
-				onChange={ ( templateSlug ) => {
-					editPost( {
-						template: templateSlug || '',
-					} );
-				} }
-				options={ map( templates, ( templateName, templateSlug ) => ( {
-					value: templateSlug,
-					label: templateName,
-				} ) ) }
-			/>
-			{ canUserCreate && <PostTemplateActions /> }
+			{ isPostsPage ? (
+				<Notice
+					className="edit-post-template__notice"
+					status="warning"
+					isDismissible={ false }
+				>
+					{ __( 'The posts page template cannot be changed.' ) }
+				</Notice>
+			) : (
+				<SelectControl
+					hideLabelFromVision
+					label={ __( 'Template:' ) }
+					value={
+						Object.keys( templates ).includes( selectedTemplate )
+							? selectedTemplate
+							: ''
+					}
+					onChange={ ( templateSlug ) => {
+						editPost( {
+							template: templateSlug || '',
+						} );
+					} }
+					options={ map(
+						templates,
+						( templateName, templateSlug ) => ( {
+							value: templateSlug,
+							label: templateName,
+						} )
+					) }
+				/>
+			) }
+			{ canUserCreate && (
+				<PostTemplateActions isPostsPage={ isPostsPage } />
+			) }
 		</PanelBody>
 	);
 }

diff --git a/packages/edit-post/src/components/sidebar/template/style.scss b/packages/edit-post/src/components/sidebar/template/style.scss
@@ -28,6 +28,14 @@
 	}
 }
 
+.edit-post-template__notice {
+	margin: 0 0 $grid-unit-10 0;
+
+	.components-notice__content {
+		margin: 0;
+	}
+}
+
 .edit-post-template__actions {
 	button:not(:last-child) {
 		margin-right: $grid-unit-10;