Add ability to set page/post template

edit-post/components/sidebar/page-attributes/index.js

@@ -2,13 +2,16 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import { PageAttributesCheck, PageAttributesOrder, PageAttributesParent } from '@wordpress/editor';
+import { PanelBody, PanelRow, withAPIData } from '@wordpress/components';
+import { compose } from '@wordpress/element';
+import { PageAttributesCheck, PageAttributesOrder, PageAttributesParent, PageTemplate } from '@wordpress/editor';
+import { query } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -21,14 +24,18 @@ import { isEditorSidebarPanelOpened } from '../../../store/selectors';
  */
 const PANEL_NAME = 'page-attributes';
 
-export function PageAttributes( { isOpened, onTogglePanel } ) {
+export function PageAttributes( { isOpened, onTogglePanel, postType } ) {
+	if ( ! postType.data ) {
+		return null;
+	}
 	return (
 		<PageAttributesCheck>
 			<PanelBody
-				title={ __( 'Page Attributes' ) }
+				title={ get( postType, 'data.labels.attributes', __( 'Page Attributes' ) ) }
 				opened={ isOpened }
 				onToggle={ onTogglePanel }
 			>
+				<PageTemplate />
 				<PageAttributesParent />
 				<PanelRow>
 					<PageAttributesOrder />
@@ -38,7 +45,11 @@ export function PageAttributes( { isOpened, onTogglePanel } ) {
 	);
 }
 
-export default connect(
+const applyQuery = query( ( select ) => ( {
+	postTypeSlug: select( 'core/editor', 'getCurrentPostType' ),
+} ) );
+
+const applyConnect = connect(
 	( state ) => {
 		return {
 			isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ),
@@ -51,4 +62,17 @@ export default connect(
 	},
 	undefined,
 	{ storeKey: 'edit-post' }
+);
+
+const applyWithAPIData = withAPIData( ( props ) => {
+	const { postTypeSlug } = props;
+	return {
+		postType: `/wp/v2/types/${ postTypeSlug }?context=edit`,
+	};
+} );
+
+export default compose(
+	applyQuery,
+	applyConnect,
+	applyWithAPIData,
 )( PageAttributes );

editor/components/index.js

@@ -11,6 +11,7 @@ export { default as MetaBoxes } from './meta-boxes';
 export { default as PageAttributesCheck } from './page-attributes/check';
 export { default as PageAttributesOrder } from './page-attributes/order';
 export { default as PageAttributesParent } from './page-attributes/parent';
+export { default as PageTemplate } from './page-attributes/template';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
 export { default as PostComments } from './post-comments';

editor/components/page-attributes/check.js

@@ -2,27 +2,24 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { withAPIData } from '@wordpress/components';
+import { withAPIData, withContext } from '@wordpress/components';
 import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { getCurrentPostType } from '../../store/selectors';
 
-export function PageAttributesCheck( { postType, children } ) {
-	const supportsPageAttributes = get( postType.data, [
-		'supports',
-		'page-attributes',
-	], false );
+export function PageAttributesCheck( { availableTemplates, postType, children } ) {
+	const supportsPageAttributes = get( postType, 'data.supports.page-attributes', false );
 
-	// Only render fields if post type supports page attributes
-	if ( ! supportsPageAttributes ) {
+	// Only render fields if post type supports page attributes or available templates exist.
+	if ( ! supportsPageAttributes && isEmpty( availableTemplates ) ) {
 		return null;
 	}
 
@@ -37,6 +34,12 @@ const applyConnect = connect(
 	}
 );
 
+const applyWithContext = withContext( 'editor' )(
+	( settings ) => ( {
+		availableTemplates: settings.availableTemplates,
+	} )
+);
+
 const applyWithAPIData = withAPIData( ( props ) => {
 	const { postTypeSlug } = props;
 
@@ -48,4 +51,5 @@ const applyWithAPIData = withAPIData( ( props ) => {
 export default compose( [
 	applyConnect,
 	applyWithAPIData,
+	applyWithContext,
 ] )( PageAttributesCheck );

editor/components/page-attributes/order.js

@@ -8,12 +8,12 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import PageAttributesCheck from './check';
+import PostTypeSupportCheck from '../post-type-support-check';
 import { editPost } from '../../store/actions';
 import { getEditedPostAttribute } from '../../store/selectors';
 
@@ -28,7 +28,7 @@ export function PageAttributesOrder( { onUpdateOrder, instanceId, order } ) {
 	const inputId = `editor-page-attributes__order-${ instanceId }`;
 
 	return (
-		<PageAttributesCheck>
+		<Fragment>
 			<label htmlFor={ inputId }>
 				{ __( 'Order' ) }
 			</label>
@@ -39,7 +39,15 @@ export function PageAttributesOrder( { onUpdateOrder, instanceId, order } ) {
 				id={ inputId }
 				size={ 6 }
 			/>
-		</PageAttributesCheck>
+		</Fragment>
+	);
+}
+
+function PageAttributesOrderWithChecks( props ) {
+	return (
+		<PostTypeSupportCheck supportKeys="page-attributes">
+			<PageAttributesOrder { ...props } />
+		</PostTypeSupportCheck>
 	);
 }
 
@@ -61,4 +69,4 @@ const applyConnect = connect(
 export default compose( [
 	applyConnect,
 	withInstanceId,
-] )( PageAttributesOrder );
+] )( PageAttributesOrderWithChecks );

editor/components/page-attributes/style.scss

@@ -0,0 +1,6 @@
+.editor-page-attributes__template {
+	label, select {
+		width: 100%;
+	}
+	margin-bottom: 10px;
+}

editor/components/page-attributes/template.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { isEmpty, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withContext, withInstanceId } from '@wordpress/components';
+import { compose } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getEditedPostAttribute } from '../../store/selectors';
+import { editPost } from '../../store/actions';
+
+export function PageTemplate( { availableTemplates, selectedTemplate, instanceId, onUpdate } ) {
+	if ( isEmpty( availableTemplates ) ) {
+		return null;
+	}
+	const selectId = `template-selector-${ instanceId }`;
+	const onEventUpdate = ( event ) => onUpdate( event.target.value );
+	return (
+		<div className="editor-page-attributes__template">
+			<label htmlFor={ selectId }>{ __( 'Template:' ) }</label>
+			<select
+				id={ selectId }
+				value={ selectedTemplate }
+				onBlur={ onEventUpdate }
+				onChange={ onEventUpdate }
+			>
+				{ map( { '': __( 'Default template' ), ...availableTemplates }, ( templateName, templateSlug ) => (
+					<option key={ templateSlug } value={ templateSlug }>{ templateName }</option>
+				) ) }
+			</select>
+		</div>
+	);
+}
+
+const applyConnect = connect(
+	( state ) => {
+		return {
+			selectedTemplate: getEditedPostAttribute( state, 'template' ),
+		};
+	},
+	{
+		onUpdate( templateSlug ) {
+			return editPost( { template: templateSlug || '' } );
+		},
+	}
+);
+
+const applyWithContext = withContext( 'editor' )(
+	( settings ) => ( {
+		availableTemplates: settings.availableTemplates,
+	} )
+);
+
+export default compose(
+	applyConnect,
+	applyWithContext,
+	withInstanceId,
+)( PageTemplate );

editor/components/page-attributes/test/check.js

@@ -17,15 +17,15 @@ describe( 'PageAttributesCheck', () => {
 		},
 	};
 
-	it( 'should not render anything if unknown page attributes support', () => {
+	it( 'should not render anything if unknown page attributes and available templates support', () => {
 		const wrapper = shallow( <PageAttributesCheck postType={ {} }>content</PageAttributesCheck> );
 
 		expect( wrapper.type() ).toBe( null );
 	} );
 
-	it( 'should not render anything if no page attributes support', () => {
+	it( 'should not render anything if no page attributes support and no available templates exist', () => {
 		const wrapper = shallow(
-			<PageAttributesCheck postType={ {
+			<PageAttributesCheck availableTemplates={ {} } postType={ {
 				data: {
 					supports: {
 						'page-attributes': false,
@@ -39,9 +39,21 @@ describe( 'PageAttributesCheck', () => {
 		expect( wrapper.type() ).toBe( null );
 	} );
 
-	it( 'should render if page attributes support', () => {
+	it( 'should render if page attributes support is true and no available templates exist', () => {
 		const wrapper = shallow( <PageAttributesCheck postType={ postType }>content</PageAttributesCheck> );
 
-		expect( wrapper.type() ).not.toBe( null );
+		expect( wrapper ).toHaveText( 'content' );
+	} );
+
+	it( 'should render if page attributes support is false/unknown and available templates exist', () => {
+		const wrapper = shallow( <PageAttributesCheck availableTemplates={ { 'example.php': 'Example template' } } >content</PageAttributesCheck> );
+
+		expect( wrapper ).toHaveText( 'content' );
+	} );
+
+	it( 'should render if page attributes support is true and available templates exist', () => {
+		const wrapper = shallow( <PageAttributesCheck availableTemplates={ { 'example.php': 'Example template' } } postType={ postType }>content</PageAttributesCheck> );
+
+		expect( wrapper ).toHaveText( 'content' );
 	} );
 } );

editor/store/index.js

@@ -9,6 +9,7 @@ import { registerReducer, registerSelectors, withRehydratation, loadAndPersist }
 import reducer from './reducer';
 import applyMiddlewares from './middlewares';
 import {
+	getCurrentPostType,
 	getEditedPostContent,
 	getEditedPostTitle,
 	getSelectedBlockCount,
@@ -26,6 +27,7 @@ const store = applyMiddlewares(
 loadAndPersist( store, reducer, 'preferences', STORAGE_KEY );
 
 registerSelectors( MODULE_KEY, {
+	getCurrentPostType,
 	getEditedPostContent,
 	getEditedPostTitle,
 	getSelectedBlockCount,

lib/client-assets.php

@@ -903,10 +903,11 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	$allowed_block_types = apply_filters( 'allowed_block_types', true );
 
 	$editor_settings = array(
-		'alignWide'        => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
-		'colors'           => $color_palette,
-		'blockTypes'       => $allowed_block_types,
-		'titlePlaceholder' => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
+		'alignWide'          => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
+		'availableTemplates' => wp_get_theme()->get_page_templates( get_post( $post_to_edit['id'] ) ),
+		'colors'             => $color_palette,
+		'blockTypes'         => $allowed_block_types,
+		'titlePlaceholder'   => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
 	);
 
 	$post_type_object = get_post_type_object( $post_to_edit['type'] );

lib/meta-box-partial-page.php

@@ -93,6 +93,7 @@ function gutenberg_filter_meta_boxes( $meta_boxes ) {
 		'formatdiv',
 		'categorydiv',
 		'tagsdiv-post_tag',
+		'pageparentdiv',
 		'postimagediv',
 	);