Merge pull request #320 from WordPress/refactor/react-app

Refactor react app code for general purpose

admin/class-react-app.php

@@ -0,0 +1,32 @@
+<?php
+
+class React_App {
+	public static function bootstrap() {
+		// Load the required WordPress packages.
+		// Automatically load imported dependencies and assets version.
+		$asset_file = include plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
+
+		// Enqueue CSS dependencies of the scripts included in the build.
+		foreach ( $asset_file['dependencies'] as $style ) {
+			wp_enqueue_style( $style );
+		}
+
+		// Enqueue CSS of the app
+		wp_enqueue_style( 'create-block-theme-app', plugins_url( 'build/index.css', __DIR__ ), array(), $asset_file['version'] );
+
+		// Load our app.js.
+		array_push( $asset_file['dependencies'], 'wp-i18n' );
+		wp_enqueue_script( 'create-block-theme-app', plugins_url( 'build/index.js', __DIR__ ), $asset_file['dependencies'], $asset_file['version'] );
+
+		// Set google fonts json file url.
+		wp_localize_script(
+			'create-block-theme-app',
+			'createBlockTheme',
+			array(
+				'googleFontsDataUrl' => plugins_url( 'assets/google-fonts/fallback-fonts-list.json', __DIR__ ),
+				'adminUrl'           => admin_url(),
+				'themeUrl'           => get_stylesheet_directory_uri(),
+			)
+		);
+	}
+}

admin/manage-fonts/fonts-page.php

@@ -1,8 +1,10 @@
 <?php
 
+require_once( dirname( __DIR__ ) . '/class-react-app.php' );
+
 class Fonts_Page {
 	public static function manage_fonts_admin_page() {
-		self::load_fonts_react_app();
+		React_App::bootstrap();
 
 		$theme_name = wp_get_theme()->get( 'Name' );
 
@@ -25,37 +27,8 @@ public static function manage_fonts_admin_page() {
 
 		?>
 		<p name="theme-fonts-json" id="theme-fonts-json" class="hidden"><?php echo $fonts_json_string; ?></p>
-		<div id="fonts-app"></div>
+		<div id="create-block-theme-app"></div>
 		<input type="hidden" name="nonce" id="nonce" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
 		<?php
 	}
-
-	public static function load_fonts_react_app() {
-		// Load the required WordPress packages.
-		// Automatically load imported dependencies and assets version.
-		$asset_file = include plugin_dir_path( dirname( __DIR__ ) ) . 'build/index.asset.php';
-
-		// Enqueue CSS dependencies of the scripts included in the build.
-		foreach ( $asset_file['dependencies'] as $style ) {
-			wp_enqueue_style( $style );
-		}
-
-		// Enqueue CSS of the app
-		wp_enqueue_style( 'fonts-app', plugins_url( 'build/index.css', dirname( __DIR__ ) ), array(), $asset_file['version'] );
-
-		// Load our app.js.
-		array_push( $asset_file['dependencies'], 'wp-i18n' );
-		wp_enqueue_script( 'create-block-theme-app', plugins_url( 'build/index.js', dirname( __DIR__ ) ), $asset_file['dependencies'], $asset_file['version'] );
-
-		// Set google fonts json file url.
-		wp_localize_script(
-			'create-block-theme-app',
-			'createBlockTheme',
-			array(
-				'googleFontsDataUrl' => plugins_url( 'assets/google-fonts/fallback-fonts-list.json', dirname( __DIR__ ) ),
-				'adminUrl'           => admin_url(),
-				'themeUrl'           => get_stylesheet_directory_uri(),
-			)
-		);
-	}
 }

admin/manage-fonts/google-fonts-page.php

@@ -1,13 +1,13 @@
 <?php
 
-require_once( __DIR__ . '/fonts-page.php' );
+require_once( dirname( __DIR__ ) . '/class-react-app.php' );
 
 class Google_Fonts {
 	public static function google_fonts_admin_page() {
-		Fonts_Page::load_fonts_react_app();
+		React_App::bootstrap();
 		?>
 		<input id="nonce" type="hidden" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
-		<div id="fonts-app"></div>
+		<div id="create-block-theme-app"></div>
 
 		<?php
 	}

admin/manage-fonts/local-fonts-page.php

@@ -1,18 +1,18 @@
 <?php
 
-require_once( __DIR__ . '/fonts-page.php' );
+require_once( dirname( __DIR__ ) . '/class-react-app.php' );
 
 class Local_Fonts {
 	public static function local_fonts_admin_page() {
 		// JS dependencies needed to read the file data from .woff and .woff2 files. (no needed for .ttf files)
 		wp_enqueue_script( 'inflate', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/inflate.js', array(), '', false );
 		wp_enqueue_script( 'unbrotli', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/unbrotli.js', array(), '', false );
 
-		Fonts_Page::load_fonts_react_app();
+		React_App::bootstrap();
 
 		?>
 		<input id="nonce" type="hidden" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
-		<div id="fonts-app"></div>
+		<div id="create-block-theme-app"></div>
 
 		<?php
 	}

includes/class-create-block-theme.php

@@ -40,7 +40,7 @@ private function load_dependencies() {
 		/**
 		 * The class responsible for defining all actions that occur in the admin area.
 		 */
-		require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-create-block-theme-admin.php';
+		require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-create-theme.php';
 		require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-manage-fonts.php';
 
 		$this->loader = new Create_Block_Theme_Loader();

src/index.js

@@ -34,7 +34,7 @@ function App() {
 window.addEventListener(
 	'load',
 	function () {
-		render( <App />, document.querySelector( '#fonts-app' ) );
+		render( <App />, document.querySelector( '#create-block-theme-app' ) );
 	},
 	false
 );