Add page attributes menu order to sidebar

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-settings/index.js

@@ -14,6 +14,7 @@ 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 panel = (
 	<Panel>
@@ -23,6 +24,7 @@ const panel = (
 		<FeaturedImage />
 		<PostExcerpt />
 		<DiscussionPanel />
+		<PageAttributes />
 		<TableOfContents />
 	</Panel>
 );