Merge pull request #1957 from WordPress/add/991-page-attributes

Add page attributes menu order to sidebar

components/index.js

@@ -13,6 +13,7 @@ export { default as NoticeList } from './notice/list';
 export { default as Panel } from './panel';
 export { default as PanelHeader } from './panel/header';
 export { default as PanelBody } from './panel/body';
+export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';

components/panel/row.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+function PanelRow( { className, children } ) {
+	const classes = classnames( 'components-panel__row', className );
+
+	return (
+		<div className={ classes }>
+			{ children }
+		</div>
+	);
+}
+
+export default PanelRow;

components/panel/style.scss

@@ -77,3 +77,14 @@
 .components-panel__body-toggle-icon {
 	margin-right: -5px;
 }
+
+.components-panel__row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 20px;
+
+	&:empty {
+		margin-top: 0;
+	}
+}

editor/sidebar/discussion-panel/index.js

@@ -7,12 +7,11 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from 'i18n';
-import { PanelBody, FormToggle, withInstanceId } from 'components';
+import { PanelBody, PanelRow, FormToggle, withInstanceId } from 'components';
 
 /**
  * Internal Dependencies
  */
-import './style.scss';
 import { getEditedPostAttribute } from '../../selectors';
 import { editPost } from '../../actions';
 
@@ -25,24 +24,24 @@ function DiscussionPanel( { pingStatus = 'open', commentStatus = 'open', instanc
 
 	return (
 		<PanelBody title={ __( 'Discussion' ) } initialOpen={ false }>
-			<div className="editor-discussion-panel__row">
+			<PanelRow>
 				<label htmlFor={ commentsToggleId }>{ __( 'Allow Comments' ) }</label>
 				<FormToggle
 					checked={ commentStatus === 'open' }
 					onChange={ onToggleComments }
 					showHint={ false }
 					id={ commentsToggleId }
 				/>
-			</div>
-			<div className="editor-discussion-panel__row">
+			</PanelRow>
+			<PanelRow>
 				<label htmlFor={ pingbacksToggleId }>{ __( 'Allow Pingbacks & Trackbacks' ) }</label>
 				<FormToggle
 					checked={ pingStatus === 'open' }
 					onChange={ onTogglePingback }
 					showHint={ false }
 					id={ pingbacksToggleId }
 				/>
-			</div>
+			</PanelRow>
 		</PanelBody>
 	);
 }

editor/sidebar/page-attributes/index.js

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import { Component } from 'element';
+import { PanelBody, PanelRow, withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import { editPost } from '../../actions';
+import { getCurrentPostType, getEditedPostAttribute } from '../../selectors';
+
+export class PageAttributes extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.setUpdatedOrder = this.setUpdatedOrder.bind( this );
+
+		this.state = {
+			supportsPageAttributes: false,
+		};
+	}
+
+	componentDidMount() {
+		this.fetchSupports();
+	}
+
+	fetchSupports() {
+		const { postTypeSlug } = this.props;
+		this.fetchSupportsRequest = new wp.api.models.Type( { id: postTypeSlug } )
+			.fetch( { data: { context: 'edit' } } )
+			.done( ( postType ) => {
+				const {
+					'page-attributes': supportsPageAttributes = false,
+				} = postType.supports;
+
+				this.setState( { supportsPageAttributes } );
+			} );
+	}
+
+	componentWillUnmount() {
+		if ( this.fetchSupportsRequest ) {
+			this.fetchSupportsRequest.abort();
+		}
+	}
+
+	setUpdatedOrder( event ) {
+		const order = Number( event.target.value );
+		if ( order >= 0 ) {
+			this.props.onUpdateOrder( order );
+		}
+	}
+
+	render() {
+		const { instanceId, order } = this.props;
+		const { supportsPageAttributes } = this.state;
+
+		// Only render fields if post type supports page attributes
+		if ( ! supportsPageAttributes ) {
+			return null;
+		}
+
+		// Create unique identifier for inputs
+		const inputId = `editor-page-attributes__order-${ instanceId }`;
+
+		return (
+			<PanelBody
+				title={ __( 'Page Attributes' ) }
+				initialOpen={ false }
+			>
+				<PanelRow>
+					<label htmlFor={ inputId }>
+						{ __( 'Order' ) }
+					</label>
+					<input
+						type="text"
+						value={ order || 0 }
+						onChange={ this.setUpdatedOrder }
+						id={ inputId }
+						size={ 6 } />
+				</PanelRow>
+			</PanelBody>
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			postTypeSlug: getCurrentPostType( state ),
+			order: getEditedPostAttribute( state, 'menu_order' ),
+		};
+	},
+	( dispatch ) => {
+		return {
+			onUpdateOrder( order ) {
+				dispatch( editPost( {
+					menu_order: order,
+				} ) );
+			},
+		};
+	}
+)( withInstanceId( PageAttributes ) );

editor/sidebar/page-attributes/test/index.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { PageAttributes } from '../';
+
+describe( 'PageAttributes', () => {
+	let fetchSupports;
+	beforeEach( () => {
+		fetchSupports = PageAttributes.prototype.fetchSupports;
+		PageAttributes.prototype.fetchSupports = jest.fn();
+	} );
+
+	afterEach( () => {
+		PageAttributes.prototype.fetchSupports = fetchSupports;
+	} );
+
+	it( 'should not render anything if no page attributes support', () => {
+		const wrapper = shallow( <PageAttributes /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'should render input if page attributes support', () => {
+		const wrapper = shallow( <PageAttributes /> );
+		wrapper.setState( { supportsPageAttributes: true } );
+
+		expect( wrapper.type() ).not.toBe( null );
+	} );
+
+	it( 'should reject invalid input', () => {
+		const onUpdateOrder = jest.fn();
+		const wrapper = shallow( <PageAttributes onUpdateOrder={ onUpdateOrder } /> );
+		wrapper.setState( { supportsPageAttributes: true } );
+
+		wrapper.find( 'input' ).simulate( 'change', {
+			target: {
+				value: -1,
+			},
+		} );
+
+		wrapper.find( 'input' ).simulate( 'change', {
+			target: {
+				value: 'bad',
+			},
+		} );
+
+		expect( onUpdateOrder ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should update with valid input', () => {
+		const onUpdateOrder = jest.fn();
+		const wrapper = shallow( <PageAttributes onUpdateOrder={ onUpdateOrder } /> );
+		wrapper.setState( { supportsPageAttributes: true } );
+
+		wrapper.find( 'input' ).simulate( 'change', {
+			target: {
+				value: 4,
+			},
+		} );
+
+		expect( onUpdateOrder ).toHaveBeenCalledWith( 4 );
+	} );
+} );

editor/sidebar/post-schedule/index.js

@@ -12,6 +12,7 @@ import moment from 'moment';
 import { __ } from 'i18n';
 import { Component } from 'element';
 import { dateI18n, settings } from 'date';
+import { PanelRow } from 'components';
 
 /**
  * Internal dependencies
@@ -58,7 +59,7 @@ class PostSchedule extends Component {
 		);
 
 		return (
-			<div className="editor-post-schedule">
+			<PanelRow className="editor-post-schedule">
 				<span>{ __( 'Publish' ) }</span>
 				<button
 					type="button"
@@ -85,7 +86,7 @@ class PostSchedule extends Component {
 						/>
 					</div>
 				}
-			</div>
+			</PanelRow>
 		);
 	}
 }

editor/sidebar/post-schedule/style.scss

@@ -1,9 +1,6 @@
 @import '~react-datepicker/dist/react-datepicker';
 
 .editor-post-schedule {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
 	width: 100%;
 	position: relative;
 }

editor/sidebar/post-settings/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
@@ -19,24 +14,19 @@ import FeaturedImage from '../featured-image';
 import DiscussionPanel from '../discussion-panel';
 import LastRevision from '../last-revision';
 import TableOfContents from '../table-of-contents';
+import PageAttributes from '../page-attributes';
 
-const PostSettings = () => {
-	return (
-		<Panel>
-			<PostStatus />
-			<LastRevision />
-			<PostTaxonomies />
-			<FeaturedImage />
-			<PostExcerpt />
-			<DiscussionPanel />
-			<TableOfContents />
-		</Panel>
-	);
-};
+const panel = (
+	<Panel>
+		<PostStatus />
+		<LastRevision />
+		<PostTaxonomies />
+		<FeaturedImage />
+		<PostExcerpt />
+		<DiscussionPanel />
+		<PageAttributes />
+		<TableOfContents />
+	</Panel>
+);
 
-export default connect(
-	undefined,
-	( dispatch ) => ( {
-		toggleSidebar: () => dispatch( { type: 'TOGGLE_SIDEBAR' } ),
-	} )
-)( PostSettings );
+export default () => panel;