Try/custom statuses

lib/client-assets.php

@@ -655,6 +655,12 @@ function gutenberg_extend_block_editor_preload_paths( $preload_paths, $post ) {
 		$preload_paths[] = $blocks_path;
 	}
 
+	// Preload registered Post Statuses.
+	$statuses_path = '/wp/v2/statuses?context=edit';
+	if ( ! in_array( $statuses_path, $preload_paths, true ) ) {
+		$preload_paths[] = $statuses_path;
+	}
+
 	return $preload_paths;
 }
 add_filter( 'block_editor_preload_paths', 'gutenberg_extend_block_editor_preload_paths', 10, 2 );

lib/rest-api.php

@@ -52,7 +52,79 @@ function gutenberg_filter_oembed_result( $response, $handler, $request ) {
 }
 add_filter( 'rest_request_after_callbacks', 'gutenberg_filter_oembed_result', 10, 3 );
 
+/**
+ * Adds the visibility property to the `publish` and `private` statuses.
+ *
+ * @since 6.x.x
+ *
+ * @param  array  $data      The status data.
+ * @param  string $attribute The REST field's name attribute.
+ * @return string            The label to use into the Block editor.
+ */
+function gutenberg_get_status_visibility_properties( $data, $attribute ) {
+	$value = new stdClass();
+
+	if ( 'visibility' !== $attribute || ! isset( $data['slug'] ) ) {
+		return $value;
+	}
+
+	if ( 'publish' === $data['slug'] ) {
+		$value->value = 'public';
+		$value->label = __( 'Public', 'gutenberg' );
+		$value->info  = __( 'Visible to everyone.', 'gutenberg' );
+	} elseif ( 'private' === $data['slug'] ) {
+		$value->value = 'private';
+		$value->label = __( 'Private', 'gutenberg' );
+		$value->info  = __( 'Only visible to site admins and editors.', 'gutenberg' );
+	} else {
+		$status_object = get_post_status_object( $data['slug'] );
+
+		if ( isset( $status_object->visibility ) ) {
+			$value = (object) $status_object->visibility;
+		}
+	}
 
+	return $value;
+}
+
+/**
+ * Registers a new property for the REST Status controller schema.
+ *
+ * @since 6.x.x
+ */
+function gutenberg_register_statuses_visibility_field() {
+	register_rest_field(
+		'status',
+		'visibility',
+		array(
+			'get_callback' => 'gutenberg_get_status_visibility_properties',
+			'schema'       => array(
+				'context'     => array( 'view', 'edit' ),
+				'description' => __( 'The visibility properties of the status.', 'gutenberg' ),
+				'type'        => 'object',
+				'readonly'    => true,
+			),
+		)
+	);
+
+	/**
+	 * Register a custom status for the password visibility. This is done within
+	 * the REST context to avoid any side effects on the classic editor.
+	 */
+	register_post_status(
+		'password',
+		array(
+			'label'      => _x( 'Password protected', 'post status', 'gutenberg' ),
+			'protected'  => true,
+			'visibility' => (object) array(
+				'value' => 'password',
+				'label' => __( 'Password Protected', 'gutenberg' ),
+				'info'  => __( 'Protected with a password you choose. Only those with the password can view this post.', 'gutenberg' ),
+			),
+		)
+	);
+}
+add_action( 'rest_api_init', 'gutenberg_register_statuses_visibility_field' );
 
 /**
  * Start: Include for phase 2

packages/core-data/src/entities.js

@@ -15,12 +15,14 @@ export const defaultEntities = [
 	{ name: 'postType', kind: 'root', key: 'slug', baseURL: '/wp/v2/types' },
 	{ name: 'media', kind: 'root', baseURL: '/wp/v2/media', plural: 'mediaItems' },
 	{ name: 'taxonomy', kind: 'root', key: 'slug', baseURL: '/wp/v2/taxonomies', plural: 'taxonomies' },
+	{ name: 'status', kind: 'root', key: 'slug', baseURL: '/wp/v2/statuses', plural: 'statuses' },
 	{ name: 'widgetArea', kind: 'root', baseURL: '/__experimental/widget-areas', plural: 'widgetAreas' },
 ];
 
 export const kinds = [
 	{ name: 'postType', loadEntities: loadPostTypeEntities },
 	{ name: 'taxonomy', loadEntities: loadTaxonomyEntities },
+	{ name: 'status', loadEntities: loadStatusEntities },
 ];
 
 /**
@@ -55,6 +57,22 @@ function* loadTaxonomyEntities() {
 	} );
 }
 
+/**
+ * Returns the list of the status entities.
+ *
+ * @return {Promise} Entities promise
+ */
+function* loadStatusEntities() {
+	const statuses = yield apiFetch( { path: '/wp/v2/statuses?context=edit' } );
+	return map( statuses, ( status, slug ) => {
+		return {
+			kind: 'status',
+			baseURL: '/wp/v2/' + status.rest_base,
+			slug,
+		};
+	} );
+}
+
 /**
  * Returns the entity's getter method name given its kind and name.
  *

packages/core-data/src/reducer.js

@@ -98,6 +98,22 @@ export function taxonomies( state = [], action ) {
 	return state;
 }
 
+/**
+ * Reducer managing statuses.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function statuses( state = [], action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_STATUSES':
+			return action.statuses;
+	}
+
+	return state;
+}
 /**
  * Reducer managing theme supports data.
  *

packages/editor/src/components/post-publish-button/index.js

@@ -68,6 +68,8 @@ export class PostPublishButton extends Component {
 			publishStatus = 'future';
 		} else if ( visibility === 'private' ) {
 			publishStatus = 'private';
+		} else if ( visibility && visibility !== 'public' && visibility !== 'password' ) {
+			publishStatus = visibility;
 		} else {
 			publishStatus = 'publish';
 		}

packages/editor/src/components/post-visibility/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -6,11 +11,6 @@ import { Component } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { visibilityOptions } from './utils';
-
 export class PostVisibility extends Component {
 	constructor( props ) {
 		super( ...arguments );
@@ -19,17 +19,19 @@ export class PostVisibility extends Component {
 		this.setPrivate = this.setPrivate.bind( this );
 		this.setPasswordProtected = this.setPasswordProtected.bind( this );
 		this.updatePassword = this.updatePassword.bind( this );
+		this.setCustomVisibility = this.setCustomVisibility.bind( this );
 
 		this.state = {
 			hasPassword: !! props.password,
+			currentVisibility: props.postVisibility,
 		};
 	}
 
 	setPublic() {
-		const { visibility, onUpdateVisibility, status } = this.props;
+		const { postVisibility, onUpdateVisibility } = this.props;
 
-		onUpdateVisibility( visibility === 'private' ? 'draft' : status );
-		this.setState( { hasPassword: false } );
+		onUpdateVisibility( postVisibility === 'private' ? 'draft' : 'publish' );
+		this.setState( { currentVisibility: 'public', hasPassword: false } );
 	}
 
 	setPrivate() {
@@ -40,33 +42,47 @@ export class PostVisibility extends Component {
 		const { onUpdateVisibility, onSave } = this.props;
 
 		onUpdateVisibility( 'private' );
-		this.setState( { hasPassword: false } );
+		this.setState( { currentVisibility: 'private', hasPassword: false } );
 		onSave();
 	}
 
 	setPasswordProtected() {
-		const { visibility, onUpdateVisibility, status, password } = this.props;
+		const { postVisibility, onUpdateVisibility, password } = this.props;
 
-		onUpdateVisibility( visibility === 'private' ? 'draft' : status, password || '' );
-		this.setState( { hasPassword: true } );
+		onUpdateVisibility( postVisibility === 'private' ? 'draft' : 'publish', password || '' );
+		this.setState( { currentVisibility: 'password', hasPassword: true } );
 	}
 
 	updatePassword( event ) {
 		const { status, onUpdateVisibility } = this.props;
 		onUpdateVisibility( status, event.target.value );
 	}
 
+	setCustomVisibility( event ) {
+		const { onUpdateVisibility } = this.props;
+
+		if ( event.target.value !== this.state.currentVisibility ) {
+			onUpdateVisibility( event.target.value );
+			this.setState( { currentVisibility: event.target.value, hasPassword: false } );
+		}
+	}
+
+	isChecked( statusVisibility ) {
+		return this.state.currentVisibility === statusVisibility;
+	}
+
 	render() {
-		const { visibility, password, instanceId } = this.props;
+		const { password, statuses, instanceId } = this.props;
+		const statusVisibilities = filter( statuses, ( status ) => status.visibility.value );
 
 		const visibilityHandlers = {
 			public: {
 				onSelect: this.setPublic,
-				checked: visibility === 'public' && ! this.state.hasPassword,
+				checked: this.state.currentVisibility === 'public' && ! this.state.hasPassword,
 			},
 			private: {
 				onSelect: this.setPrivate,
-				checked: visibility === 'private',
+				checked: this.state.currentVisibility === 'private',
 			},
 			password: {
 				onSelect: this.setPasswordProtected,
@@ -79,25 +95,25 @@ export class PostVisibility extends Component {
 				<legend className="editor-post-visibility__dialog-legend">
 					{ __( 'Post Visibility' ) }
 				</legend>
-				{ visibilityOptions.map( ( { value, label, info } ) => (
-					<div key={ value } className="editor-post-visibility__choice">
+				{ statusVisibilities.map( ( { visibility } ) => (
+					<div key={ visibility.value } className="editor-post-visibility__choice">
 						<input
 							type="radio"
 							name={ `editor-post-visibility__setting-${ instanceId }` }
-							value={ value }
-							onChange={ visibilityHandlers[ value ].onSelect }
-							checked={ visibilityHandlers[ value ].checked }
-							id={ `editor-post-${ value }-${ instanceId }` }
-							aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
+							value={ visibility.value }
+							onChange={ visibilityHandlers[ visibility.value ] ? visibilityHandlers[ visibility.value ].onSelect : this.setCustomVisibility }
+							checked={ visibilityHandlers[ visibility.value ] ? visibilityHandlers[ visibility.value ].checked : this.isChecked( visibility.value ) }
+							id={ `editor-post-${ visibility.value }-${ instanceId }` }
+							aria-describedby={ `editor-post-${ visibility.value }-${ instanceId }-description` }
 							className="editor-post-visibility__dialog-radio"
 						/>
 						<label
-							htmlFor={ `editor-post-${ value }-${ instanceId }` }
+							htmlFor={ `editor-post-${ visibility.value }-${ instanceId }` }
 							className="editor-post-visibility__dialog-label"
 						>
-							{ label }
+							{ visibility.label }
 						</label>
-						{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
+						{ <p id={ `editor-post-${ visibility.value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ visibility.info }</p> }
 					</div>
 				) ) }
 			</fieldset>,
@@ -131,8 +147,9 @@ export default compose( [
 		} = select( 'core/editor' );
 		return {
 			status: getEditedPostAttribute( 'status' ),
-			visibility: getEditedPostVisibility(),
+			postVisibility: getEditedPostVisibility(),
 			password: getEditedPostAttribute( 'password' ),
+			statuses: select( 'core' ).getStatuses(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

packages/editor/src/components/post-visibility/label.js

@@ -8,17 +8,20 @@ import { find } from 'lodash';
  */
 import { withSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { visibilityOptions } from './utils';
+function PostVisibilityLabel( { postVisibility, statuses } ) {
+	const statusVisibibilies = null !== statuses ? statuses.map( ( { visibility } ) => visibility ) : [];
+	const getVisibilityLabel = () => {
+		if ( ! statusVisibibilies.length ) {
+			return '';
+		}
 
-function PostVisibilityLabel( { visibility } ) {
-	const getVisibilityLabel = () => find( visibilityOptions, { value: visibility } ).label;
+		return find( statusVisibibilies, { value: postVisibility } ).label;
+	};
 
-	return getVisibilityLabel( visibility );
+	return getVisibilityLabel( postVisibility );
 }
 
 export default withSelect( ( select ) => ( {
-	visibility: select( 'core/editor' ).getEditedPostVisibility(),
+	postVisibility: select( 'core/editor' ).getEditedPostVisibility(),
+	statuses: select( 'core' ).getStatuses(),
 } ) )( PostVisibilityLabel );

packages/editor/src/store/selectors.js

@@ -366,11 +366,13 @@ export const getAutosaveAttribute = createRegistrySelector( ( select ) => ( stat
  */
 export function getEditedPostVisibility( state ) {
 	const status = getEditedPostAttribute( state, 'status' );
-	if ( status === 'private' ) {
-		return 'private';
+	const password = getEditedPostAttribute( state, 'password' );
+	const publicStatuses = [ 'auto-draft', 'draft', 'future', 'pending', 'publish', 'trash' ];
+
+	if ( ! password && ! includes( publicStatuses, status ) ) {
+		return status;
 	}
 
-	const password = getEditedPostAttribute( state, 'password' );
 	if ( password ) {
 		return 'password';
 	}
@@ -399,7 +401,7 @@ export function isCurrentPostPending( state ) {
 export function isCurrentPostPublished( state ) {
 	const post = getCurrentPost( state );
 
-	return [ 'publish', 'private' ].indexOf( post.status ) !== -1 ||
+	return [ 'auto-draft', 'draft', 'future', 'pending' ].indexOf( post.status ) === -1 ||
 		( post.status === 'future' && ! isInTheFuture( new Date( Number( getDate( post.date ) ) - ONE_MINUTE_IN_MS ) ) );
 }
 
@@ -429,7 +431,7 @@ export function isEditedPostPublishable( state ) {
 	//
 	//  See: <PostPublishButton /> (`isButtonEnabled` assigned by `isSaveable`)
 
-	return isEditedPostDirty( state ) || [ 'publish', 'private', 'future' ].indexOf( post.status ) === -1;
+	return isEditedPostDirty( state ) || [ 'auto-draft', 'draft', 'pending' ].indexOf( post.status ) !== -1;
 }
 
 /**