Add Gutenberg prepublish panel to Autotweet post

.babelrc

@@ -1,3 +1,11 @@
 {
-	"presets": ["@babel/env", "@babel/preset-react"]
+	"presets": ["@babel/env", "@babel/preset-react"],
+	"plugins": [
+		[
+			"@wordpress/babel-plugin-makepot",
+			{
+				"output": "languages/autotweet.pot",
+			}
+		],
+	]
 }

.eslintrc.json

@@ -2,5 +2,5 @@
 	"globals": {
 		"wp": "readonly"
 	},
-	"extends": "@10up/eslint-config"
+	"extends": "plugin:@wordpress/eslint-plugin/recommended"
 }

assets/css/admin-autotweet.css

@@ -12,16 +12,58 @@
 	white-space: normal;
 }
 
-#autotweet-icon.pending {
+.autotweet-prepublish__checkbox .components-base-control__field, .autotweet-prepublish__checkbox-label { 
+	display: flex;
+	align-items: center;
+}
+
+.autotweet-prepublish__checkbox .components-base-control__field {
+	margin-top: 0.5rem;
+}
+
+.autotweet-prepublish__checkbox-label svg {
+	margin-right: 0.5rem;
+}
+
+.autotweet-prepublish__message-label {
+	display: flex;
+	justify-content: space-between;
+}
+
+.autotweet-prepublish__checkbox-row input[type=checkbox].components-checkbox-control__input {
+	margin-right: 0.5rem;
+}
+
+.autotweet-prepublish__override-row {
+	padding: 0.5rem 0;
+}
+
+.autotweet-prepublish__override-row .components-button {
+	margin-bottom: 1rem;
+}
+
+.autotweet-post-status {
+	font-style: italic;
+}
+
+.autotweet-post-status svg {
+	transform: translate3d(0, 3px, 0);
+    margin-right: 5px;
+}
+
+#autotweet-icon.pending,
+.autotweet-prepublish__checkbox-row .dashicons-twitter.pending {
 	animation: fadeIn 1s infinite alternate;
 	color: #00aced;
 }
 
-#autotweet-icon.enabled {
+#autotweet-icon.enabled,
+.autotweet-prepublish__checkbox-row .dashicons-twitter.enabled {
 	color: #00aced;
 }
 
-#autotweet-icon.disabled {
+#autotweet-icon.disabled,
+.autotweet-prepublish__checkbox-row .dashicons-twitter.disabled {
 	color: #72777c;
 }
 
@@ -32,7 +74,7 @@
 	}
 }
 
-a#autotweet-edit{
+a#autotweet-edit {
 	color: #0073aa;
 	text-decoration: underline;
 	transition-property: border, background, color;
@@ -48,10 +90,15 @@ textarea#autotweet-text {
 	margin: 4px 0 0;
 	width: 100%
 }
-span#autotweet-counter-wrap{
+span#autotweet-counter-wrap {
 	background: rgba(0, 0, 0, 0.07);
 	font-family: Consolas, Monaco, monospace;
 }
-span.over-limit{
+
+span.near-limit {
+	color: darkorange;
+}
+
+span.over-limit {
 	color: red;
 }

includes/admin/assets.php

@@ -10,9 +10,10 @@
 
 use function TenUp\AutoTweet\Utils\get_autotweet_meta;
 use function TenUp\AutoTweet\Utils\opted_into_autotweet;
+use function TenUp\AutoTweet\REST\post_autotweet_meta_rest_route;
 use const TenUp\AutoTweet\Core\Post_Meta\ENABLE_AUTOTWEET_KEY;
 use const TenUp\AutoTweet\Core\Post_Meta\TWEET_BODY_KEY;
-use function TenUp\AutoTweet\REST\post_autotweet_meta_rest_route;
+use const TenUp\AutoTweet\Core\Post_Meta\TWITTER_STATUS_KEY;
 
 /**
  * The handle used in registering plugin assets.
@@ -25,10 +26,25 @@
  * @since 1.0.0
  */
 function add_hook_callbacks() {
+	add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\enqueue_shared_assets' );
 	add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\maybe_enqueue_classic_editor_assets' );
 	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_editor_assets' );
 }
 
+/**
+ * Enqueues assets shared by WP5.0 and classic editors.
+ *
+ * @since 1.0.0
+ */
+function enqueue_shared_assets() {
+	wp_enqueue_style(
+		'admin_autotweet',
+		trailingslashit( TUAT_URL ) . 'assets/css/admin-autotweet.css',
+		[],
+		TUAT_VERSION
+	);
+}
+
 /**
  * Enqueues assets for supported post type editors where the block editor is not active.
  *
@@ -110,7 +126,16 @@ function enqueue_editor_assets() {
 	wp_enqueue_script(
 		SCRIPT_HANDLE,
 		trailingslashit( TUAT_URL ) . 'dist/autotweet.js',
-		[ 'wp-plugins', 'wp-edit-post' ],
+		[
+			'lodash',
+			'wp-components',
+			'wp-compose',
+			'wp-data',
+			'wp-edit-post',
+			'wp-element',
+			'wp-i18n',
+			'wp-plugins',
+		],
 		TUAT_VERSION,
 		true
 	);
@@ -133,14 +158,18 @@ function localize_data( $handle = SCRIPT_HANDLE ) {
 		);
 	}
 
+	$status_meta = get_autotweet_meta( $post_id, TWITTER_STATUS_KEY );
+
 	$localization = [
 		'enabled'            => get_autotweet_meta( $post_id, ENABLE_AUTOTWEET_KEY ),
 		'enableAutotweetKey' => ENABLE_AUTOTWEET_KEY,
 		'errorText'          => __( 'Error', 'autotweet' ),
 		'nonce'              => wp_create_nonce( 'wp_rest' ),
 		'restUrl'            => rest_url( post_autotweet_meta_rest_route( $post_id ) ),
 		'tweetBodyKey'       => TWEET_BODY_KEY,
+		'status'             => $status_meta && is_array( $status_meta ) ? $status_meta : null,
 		'unknownErrorText'   => __( 'An unknown error occurred', 'autotweet' ),
+		'siteUrl'            => home_url(),
 	];
 
 	wp_localize_script( $handle, 'adminAutotweet', $localization );

includes/admin/post-meta.php

@@ -190,6 +190,55 @@ function render_tweet_submitbox( $post ) {
 
 }
 
+/**
+ * Gets info on the post's Tweet status to send to REST.
+ *
+ * @since 1.0.0
+ *
+ * @param int|WP_Post $post The post we are rendering on.
+ * @return array Associative array containing a message and a URL if the post was tweeted.
+ */
+function get_tweet_status_message( $post ) {
+	$post        = get_post( $post );
+	$post_status = get_post_status( $post );
+
+	if ( 'publish' === $post_status ) {
+
+		$twitter_status = Utils\get_autotweet_meta( $post->ID, TWITTER_STATUS_KEY );
+		$status         = isset( $twitter_status['status'] ) ? $twitter_status['status'] : '';
+
+		switch ( $status ) {
+			case 'published':
+				$date        = Utils\date_from_twitter( $twitter_status['created_at'] );
+				$twitter_url = Utils\link_from_twitter( $twitter_status['twitter_id'] );
+
+				return [
+					// Translators: Placeholder is a date.
+					'message' => sprintf( __( 'Tweeted on %s', 'autotweet' ), $date ),
+					'url'     => $twitter_url,
+				];
+
+			case 'error':
+				return [
+					'message' => __( 'Failed to tweet: ', 'autotweet' ) . $twitter_status['message'],
+				];
+
+			case 'unknown':
+				return [
+					'message' => $twitter_status['message'],
+				];
+
+			default:
+				return [
+					'message' => __( 'This post was not tweeted.', 'autotweet' ),
+				];
+		}
+	}
+
+	return [ 'message' => '' ];
+
+}
+
 /**
  * Outputs the markeup and language to be used when a post has been successfully
  * sent to Twitter

includes/admin/post-transition.php

@@ -19,20 +19,26 @@
  * @return void
  */
 function setup() {
-	add_action( 'transition_post_status', __NAMESPACE__ . '\publish_tweet', 10, 3 );
+	add_action( 'transition_post_status', __NAMESPACE__ . '\maybe_publish_tweet', 10, 3 );
 }
 
 /**
- * Primary handler for the process of publishing to Twitter.
+ * Publishes the tweet if the post has transititioned from unpublished to published.
+ *
+ * In WP 5, the main Twitter publish action must run later than the transition_post_status hook because, when saving
+ * via REST, the post thumbnail and other metadata have not yet been saved.
+ *
+ * @see https://core.trac.wordpress.org/ticket/45114
  *
- * @param string   $new_status The new status.
- * @param string   $old_status The old status.
- * @param \WP_Post $post       The post object.
+ * @since 1.0.0
+ *
+ * @param string  $new_status The new status.
+ * @param string  $old_status The old status.
+ * @param WP_Post $post       The current post.
  *
  * @return object
  */
-function publish_tweet( $new_status, $old_status, $post ) {
-
+function maybe_publish_tweet( $new_status, $old_status, $post ) {
 	/**
 	 * We're only interested in posts that are transitioning into publish.
 	 */
@@ -47,12 +53,27 @@ function publish_tweet( $new_status, $old_status, $post ) {
 		return;
 	}
 
+	if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
+		add_action( sprintf( 'rest_after_insert_%s', $post->post_type ), __NAMESPACE__ . '\publish_tweet' );
+	} else {
+		publish_tweet( $post->ID );
+	}
+}
+
+/**
+ * Primary handler for the process of publishing to Twitter.
+ *
+ * @param int $post_id The current post ID.
+ *
+ * @return object
+ */
+function publish_tweet( $post_id ) {
+	$post = get_post( $post_id );
+
 	/**
-	 * This should never happen since the nonce field wouldn't exist.
-	 * But just in case one more check: check that the post doesn't
-	 * have a twitter-status entry already.
+	 * Don't bother enqueuing assets if the post type hasn't opted into autotweeting
 	 */
-	if ( Utils\already_published( $post->ID ) ) {
+	if ( ! Utils\opted_into_autotweet( $post->ID ) ) {
 		return;
 	}
 

includes/class-publish-tweet.php

@@ -116,7 +116,7 @@ public function status_update( $body, $post ) {
 		 * @param array   Data sent to the Twitter endpoint.
 		 * @param WP_Post The post associated with the tweet.
 		 */
-		$update_data = apply_filters( 'tenup_auto_tweet_tweet', $update_data, $post );
+		$update_data = apply_filters( 'autotweet_tweet', $update_data, $post );
 
 		/**
 		 * Filters the client response before it is sent, to facilitate caching and testing.

includes/rest.php

@@ -12,9 +12,12 @@
 use WP_REST_Server;
 use const TenUp\AutoTweet\Core\Post_Meta\TWEET_BODY_KEY;
 use const TenUp\AutoTweet\Core\Post_Meta\ENABLE_AUTOTWEET_KEY;
+use const TenUp\AutoTweet\Core\POST_TYPE_SUPPORT_FEATURE;
 
+use function TenUp\AutoTweet\Core\Post_Meta\get_tweet_status_message;
 use function TenUp\AutoTweet\Core\Post_Meta\save_autotweet_meta_data;
 
+
 /**
  * The namespace for plugin REST endpoints.
  *
@@ -43,6 +46,7 @@
  */
 function add_hook_callbacks() {
 	add_action( 'rest_api_init', __NAMESPACE__ . '\register_post_autotweet_meta_rest_route' );
+	add_action( 'rest_api_init', __NAMESPACE__ . '\register_tweet_status_rest_field' );
 }
 
 /**
@@ -130,3 +134,27 @@ function update_post_autotweet_meta( $request ) {
 		]
 	);
 }
+
+/**
+ * Adds a REST field returning the tweet status message array for the current post.
+ *
+ * @since 0.1.0
+ */
+function register_tweet_status_rest_field() {
+	register_rest_field(
+		get_post_types_by_support( POST_TYPE_SUPPORT_FEATURE ),
+		'autotweet_status',
+		[
+			'get_callback' => function( $data ) {
+				return get_tweet_status_message( $data['id'] );
+			},
+			'schema'       => [
+				'context'     => [
+					'edit',
+				],
+				'description' => __( 'Autotweet status message', 'autotweet' ),
+				'type'        => 'object',
+			],
+		]
+	);
+}