Fix custom status label bug

.eslintignore

@@ -0,0 +1 @@
+*.build.js

blocks/src/custom-status/block.js

@@ -1,107 +1,172 @@
+/* global wp, document, ef_default_custom_status */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-type';
+
+/**
+ * Internal dependencies
+ */
 import './editor.scss';
 import './style.scss';
 
-let { __ } = wp.i18n;
-let { PluginPostStatusInfo } = wp.editPost;
-let { registerPlugin } = wp.plugins;
-let { subscribe, dispatch, select, withSelect, withDispatch } = wp.data;
-let { compose } = wp.compose;
-let { SelectControl } = wp.components;
+const { __ } = wp.i18n;
+const { PluginPostStatusInfo } = wp.editPost;
+const { registerPlugin } = wp.plugins;
+const { subscribe, dispatch, select, withSelect, withDispatch } = wp.data;
+const { compose } = wp.compose;
+const { SelectControl } = wp.components;
 
 /**
  * Map Custom Statuses as options for SelectControl
  */
-let statuses = window.EditFlowCustomStatuses.map( s => ({ label: s.name, value: s.slug }) );
+const customStatuses = window.EditFlowStatuses.custom_statuses.map( s => ( { label: s.name, value: s.slug } ) );
+
+// Trash isn't in `default_statuses` but we need to check for it
+const isCoreStatus = slug => window.EditFlowStatuses.default_statuses.find( s => s.slug === slug ) || slug === 'trash';
+const getCustomStatusLabel = slug => customStatuses.find( s => s.value === slug ).label;
+const getEditorPostSaveDraftDOM = () => {
+	return document.querySelector( '.editor-post-save-draft' );
+};
+
+/**
+ * Hack :(
+ *
+ * @param {string} status the status of the post
+ *
+ * @see https://github.com/WordPress/gutenberg/issues/3144
+ */
+const sideEffectL10nManipulation = status => {
+	const statusText = status ? `${ __( 'Save as' ) } ${ status }` : `${ __( 'Save' ) }`;
+	const node = getEditorPostSaveDraftDOM();
+	if ( node ) {
+		node.innerText = statusText;
+	}
+};
 
 /**
  * Hack :(
  *
  * @see https://github.com/WordPress/gutenberg/issues/3144
  *
- * Gutenberg overrides the label of the Save button after save (i.e. "Save Draft"). But there's no way to subscribe to a "post save" message.
+ * Gutenberg will also override the status set in '.editor-post-save-draft' after save, and there isn't yet a way
+ * to subscribe to a "post save" message. So instead set a timeout and override the text in '.editor-post-save-draft
+ *
+ * The timeout for this method is an attempt to counteract https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-saved-state/index.js#L37-L42
  *
- * So instead, we're keeping the button label generic ("Save"). There's a brief period where it still flips to "Save Draft" but that's something we need to work upstream to find a good fix for.
+ * It's effectively a mutation observer with a limit on the number of attempts it will poll the DOM
  */
-let sideEffectL10nManipulation = () => {
-  let node = document.querySelector('.editor-post-save-draft');
-  if ( node ) {
-    document.querySelector( '.editor-post-save-draft' ).innerText = `${ __( 'Save' ) }`
-  }
-}
+let activePostStatusUpdateTimeout = null;
+const schedulePostStatusUpdater = ( timeout = 120, attempts = 20 ) => {
+	if ( attempts < 0 ) {
+		return;
+	}
+
+	const node = getEditorPostSaveDraftDOM();
+
+	if ( node ) {
+		const status = select( 'core/editor' ).getEditedPostAttribute( 'status' );
+		const statusLabel = getCustomStatusLabel( status );
+
+		if ( typeof status === 'undefined' || typeof statusLabel === 'undefined' || isCoreStatus( status ) ) {
+			return;
+		}
+
+		sideEffectL10nManipulation( statusLabel );
+		clearTimeout( activePostStatusUpdateTimeout );
+	} else {
+		// Clearing timeouts so we don't stack them
+		clearTimeout( activePostStatusUpdateTimeout );
+		activePostStatusUpdateTimeout = setTimeout( () => {
+			schedulePostStatusUpdater( timeout, attempts - 1 );
+		}, timeout );
+	}
+};
 
 // Set the status to the default custom status.
-subscribe( function () {
-  const postId = select( 'core/editor' ).getCurrentPostId();
-  // Post isn't ready yet so don't do anything.
-  if ( ! postId ) {
-    return;
-  }
-
-  // For new posts, we need to force the our default custom status.
-  // Otherwise WordPress will force it to "Draft".
-  const isCleanNewPost = select( 'core/editor' ).isCleanNewPost();
-  if ( isCleanNewPost ) {
-    dispatch( 'core/editor' ).editPost( {
-      status: ef_default_custom_status
-    } );
-
-    return;
-  }
-
-  // Update the "Save" button.
-  var status = select( 'core/editor' ).getEditedPostAttribute( 'status' );
-  if ( typeof status !== 'undefined' && status !== 'publish' ) {
-    sideEffectL10nManipulation();
-  }
+subscribe( function() {
+	const postId = select( 'core/editor' ).getCurrentPostId();
+	// Post isn't ready yet so don't do anything.
+	if ( ! postId ) {
+		return;
+	}
+
+	// For new posts, we need to force the our default custom status.
+	// Otherwise WordPress will force it to "Draft".
+	const isCleanNewPost = select( 'core/editor' ).isCleanNewPost();
+	if ( isCleanNewPost ) {
+		dispatch( 'core/editor' ).editPost( {
+			status: ef_default_custom_status,
+		} );
+
+		return;
+	}
+
+	// Update the "Save" button.
+	const status = select( 'core/editor' ).getEditedPostAttribute( 'status' );
+	if ( typeof status !== 'undefined' && status !== 'publish' ) {
+		schedulePostStatusUpdater();
+	}
 } );
 
 /**
  * Custom status component
- * @param object props
+ * @param {Object} param - An object.
+ * @param {string} onUpdate - Function called for updating
+ * @param {string} status - Status of the post
+ *
+ * @return {JSX} - the extended post status panel
  */
-let EditFlowCustomPostStati = ( { onUpdate, status } ) => (
-  <PluginPostStatusInfo
-    className={ `edit-flow-extended-post-status edit-flow-extended-post-status-${status}` }
-  >
-    <h4>{ status !== 'publish' ? __( 'Extended Post Status', 'edit-flow' ) : __( 'Extended Post Status Disabled.', 'edit-flow' ) }</h4>
-
-    { status !== 'publish' ? <SelectControl
-      label=""
-      value={ status }
-      options={ statuses }
-      onChange={ onUpdate }
-    /> : null }
-
-    <small className="edit-flow-extended-post-status-note">
-      { status !== 'publish' ? __( `Note: this will override all status settings above.`, 'edit-flow' ) : __( 'To select a custom status, please unpublish the content first.', 'edit-flow' ) }
-    </small>
-  </PluginPostStatusInfo>
+const EditFlowCustomPostStati = ( { onUpdate, status } ) => (
+	<PluginPostStatusInfo
+		className={ `edit-flow-extended-post-status edit-flow-extended-post-status-${ status }` }
+	>
+		<h4>{ status !== 'publish' ? __( 'Extended Post Status', 'edit-flow' ) : __( 'Extended Post Status Disabled.', 'edit-flow' ) }</h4>
+
+		{ status !== 'publish' ? <SelectControl
+			label=""
+			value={ status }
+			options={ customStatuses }
+			onChange={ onUpdate }
+		/> : null }
+
+		<small className="edit-flow-extended-post-status-note">
+			{ status !== 'publish' ? __( 'Note: this will override all status settings above.', 'edit-flow' ) : __( 'To select a custom status, please unpublish the content first.', 'edit-flow' ) }
+		</small>
+	</PluginPostStatusInfo>
 );
 
-const mapSelectToProps = ( select ) => {
-  return {
-    status: select('core/editor').getEditedPostAttribute('status'),
-  };
+EditFlowCustomPostStati.propTypes = {
+	onUpdate: PropTypes.func,
+	status: PropTypes.string,
+};
+
+const mapSelectToProps = _select => {
+	return {
+		status: _select( 'core/editor' ).getEditedPostAttribute( 'status' ),
+	};
 };
 
-const mapDispatchToProps = ( dispatch ) => {
-  return {
-    onUpdate( status ) {
-      dispatch( 'core/editor' ).editPost( { status } );
-      sideEffectL10nManipulation();
-    },
-  };
+const mapDispatchToProps = _dispatch => {
+	return {
+		onUpdate( status ) {
+			_dispatch( 'core/editor' ).editPost( { status } );
+			schedulePostStatusUpdater();
+		},
+	};
 };
 
-let plugin = compose(
-  withSelect( mapSelectToProps ),
-  withDispatch( mapDispatchToProps )
+const plugin = compose(
+	withSelect( mapSelectToProps ),
+	withDispatch( mapDispatchToProps )
 )( EditFlowCustomPostStati );
 
 /**
  * Kick it off
  */
 registerPlugin( 'edit-flow-custom-status', {
-  icon: 'edit-flow',
-  render: plugin
+	icon: 'edit-flow',
+	render: plugin,
 } );

modules/custom-status/compat/block-editor.php

@@ -23,15 +23,31 @@ function action_admin_enqueue_scripts() {
 		wp_enqueue_style( 'edit-flow-block-custom-status', EDIT_FLOW_URL . 'blocks/dist/custom-status.editor.build.css', false, EDIT_FLOW_VERSION );
 		wp_enqueue_script( 'edit-flow-block-custom-status', EDIT_FLOW_URL . 'blocks/dist/custom-status.build.js', array( 'wp-blocks', 'wp-element', 'wp-edit-post', 'wp-plugins', 'wp-components' ), EDIT_FLOW_VERSION );
 
-		wp_localize_script( 'edit-flow-block-custom-status', 'EditFlowCustomStatuses', $this->get_custom_statuses() );
+		wp_localize_script( 
+			'edit-flow-block-custom-status', 
+			'EditFlowStatuses',
+			array (
+				'custom_statuses' => $this->get_custom_statuses(),
+				'default_statuses' => $this->get_default_statuses(),
+			) 
+		);
 	}
 
 	/**
 	 * Just a wrapper to make sure we're have simple array instead of associative one.
 	 *
-	 * @return array Custom statuses.
+	 * @return array All statuses.
 	 */
-	function get_custom_statuses() {
+	public function get_default_statuses() {
+		return array_values( $this->ef_module->get_default_statuses() );
+	}
+
+		/**
+	 * Just a wrapper to make sure we're have simple array instead of associative one.
+	 *
+	 * @return array custom statuses.
+	 */
+	public function get_custom_statuses() {
 		return array_values( $this->ef_module->get_custom_statuses() );
 	}
 }

modules/custom-status/custom-status.php

@@ -416,32 +416,14 @@ function post_admin_header() {
 
 			$custom_statuses = apply_filters( 'ef_custom_status_list', $custom_statuses, $post );
 
-			// All right, we want to set up the JS var which contains all custom statuses
-			$all_statuses = array();
-
-			// The default statuses from WordPress
-			$all_statuses[] = array(
-				'name' => __( 'Published', 'edit-flow' ),
-				'slug' => 'publish',
-				'description' => '',
-			);
-			$all_statuses[] = array(
-				'name' => __( 'Privately Published', 'edit-flow' ),
-				'slug' => 'private',
-				'description' => '',
-			);
-			$all_statuses[] = array(
-				'name' => __( 'Scheduled', 'edit-flow' ),
-				'slug' => 'future',
-				'description' => '',
-			);
-
-			// Load the custom statuses
-			foreach( $custom_statuses as $status ) {
-				$all_statuses[] = array(
-					'name' => esc_js( $status->name ),
-					'slug' => esc_js( $status->slug ),
-					'description' => esc_js( $status->description ),
+			$all_statuses = array_merge( $custom_statuses, $this->get_default_statuses() );
+
+			$statuses_js = array();
+			foreach ( $all_statuses as $status ) {
+				$statuses_js[] = array(
+					'name' => $status->name,
+					'slug' => $status->slug,
+					'description' => $status->description,
 				);
 			}
 
@@ -452,7 +434,7 @@ function post_admin_header() {
 			// Now, let's print the JS vars
 			?>
 			<script type="text/javascript">
-				var custom_statuses = <?php echo json_encode( $all_statuses ); ?>;
+				var custom_statuses =  <?php echo wp_json_encode( $statuses_js ); ?>;
 				var ef_default_custom_status = '<?php echo esc_js( $this->get_default_custom_status()->slug ); ?>';
 				var current_status = '<?php echo esc_js( $selected ); ?>';
 				var current_status_name = '<?php echo esc_js( $selected_name ); ?>';
@@ -650,6 +632,41 @@ function get_custom_statuses( $args = array() ) {
 		return $ordered_statuses;
 	}
 
+	/**
+	 * The default statuses from core. Returned as an array of stdClass to 
+	 * make it easy to merge with our custom statuses (which are WPTerm objects)
+	 * 
+	 * @return array an array of stdClass objects
+	 */
+	public function get_default_statuses() {
+		// The default statuses from WordPress
+		$published_status = new stdClass();
+		$published_status->name = __( 'Published', 'edit-flow' );
+		$published_status->slug = 'publish';
+		$published_status->description = '';
+
+		$private_status = new stdClass();
+		$private_status->name = __( 'Privately Published', 'edit-flow' );
+		$private_status->slug = 'private';
+		$private_status->description = '';
+
+		$scheduled_status = new stdClass();
+		$scheduled_status->name = __( 'Scheduled', 'edit-flow' );
+		$scheduled_status->slug = 'future';
+		$scheduled_status->description = '';
+
+		return array( $published_status, $private_status, $scheduled_status );
+	}
+
+	/**
+	 * Get all statuses (WP Core and Edit Flow)
+	 *
+	 * @return array $statuses All of the statuses
+	 */
+	public function get_all_statuses() {
+		return array_merge( $this->get_custom_statuses(), $this->get_default_statuses() );
+	}
+
 	/**
 	 * Returns the a single status object based on ID, title, or slug
 	 *