Merge pull request #2049 from woocommerce/release/2.5.2

release 2.5.2

changelog.txt

@@ -1,5 +1,12 @@
 *** WooCommerce Google Listings and Ads Changelog ***
 
+= 2.5.2 - 2023-08-08 =
+* Fix - Remove `add_woocommerce_extended_task_list_item` and `remove_woocommerce_extended_task_list_item` hooks.
+* Fix - WordPress 6.3 compatibility: The forms and image selector may not work due to "setImmediate" deprecation.
+* Tweak - Use the latest API to add an item to the WC tasks list.
+* Tweak - WC 8.0 compatibility.
+* Tweak - WP 6.3 compatibility.
+
 = 2.5.1 - 2023-08-01 =
 * Dev - Setup wp-env for E2E tests.
 * Dev - automate merging trunk to develop after a release.

google-listings-and-ads.php

@@ -3,17 +3,17 @@
  * Plugin Name: Google Listings and Ads
  * Plugin URL: https://wordpress.org/plugins/google-listings-and-ads/
  * Description: Native integration with Google that allows merchants to easily display their products across Google’s network.
- * Version: 2.5.1
+ * Version: 2.5.2
  * Author: WooCommerce
  * Author URI: https://woocommerce.com/
  * Text Domain: google-listings-and-ads
  * Requires at least: 5.9
- * Tested up to: 6.2
+ * Tested up to: 6.3
  * Requires PHP: 7.4
  * Requires PHP Architecture: 64 bits
  *
  * WC requires at least: 6.9
- * WC tested up to: 7.9
+ * WC tested up to: 8.0
  * Woo:
  *
  * @package WooCommerce\Admin
@@ -30,7 +30,7 @@
 
 defined( 'ABSPATH' ) || exit;
 
-define( 'WC_GLA_VERSION', '2.5.1' ); // WRCS: DEFINED_VERSION.
+define( 'WC_GLA_VERSION', '2.5.2' ); // WRCS: DEFINED_VERSION.
 define( 'WC_GLA_MIN_PHP_VER', '7.4' );
 define( 'WC_GLA_MIN_WC_VER', '6.9' );
 

js/src/components/adaptive-form/adaptive-form.js

@@ -196,12 +196,12 @@ function AdaptiveForm( { onSubmit, extendAdapter, children, ...props }, ref ) {
 				// Related to WC 6.9. Only one delegate can be consumed at a time in this render prop to
 				// ensure the updating states will always be the latest when calling.
 				if ( batchQueue.length ) {
-					// Use `setImmediate` to avoid the warning of request state updates while rendering.
+					// Use `setTimeout` to avoid the warning of request state updates while rendering.
 					// Mutating a React hook state is an anti-pattern in most cases. Here is done intentionally
 					// because it's necessary to ensure this component will be triggered re-rendering through
 					// `setBatchQueue`, but also to avoid calling `setBatchQueue` here and triggering additional
 					// rendering again.
-					setImmediate( () => setDelegation( batchQueue.shift() ) );
+					setTimeout( () => setDelegation( batchQueue.shift() ) );
 				}
 
 				/* === Start of enhancement-related codes === */

js/src/components/adaptive-form/adaptive-form.test.js

@@ -196,4 +196,113 @@ describe( 'AdaptiveForm', () => {
 
 		expect( inspect ).toHaveBeenLastCalledWith( false, 0 );
 	} );
+
+	describe( 'Compatibility patches', () => {
+		it( 'Should update all changes to values for the synchronous multiple calls to `setValue`', async () => {
+			render(
+				<AdaptiveForm
+					initialValues={ {
+						firstName: 'Foo',
+						lastName: 'Bar',
+						email: '(empty)',
+					} }
+					validate={ alwaysValid }
+				>
+					{ ( { setValue, values } ) => {
+						return (
+							<>
+								<button
+									onClick={ () => {
+										setValue( 'firstName', 'Hey' );
+										setValue( 'lastName', 'Howdy' );
+										setValue( 'email', 'hi[at]greetings' );
+									} }
+								/>
+								<article>
+									{ `${ values.firstName } ${ values.lastName } ${ values.email }` }
+								</article>
+							</>
+						);
+					} }
+				</AdaptiveForm>
+			);
+
+			const article = screen.getByRole( 'article' );
+
+			expect( article.textContent ).toBe( 'Foo Bar (empty)' );
+
+			await act( async () => {
+				await userEvent.click( screen.getByRole( 'button' ) );
+				jest.runAllTimers();
+			} );
+
+			expect( article.textContent ).toBe( 'Hey Howdy hi[at]greetings' );
+		} );
+
+		it( 'Should call back to `onChange` for the changed value only', async () => {
+			const onChange = jest.fn();
+
+			render(
+				<AdaptiveForm
+					onChange={ onChange }
+					initialValues={ {
+						firstName: '',
+						lastName: '',
+						agreedTerms: false,
+					} }
+					validate={ alwaysValid }
+				>
+					{ ( { setValue, getInputProps } ) => {
+						return (
+							<>
+								<button
+									onClick={ () => {
+										setValue( 'firstName', 'Hey' );
+									} }
+								/>
+								<input
+									type="text"
+									{ ...getInputProps( 'lastName' ) }
+								/>
+								<input
+									type="checkbox"
+									{ ...getInputProps( 'agreedTerms' ) }
+								/>
+							</>
+						);
+					} }
+				</AdaptiveForm>
+			);
+
+			await act( async () => {
+				await userEvent.click( screen.getByRole( 'button' ) );
+				jest.runAllTimers();
+			} );
+
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			expect( onChange ).toHaveBeenLastCalledWith(
+				{ name: 'firstName', value: 'Hey' },
+				expect.any( Object ),
+				true
+			);
+
+			await userEvent.type( screen.getByRole( 'textbox' ), 'a' );
+
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+			expect( onChange ).toHaveBeenLastCalledWith(
+				{ name: 'lastName', value: 'a' },
+				expect.any( Object ),
+				true
+			);
+
+			await userEvent.click( screen.getByRole( 'checkbox' ) );
+
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith(
+				{ name: 'agreedTerms', value: true },
+				expect.any( Object ),
+				true
+			);
+		} );
+	} );
 } );

js/src/hooks/useCroppedImageSelector/useCroppedImageSelector.js

@@ -315,7 +315,7 @@ export default function useCroppedImageSelector( {
 				// since `toolbar` will be triggered the refresh event at the end, so this function
 				// must be called after that.
 				if ( this === frame ) {
-					setImmediate( handleSelectionToggle );
+					setTimeout( handleSelectionToggle );
 					return;
 				}
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "google-listings-and-ads",
 	"title": "Google Listings and Ads",
-	"version": "2.5.1",
+	"version": "2.5.2",
 	"description": "google-listings-and-ads",
 	"author": "Automattic",
 	"license": "GPL-3.0-or-later",
@@ -89,6 +89,7 @@
 		"check-licenses": "wp-scripts check-licenses",
 		"dev": "NODE_ENV=development wp-scripts build",
 		"dewps:woo": "node bin/list-woo-dewped.mjs",
+		"doc:hooks": "php bin/HooksDocsGenerator.php",
 		"doc:tracking": "woocommerce-grow-jsdoc ./js/src",
 		"docker:up": "WP_VERSION=6.1 npx wc-e2e docker:up",
 		"docker:down": "npx wc-e2e docker:down",

readme.txt

@@ -2,10 +2,10 @@
 Contributors: automattic, google, woocommerce
 Tags: woocommerce, google, listings, ads
 Requires at least: 5.9
-Tested up to: 6.2
+Tested up to: 6.3
 Requires PHP: 7.4
 Requires PHP Architecture: 64 Bits
-Stable tag: 2.5.1
+Stable tag: 2.5.2
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -111,6 +111,13 @@ Yes, you can run both at the same time, and we recommend it! In the US, advertis
 
 == Changelog ==
 
+= 2.5.2 - 2023-08-08 =
+* Fix - Remove `add_woocommerce_extended_task_list_item` and `remove_woocommerce_extended_task_list_item` hooks.
+* Fix - WordPress 6.3 compatibility: The forms and image selector may not work due to "setImmediate" deprecation.
+* Tweak - Use the latest API to add an item to the WC tasks list.
+* Tweak - WC 8.0 compatibility.
+* Tweak - WP 6.3 compatibility.
+
 = 2.5.1 - 2023-08-01 =
 * Dev - Setup wp-env for E2E tests.
 * Dev - automate merging trunk to develop after a release.
@@ -123,19 +130,4 @@ Yes, you can run both at the same time, and we recommend it! In the US, advertis
 * Tweak - Add Tip with information with Campaign assets are imported.
 * Tweak - Provide more detailed error reasons when unable to complete site verification for the Google Merchant Center account being connected in the onboarding flow.
 
-= 2.4.11 - 2023-07-11 =
-* Add - Client name and plugin version to requests.
-* Dev - Enable unit testing for PHP 8.1.
-* Dev - Set engines for the repository.
-* Fix - Avoid continuing to save settings to Google Merchant Center after the shipping time save failed on the Edit Free Listings page.
-* Fix - Avoid errors when clearing all audience countries in the onboarding flow.
-* Fix - Incorrectly display South America in the audience location selector after selecting Saudi Arabia.
-* Fix - Remove deprecated $border-width-focus variable.
-* Fix - Show a general error message when the phone number verification request is failed.
-* Tweak - Add placeholder in the Attribute Mapping table when there are no rules available.
-* Tweak - Changes for title, descriptions and FAQ in PMAX Optimized Campaigns.
-* Tweak - Make some error messages clearer when errors occur in querying or modifying data.
-* Tweak - Make the error message clearer for errors that occur in getting or updating a Google Merchant Center account.
-* Tweak - WC 7.9 compatibility.
-
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/google-listings-and-ads/trunk/changelog.txt).

src/Admin/Admin.php

@@ -286,12 +286,12 @@ private function inject_fast_refresh_for_dev( $scripts ) {
 		$plugin_url = $this->get_plugin_url();
 
 		$scripts->add(
-			'gla-webpack-rumtime',
+			'gla-webpack-runtime',
 			"{$plugin_url}/js/build/runtime.js",
 			[],
 			(string) filemtime( $runtime_path )
 		);
-		$react_script->deps[] = 'gla-webpack-rumtime';
+		$react_script->deps[] = 'gla-webpack-runtime';
 
 		if ( ! in_array( 'wp-react-refresh-entry', $react_script->deps, true ) ) {
 			$scripts->add(

src/Google/GlobalSiteTag.php

@@ -202,6 +202,7 @@ function () use ( $gtag_events ) {
 					]
 				);
 
+				$this->register_js_for_fast_refresh_dev();
 				$this->assets_handler->enqueue( $gtag_events );
 			}
 		);
@@ -485,4 +486,39 @@ private static function is_first_time_customer( $customer_email ): bool {
 		$orders = $query->get_orders();
 		return count( $orders ) === 1 ? true : false;
 	}
+
+	/**
+	 * This method ONLY works during development in the Fast Refresh mode.
+	 *
+	 * The runtime.js and react-refresh-runtime.js files are created when the front-end development is
+	 * running `npm run start:hot`, and they need to be loaded to make the gtag-events scrips work.
+	 */
+	private function register_js_for_fast_refresh_dev() {
+		// This file exists only when running `npm run start:hot`
+		$runtime_path = "{$this->get_root_dir()}/js/build/runtime.js";
+
+		if ( ! file_exists( $runtime_path ) ) {
+			return;
+		}
+
+		$plugin_url = $this->get_plugin_url();
+
+		wp_enqueue_script(
+			'gla-webpack-runtime',
+			"{$plugin_url}/js/build/runtime.js",
+			[],
+			(string) filemtime( $runtime_path ),
+			false
+		);
+
+		// This script is one of the gtag-events dependencies, and its handle is wp-react-refresh-runtime.
+		// Ref: js/build/gtag-events.asset.php
+		wp_register_script(
+			'wp-react-refresh-runtime',
+			"{$plugin_url}/js/build-dev/react-refresh-runtime.js",
+			[ 'gla-webpack-runtime' ],
+			$this->get_version(),
+			false
+		);
+	}
 }