Fix X-WC-Store-API-Nonce updates (https://github.com/woocommerce/woocommerce-blocks/pull/2429)

* Move store api nonce js to separate middleware entry

* Make middleware a depedency of block-data

* Build

plugins/woocommerce-blocks/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
 	},
 	globals: {
 		wcSettings: 'readonly',
+		wcStoreApiNonce: 'readonly',
 		page: true,
 		browser: true,
 		context: true,

plugins/woocommerce-blocks/assets/js/middleware/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './store-api-nonce';

plugins/woocommerce-blocks/assets/js/middleware/store-api-nonce.js

@@ -2,10 +2,10 @@
  * External dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { getSetting } from '@woocommerce/settings';
 
+// @ts-ignore wcStoreApiNonce is window global
 // Cache for the initial nonce initialized from hydration.
-let nonce = getSetting( 'storeApiNonce' );
+let nonce = wcStoreApiNonce || '';
 
 /**
  * Returns whether or not this is a non GET wc/store API request.

plugins/woocommerce-blocks/assets/js/settings/blocks/index.js

@@ -1,5 +1,4 @@
 /**
  * Internal dependencies
  */
-import './store-api-nonce';
 export * from './constants';

plugins/woocommerce-blocks/src/Assets.php

@@ -44,12 +44,19 @@ class Assets {
 		wp_style_add_data( 'wc-block-style', 'rtl', 'replace' );
 
 		// Shared libraries and components across all blocks.
-		self::register_script( 'wc-blocks-data-store', plugins_url( 'build/wc-blocks-data.js', __DIR__ ), [], false );
+		self::register_script( 'wc-blocks-middleware', plugins_url( 'build/wc-blocks-middleware.js', __DIR__ ), [], false );
+		self::register_script( 'wc-blocks-data-store', plugins_url( 'build/wc-blocks-data.js', __DIR__ ), [ 'wc-blocks-middleware' ], false );
 		self::register_script( 'wc-blocks', plugins_url( self::get_block_asset_build_path( 'blocks' ), __DIR__ ), [], false );
 		self::register_script( 'wc-vendors', plugins_url( self::get_block_asset_build_path( 'vendors' ), __DIR__ ), [], false );
-
 		self::register_script( 'wc-blocks-registry', plugins_url( 'build/wc-blocks-registry.js', __DIR__ ), [], false );
 
+		// Inline data.
+		wp_add_inline_script(
+			'wc-blocks-middleware',
+			"var wcStoreApiNonce = '" . esc_js( wp_create_nonce( 'wc_store_api' ) ) . "';",
+			'before'
+		);
+
 		// Individual blocks.
 		$block_dependencies = array( 'wc-vendors', 'wc-blocks' );
 
@@ -143,7 +150,6 @@ class Assets {
 				'restApiRoutes'                 => [
 					'/wc/store' => array_keys( Package::container()->get( RestApi::class )->get_routes_from_namespace( 'wc/store' ) ),
 				],
-				'storeApiNonce'                 => wp_create_nonce( 'wc_store_api' ),
 				'homeUrl'                       => esc_url( home_url( '/' ) ),
 				'storePages'                    => [
 					'shop'     => self::format_page_resource( $page_ids['shop'] ),

plugins/woocommerce-blocks/webpack.config.js

@@ -45,6 +45,7 @@ const CoreConfig = {
 		wcBlocksRegistry: './assets/js/blocks-registry/index.js',
 		wcSettings: './assets/js/settings/shared/index.js',
 		wcBlocksData: './assets/js/data/index.js',
+		wcBlocksMiddleware: './assets/js/middleware/index.js',
 	},
 	output: {
 		filename: ( chunkData ) => {