Add WebPack build process and load JS in editor screen

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/env", "@babel/preset-react"]
+}

.eslintignore

@@ -0,0 +1,3 @@
+assets
+dist
+webpack.config.js

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+	"globals": {
+		"wp": "readonly"
+	},
+	"extends": "@10up/eslint-config"
+}

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+dist
 node_modules
 tests/coverage
 vendor

includes/admin/assets.php

@@ -0,0 +1,104 @@
+<?php
+/**
+ * Handles loading of JS and CSS.
+ *
+ * @since 1.0.0
+ * @package TenUp\Auto_Tweet
+ */
+
+namespace TenUp\AutoTweet\Admin\Assets;
+
+use function TenUp\Auto_Tweet\Utils\opted_into_autotweet;
+use const TenUp\Auto_Tweet\Core\Post_Meta\META_PREFIX;
+use const TenUp\Auto_Tweet\Core\Post_Meta\TWEET_KEY;
+
+/**
+ * The handle used in registering plugin assets.
+ */
+const SCRIPT_HANDLE = 'autotweet';
+
+/**
+ * Adds WP hook callbacks.
+ *
+ * @since 1.0.0
+ */
+function add_hook_callbacks() {
+	add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\maybe_enqueue_classic_editor_assets' );
+	add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_editor_assets' );
+}
+
+/**
+ * Enqueues assets for supported post type editors where the block editor is not active.
+ *
+ * @since 1.0.0
+ * @param string $hook The current admin page.
+ */
+function maybe_enqueue_classic_editor_assets( $hook ) {
+	if ( ! in_array( $hook, [ 'post-new.php', 'post.php' ], true ) ) {
+		return;
+	}
+
+	if ( ! opted_into_autotweet( get_the_ID() ) ) {
+		return;
+	}
+
+	$current_screen = get_current_screen();
+	if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
+		return;
+	}
+
+	$handle = 'admin_tenup-auto-tweet';
+	wp_enqueue_script(
+		$handle,
+		trailingslashit( TUAT_URL ) . 'assets/js/admin-auto_tweet.js',
+		[ 'jquery' ],
+		TUAT_VERSION,
+		true
+	);
+
+	wp_enqueue_style(
+		$handle,
+		trailingslashit( TUAT_URL ) . 'assets/css/admin-auto_tweet.css',
+		[],
+		TUAT_VERSION
+	);
+
+	localize_data( $handle );
+}
+
+/**
+ * Enqueues block editor assets.
+ *
+ * @since 1.0.0
+ */
+function enqueue_editor_assets() {
+	if ( ! opted_into_autotweet( get_the_ID() ) ) {
+		return;
+	}
+
+	wp_enqueue_script(
+		SCRIPT_HANDLE,
+		trailingslashit( TUAT_URL ) . 'dist/autotweet.js',
+		[ 'wp-plugins', 'wp-edit-post' ],
+		TUAT_VERSION,
+		true
+	);
+
+	localize_data();
+}
+
+/**
+ * Passes data to Javascript.
+ *
+ * @since 1.0.0
+ * @param string $handle Handle of the JS script intended to consume the data.
+ */
+function localize_data( $handle = SCRIPT_HANDLE ) {
+	$localization = [
+		'nonce'         => wp_create_nonce( 'admin_tenup-auto-tweet' ),
+		'postId'        => get_the_ID() ? get_the_ID() : ( isset( $_GET['post'] ) ? absint( $_GET['post'] ) : 0 ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		'currentStatus' => get_post_meta( get_the_ID(), META_PREFIX . '_' . TWEET_KEY, true ),
+	];
+
+	wp_localize_script( $handle, 'adminTUAT', $localization );
+}

includes/admin/post-meta.php

@@ -41,55 +41,12 @@
  */
 function setup() {
 
-	add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\enqueue_scripts', 10, 1 );
 	add_action( 'wp_ajax_tenup_auto_tweet', __NAMESPACE__ . '\ajax_save_tweet_meta' );
 	add_action( 'post_submitbox_misc_actions', __NAMESPACE__ . '\tweet_submitbox_callback', 15 );
 	add_action( 'tenup_auto_tweet_metabox', __NAMESPACE__ . '\render_tweet_submitbox', 10, 1 );
 	add_action( 'save_post', __NAMESPACE__ . '\save_tweet_meta', 10, 1 );
 }
 
-/**
- * Enqueue the admin related JS.
- *
- * @param string $hook The $hook_suffix for the current admin page.
- *
- * @return void
- */
-function enqueue_scripts( $hook ) {
-
-	// Only enqueue the JS on the edit post pages.
-	if ( ! in_array( $hook, array( 'post-new.php', 'post.php' ), true ) ) {
-		return;
-	}
-
-	/**
-	 * Don't bother enqueuing assets if the post type hasn't opted into auto-tweeting.
-	 */
-	if ( ! Utils\opted_into_autotweet( get_the_ID() ) ) {
-		return;
-	}
-
-	// Enqueue the styles.
-	wp_enqueue_style( 'admin_tenup-auto-tweet', TUAT_URL . '/assets/css/admin-auto_tweet.css', [], TUAT_VERSION );
-
-	// Enqueue the JS.
-	wp_enqueue_script(
-		'admin_tenup-auto-tweet',
-		TUAT_URL . '/assets/js/admin-auto_tweet.js',
-		[ 'jquery' ],
-		TUAT_VERSION,
-		true
-	);
-
-	// Pass some useful info to our script.
-	$localization = array(
-		'nonce'         => wp_create_nonce( 'admin_tenup-auto-tweet' ),
-		'postId'        => get_the_ID() ? get_the_ID() : ( isset( $_GET['post'] ) ? absint( $_GET['post'] ) : 0 ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-		'currentStatus' => get_post_meta( get_the_ID(), META_PREFIX . '_' . TWEET_KEY, true ),
-	);
-	wp_localize_script( 'admin_tenup-auto-tweet', 'adminTUAT', $localization );
-}
-
 /**
  * AJAX save and response handler for our auto-tweet checkbox.
  *

includes/core.php

@@ -15,11 +15,14 @@
 function setup() {
 
 	// Includes and requires.
+	require_once 'admin/assets.php';
 	require_once 'admin/settings.php';
 	require_once 'admin/post-meta.php';
 	require_once 'admin/post-transition.php';
 	require_once 'class-publish-tweet.php';
 
+	\TenUp\AutoTweet\Admin\Assets\add_hook_callbacks();
+
 	/**
 	 * Allow others to hook into the core setup action
 	 */