Use wp_add_inline_script for createBlockTheme object (#428)

* Use wp_add_inline_script for createBlockTheme obj This change ensures we follow accepted good practices, as `wp_localize_script` should only be used when localizing strings. It's more verbose, but it doesn't lend itself to confusion. Relevant comment: https://developer.wordpress.org/reference/functions/wp_localize_script/#comment-3213 * Make sure to not change load order Co-authored-by: Sarah Norris <[email protected]> --------- Co-authored-by: Sarah Norris <[email protected]>
WordPress · Aug 14, 2023 · 41bd24a · 41bd24a
1 parent 794e927
commit 41bd24a
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/admin/class-react-app.php b/admin/class-react-app.php
@@ -21,15 +21,25 @@ public static function bootstrap() {
 		// Enable localization in the app.
 		wp_set_script_translations( 'create-block-theme-app', 'create-block-theme' );
 
-		// Set google fonts json file url.
-		wp_localize_script(
+		// Define the global variable that will be used to pass data from PHP to JS.
+		$script_content = <<<EOT
+		window.createBlockTheme = {
+			googleFontsDataUrl: '%s',
+			adminUrl: '%s',
+			themeUrl: '%s',
+		};
+		EOT;
+
+		// Pass the data to the JS.
+		wp_add_inline_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(),
-			)
+			sprintf(
+				$script_content,
+				esc_url( plugins_url( 'assets/google-fonts/fallback-fonts-list.json', __DIR__ ) ),
+				esc_url( admin_url() ),
+				esc_url( get_template_directory_uri() )
+			),
+			'before'
 		);
 	}
 }