From 6e3874b137757dfc73a31195853aef4d6150c3d9 Mon Sep 17 00:00:00 2001 From: moon Date: Thu, 19 Oct 2023 14:52:01 -0700 Subject: [PATCH 01/60] Use a modified version of edit-site lock-unlock module to make it CYS compatible with both WP 6.4 and 6.3 --- .../bin/modified-editsite-lock-unlock.js | 14 ++++++++++++++ .../bin/replace-editsite-lock-unlock.js | 7 +++++++ plugins/woocommerce-admin/package.json | 8 ++++---- 3 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js create mode 100644 plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js diff --git a/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js new file mode 100644 index 00000000000..e5e3edccfd7 --- /dev/null +++ b/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +var consentString = 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.'; +if (window.wcSettings.wpVersion.indexOf('6.4') === 0) { + consentString = 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.'; +} + +import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis'; +export const { + lock, + unlock +} = __dangerousOptInToUnstableAPIsOnlyForCoreModules(consentString, '@wordpress/edit-site'); +//# sourceMappingURL=lock-unlock.js.map \ No newline at end of file diff --git a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js new file mode 100644 index 00000000000..3b28b088ccd --- /dev/null +++ b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js @@ -0,0 +1,7 @@ +const { exec, execSync } = require("child_process"); + +// Find edit-site module directory +const EDIT_SITE_DIR = execSync("find ~+ ../../node_modules/.pnpm -type d -name '@wordpress+edit-site@5.15.0*' -print -quit").toString().trim(); + +// Replace it with modified version +execSync(`cp -rf "./bin/modified-editsite-lock-unlock.js" ${EDIT_SITE_DIR}/node_modules/@wordpress/edit-site/build-module/lock-unlock.js`); diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 37aa21b6f8b..3543a4b24fd 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -10,7 +10,7 @@ }, "scripts": { "changelog": "pnpm --filter=woocommerce -r run changelog ", - "turbo:build": "pnpm run clean && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", + "turbo:build": "node ./bin/replace-editsite-lock-unlock.js && pnpm run clean && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", "turbo:test": "pnpm run test:client", "analyze": "cross-env NODE_ENV=production ANALYZE=true webpack", "build": "pnpm -w exec turbo run turbo:build --filter=$npm_package_name", @@ -19,7 +19,7 @@ "lint": "pnpm run lint:js && pnpm run lint:css", "build:feature-config": "php ../woocommerce/bin/generate-feature-config.php", "clean": "rimraf ../woocommerce/assets/client/admin/*", - "client:watch": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development webpack --watch", + "client:watch": "node ./bin/replace-editsite-lock-unlock.js && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development webpack --watch", "create-hook-reference": "node ./bin/hook-reference/index.js", "create-wc-extension": "pnpm -w run create-extension", "dev": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development pnpm -w run build --filter='./packages/js/*' && cross-env WC_ADMIN_PHASE=development webpack", @@ -38,8 +38,8 @@ "packages:watch": "pnpm run:packages -- start", "run:packages": "pnpm run --parallel --filter='../../packages/js/**'", "prestart": "pnpm packages:build && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config", - "start": "concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", - "start:hot": "pnpm prestart && concurrently \"cross-env HOT=true WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", + "start": "node ./bin/replace-editsite-lock-unlock.js && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", + "start:hot": "node ./bin/replace-editsite-lock-unlock.js && pnpm prestart && concurrently \"cross-env HOT=true WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", "test-staged": "pnpm run test:client --bail --findRelatedTests", "test:client": "jest --config client/jest.config.js", "test:debug": "node --inspect-brk ./node_modules/.bin/jest --config client/jest.config.js --watch --runInBand --no-cache", From 595d5c9c9447be18d4d328abe94a8ea90f289dc5 Mon Sep 17 00:00:00 2001 From: moon Date: Thu, 19 Oct 2023 15:10:10 -0700 Subject: [PATCH 02/60] Remove ~+ -- not needed --- plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js index 3b28b088ccd..0be3360ded1 100644 --- a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js +++ b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js @@ -1,7 +1,7 @@ const { exec, execSync } = require("child_process"); // Find edit-site module directory -const EDIT_SITE_DIR = execSync("find ~+ ../../node_modules/.pnpm -type d -name '@wordpress+edit-site@5.15.0*' -print -quit").toString().trim(); +const EDIT_SITE_DIR = execSync("find ../../node_modules/.pnpm -type d -name '@wordpress+edit-site@5.15.0*' -print -quit").toString().trim(); // Replace it with modified version execSync(`cp -rf "./bin/modified-editsite-lock-unlock.js" ${EDIT_SITE_DIR}/node_modules/@wordpress/edit-site/build-module/lock-unlock.js`); From 907ade39b254a55350e5bce6263e9067aa5a05bd Mon Sep 17 00:00:00 2001 From: moon Date: Thu, 19 Oct 2023 15:28:13 -0700 Subject: [PATCH 03/60] Remvoe unused import --- plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js index 0be3360ded1..d59541cf32b 100644 --- a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js +++ b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js @@ -1,4 +1,4 @@ -const { exec, execSync } = require("child_process"); +const { execSync } = require("child_process"); // Find edit-site module directory const EDIT_SITE_DIR = execSync("find ../../node_modules/.pnpm -type d -name '@wordpress+edit-site@5.15.0*' -print -quit").toString().trim(); From ef8df7875d0bd4136316497dcb4f5c126d6a2c40 Mon Sep 17 00:00:00 2001 From: github-actions Date: Thu, 19 Oct 2023 22:33:08 +0000 Subject: [PATCH 04/60] Add changefile(s) from automation for the following project(s): woocommerce --- .../changelog/update-40840-customize-blank-issue-with-wp-6.4 | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/update-40840-customize-blank-issue-with-wp-6.4 diff --git a/plugins/woocommerce/changelog/update-40840-customize-blank-issue-with-wp-6.4 b/plugins/woocommerce/changelog/update-40840-customize-blank-issue-with-wp-6.4 new file mode 100644 index 00000000000..2aa45f52866 --- /dev/null +++ b/plugins/woocommerce/changelog/update-40840-customize-blank-issue-with-wp-6.4 @@ -0,0 +1,4 @@ +Significance: minor +Type: tweak + +Replace the original lock-unlock module with a modified version to make Customize your store task compatible with both WP 6.4 and earlier versions. \ No newline at end of file From 448a7e1fea169a16efee1329ec088b839dfd9b6f Mon Sep 17 00:00:00 2001 From: moon Date: Thu, 19 Oct 2023 17:14:40 -0700 Subject: [PATCH 05/60] Update version compare logic to include higher versions --- .../bin/modified-editsite-lock-unlock.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js index e5e3edccfd7..02c5ab70d3b 100644 --- a/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js +++ b/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js @@ -2,9 +2,14 @@ * WordPress dependencies */ var consentString = 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.'; -if (window.wcSettings.wpVersion.indexOf('6.4') === 0) { + +if (window.wcSettings && window.wcSettings.wpVersion) { + // Parse the version string as a floating-point number + const wpVersion = parseFloat(window.wcSettings.wpVersion); + if ( ! isNaN( wpVersion ) && wpVersion >= 6.4 ) { consentString = 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.'; -} + } +} import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis'; export const { From 6af132ec43c47382419507bcb43fdcf784680d79 Mon Sep 17 00:00:00 2001 From: moon Date: Fri, 20 Oct 2023 12:48:39 -0700 Subject: [PATCH 06/60] Core profiler - Include tiktok-for-business --- .../Admin/RemoteFreeExtensions/DefaultFreeExtensions.php | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php b/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php index ded1b0aadcd..4e4b036505c 100644 --- a/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php +++ b/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php @@ -76,6 +76,7 @@ class DefaultFreeExtensions { self::get_plugin( 'mailpoet' ), self::get_plugin( 'google-listings-and-ads' ), self::get_plugin( 'woocommerce-services:tax' ), + self::get_plugin( 'tiktok-for-business' ), ) ), ), From 31feb9aa944f55e0d59fb6009a0918b03e32a8c2 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Mon, 23 Oct 2023 16:24:19 +0100 Subject: [PATCH 07/60] In system status report, detect and allow usage of the classic-shortcode block --- .../Version2/class-wc-rest-system-status-v2-controller.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/plugins/woocommerce/includes/rest-api/Controllers/Version2/class-wc-rest-system-status-v2-controller.php b/plugins/woocommerce/includes/rest-api/Controllers/Version2/class-wc-rest-system-status-v2-controller.php index 6b6192bd1ba..ccafafdf2be 100644 --- a/plugins/woocommerce/includes/rest-api/Controllers/Version2/class-wc-rest-system-status-v2-controller.php +++ b/plugins/woocommerce/includes/rest-api/Controllers/Version2/class-wc-rest-system-status-v2-controller.php @@ -1388,6 +1388,11 @@ class WC_REST_System_Status_V2_Controller extends WC_REST_Controller { if ( $values['block'] && get_post( $page_id ) ) { $block_required = true; $block_present = WC_Blocks_Utils::has_block_in_page( $page_id, $values['block'] ); + + // Compatibility with the classic shortcode block which can be used instead of shortcodes. + if ( ! $block_present && ( $values['block'] === 'woocommerce/checkout' || $values['block'] === 'woocommerce/cart' ) ) { + $block_present = WC_Blocks_Utils::has_block_in_page( $page_id, 'woocommerce/classic-shortcode', true ); + } } // Wrap up our findings into an output array. From ba52c4083acc7c07168349287cac5d2a85a2c6c7 Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 23 Oct 2023 15:36:09 +0000 Subject: [PATCH 08/60] Add changefile(s) from automation for the following project(s): woocommerce --- plugins/woocommerce/changelog/fix-cart-checkout-detection | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/fix-cart-checkout-detection diff --git a/plugins/woocommerce/changelog/fix-cart-checkout-detection b/plugins/woocommerce/changelog/fix-cart-checkout-detection new file mode 100644 index 00000000000..1ed262abee9 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-cart-checkout-detection @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix detection of cart and checkout classic-shortcode blocks in the system status report. \ No newline at end of file From c9ad56bb64e88c2c7df8421cec3fd00fef962ae2 Mon Sep 17 00:00:00 2001 From: moon Date: Mon, 23 Oct 2023 10:54:41 -0700 Subject: [PATCH 09/60] Use webpack to replace modified version lock lock-unlock --- .../bin/replace-editsite-lock-unlock.js | 7 ------- plugins/woocommerce-admin/webpack.config.js | 13 +++++++++++++ 2 files changed, 13 insertions(+), 7 deletions(-) delete mode 100644 plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js diff --git a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js deleted file mode 100644 index d59541cf32b..00000000000 --- a/plugins/woocommerce-admin/bin/replace-editsite-lock-unlock.js +++ /dev/null @@ -1,7 +0,0 @@ -const { execSync } = require("child_process"); - -// Find edit-site module directory -const EDIT_SITE_DIR = execSync("find ../../node_modules/.pnpm -type d -name '@wordpress+edit-site@5.15.0*' -print -quit").toString().trim(); - -// Replace it with modified version -execSync(`cp -rf "./bin/modified-editsite-lock-unlock.js" ${EDIT_SITE_DIR}/node_modules/@wordpress/edit-site/build-module/lock-unlock.js`); diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 699a2be622b..1852ec40a64 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -168,6 +168,19 @@ const webpackConfig = { }, }, plugins: [ + new CopyWebpackPlugin( { + patterns: [ + { + from: path.resolve( + __dirname, + 'bin/modified-editsite-lock-unlock.js' + ), // Replace with the path to your custom script + to: require.resolve( + '@wordpress/edit-site/build-module/lock-unlock.js' + ), // Replace with the destination path + }, + ], + } ), ...styleConfig.plugins, // Runs TypeScript type checker on a separate process. ! process.env.STORYBOOK && new ForkTsCheckerWebpackPlugin(), From 2b9fe30ecc24f46ef8504705e8804d288b2690a0 Mon Sep 17 00:00:00 2001 From: moon Date: Mon, 23 Oct 2023 17:16:15 -0700 Subject: [PATCH 10/60] Remove replace call --- plugins/woocommerce-admin/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 3543a4b24fd..37aa21b6f8b 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -10,7 +10,7 @@ }, "scripts": { "changelog": "pnpm --filter=woocommerce -r run changelog ", - "turbo:build": "node ./bin/replace-editsite-lock-unlock.js && pnpm run clean && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", + "turbo:build": "pnpm run clean && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", "turbo:test": "pnpm run test:client", "analyze": "cross-env NODE_ENV=production ANALYZE=true webpack", "build": "pnpm -w exec turbo run turbo:build --filter=$npm_package_name", @@ -19,7 +19,7 @@ "lint": "pnpm run lint:js && pnpm run lint:css", "build:feature-config": "php ../woocommerce/bin/generate-feature-config.php", "clean": "rimraf ../woocommerce/assets/client/admin/*", - "client:watch": "node ./bin/replace-editsite-lock-unlock.js && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development webpack --watch", + "client:watch": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development webpack --watch", "create-hook-reference": "node ./bin/hook-reference/index.js", "create-wc-extension": "pnpm -w run create-extension", "dev": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development pnpm -w run build --filter='./packages/js/*' && cross-env WC_ADMIN_PHASE=development webpack", @@ -38,8 +38,8 @@ "packages:watch": "pnpm run:packages -- start", "run:packages": "pnpm run --parallel --filter='../../packages/js/**'", "prestart": "pnpm packages:build && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config", - "start": "node ./bin/replace-editsite-lock-unlock.js && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", - "start:hot": "node ./bin/replace-editsite-lock-unlock.js && pnpm prestart && concurrently \"cross-env HOT=true WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", + "start": "concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", + "start:hot": "pnpm prestart && concurrently \"cross-env HOT=true WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", "test-staged": "pnpm run test:client --bail --findRelatedTests", "test:client": "jest --config client/jest.config.js", "test:debug": "node --inspect-brk ./node_modules/.bin/jest --config client/jest.config.js --watch --runInBand --no-cache", From 2d3756a82ccffbde6a71644947124c86bc075a47 Mon Sep 17 00:00:00 2001 From: moon Date: Mon, 23 Oct 2023 17:18:37 -0700 Subject: [PATCH 11/60] Lint fixes --- .../bin/modified-editsite-lock-unlock.js | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js b/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js index 02c5ab70d3b..a9f0ec06e02 100644 --- a/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js +++ b/plugins/woocommerce-admin/bin/modified-editsite-lock-unlock.js @@ -1,19 +1,23 @@ /** * WordPress dependencies */ -var consentString = 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.'; +import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis'; -if (window.wcSettings && window.wcSettings.wpVersion) { - // Parse the version string as a floating-point number - const wpVersion = parseFloat(window.wcSettings.wpVersion); - if ( ! isNaN( wpVersion ) && wpVersion >= 6.4 ) { - consentString = 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.'; - } +let consentString = + 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.'; + +if ( window.wcSettings && window.wcSettings.wpVersion ) { + // Parse the version string as a floating-point number + const wpVersion = parseFloat( window.wcSettings.wpVersion ); + if ( ! isNaN( wpVersion ) && wpVersion >= 6.4 ) { + consentString = + 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.'; + } } -import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis'; -export const { - lock, - unlock -} = __dangerousOptInToUnstableAPIsOnlyForCoreModules(consentString, '@wordpress/edit-site'); -//# sourceMappingURL=lock-unlock.js.map \ No newline at end of file +export const { lock, unlock } = + __dangerousOptInToUnstableAPIsOnlyForCoreModules( + consentString, + '@wordpress/edit-site' + ); +//# sourceMappingURL=lock-unlock.js.map From 630c78a9ef9948926027212e4a764070140509d8 Mon Sep 17 00:00:00 2001 From: moon Date: Mon, 23 Oct 2023 17:25:09 -0700 Subject: [PATCH 12/60] Add comment for the plugin --- plugins/woocommerce-admin/webpack.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 1852ec40a64..56c6c21f134 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -168,6 +168,10 @@ const webpackConfig = { }, }, plugins: [ + // Workaround for Gutenber private API consent string differences between WP 6.3 and 6.4+ + // The modified version checks for the WP version and replaces the consent string with the correct one. + // This can be removed once we drop support for WP 6.3 in the "Customize Your Store" task. + // See this PR for details: https://github.com/woocommerce/woocommerce/pull/40884a new CopyWebpackPlugin( { patterns: [ { From d40cfae02963c62aeb8e859d7142be1985086c4d Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 24 Oct 2023 12:27:49 +0800 Subject: [PATCH 13/60] Use NormalModuleReplacementPlugin to replace lock-unlock file --- plugins/woocommerce-admin/webpack.config.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 56c6c21f134..17fff141760 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -10,6 +10,8 @@ const BundleAnalyzerPlugin = const MomentTimezoneDataPlugin = require( 'moment-timezone-data-webpack-plugin' ); const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' ); const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' ); +const NormalModuleReplacementPlugin = + require( 'webpack' ).NormalModuleReplacementPlugin; /** * Internal dependencies @@ -172,19 +174,10 @@ const webpackConfig = { // The modified version checks for the WP version and replaces the consent string with the correct one. // This can be removed once we drop support for WP 6.3 in the "Customize Your Store" task. // See this PR for details: https://github.com/woocommerce/woocommerce/pull/40884a - new CopyWebpackPlugin( { - patterns: [ - { - from: path.resolve( - __dirname, - 'bin/modified-editsite-lock-unlock.js' - ), // Replace with the path to your custom script - to: require.resolve( - '@wordpress/edit-site/build-module/lock-unlock.js' - ), // Replace with the destination path - }, - ], - } ), + new NormalModuleReplacementPlugin( + /@wordpress\/edit-site\/build-module\/lock-unlock\.js/, + path.resolve( __dirname, 'bin/modified-editsite-lock-unlock.js' ) + ), ...styleConfig.plugins, // Runs TypeScript type checker on a separate process. ! process.env.STORYBOOK && new ForkTsCheckerWebpackPlugin(), From b972c515fc382572a212b4c546524353c47af58d Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 24 Oct 2023 12:28:39 +0800 Subject: [PATCH 14/60] Fix typo --- plugins/woocommerce-admin/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 17fff141760..93b0811a208 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -170,7 +170,7 @@ const webpackConfig = { }, }, plugins: [ - // Workaround for Gutenber private API consent string differences between WP 6.3 and 6.4+ + // Workaround for Gutenberg private API consent string differences between WP 6.3 and 6.4+ // The modified version checks for the WP version and replaces the consent string with the correct one. // This can be removed once we drop support for WP 6.3 in the "Customize Your Store" task. // See this PR for details: https://github.com/woocommerce/woocommerce/pull/40884a From 1e00d49843c1135a86ceabb391b76613e69647e4 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 24 Oct 2023 12:29:18 +0800 Subject: [PATCH 15/60] Fix pr link --- plugins/woocommerce-admin/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 93b0811a208..18e1e098a16 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -173,7 +173,7 @@ const webpackConfig = { // Workaround for Gutenberg private API consent string differences between WP 6.3 and 6.4+ // The modified version checks for the WP version and replaces the consent string with the correct one. // This can be removed once we drop support for WP 6.3 in the "Customize Your Store" task. - // See this PR for details: https://github.com/woocommerce/woocommerce/pull/40884a + // See this PR for details: https://github.com/woocommerce/woocommerce/pull/40884 new NormalModuleReplacementPlugin( /@wordpress\/edit-site\/build-module\/lock-unlock\.js/, path.resolve( __dirname, 'bin/modified-editsite-lock-unlock.js' ) From 7b0a72307b9b085460f2b505f016266c8ef253f8 Mon Sep 17 00:00:00 2001 From: Kyle Nel <22053773+kdevnel@users.noreply.github.com> Date: Tue, 24 Oct 2023 12:05:25 +0200 Subject: [PATCH 16/60] Add tracks events for to ensure legacy funnels work --- .../components/content/content.tsx | 24 +++++- .../components/products/products.tsx | 6 ++ .../client/marketplace/utils/tracking.tsx | 76 +++++++++++++++++++ 3 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-admin/client/marketplace/utils/tracking.tsx diff --git a/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx b/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx index 63d64ab5640..f493976bc52 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx +++ b/plugins/woocommerce-admin/client/marketplace/components/content/content.tsx @@ -15,6 +15,10 @@ import Products from '../products/products'; import SearchResults from '../search-results/search-results'; import { MarketplaceContext } from '../../contexts/marketplace-context'; import { fetchSearchResults } from '../../utils/functions'; +import { + recordMarketplaceView, + recordLegacyTabView, +} from '../../utils/tracking'; export default function Content(): JSX.Element { const marketplaceContextValue = useContext( MarketplaceContext ); @@ -25,6 +29,18 @@ export default function Content(): JSX.Element { // Get the content for this screen useEffect( () => { const abortController = new AbortController(); + + // we are recording both the new and legacy events here for now + // they're separate methods to make it easier to remove the legacy one later + const marketplaceViewProps = { + view: selectedTab || '', + search_term: query?.term || '', + product_type: query?.section || '', + category: query?.category || '', + }; + recordMarketplaceView( marketplaceViewProps ); + recordLegacyTabView( marketplaceViewProps ); + if ( [ '', 'discover' ].includes( selectedTab ) ) { return; } @@ -67,7 +83,13 @@ export default function Content(): JSX.Element { return () => { abortController.abort(); }; - }, [ query.term, query.category, selectedTab, setIsLoading ] ); + }, [ + query.term, + query.category, + selectedTab, + setIsLoading, + query?.section, + ] ); const renderContent = (): JSX.Element => { switch ( selectedTab ) { diff --git a/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx b/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx index 62a5e2ae2b8..04b5e70f2cb 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx +++ b/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx @@ -21,6 +21,7 @@ import { MARKETPLACE_ITEMS_PER_PAGE, MARKETPLACE_SEARCH_RESULTS_PER_PAGE, } from '../constants'; +import { recordMarketplaceView } from '../../utils/tracking'; interface ProductsProps { categorySelector?: boolean; @@ -57,6 +58,11 @@ export default function Products( props: ProductsProps ): JSX.Element { const showAllButton = query.tab === 'search' && ! query.section; function showSection( section: ProductType ) { + recordMarketplaceView( { + view: 'search', + search_term: query?.term, + product_type: section, + } ); navigateTo( { url: getNewPath( { section } ), } ); diff --git a/plugins/woocommerce-admin/client/marketplace/utils/tracking.tsx b/plugins/woocommerce-admin/client/marketplace/utils/tracking.tsx new file mode 100644 index 00000000000..41405377d43 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketplace/utils/tracking.tsx @@ -0,0 +1,76 @@ +/** + * External dependencies + */ +import { recordEvent } from '@woocommerce/tracks'; + +interface MarketplaceViewProps { + view: string; + search_term?: string; + product_type?: string; + category?: string; +} + +interface LegacyTabViewProps { + view: string; + search_term?: string; + category?: string; +} + +/** + * Record a marketplace view event. + * This is a new event that is easier to understand and implement consistently + */ +function recordMarketplaceView( props: MarketplaceViewProps ) { + const eventProps = { ...props }; + + recordEvent( 'marketplace_view', eventProps ); +} + +/** + * Ensure we still have legacy events in place + * the "view" prop maps to a "section" prop in the event for compatibility with old funnels. + * + * @param props The props object containing view, search_term, section, and category. + */ +function recordLegacyTabView( props: LegacyTabViewProps ) { + let oldEventName = 'extensions_view'; + const oldEventProps: { + section: string | undefined; + search_term?: string; + version: string; + } = { ...props, section: '', version: '2' }; + + if ( props.view === 'discover' ) { + oldEventName = 'extensions_view'; + oldEventProps.section = '_featured'; + } + + if ( props.view === 'extensions' ) { + oldEventName = 'extensions_view'; + oldEventProps.section = props?.category; + + if ( ! props.category ) { + oldEventProps.section = '_all'; + } + } + + if ( props.view === 'themes' ) { + oldEventName = 'extensions_view'; + oldEventProps.section = 'themes'; + } + + if ( props.view === 'search' ) { + oldEventName = 'extensions_view_search'; + oldEventProps.section = props.view; + oldEventProps.search_term = props.search_term; + } + + if ( props.view === 'my-subscriptions' ) { + oldEventName = 'subscriptions_view'; + oldEventProps.section = 'helper'; + } + + recordEvent( oldEventName, oldEventProps ); +} + +export { recordMarketplaceView, recordLegacyTabView }; From e411ea9b41b0808425f70e1ed474bfcb003e0ef9 Mon Sep 17 00:00:00 2001 From: github-actions Date: Tue, 24 Oct 2023 11:32:36 +0000 Subject: [PATCH 17/60] Add changefile(s) from automation for the following project(s): woocommerce --- .../changelog/add-wccom-18294-marketplace-tracking | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/add-wccom-18294-marketplace-tracking diff --git a/plugins/woocommerce/changelog/add-wccom-18294-marketplace-tracking b/plugins/woocommerce/changelog/add-wccom-18294-marketplace-tracking new file mode 100644 index 00000000000..938f00b1cdf --- /dev/null +++ b/plugins/woocommerce/changelog/add-wccom-18294-marketplace-tracking @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak +Comment: Ensure new marketplace works with the existing tracking events. + From eafc87b453cdd8fcc9bee4cfd56e0ae7153025bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Soriano?= Date: Tue, 24 Oct 2023 16:38:39 +0200 Subject: [PATCH 18/60] Save the session data before proceeding with order payment (#40964) * Save the session early before proceeding with order payment. As part of the checkout process an order is created and the order id is stored in a session variable right before requesting payment processing to the appropriate payment gateway. Thus if the payment fails and the user submits the order again, the order id will be picked from the session so the existing order can be retrieved and updated. However if the payment process hangs (instead of returning an error) and the request never finishes the session data will never actually be sorted, and the next time the user submits the order a duplicate of the first order will be created. This commit simply does WC()->session->save_data() after the WC()->session->set that stores the order id, so that the session is effectively updated even if the request hangs. * Add changelog file --- plugins/woocommerce/changelog/pr-40964 | 4 ++++ plugins/woocommerce/includes/class-wc-checkout.php | 5 +++++ 2 files changed, 9 insertions(+) create mode 100644 plugins/woocommerce/changelog/pr-40964 diff --git a/plugins/woocommerce/changelog/pr-40964 b/plugins/woocommerce/changelog/pr-40964 new file mode 100644 index 00000000000..9ee855988ff --- /dev/null +++ b/plugins/woocommerce/changelog/pr-40964 @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Save the session data before proceeding with order payment \ No newline at end of file diff --git a/plugins/woocommerce/includes/class-wc-checkout.php b/plugins/woocommerce/includes/class-wc-checkout.php index 8dc5c20e121..89dec95fe54 100644 --- a/plugins/woocommerce/includes/class-wc-checkout.php +++ b/plugins/woocommerce/includes/class-wc-checkout.php @@ -1046,6 +1046,11 @@ class WC_Checkout { // Store Order ID in session so it can be re-used after payment failure. WC()->session->set( 'order_awaiting_payment', $order_id ); + // We save the session early because if the payment gateway hangs + // the request will never finish, thus the session data will neved be saved, + // and this can lead to duplicate orders if the user submits the order again. + WC()->session->save_data(); + // Process Payment. $result = $available_gateways[ $payment_method ]->process_payment( $order_id ); From e01e6f8b2a8cfed7ffc8e447e48aaa8a384429a5 Mon Sep 17 00:00:00 2001 From: RJ <27843274+rjchow@users.noreply.github.com> Date: Tue, 24 Oct 2023 23:07:26 +0800 Subject: [PATCH 19/60] add: core profiler email marketing opt in (#40869) * add: core profiler email marketing opt in * tests * changed mailchimp feature flag * fix: made experiment name static * lint --- .../js/data/changelog/add-export-wcuser-type | 4 + packages/js/data/src/index.ts | 1 + .../client/core-profiler/actions/tracks.tsx | 54 ++++++++- .../client/core-profiler/index.tsx | 110 +++++++++++++++++- .../core-profiler/pages/BusinessInfo.tsx | 80 ++++++++++++- .../pages/tests/business-info.test.tsx | 104 +++++++++++++++++ .../client/core-profiler/style.scss | 29 +++++ .../add-core-profiler-email-marketing-opt-in | 4 + .../woocommerce/src/Internal/Admin/Events.php | 2 +- 9 files changed, 377 insertions(+), 11 deletions(-) create mode 100644 packages/js/data/changelog/add-export-wcuser-type create mode 100644 plugins/woocommerce/changelog/add-core-profiler-email-marketing-opt-in diff --git a/packages/js/data/changelog/add-export-wcuser-type b/packages/js/data/changelog/add-export-wcuser-type new file mode 100644 index 00000000000..dd3bb40f053 --- /dev/null +++ b/packages/js/data/changelog/add-export-wcuser-type @@ -0,0 +1,4 @@ +Significance: patch +Type: add + +Export WCUser type for consumption in wcadmin diff --git a/packages/js/data/src/index.ts b/packages/js/data/src/index.ts index 146edd1b757..b259f90503d 100644 --- a/packages/js/data/src/index.ts +++ b/packages/js/data/src/index.ts @@ -108,6 +108,7 @@ export { } from './product-categories/types'; export { TaxClass } from './tax-classes/types'; export { ProductTag, Query } from './product-tags/types'; +export { WCUser } from './user/types'; /** * Internal dependencies diff --git a/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx b/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx index fee71d85f7d..36e876cba7a 100644 --- a/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx @@ -76,12 +76,58 @@ const recordTracksSkipBusinessLocationCompleted = () => { } ); }; +// Temporarily expand the step viewed track for BusinessInfo so that we can include the experiment assignment +// Remove this and change the action back to recordTracksStepViewed when the experiment is over +const recordTracksStepViewedBusinessInfo = ( + context: CoreProfilerStateMachineContext, + _event: unknown, + { action }: { action: unknown } +) => { + const { step } = action as { step: string }; + recordEvent( 'coreprofiler_step_view', { + step, + email_marketing_experiment_assignment: + context.emailMarketingExperimentAssignment, + wc_version: getSetting( 'wcVersion' ), + } ); +}; + +const recordTracksIsEmailChanged = ( + context: CoreProfilerStateMachineContext, + event: BusinessInfoEvent +) => { + if ( context.emailMarketingExperimentAssignment === 'treatment' ) { + let emailSource, isEmailChanged; + if ( context.onboardingProfile.store_email ) { + emailSource = 'onboarding_profile_store_email'; // from previous entry + isEmailChanged = + event.payload.storeEmailAddress !== + context.onboardingProfile.store_email; + } else if ( context.currentUserEmail ) { + emailSource = 'current_user_email'; // from currentUser + isEmailChanged = + event.payload.storeEmailAddress !== context.currentUserEmail; + } else { + emailSource = 'was_empty'; + isEmailChanged = event.payload.storeEmailAddress?.length > 0; + } + + recordEvent( 'coreprofiler_email_marketing', { + opt_in: event.payload.isOptInMarketing, + email_field_prefilled_source: emailSource, + email_field_modified: isEmailChanged, + } ); + } +}; + const recordTracksBusinessInfoCompleted = ( - _context: CoreProfilerStateMachineContext, + context: CoreProfilerStateMachineContext, event: Extract< BusinessInfoEvent, { type: 'BUSINESS_INFO_COMPLETED' } > ) => { recordEvent( 'coreprofiler_step_complete', { step: 'business_info', + email_marketing_experiment_assignment: + context.emailMarketingExperimentAssignment, wc_version: getSetting( 'wcVersion' ), } ); @@ -92,8 +138,8 @@ const recordTracksBusinessInfoCompleted = ( ) === -1, industry: event.payload.industry, store_location_previously_set: - _context.onboardingProfile.is_store_country_set || false, - geolocation_success: _context.geolocatedLocation !== undefined, + context.onboardingProfile.is_store_country_set || false, + geolocation_success: context.geolocatedLocation !== undefined, geolocation_overruled: event.payload.geolocationOverruled, } ); }; @@ -180,4 +226,6 @@ export default { recordFailedPluginInstallations, recordSuccessfulPluginInstallation, recordTracksPluginsInstallationRequest, + recordTracksIsEmailChanged, + recordTracksStepViewedBusinessInfo, }; diff --git a/plugins/woocommerce-admin/client/core-profiler/index.tsx b/plugins/woocommerce-admin/client/core-profiler/index.tsx index 3960e774210..ef9616bd2f1 100644 --- a/plugins/woocommerce-admin/client/core-profiler/index.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/index.tsx @@ -31,8 +31,13 @@ import { GeolocationResponse, PLUGINS_STORE_NAME, SETTINGS_STORE_NAME, + USER_STORE_NAME, + WCUser, } from '@woocommerce/data'; -import { initializeExPlat } from '@woocommerce/explat'; +import { + initializeExPlat, + loadExperimentAssignment, +} from '@woocommerce/explat'; import { CountryStateOption } from '@woocommerce/onboarding'; import { getAdminLink } from '@woocommerce/settings'; import CurrencyFactory from '@woocommerce/currency'; @@ -99,6 +104,8 @@ export type BusinessInfoEvent = { industry?: IndustryChoice; storeLocation: CountryStateOption[ 'key' ]; geolocationOverruled: boolean; + isOptInMarketing: boolean; + storeEmailAddress: string; }; }; @@ -139,6 +146,8 @@ export type OnboardingProfile = { selling_platforms: SellingPlatform[] | null; skip?: boolean; is_store_country_set: boolean | null; + store_email?: string; + is_agree_marketing?: boolean; }; export type PluginsPageSkippedEvent = { @@ -195,6 +204,8 @@ export type CoreProfilerStateMachineContext = { persistBusinessInfoRef?: ReturnType< typeof spawn >; spawnUpdateOnboardingProfileOptionRef?: ReturnType< typeof spawn >; spawnGeolocationRef?: ReturnType< typeof spawn >; + emailMarketingExperimentAssignment: 'treatment' | 'control'; + currentUserEmail: string | undefined; }; const getAllowTrackingOption = async () => @@ -309,6 +320,35 @@ const handleOnboardingProfileOption = assign( { }, } ); +const getMarketingOptInExperimentAssignment = async () => { + return loadExperimentAssignment( + `woocommerce_core_profiler_email_marketing_opt_in_2023_Q4_V1` + ); +}; + +const getCurrentUserEmail = async () => { + const currentUser: WCUser< 'email' > = await resolveSelect( + USER_STORE_NAME + ).getCurrentUser(); + return currentUser?.email; +}; + +const assignCurrentUserEmail = assign( { + currentUserEmail: ( + _context, + event: DoneInvokeEvent< string | undefined > + ) => { + if ( + event.data && + event.data.length > 0 && + event.data !== 'wordpress@example.com' // wordpress default prefilled email address + ) { + return event.data; + } + return undefined; + }, +} ); + const assignOnboardingProfile = assign( { onboardingProfile: ( _context, @@ -316,6 +356,17 @@ const assignOnboardingProfile = assign( { ) => event.data, } ); +const assignMarketingOptInExperimentAssignment = assign( { + emailMarketingExperimentAssignment: ( + _context, + event: DoneInvokeEvent< + Awaited< + ReturnType< typeof getMarketingOptInExperimentAssignment > + > + > + ) => event.data.variationName ?? 'control', +} ); + const getGeolocation = async ( context: CoreProfilerStateMachineContext ) => { if ( context.optInDataSharing ) { return resolveSelect( COUNTRIES_STORE_NAME ).geolocate(); @@ -499,6 +550,11 @@ const updateBusinessInfo = async ( ...refreshedOnboardingProfile, is_store_country_set: true, industry: [ event.payload.industry ], + is_agree_marketing: event.payload.isOptInMarketing, + store_email: + event.payload.storeEmailAddress.length > 0 + ? event.payload.storeEmailAddress + : null, }, } ); }; @@ -644,6 +700,8 @@ const coreProfilerMachineActions = { handleCountries, handleOnboardingProfileOption, assignOnboardingProfile, + assignMarketingOptInExperimentAssignment, + assignCurrentUserEmail, persistBusinessInfo, spawnUpdateOnboardingProfileOption, redirectToWooHome, @@ -657,6 +715,8 @@ const coreProfilerMachineServices = { getCountries, getGeolocation, getOnboardingProfileOption, + getMarketingOptInExperimentAssignment, + getCurrentUserEmail, getPlugins, browserPopstateHandler, updateBusinessInfo, @@ -693,6 +753,8 @@ export const coreProfilerStateMachineDefinition = createMachine( { loader: {}, onboardingProfile: {} as OnboardingProfile, jetpackAuthUrl: undefined, + emailMarketingExperimentAssignment: 'control', + currentUserEmail: undefined, } as CoreProfilerStateMachineContext, states: { navigate: { @@ -1026,6 +1088,45 @@ export const coreProfilerStateMachineDefinition = createMachine( { }, }, }, + marketingOptInExperiment: { + initial: 'fetching', + states: { + fetching: { + invoke: { + src: 'getMarketingOptInExperimentAssignment', + onDone: { + target: 'done', + actions: [ + 'assignMarketingOptInExperimentAssignment', + ], + }, + }, + }, + done: { type: 'final' }, + }, + }, + currentUserEmail: { + initial: 'fetching', + states: { + fetching: { + invoke: { + src: 'getCurrentUserEmail', + onDone: { + target: 'done', + actions: [ + 'assignCurrentUserEmail', + ], + }, + onError: { + target: 'done', + }, + }, + }, + done: { + type: 'final', + }, + }, + }, }, // onDone is reached when child parallel states fo fetching are resolved (reached final states) onDone: { @@ -1039,14 +1140,17 @@ export const coreProfilerStateMachineDefinition = createMachine( { }, entry: [ { - type: 'recordTracksStepViewed', + type: 'recordTracksStepViewedBusinessInfo', step: 'business_info', }, ], on: { BUSINESS_INFO_COMPLETED: { target: 'postBusinessInfo', - actions: [ 'recordTracksBusinessInfoCompleted' ], + actions: [ + 'recordTracksBusinessInfoCompleted', + 'recordTracksIsEmailChanged', + ], }, }, }, diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx index a4b558417d1..2d0e9a075b0 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx @@ -2,7 +2,13 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, TextControl, Notice, Spinner } from '@wordpress/components'; +import { + Button, + TextControl, + Notice, + Spinner, + CheckboxControl, +} from '@wordpress/components'; import { SelectControl } from '@woocommerce/components'; import { Icon, chevronDown } from '@wordpress/icons'; import { @@ -83,9 +89,18 @@ export type BusinessInfoContextProps = Pick< > & { onboardingProfile: Pick< CoreProfilerStateMachineContext[ 'onboardingProfile' ], - 'industry' | 'business_choice' | 'is_store_country_set' + | 'industry' + | 'business_choice' + | 'is_store_country_set' + | 'is_agree_marketing' + | 'store_email' + >; +} & Partial< + Pick< + CoreProfilerStateMachineContext, + 'emailMarketingExperimentAssignment' | 'currentUserEmail' + > >; -}; export const BusinessInfo = ( { context, @@ -105,7 +120,11 @@ export const BusinessInfo = ( { is_store_country_set: isStoreCountrySet, industry: industryFromOnboardingProfile, business_choice: businessChoiceFromOnboardingProfile, + is_agree_marketing: isOptInMarketingFromOnboardingProfile, + store_email: storeEmailAddressFromOnboardingProfile, }, + emailMarketingExperimentAssignment, + currentUserEmail, } = context; const [ storeName, setStoreName ] = useState( @@ -176,6 +195,14 @@ export const BusinessInfo = ( { const [ hasSubmitted, setHasSubmitted ] = useState( false ); + const [ storeEmailAddress, setEmailAddress ] = useState( + storeEmailAddressFromOnboardingProfile || currentUserEmail || '' + ); + + const [ isOptInMarketing, setIsOptInMarketing ] = useState< boolean >( + isOptInMarketingFromOnboardingProfile || false + ); + return (
) } + { emailMarketingExperimentAssignment === 'treatment' && ( + <> + { + setEmailAddress( value ); + } } + value={ decodeEntities( storeEmailAddress ) } + label={ + <> + { __( + 'Your email address', + 'woocommerce' + ) } + { isOptInMarketing && ( + + { '*' } + + ) } + + } + placeholder={ __( + 'wordpress@example.com', + 'woocommerce' + ) } + /> + + + ) }
) : ( ) : ( - + ), }, ]; diff --git a/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/test/shipping-recommendation.tsx b/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/test/shipping-recommendation.tsx index fcf234cff4d..091274b6e00 100644 --- a/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/test/shipping-recommendation.tsx +++ b/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/test/shipping-recommendation.tsx @@ -60,7 +60,20 @@ const ShippingRecommendation = ( props: ShippingRecommendationProps ) => { }; describe( 'ShippingRecommendation', () => { - test( 'should show plugins step when jetpack is not installed and activated', () => { + test( 'should show plugins step when woocommerce-services is not installed and activated', () => { + const { getByRole } = render( + + ); + expect( + getByRole( 'button', { name: 'Install & enable' } ) + ).toBeInTheDocument(); + } ); + + test( 'should show connect step when WCS&T is activated but not yet connected', () => { const { getByRole } = render( { activePlugins={ [ 'woocommerce-services' ] } /> ); - expect( - getByRole( 'button', { name: 'Install & enable' } ) - ).toBeInTheDocument(); - } ); - - test( 'should show plugins step when woocommerce-services is not installed and activated', () => { - const { getByRole } = render( - - ); - expect( - getByRole( 'button', { name: 'Install & enable' } ) - ).toBeInTheDocument(); - } ); - - test( 'should show connect step when both plugins are activated', () => { - const { getByRole } = render( - - ); expect( getByRole( 'button', { name: 'Connect' } ) ).toBeInTheDocument(); } ); - test( 'should show "complete task" button when both plugins are activated and jetpack is connected', () => { + test( 'should show "complete task" button when WCS&T is activated and Jetpack is connected', () => { const { getByRole } = render( ); expect( @@ -117,7 +104,7 @@ describe( 'ShippingRecommendation', () => { ); diff --git a/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js b/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js index 77564cbe5be..69fce37f918 100644 --- a/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js +++ b/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js @@ -22,7 +22,6 @@ import { import { recordEvent } from '@woocommerce/tracks'; import { registerPlugin } from '@wordpress/plugins'; import { WooOnboardingTask } from '@woocommerce/onboarding'; -import { Text } from '@woocommerce/experimental'; import classNames from 'classnames'; /** @@ -38,6 +37,7 @@ import { ShippingLayoutColumn, ShippingLayoutRow, } from './shipping-providers/partners'; +import { TermsOfService } from '~/task-lists/components/terms-of-service'; export class Shipping extends Component { constructor( props ) { @@ -60,6 +60,8 @@ export class Shipping extends Component { this.storeLocationCompleted = false; this.shippingPartners = props.shippingPartners; + + this.jetpackAuthRedirectUrl = getAdminLink( 'admin.php?page=wc-admin' ); } componentDidMount() { @@ -207,11 +209,6 @@ export class Shipping extends Component { return pluginToPromote.slug; } ); - // Add jetpack to the list if the list includes woocommerce-services - if ( pluginsToActivate.includes( 'woocommerce-services' ) ) { - pluginsToActivate.push( 'jetpack' ); - } - const onShippingPluginInstalltionSkip = () => { recordEvent( 'tasklist_shipping_label_printing', { install: false, @@ -331,29 +328,48 @@ export class Shipping extends Component { 'woocommerce' ), content: ( - { - createNoticesFromResponse( response ); - recordEvent( 'tasklist_shipping_label_printing', { - install: true, - plugins_to_activate: pluginsToActivate, - } ); - this.completeStep(); - } } - onError={ ( errors, response ) => - createNoticesFromResponse( response ) - } - onSkip={ () => { - recordEvent( 'tasklist_shipping_label_printing', { - install: false, - plugins_to_activate: pluginsToActivate, - } ); - invalidateResolutionForStoreSelector(); - getHistory().push( getNewPath( {}, '/', {} ) ); - onComplete(); - } } - pluginSlugs={ pluginsToActivate } - /> + <> + { ! isJetpackConnected && + pluginsToActivate.includes( + 'woocommerce-services' + ) && ( + + ) } + { + createNoticesFromResponse( response ); + recordEvent( + 'tasklist_shipping_label_printing', + { + install: true, + plugins_to_activate: pluginsToActivate, + } + ); + this.completeStep(); + } } + onError={ ( errors, response ) => + createNoticesFromResponse( response ) + } + onSkip={ () => { + recordEvent( + 'tasklist_shipping_label_printing', + { + install: false, + plugins_to_activate: pluginsToActivate, + } + ); + invalidateResolutionForStoreSelector(); + getHistory().push( getNewPath( {}, '/', {} ) ); + onComplete(); + } } + pluginSlugs={ pluginsToActivate } + /> + ), visible: pluginsToActivate.length, }, @@ -368,9 +384,7 @@ export class Shipping extends Component { ), content: ( { recordEvent( 'tasklist_shipping_connect_store' ); @@ -383,17 +397,6 @@ export class Shipping extends Component { // Override the step fields for the smart shipping defaults. if ( this.shippingSmartDefaultsEnabled ) { - const agreementText = pluginsToActivate.includes( - 'woocommerce-services' - ) - ? __( - 'By installing Jetpack and WooCommerce Shipping you agree to the {{link}}Terms of Service{{/link}}.', - 'woocommerce' - ) - : __( - 'By installing Jetpack you agree to the {{link}}Terms of Service{{/link}}.', - 'woocommerce' - ); const shippingSmartDefaultsSteps = { rates: { label: __( 'Review your shipping options', 'woocommerce' ), @@ -538,30 +541,48 @@ export class Shipping extends Component { ) } { pluginsToPromote.length === 1 && pluginsToPromote[ 0 ].slug ? ( - { - createNoticesFromResponse( response ); - recordEvent( - 'tasklist_shipping_label_printing', - { - install: true, - plugins_to_activate: - pluginsToActivate, - } - ); - invalidateResolutionForStoreSelector(); - this.completeStep(); - } } - onError={ ( errors, response ) => - createNoticesFromResponse( response ) - } - onSkip={ onShippingPluginInstalltionSkip } - pluginSlugs={ pluginsToActivate } - installText={ __( - 'Install and enable', - 'woocommerce' - ) } - /> + <> + { ! isJetpackConnected && + pluginsToPromote[ 0 ].slug === + 'woocommerce-services' && ( + + ) } + { + createNoticesFromResponse( + response + ); + recordEvent( + 'tasklist_shipping_label_printing', + { + install: true, + plugins_to_activate: + pluginsToActivate, + } + ); + invalidateResolutionForStoreSelector(); + this.completeStep(); + } } + onError={ ( errors, response ) => + createNoticesFromResponse( + response + ) + } + onSkip={ + onShippingPluginInstalltionSkip + } + pluginSlugs={ pluginsToActivate } + installText={ __( + 'Install and enable', + 'woocommerce' + ) } + /> + ) : ( diff --git a/plugins/woocommerce/changelog/update-reduce-intro-loading-time b/plugins/woocommerce/changelog/update-reduce-intro-loading-time new file mode 100644 index 00000000000..87c2bea3937 --- /dev/null +++ b/plugins/woocommerce/changelog/update-reduce-intro-loading-time @@ -0,0 +1,4 @@ +Significance: patch +Type: performance + +Reduce cys intro page loading time diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php index 2714ac4e6c7..dee7e6c0db5 100644 --- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php +++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php @@ -81,17 +81,27 @@ class CustomizeStore extends Task { return true; } + /** + * Action URL. + * + * @return string + */ + public function get_action_url() { + return admin_url( 'wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store' ); + } + + /** * Possibly add site editor scripts. */ public function possibly_add_site_editor_scripts() { - $is_customize_store_pages = ( + $is_assembler_hub = ( isset( $_GET['page'] ) && 'wc-admin' === $_GET['page'] && isset( $_GET['path'] ) && - str_starts_with( wc_clean( wp_unslash( $_GET['path'] ) ), '/customize-store' ) + str_starts_with( wc_clean( wp_unslash( $_GET['path'] ) ), '/customize-store/assembler-hub' ) ); - if ( ! $is_customize_store_pages ) { + if ( ! $is_assembler_hub ) { return; } From 7142f805342ada0558e643ee98ecb36ffffdd599 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 26 Oct 2023 14:15:53 +0800 Subject: [PATCH 56/60] Update CYS color palettes and fonts based on the new Dotcom release (#40989) * Update font pairings * Remove font loader check * Update default fonts * Update color palette choices * Add changelog * Add default color styles config * Add comment * Fix tests * Fix test --- .../assembler-hub/auto-block-preview.tsx | 11 +- .../color-palette-variations/constants.ts | 1662 +++++++---------- .../font-pairing-variations/constants.ts | 292 ++- .../customize-store/design-with-ai/actions.ts | 2 +- .../design-with-ai/prompts/colorChoices.ts | 177 +- .../prompts/test/colorChoices.test.ts | 4 +- .../changelog/update-cys-font-color-choices | 4 + 7 files changed, 1004 insertions(+), 1148 deletions(-) create mode 100644 plugins/woocommerce/changelog/update-cys-font-color-choices diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx index c530007e837..739d86c8df8 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx @@ -259,13 +259,10 @@ function ScaledBlockPreview( { ` } - { /* Only load font families when there are two font families (font-paring selection). Otherwise, it is not needed. */ } - { externalFontFamilies.length === 2 && ( - - ) } + ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts index b9e51562832..032c29e0652 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts @@ -8,7 +8,7 @@ export const COLOR_PALETTES = [ palette: { theme: [ { - color: '#11163d', + color: '#323856', name: 'Primary', slug: 'primary', }, @@ -18,7 +18,7 @@ export const COLOR_PALETTES = [ slug: 'secondary', }, { - color: '#11163d', + color: '#323856', name: 'Foreground', slug: 'foreground', }, @@ -41,46 +41,28 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, }, wpcom_category: 'Neutral', }, { - title: 'Crimson Tide', + title: 'Arctic Dawn', version: 2, settings: { color: { palette: { theme: [ { - color: '#A02040', + color: '#1E226F', name: 'Primary', slug: 'primary', }, { - color: '#234B57', + color: '#DD301D', name: 'Secondary', slug: 'secondary', }, { - color: '#871C37', + color: '#0D1263', name: 'Foreground', slug: 'foreground', }, @@ -90,7 +72,7 @@ export const COLOR_PALETTES = [ slug: 'background', }, { - color: '#FCE5DF', + color: '#F0F1F5', name: 'Tertiary', slug: 'tertiary', }, @@ -103,25 +85,51 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--secondary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', + }, + wpcom_category: 'Neutral', + }, + { + title: 'Bronze Serenity', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#1e4b4b', + name: 'Primary', + slug: 'primary', }, - }, + { + color: '#9e7047', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#1e4b4b', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#ffffff', + name: 'Background', + slug: 'background', + }, + { + color: '#e9eded', + name: 'Tertiary', + slug: 'tertiary', + }, + ], }, }, }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, wpcom_category: 'Neutral', }, { @@ -165,21 +173,72 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, + }, + wpcom_category: 'Neutral', + }, + { + title: 'Candy Store', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#293852', + name: 'Primary', + slug: 'primary', + }, + { + color: '#f1bea7', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#293852', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#ffffff', + name: 'Background', + slug: 'background', + }, + { + color: '#fffddb', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + blocks: { + 'core/button': { + color: { + background: 'var(--wp--preset--color--secondary)', + }, + variations: { + outline: { + border: { + color: 'var(--wp--preset--color--secondary)', + }, + color: { + text: 'var(--wp--preset--color--primary)', + }, + }, + }, + }, + }, + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, elements: { button: { color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, + background: 'var(--wp--preset--color--secondary)', + text: 'var(--wp--preset--color--primary)', }, }, }, @@ -194,17 +253,17 @@ export const COLOR_PALETTES = [ palette: { theme: [ { - color: '#1B1736', + color: '#222222', name: 'Primary', slug: 'primary', }, { - color: '#7E76A3', + color: '#c0f500', name: 'Secondary', slug: 'secondary', }, { - color: '#1B1736', + color: '#222222', name: 'Foreground', slug: 'foreground', }, @@ -214,7 +273,7 @@ export const COLOR_PALETTES = [ slug: 'background', }, { - color: '#E9FC5F', + color: '#f7faed', name: 'Tertiary', slug: 'tertiary', }, @@ -223,370 +282,161 @@ export const COLOR_PALETTES = [ }, }, styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Green Thumb', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#164A41', - name: 'Primary', - slug: 'primary', - }, - { - color: '#4B7B4D', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#164A41', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#ffffff', - name: 'Background', - slug: 'background', - }, - { - color: '#CEEAC4', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Golden Haze', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#232224', - name: 'Primary', - slug: 'primary', - }, - { - color: '#EBB54F', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#515151', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#ffffff', - name: 'Background', - slug: 'background', - }, - { - color: '#FFF0AE', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { + blocks: { + 'core/button': { color: { background: 'var(--wp--preset--color--secondary)', - text: 'var(--wp--preset--color--foreground)', }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', + variations: { + outline: { + border: { + color: 'var(--wp--preset--color--secondary)', + }, + color: { + text: 'var(--wp--preset--color--primary)', + }, }, }, }, }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Golden Indigo', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#4866C0', - name: 'Primary', - slug: 'primary', - }, - { - color: '#C09F50', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#405AA7', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#ffffff', - name: 'Background', - slug: 'background', - }, - { - color: '#FBF5EE', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { color: { background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, elements: { button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Arctic Dawn', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#243156', - name: 'Primary', - slug: 'primary', - }, - { - color: '#DE5853', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#243156', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#ffffff', - name: 'Background', - slug: 'background', - }, - { - color: '#E7E7E7', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Jungle Sunrise', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#1a4435', - name: 'Primary', - slug: 'primary', - }, - { - color: '#ed774e', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#0a271d', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#fefbec', - name: 'Background', - slug: 'background', - }, - { - color: '#f7decb', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, ':hover': { color: { + background: 'var(--wp--preset--color--secondary)', text: 'var(--wp--preset--color--primary)', }, }, + color: { + background: 'var(--wp--preset--color--secondary)', + text: 'var(--wp--preset--color--primary)', + }, }, }, }, + wpcom_category: 'Neutral', + }, + { + title: 'Crimson Tide', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#101317', + name: 'Primary', + slug: 'primary', + }, + { + color: '#EC5E3F', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#101317', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#ffffff', + name: 'Background', + slug: 'background', + }, + { + color: '#EEEEEE', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Neutral', + }, + { + title: 'Raspberry Chocolate', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#42332e', + name: 'Primary', + slug: 'primary', + }, + { + color: '#d64d68', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#241d1a', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#eeeae6', + name: 'Background', + slug: 'background', + }, + { + color: '#D6CCC2', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, wpcom_category: 'Bright', }, { - title: 'Berry Grove', + title: 'Gumtree Sunset', version: 2, settings: { color: { palette: { theme: [ { - color: '#1F351A', + color: '#8699A1', name: 'Primary', slug: 'primary', }, { - color: '#DE76DE', + color: '#BB6154', name: 'Secondary', slug: 'secondary', }, { - color: '#1f351a', + color: '#476C77', name: 'Foreground', slug: 'foreground', }, { - color: '#fdfaf1', + color: '#F4F7F7', name: 'Background', slug: 'background', }, { - color: '#ecf6eb', + color: '#ffffff', name: 'Tertiary', slug: 'tertiary', }, @@ -599,24 +449,6 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, @@ -661,56 +493,38 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--foreground)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, { - title: 'Raspberry Chocolate', + title: 'Cinder', version: 2, settings: { color: { palette: { theme: [ { - color: '#42332e', + color: '#c14420', name: 'Primary', slug: 'primary', }, { - color: '#d64d68', + color: '#2F2D2D', name: 'Secondary', slug: 'secondary', }, { - color: '#241d1a', + color: '#c14420', name: 'Foreground', slug: 'foreground', }, { - color: '#eeeae6', + color: '#f1f2f2', name: 'Background', slug: 'background', }, { - color: '#D6CCC2', + color: '#DCDCDC', name: 'Tertiary', slug: 'tertiary', }, @@ -723,24 +537,6 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, @@ -757,7 +553,7 @@ export const COLOR_PALETTES = [ slug: 'primary', }, { - color: '#353535', + color: '#666666', name: 'Secondary', slug: 'secondary', }, @@ -785,213 +581,6 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--foreground)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Bright', - }, - { - title: 'Gumtree Sunset', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#476C77', - name: 'Primary', - slug: 'primary', - }, - { - color: '#EFB071', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#476C77', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#edf4f4', - name: 'Background', - slug: 'background', - }, - { - color: '#ffffff', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--tertiary)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Bright', - }, - { - title: 'Ice', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - slug: 'primary', - color: '#12123F', - name: 'Primary', - }, - { - slug: 'secondary', - color: '#3473FE', - name: 'Secondary', - }, - { - slug: 'foreground', - color: '#12123F', - name: 'Foreground', - }, - { - slug: 'background', - color: '#F1F4FA', - name: 'Background', - }, - { - slug: 'tertiary', - color: '#DBE6EE', - name: 'Tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Bright', - }, - { - title: 'Cinder', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#c14420', - name: 'Primary', - slug: 'primary', - }, - { - color: '#2F2D2D', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#863119', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#f1f2f2', - name: 'Background', - slug: 'background', - }, - { - color: '#DCDCDC', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - border: { - radius: '0', - }, - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, @@ -1036,153 +625,11 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--secondary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, { - title: 'Sandalwood Oasis', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#F0EBE3', - name: 'Primary', - slug: 'primary', - }, - { - color: '#DF9785', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ffffff', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#2a2a16', - name: 'Background', - slug: 'background', - }, - { - color: '#434323', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Rustic Rosewood', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#F4F4F2', - name: 'Primary', - slug: 'primary', - }, - { - color: '#EE797C', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ffffff', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#1A1A1A', - name: 'Background', - slug: 'background', - }, - { - color: '#3B3939', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Cinnamon Latte', + title: 'Vibrant Berry', version: 2, settings: { color: { @@ -1190,27 +637,27 @@ export const COLOR_PALETTES = [ theme: [ { slug: 'primary', - color: '#D9CAB3', + color: '#7C1D6F', name: 'Primary', }, { slug: 'secondary', - color: '#BC8034', + color: '#C62FB2', name: 'Secondary', }, { slug: 'foreground', - color: '#FFFFFF', + color: '#7C1D6F', name: 'Foreground', }, { slug: 'background', - color: '#3C3F4D', + color: '#FFEED6', name: 'Background', }, { slug: 'tertiary', - color: '#2B2D36', + color: '#FDD8DE', name: 'Tertiary', }, ], @@ -1222,150 +669,8 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, - wpcom_category: 'Dark', - }, - { - title: 'Lilac Nightshade', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#f5d6ff', - name: 'Primary', - slug: 'primary', - }, - { - color: '#C48DDA', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ffffff', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#000000', - name: 'Background', - slug: 'background', - }, - { - color: '#462749', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Lightning', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#ebffd2', - name: 'Primary', - slug: 'primary', - }, - { - color: '#fefefe', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ebffd2', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#0e1fb5', - name: 'Background', - slug: 'background', - }, - { - color: '#0A1680', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--foreground)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', + wpcom_category: 'Bright', }, { title: 'Aquamarine Night', @@ -1408,86 +713,6 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Charcoal', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#dbdbdb', - name: 'Primary', - slug: 'primary', - }, - { - color: '#efefef', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#dbdbdb', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#1e1e1e', - name: 'Background', - slug: 'background', - }, - { - color: '#000000', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Dark', }, @@ -1532,25 +757,271 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--primary)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', + }, + wpcom_category: 'Dark', + }, + { + title: 'Cinnamon Latte', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + slug: 'primary', + color: '#D9CAB3', + name: 'Primary', }, - }, + { + slug: 'secondary', + color: '#BC8034', + name: 'Secondary', + }, + { + slug: 'foreground', + color: '#FFFFFF', + name: 'Foreground', + }, + { + slug: 'background', + color: '#3C3F4D', + name: 'Background', + }, + { + slug: 'tertiary', + color: '#2B2D36', + name: 'Tertiary', + }, + ], }, }, }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Lightning', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#ebffd2', + name: 'Primary', + slug: 'primary', + }, + { + color: '#fefefe', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ebffd2', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#0e1fb5', + name: 'Background', + slug: 'background', + }, + { + color: '#0A1680', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Lilac Nightshade', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#f5d6ff', + name: 'Primary', + slug: 'primary', + }, + { + color: '#C48DDA', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ffffff', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#000000', + name: 'Background', + slug: 'background', + }, + { + color: '#462749', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Charcoal', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#dbdbdb', + name: 'Primary', + slug: 'primary', + }, + { + color: '#efefef', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#dbdbdb', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#1e1e1e', + name: 'Background', + slug: 'background', + }, + { + color: '#000000', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Rustic Rosewood', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#F4F4F2', + name: 'Primary', + slug: 'primary', + }, + { + color: '#EE797C', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ffffff', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#1A1A1A', + name: 'Background', + slug: 'background', + }, + { + color: '#3B3939', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Sandalwood Oasis', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#F0EBE3', + name: 'Primary', + slug: 'primary', + }, + { + color: '#DF9785', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ffffff', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#2a2a16', + name: 'Background', + slug: 'background', + }, + { + color: '#434323', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, wpcom_category: 'Dark', }, { @@ -1594,25 +1065,148 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, + }, + wpcom_category: 'Dark', + }, +].map( ( color ) => { + // Add base styles settings for elements to ensure that the colors are applied correctly since default TT3 theme does not have right styles. + // These styles are referenced in the theme.json file of the creatio-2 theme. + // https://github.com/Automattic/themes/blob/trunk/creatio-2/theme.json + return { + ...color, + styles: { + ...color.styles, + blocks: { + 'core/button': { + color: { + background: 'var(--wp--preset--color--secondary)', + }, + variations: { + outline: { + border: { + color: 'var(--wp--preset--color--secondary)', + }, + color: { + text: 'var(--wp--preset--color--secondary)', + }, + }, + }, + }, + 'core/heading': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + elements: { + link: { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + }, + }, + 'core/post-date': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + 'core/post-title': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + elements: { + link: { + ':hover': { + color: { + text: 'var(--wp--preset--color--primary)', + }, + }, + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + }, + }, + 'core/pullquote': { + border: { + color: 'var(--wp--preset--color--foreground)', + style: 'solid', + width: '1px 0', + }, + }, + 'core/quote': { + border: { + color: 'var(--wp--preset--color--foreground)', + style: 'solid', + width: '0 0 0 5px', + }, + }, + 'core/separator': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + 'core/site-title': { + elements: { + link: { + ':hover': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + }, + }, + ...color.styles.blocks, + }, elements: { button: { + ':active': { + color: { + background: 'var(--wp--preset--color--foreground)', + text: 'var(--wp--preset--color--background)', + }, + }, + ':focus': { + color: { + background: 'var(--wp--preset--color--foreground)', + text: 'var(--wp--preset--color--background)', + }, + outline: { + color: 'var(--wp--preset--color--primary)', + offset: '2px', + style: 'dotted', + width: '1px', + }, + }, + ':hover': { + color: { + background: 'var(--wp--preset--color--secondary)', + text: 'var(--wp--preset--color--background)', + }, + }, color: { background: 'var(--wp--preset--color--primary)', text: 'var(--wp--preset--color--background)', }, }, link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, ':hover': { color: { text: 'var(--wp--preset--color--primary)', }, + typography: { + textDecoration: 'none', + }, + }, + color: { + text: 'var(--wp--preset--color--foreground)', }, }, + ...color.styles.elements, }, }, - wpcom_category: 'Dark', - }, -]; + }; +} ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts index 9b6d68fd63e..fbc04ee3c62 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts @@ -69,6 +69,45 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Albert Sans + Lora', + version: 2, + lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Albert Sans', + slug: 'albert-sans', + }, + { + fontFamily: 'Lora', + slug: 'lora', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: + 'var(--wp--preset--font-family--albert-sans)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--lora)', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.67', + }, + }, + }, { title: 'Bodoni Moda + Overpass', version: 2, @@ -193,10 +232,120 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Cormorant + Work Sans', + version: 2, + lookAndFeel: [] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Cormorant', + slug: 'cormorant', + }, + { + fontFamily: 'Work Sans', + slug: 'work-sans', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--cormorant)', + fontStyle: 'normal', + fontWeight: '500', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--work-sans)', + }, + }, + }, + { + title: 'DM Sans + IBM Plex Mono', + version: 2, + lookAndFeel: [] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'DM Sans', + slug: 'dm-sans', + }, + { + fontFamily: 'IBM Plex Mono', + slug: 'ibm-plex-mono', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--dm-sans)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--ibm-plex-mono)', + fontSize: 'var(--wp--preset--font-size--small)', + fontStyle: 'normal', + fontWeight: '300', + lineHeight: '1.67', + }, + }, + }, + { + title: 'Fraunces + Libre Franklin', + version: 2, + lookAndFeel: [ 'Classic' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Fraunces', + slug: 'fraunces', + }, + { + fontFamily: 'Libre Franklin', + slug: 'libre-franklin', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--fraunces)', + fontStyle: 'normal', + fontWeight: '500', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--libre-franklin)', + lineHeight: '1.67', + }, + }, + }, { title: 'Libre Baskerville + DM Sans', version: 2, - lookAndFeel: [ 'Classic', 'Bold' ] as Look[], + lookAndFeel: [] as Look[], settings: { typography: { fontFamilies: { @@ -257,7 +406,7 @@ export const FONT_PAIRINGS = [ { title: 'Libre Franklin + EB Garamond', version: 2, - lookAndFeel: [ 'Contemporary', 'Classic', 'Bold' ] as Look[], + lookAndFeel: [ 'Classic' ] as Look[], settings: { typography: { fontFamilies: { @@ -382,6 +531,40 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Newsreader + Newsreader', + version: 2, + lookAndFeel: [ 'Classic' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Newsreader', + slug: 'newsreader', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: + 'var(--wp--preset--font-family--newsreader)', + fontStyle: 'normal', + fontWeight: '400', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--newsreader)', + fontSize: 'var(--wp--preset--font-size--medium)', + lineHeight: '1.67', + }, + }, + }, { title: 'Playfair Display + Fira Sans', version: 2, @@ -448,9 +631,79 @@ export const FONT_PAIRINGS = [ }, }, { - title: 'Rubik + Inter', + title: 'Plus Jakarta Sans + Plus Jakarta Sans', version: 2, lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Plus Jakarta Sans', + slug: 'plus-jakarta-sans', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: + 'var(--wp--preset--font-family--plus-jakarta-sans)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--plus-jakarta-sans)', + lineHeight: '1.67', + }, + }, + }, + { + title: 'Raleway + Cormorant', + version: 2, + lookAndFeel: [ 'Classic', 'Bold' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Raleway', + slug: 'raleway', + }, + { + fontFamily: 'Cormorant', + slug: 'cormorant', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--raleway)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--cormorant)', + fontSize: 'var(--wp--preset--font-size--medium)', + lineHeight: '1.67', + }, + }, + }, + { + title: 'Rubik + Inter', + version: 2, + lookAndFeel: [ 'Bold' ] as Look[], settings: { typography: { fontFamilies: { @@ -506,10 +759,41 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Rubik + Rubik', + version: 2, + lookAndFeel: [ 'Contemporary' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Rubik', + slug: 'rubik', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--rubik)', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--rubik)', + fontWeight: '400', + lineHeight: '1.67', + }, + }, + }, { title: 'Space Mono + Roboto', version: 2, - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], + lookAndFeel: [] as Look[], settings: { typography: { fontFamilies: { diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts index 357620220af..216fc10bdae 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts @@ -116,7 +116,7 @@ const assignFontPairing = assign< fontPairing = 'Bodoni Moda + Overpass'; break; case choice === 'Bold': - fontPairing = 'Rubik + Inter'; + fontPairing = 'Plus Jakarta Sans + Plus Jakarta Sans'; break; } diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts index 1e43a759129..f89948eb523 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts @@ -17,12 +17,20 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { - name: 'Crimson Tide', - primary: '#A02040', - secondary: '#234B57', - foreground: '#871C37', + name: 'Arctic Dawn', + primary: '#243156', + secondary: '#DE5853', + foreground: '#243156', background: '#ffffff', - lookAndFeel: [ 'Bold' ] as Look[], + lookAndFeel: [ 'Contemporary' ] as Look[], + }, + { + name: 'Bronze Serenity', + primary: '#1e4b4b', + secondary: '#9e7047', + foreground: '#1e4b4b', + background: '#ffffff', + lookAndFeel: [ 'Classic' ], }, { name: 'Purple Twilight', @@ -32,68 +40,28 @@ const colorChoices: ColorPalette[] = [ background: '#fefbff', lookAndFeel: [ 'Bold' ] as Look[], }, + { + name: 'Candy Store', + primary: '#293852', + secondary: '#f1bea7', + foreground: '#293852', + background: '#ffffff', + lookAndFeel: [ 'Classic' ], + }, { name: 'Midnight Citrus', primary: '#1B1736', secondary: '#7E76A3', foreground: '#1B1736', background: '#ffffff', - lookAndFeel: [ 'Bold' ] as Look[], + lookAndFeel: [ 'Bold', 'Contemporary' ] as Look[], }, { - name: 'Green Thumb', - primary: '#164A41', - secondary: '#4B7B4D', - foreground: '#164A41', + name: 'Crimson Tide', + primary: '#A02040', + secondary: '#234B57', + foreground: '#871C37', background: '#ffffff', - lookAndFeel: [ 'Contemporary' ] as Look[], - }, - { - name: 'Golden Haze', - primary: '#232224', - secondary: '#EBB54F', - foreground: '#515151', - background: '#ffffff', - lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[], - }, - { - name: 'Golden Indigo', - primary: '#4866C0', - secondary: '#C09F50', - foreground: '#405AA7', - background: '#ffffff', - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], - }, - { - name: 'Arctic Dawn', - primary: '#243156', - secondary: '#DE5853', - foreground: '#243156', - background: '#ffffff', - lookAndFeel: [ 'Contemporary' ] as Look[], - }, - { - name: 'Jungle Sunrise', - primary: '#1a4435', - secondary: '#ed774e', - foreground: '#0a271d', - background: '#fefbec', - lookAndFeel: [ 'Classic' ] as Look[], - }, - { - name: 'Berry Grove', - primary: '#1F351A', - secondary: '#DE76DE', - foreground: '#1f351a', - background: '#fdfaf1', - lookAndFeel: [ 'Classic' ] as Look[], - }, - { - name: 'Fuchsia', - primary: '#b7127f', - secondary: '#18020C', - foreground: '#b7127f', - background: '#f7edf6', lookAndFeel: [ 'Bold' ] as Look[], }, { @@ -104,29 +72,21 @@ const colorChoices: ColorPalette[] = [ background: '#eeeae6', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, - { - name: 'Canary', - primary: '#0F0F05', - secondary: '#353535', - foreground: '#0F0F05', - background: '#FCFF9B', - lookAndFeel: [ 'Bold' ] as Look[], - }, { name: 'Gumtree Sunset', primary: '#476C77', secondary: '#EFB071', foreground: '#476C77', background: '#edf4f4', - lookAndFeel: [ 'Contemporary' ] as Look[], + lookAndFeel: [ 'Classic' ] as Look[], }, { - name: 'Ice', - primary: '#12123F', - secondary: '#3473FE', - foreground: '#12123F', - background: '#F1F4FA', - lookAndFeel: [ 'Contemporary' ] as Look[], + name: 'Fuchsia', + primary: '#b7127f', + secondary: '#18020C', + foreground: '#b7127f', + background: '#f7edf6', + lookAndFeel: [ 'Bold' ] as Look[], }, { name: 'Cinder', @@ -136,6 +96,14 @@ const colorChoices: ColorPalette[] = [ background: '#f1f2f2', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, + { + name: 'Canary', + primary: '#0F0F05', + secondary: '#353535', + foreground: '#0F0F05', + background: '#FCFF9B', + lookAndFeel: [ 'Bold' ] as Look[], + }, { name: 'Blue Lagoon', primary: '#004DE5', @@ -145,19 +113,27 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Bold', 'Contemporary' ] as Look[], }, { - name: 'Sandalwood Oasis', - primary: '#F0EBE3', - secondary: '#DF9785', - foreground: '#ffffff', - background: '#2a2a16', - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], + name: 'Vibrant Berry', + primary: '#7C1D6F', + secondary: '#C62FB2', + foreground: '#7C1D6F', + background: '#FFEED6', + lookAndFeel: [ 'Classic', 'Bold' ], }, { - name: 'Rustic Rosewood', - primary: '#F4F4F2', - secondary: '#EE797C', + name: 'Aquamarine Night', + primary: '#deffef', + secondary: '#56fbb9', foreground: '#ffffff', - background: '#1A1A1A', + background: '#091C48', + lookAndFeel: [ 'Bold' ] as Look[], + }, + { + name: 'Evergreen Twilight', + primary: '#ffffff', + secondary: '#8EE978', + foreground: '#ffffff', + background: '#181818', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { @@ -168,14 +144,6 @@ const colorChoices: ColorPalette[] = [ background: '#3C3F4D', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, - { - name: 'Lilac Nightshade', - primary: '#f5d6ff', - secondary: '#C48DDA', - foreground: '#ffffff', - background: '#000000', - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], - }, { name: 'Lightning', primary: '#ebffd2', @@ -185,12 +153,12 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Bold' ] as Look[], }, { - name: 'Aquamarine Night', - primary: '#deffef', - secondary: '#56fbb9', + name: 'Lilac Nightshade', + primary: '#f5d6ff', + secondary: '#C48DDA', foreground: '#ffffff', - background: '#091C48', - lookAndFeel: [ 'Bold' ] as Look[], + background: '#000000', + lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { name: 'Charcoal', @@ -201,11 +169,19 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { - name: 'Evergreen Twilight', - primary: '#ffffff', - secondary: '#8EE978', + name: 'Rustic Rosewood', + primary: '#F4F4F2', + secondary: '#EE797C', foreground: '#ffffff', - background: '#181818', + background: '#1A1A1A', + lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], + }, + { + name: 'Sandalwood Oasis', + primary: '#F0EBE3', + secondary: '#DF9785', + foreground: '#ffffff', + background: '#2a2a16', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { @@ -217,6 +193,7 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, ]; + const allowedNames: string[] = colorChoices.map( ( palette ) => palette.name ); const hexColorRegex = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/; const colorPaletteNameValidator = z diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts index cff531b7838..2878bd2243c 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts @@ -186,8 +186,8 @@ describe( 'colorPaletteResponseValidator', () => { 'Lightning', 'Midnight Citrus', 'Purple Twilight', - 'Crimson Tide', - 'Ice', + 'Fuchsia', + 'Charcoal', ], }; it( 'should validate a correct color palette response', () => { diff --git a/plugins/woocommerce/changelog/update-cys-font-color-choices b/plugins/woocommerce/changelog/update-cys-font-color-choices new file mode 100644 index 00000000000..742ae3563f9 --- /dev/null +++ b/plugins/woocommerce/changelog/update-cys-font-color-choices @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update cys color/font choices From b108e19a933202ef416115ec096d872127cc5786 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 26 Oct 2023 16:46:50 +0800 Subject: [PATCH 57/60] Try using iframe for loading assembler hub behind the scenes (#40936) * Try using iframe for loading assembler behind the scenes * Add css * Lint * Changelog * Update plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts * Handle navigations around CYS if we're using iframe * Add better loading handler * Increase loader screen intervals * Fix navigation * Increase loader timeout to 30 seconds * Much better loading detect from editor hook as suggested by Chi * Unused import * Lint css --- .../customize-store/assembler-hub/editor.tsx | 9 +- .../customize-store/design-with-ai/actions.ts | 34 ++++-- .../design-with-ai/pages/ApiCallLoader.tsx | 2 +- .../client/customize-store/index.tsx | 10 +- .../customize-store/intro/intro-banners.tsx | 8 +- .../client/customize-store/style.scss | 13 +++ .../customize-store/transitional/index.tsx | 6 +- .../client/customize-store/utils.js | 101 ++++++++++++++++++ .../try-cys-temporary-iframe-solution | 4 + 9 files changed, 173 insertions(+), 14 deletions(-) create mode 100644 plugins/woocommerce-admin/client/customize-store/utils.js create mode 100644 plugins/woocommerce/changelog/try-cys-temporary-iframe-solution diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx index b2bdb07028b..afee3a62cd5 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx @@ -5,7 +5,7 @@ * External dependencies */ import classnames from 'classnames'; -import { useMemo } from '@wordpress/element'; +import { useEffect, useMemo } from '@wordpress/element'; // @ts-ignore No types for this exist yet. import { InterfaceSkeleton } from '@wordpress/interface'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -24,6 +24,7 @@ import { GlobalStylesRenderer } from '@wordpress/edit-site/build-module/componen * Internal dependencies */ import { BlockEditor } from './block-editor'; +import { editorIsLoaded } from '../utils'; export const Editor = ( { isLoading }: { isLoading: boolean } ) => { const { context, hasPageContentFocus } = useSelect( ( select ) => { @@ -59,6 +60,12 @@ export const Editor = ( { isLoading }: { isLoading: boolean } ) => { }; }, [ hasPageContentFocus, context, setEditedPostContext ] ); + useEffect( () => { + if ( ! isLoading ) { + editorIsLoaded(); + } + }, [ isLoading ] ); + return ( <> { isLoading ? : null } diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts index 216fc10bdae..c24d6092bf6 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts @@ -29,6 +29,7 @@ import { lookAndFeelCompleteEvent, toneOfVoiceCompleteEvent, } from './pages'; +import { attachIframeListeners, onIframeLoad } from '../utils'; const assignBusinessInfoDescription = assign< designWithAiStateMachineContext, @@ -276,12 +277,33 @@ const recordTracksStepCompleted = ( } ); }; -const redirectToAssemblerHub = () => { - window.location.href = getNewPath( - {}, - '/customize-store/assembler-hub', - {} - ); +const redirectToAssemblerHub = async () => { + const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} ); + const iframe = document.createElement( 'iframe' ); + iframe.classList.add( 'cys-fullscreen-iframe' ); + iframe.src = assemblerUrl; + + const showIframe = () => { + const loader = document.getElementsByClassName( + 'woocommerce-onboarding-loader' + ); + if ( loader[ 0 ] ) { + ( loader[ 0 ] as HTMLElement ).style.display = 'none'; + } + iframe.style.opacity = '1'; + }; + + iframe.onload = () => { + // Hide loading UI + attachIframeListeners( iframe ); + onIframeLoad( showIframe ); + + // Ceiling wait time set to 60 seconds + setTimeout( showIframe, 60 * 1000 ); + window.history?.pushState( {}, '', assemblerUrl ); + }; + + document.body.appendChild( iframe ); }; export const actions = { diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx index 89095f36d6b..06eec7ac38a 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx @@ -91,7 +91,7 @@ export const ApiCallLoader = () => { return ( - + { loaderSteps.map( ( step, index ) => ( diff --git a/plugins/woocommerce-admin/client/customize-store/index.tsx b/plugins/woocommerce-admin/client/customize-store/index.tsx index 2c23d0f7968..704b3d18eeb 100644 --- a/plugins/woocommerce-admin/client/customize-store/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/index.tsx @@ -38,6 +38,7 @@ import { } from './types'; import { ThemeCard } from './intro/types'; import './style.scss'; +import { navigateOrParent, attachParentListeners } from './utils'; export type customizeStoreStateMachineEvents = | introEvents @@ -65,7 +66,8 @@ const updateQueryStep = ( }; const redirectToWooHome = () => { - window.location.href = getNewPath( {}, '/', {} ); + const url = getNewPath( {}, '/', {} ); + navigateOrParent( window, url ); }; const redirectToThemes = ( _context: customizeStoreStateMachineContext ) => { @@ -360,6 +362,12 @@ export const CustomizeStoreController = ( { } }, [ CurrentComponent, currentNodeMeta?.component ] ); + // Run listeners for parent window. + useEffect( () => { + const removeListener = attachParentListeners(); + return removeListener; + }, [] ); + const currentNodeCssLabel = state.value instanceof Object ? Object.keys( state.value )[ 0 ] diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx index e27a600832a..4e2fa08bc86 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx +++ b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx @@ -10,6 +10,7 @@ import { getNewPath } from '@woocommerce/navigation'; * Internal dependencies */ import { Intro } from '.'; +import { navigateOrParent } from '../utils'; export const BaseIntroBanner = ( { bannerTitle, @@ -190,10 +191,9 @@ export const ExistingAiThemeBanner = ( { bannerClass="existing-ai-theme-banner" buttonIsLink={ false } bannerButtonOnClick={ () => { - window.location.href = getNewPath( - {}, - '/customize-store/assembler-hub', - {} + navigateOrParent( + window, + getNewPath( {}, '/customize-store/assembler-hub', {} ) ); } } bannerButtonText={ __( 'Customize', 'woocommerce' ) } diff --git a/plugins/woocommerce-admin/client/customize-store/style.scss b/plugins/woocommerce-admin/client/customize-store/style.scss index e0c806a2aed..308f74306c2 100644 --- a/plugins/woocommerce-admin/client/customize-store/style.scss +++ b/plugins/woocommerce-admin/client/customize-store/style.scss @@ -167,3 +167,16 @@ body.woocommerce-customize-store.js.is-fullscreen-mode { height: initial; } } + +.cys-fullscreen-iframe { + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + z-index: 9999; + transition: opacity 1.2s linear; + opacity: 0; +} diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx index 82ff2f3c216..8c5b5be9a4c 100644 --- a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx @@ -23,6 +23,7 @@ import { SiteHub } from '../assembler-hub/site-hub'; import { ADMIN_URL } from '~/utils/admin-settings'; import './style.scss'; +import { navigateOrParent } from '../utils'; export type events = { type: 'GO_BACK_TO_HOME' }; @@ -97,7 +98,10 @@ export const Transitional = ( { recordEvent( 'customize_your_store_transitional_editor_click' ); - window.location.href = `${ ADMIN_URL }site-editor.php`; + navigateOrParent( + window, + `${ ADMIN_URL }site-editor.php` + ); } } > { __( 'Go to the Editor', 'woocommerce' ) } diff --git a/plugins/woocommerce-admin/client/customize-store/utils.js b/plugins/woocommerce-admin/client/customize-store/utils.js new file mode 100644 index 00000000000..2d44e753d09 --- /dev/null +++ b/plugins/woocommerce-admin/client/customize-store/utils.js @@ -0,0 +1,101 @@ +export function sendMessageToParent( message ) { + window.parent.postMessage( message, '*' ); +} + +export function isIframe( windowObject ) { + return windowObject.document !== windowObject.parent.document; +} + +export function editorIsLoaded() { + window.parent.postMessage( { type: 'iframe-loaded' }, '*' ); +} + +export function onIframeLoad( callback ) { + window.addEventListener( 'message', ( event ) => { + if ( event.data.type === 'iframe-loaded' ) { + callback(); + } + } ); +} + +/** + * Attach a listener to the window object to listen for messages from the parent window. + * + * @return {() => void} Remove listener function + */ +export function attachParentListeners() { + const listener = ( event ) => { + if ( event.data.type === 'navigate' ) { + window.location.href = event.data.url; + } + }; + + window.addEventListener( 'message', listener, false ); + + return () => { + window.removeEventListener( 'message', listener, false ); + }; +} + +/** + * If iframe, post message. Otherwise, navigate to a URL. + * + * @param {*} windowObject + * @param {*} url + */ +export function navigateOrParent( windowObject, url ) { + if ( isIframe( windowObject ) ) { + windowObject.parent.postMessage( { type: 'navigate', url }, '*' ); + } else { + windowObject.location.href = url; + } +} + +/** + * Attach listeners to an iframe to intercept and redirect navigation events. + * + * @param {HTMLIFrameElement} iframe + */ +export function attachIframeListeners( iframe ) { + const iframeWindow = iframe.contentWindow; + const iframeDocument = + iframe.contentDocument || iframe.contentWindow?.document; + + // Listen for pushstate event + if ( iframeWindow?.history ) { + iframeWindow.history.pushState = function ( state, title, url ) { + const urlString = url?.toString(); + if ( urlString ) { + // If the URL is not the Assembler Hub, navigate the main window to the new URL. + if ( urlString?.indexOf( 'customize-store' ) === -1 ) { + window.location.href = urlString; + } else { + window.history.pushState( state, title, url ); // Update the main window's history + } + } + }; + } + + // Listen for popstate event + iframeWindow?.addEventListener( 'popstate', function ( event ) { + window.history.replaceState( + event.state, + '', + iframeWindow.location.href + ); + } ); + + // Intercept external link clicks + iframeDocument?.addEventListener( 'click', function ( event ) { + if ( event.target ) { + const anchor = event.target?.closest( 'a' ); + if ( anchor && anchor.target === '_blank' ) { + event.preventDefault(); + window.open( anchor.href, '_blank' ); // Open in new tab in parent + } else if ( anchor ) { + event.preventDefault(); + window.location.href = anchor.href; // Navigate parent to new URL + } + } + } ); +} diff --git a/plugins/woocommerce/changelog/try-cys-temporary-iframe-solution b/plugins/woocommerce/changelog/try-cys-temporary-iframe-solution new file mode 100644 index 00000000000..a87341bd340 --- /dev/null +++ b/plugins/woocommerce/changelog/try-cys-temporary-iframe-solution @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Use iframe to improve assembler hub loading time perception From 7b00687a383e858e40527ad57fc843acbbde7c11 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 26 Oct 2023 18:15:30 +0800 Subject: [PATCH 58/60] Fix CYS assembler hub UI issues (#41036) * Set default logo size to 60px and max to 200px * Hide homepage template label * Scroll to position when selecting a pattern * Fix preview opacity issue * Update sidebar scrollbar style * Fix onboarding tour resize handle * Add changelog --- .../assembler-hub/block-editor.tsx | 39 ++++++++++- .../assembler-hub/block-preview.tsx | 41 +++--------- .../assembler-hub/hooks/use-editor-blocks.ts | 2 +- .../assembler-hub/hooks/use-editor-scroll.ts | 36 ++++++---- .../assembler-hub/hooks/use-scroll-opacity.ts | 6 +- .../customize-store/assembler-hub/layout.tsx | 11 ++-- .../assembler-hub/onboarding-tour/index.tsx | 4 ++ .../onboarding-tour/test/index.tsx | 2 + .../onboarding-tour/use-onboarding-tour.tsx | 4 ++ .../assembler-hub/resizable-frame.jsx | 12 ++-- .../sidebar-navigation-screen-footer.tsx | 6 +- .../sidebar-navigation-screen-header.tsx | 6 +- .../sidebar-navigation-screen-homepage.tsx | 11 +++- .../sidebar-navigation-screen-logo.tsx | 12 +--- .../customize-store/assembler-hub/style.scss | 65 +++++++++++++------ plugins/woocommerce/changelog/fix-cys-ui | 4 ++ 16 files changed, 162 insertions(+), 99 deletions(-) create mode 100644 plugins/woocommerce/changelog/fix-cys-ui diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx index 8666741173d..6607fba9e72 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx @@ -15,7 +15,7 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; // @ts-ignore No types for this exist yet. import useSiteEditorSettings from '@wordpress/edit-site/build-module/components/block-editor/use-site-editor-settings'; import { useQuery } from '@woocommerce/navigation'; -import { useContext, useCallback } from '@wordpress/element'; +import { useContext, useCallback, useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -24,6 +24,7 @@ import BlockPreview from './block-preview'; import { useEditorBlocks } from './hooks/use-editor-blocks'; import { useScrollOpacity } from './hooks/use-scroll-opacity'; import { CustomizeStoreContext } from './'; +import { HighlightedBlockContext } from './context/highlighted-block-context'; const { useHistory } = unlock( routerPrivateApis ); @@ -118,13 +119,45 @@ export const BlockEditor = ( {} ) => { [ history, urlParams, pages ] ); + const [ , , onChange ] = useEditorBlocks(); + + const { highlightedBlockIndex } = useContext( HighlightedBlockContext ); + const isHighlighting = highlightedBlockIndex !== -1; + const additionalStyles = isHighlighting + ? ` + .wp-block.preview-opacity { + opacity: ${ previewOpacity }; + } + ` + : ''; + + const renderedBlocks = useMemo( + () => + blocks.map( ( block, i ) => { + if ( ! isHighlighting || i === highlightedBlockIndex ) { + return block; + } + + return { + ...block, + attributes: { + ...block.attributes, + className: + block.attributes.className + ' preview-opacity', + }, + }; + } ), + [ blocks, highlightedBlockIndex, isHighlighting ] + ); + return (
; + onChange?: ChangeHandler | undefined; useSubRegistry?: boolean; previewOpacity?: number; } & Omit< ScaledBlockPreviewProps, 'containerWidth' > ) => { - const [ , , onChange ] = useEditorBlocks(); - - const { highlightedBlockIndex } = useContext( HighlightedBlockContext ); const renderedBlocks = useMemo( () => { const _blocks = Array.isArray( blocks ) ? blocks : [ blocks ]; - - return _blocks.map( ( block, i ) => { - if ( i === highlightedBlockIndex ) { - return block; - } - - return { - ...block, - attributes: { - ...block.attributes, - className: block.attributes.className + ' preview-opacity', - }, - }; - } ); - }, [ blocks, highlightedBlockIndex ] ); - - const opacityStyles = - highlightedBlockIndex === -1 - ? '' - : ` - .wp-block.preview-opacity { - opacity: ${ previewOpacity }; - } - `; + return _blocks; + }, [ blocks ] ); return ( diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts index 1f9787edf33..6c723764134 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts @@ -12,7 +12,7 @@ import { store as editSiteStore } from '@wordpress/edit-site/build-module/store' import { useSelect } from '@wordpress/data'; import { BlockInstance } from '@wordpress/blocks'; -type ChangeHandler = ( +export type ChangeHandler = ( blocks: BlockInstance[], options: Record< string, unknown > ) => void; diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts index 7f5647c39f8..312d10403b4 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-scroll.ts @@ -6,7 +6,7 @@ */ // @ts-ignore No types for this exist yet. import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks'; -import { useEffect } from '@wordpress/element'; +import { useCallback, useEffect } from '@wordpress/element'; export const useEditorScroll = ( { editorSelector, @@ -17,21 +17,29 @@ export const useEditorScroll = ( { } ) => { const isEditorLoading = useIsSiteEditorLoading(); - useEffect( () => { - // Scroll to the bottom of the preview when the editor is done loading. - if ( isEditorLoading ) { - return; - } - + const scroll = useCallback( () => { const previewContainer = document.querySelector< HTMLIFrameElement >( editorSelector ); if ( previewContainer ) { - previewContainer.contentWindow?.scrollTo( - 0, - scrollDirection === 'bottom' - ? previewContainer.contentDocument?.body.scrollHeight || 0 - : 0 - ); + previewContainer.contentWindow?.scrollTo( { + left: 0, + top: + scrollDirection === 'bottom' + ? previewContainer.contentDocument?.body.scrollHeight || + 0 + : 0, + } ); } - }, [ isEditorLoading, editorSelector, scrollDirection ] ); + }, [ scrollDirection, editorSelector ] ); + + useEffect( () => { + // Scroll to the bottom of the preview when the editor is done loading. + if ( ! isEditorLoading ) { + scroll(); + } + }, [ isEditorLoading, scroll ] ); + + return { + scroll, + }; }; diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts index 380a5ca4cb1..f012b4522e7 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-scroll-opacity.ts @@ -36,10 +36,14 @@ export const useScrollOpacity = ( ? ( targetElement as Document ).documentElement : ( targetElement as Element ); + const _sensitivity = + // Set sensitivity to a small threshold for mobile devices because they have a small viewport to ensure the effect is visible. + contentElement.clientWidth > 480 ? sensitivity : 0.05; + const maxScrollHeight = contentElement.scrollHeight - contentElement.clientHeight; const currentScrollPosition = contentElement.scrollTop; - const maxEffectScroll = maxScrollHeight * sensitivity; + const maxEffectScroll = maxScrollHeight * _sensitivity; let calculatedOpacity; if ( direction === 'bottomUp' ) { diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx index b47839c286f..d174987c34e 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx @@ -56,7 +56,8 @@ export const Layout = () => { const [ logoBlockIds, setLogoBlockIds ] = useState< Array< string > >( [] ); // This ensures the edited entity id and type are initialized properly. useInitEditedEntityFromURL(); - const { shouldTourBeShown, ...onboardingTourProps } = useOnboardingTour(); + const { shouldTourBeShown, isResizeHandleVisible, ...onboardingTourProps } = + useOnboardingTour(); const isMobileViewport = useViewportMatch( 'medium', '<' ); const disableMotion = useReducedMotion(); @@ -179,9 +180,9 @@ export const Layout = () => { isReady={ ! isEditorLoading } - duringGuideTour={ - shouldTourBeShown && - ! onboardingTourProps.showWelcomeTour + isHandleVisibleByDefault={ + ! onboardingTourProps.showWelcomeTour && + isResizeHandleVisible } isFullWidth={ false } defaultSize={ { @@ -211,7 +212,7 @@ export const Layout = () => { ) }
- { shouldTourBeShown && ( + { ! isEditorLoading && shouldTourBeShown && ( ) } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx index 345adc4a99f..757f8fce495 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/index.tsx @@ -11,12 +11,14 @@ type OnboardingTourProps = { onClose: () => void; showWelcomeTour: boolean; setShowWelcomeTour: ( show: boolean ) => void; + setIsResizeHandleVisible: ( isVisible: boolean ) => void; }; export const OnboardingTour = ( { onClose, setShowWelcomeTour, showWelcomeTour, + setIsResizeHandleVisible, }: OnboardingTourProps ) => { const [ placement, setPlacement ] = useState< TourKitTypes.WooConfig[ 'placement' ] >( 'left' ); @@ -127,9 +129,11 @@ export const OnboardingTour = ( { callbacks: { onPreviousStep: () => { setPlacement( 'left' ); + setIsResizeHandleVisible( true ); }, onNextStep: () => { setPlacement( 'right-start' ); + setIsResizeHandleVisible( false ); }, }, popperModifiers: [ diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx index b7fd92b3c69..61439529e14 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/test/index.tsx @@ -16,6 +16,7 @@ describe( 'OnboardingTour', () => { onClose: jest.Mock; setShowWelcomeTour: jest.Mock; showWelcomeTour: boolean; + setIsResizeHandleVisible: ( isVisible: boolean ) => void; }; beforeEach( () => { @@ -23,6 +24,7 @@ describe( 'OnboardingTour', () => { onClose: jest.fn(), setShowWelcomeTour: jest.fn(), showWelcomeTour: true, + setIsResizeHandleVisible: jest.fn(), }; } ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx index 0b0447d6cb2..e8b1a3e408a 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/onboarding-tour/use-onboarding-tour.tsx @@ -10,6 +10,8 @@ export const CUSTOMIZE_STORE_ONBOARDING_TOUR_HIDDEN = export const useOnboardingTour = () => { const [ showWelcomeTour, setShowWelcomeTour ] = useState( true ); + const [ isResizeHandleVisible, setIsResizeHandleVisible ] = + useState( true ); const { updateOptions } = useDispatch( OPTIONS_STORE_NAME ); const { shouldTourBeShown } = useSelect( ( select ) => { @@ -38,5 +40,7 @@ export const useOnboardingTour = () => { shouldTourBeShown, showWelcomeTour, setShowWelcomeTour, + setIsResizeHandleVisible, + isResizeHandleVisible, }; }; diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx index ef9d8e66c64..b788f3f0ddd 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx @@ -75,7 +75,7 @@ function ResizableFrame( { /** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */ defaultSize, innerContentStyle, - duringGuideTour = false, + isHandleVisibleByDefault = false, } ) { const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE ); // The width of the resizable frame when a new resize gesture starts. @@ -192,7 +192,9 @@ function ResizableFrame( { if ( isResizing ) { return 'active'; } - return shouldShowHandle || duringGuideTour ? 'visible' : 'hidden'; + return shouldShowHandle || isHandleVisibleByDefault + ? 'visible' + : 'hidden'; } )(); const resizeHandler = ( @@ -220,10 +222,10 @@ function ResizableFrame( { whileFocus="active" whileHover="active" children={ - duringGuideTour && + isHandleVisibleByDefault && ! hasHandlerDragged && ( { __( 'Drag to resize', 'woocommerce' ) } @@ -273,7 +275,7 @@ function ResizableFrame( { handleComponent={ { left: ( <> - { duringGuideTour ? ( + { isHandleVisibleByDefault ? (
{ resizeHandler }
) : ( { - useEditorScroll( { + const { scroll } = useEditorScroll( { editorSelector: '.woocommerce-customize-store__block-editor iframe', scrollDirection: 'bottom', } ); @@ -81,7 +81,6 @@ export const SidebarNavigationScreenFooter = () => { blocks[ blocks.length - 1 ] ); setSelectedPattern( currentSelectedPattern ); - // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes }, [ blocks, footerPatterns ] ); @@ -91,8 +90,9 @@ export const SidebarNavigationScreenFooter = () => { onChange( [ ...blocks.slice( 0, -1 ), selectedBlocks[ 0 ] ], { selection: {}, } ); + scroll(); }, - [ blocks, onChange, setSelectedPattern ] + [ blocks, onChange, setSelectedPattern, scroll ] ); return ( diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx index 6351c5ffd33..b63f622e055 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx @@ -37,7 +37,7 @@ const SUPPORTED_HEADER_PATTERNS = [ ]; export const SidebarNavigationScreenHeader = () => { - useEditorScroll( { + const { scroll } = useEditorScroll( { editorSelector: '.woocommerce-customize-store__block-editor iframe', scrollDirection: 'top', } ); @@ -78,6 +78,7 @@ export const SidebarNavigationScreenHeader = () => { blocks[ 0 ] ); setSelectedPattern( currentSelectedPattern ); + // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes }, [ blocks, headerPatterns ] ); @@ -87,8 +88,9 @@ export const SidebarNavigationScreenHeader = () => { onChange( [ selectedBlocks[ 0 ], ...blocks.slice( 1 ) ], { selection: {}, } ); + scroll(); }, - [ blocks, onChange, setSelectedPattern ] + [ blocks, onChange, setSelectedPattern, scroll ] ); return ( diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx index b22b1137262..15b3f89c8fd 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx @@ -26,8 +26,13 @@ import { useEditorBlocks } from '../hooks/use-editor-blocks'; import { useHomeTemplates } from '../hooks/use-home-templates'; import { BlockInstance } from '@wordpress/blocks'; import { useSelectedPattern } from '../hooks/use-selected-pattern'; +import { useEditorScroll } from '../hooks/use-editor-scroll'; export const SidebarNavigationScreenHomepage = () => { + const { scroll } = useEditorScroll( { + editorSelector: '.woocommerce-customize-store__block-editor iframe', + scrollDirection: 'top', + } ); const { isLoading, homeTemplates } = useHomeTemplates(); // eslint-disable-next-line react-hooks/exhaustive-deps const { selectedPattern, setSelectedPattern } = useSelectedPattern(); @@ -40,8 +45,9 @@ export const SidebarNavigationScreenHomepage = () => { [ blocks[ 0 ], ...selectedBlocks, blocks[ blocks.length - 1 ] ], { selection: {} } ); + scroll(); }, - [ blocks, onChange, setSelectedPattern ] + [ blocks, onChange, setSelectedPattern, scroll ] ); const homePatterns = useMemo( () => { @@ -82,6 +88,7 @@ export const SidebarNavigationScreenHomepage = () => { } ); setSelectedPattern( _currentSelectedPattern ); + // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes }, [ blocks, homePatterns ] ); @@ -130,7 +137,7 @@ export const SidebarNavigationScreenHomepage = () => { orientation="vertical" category={ 'homepage' } isDraggable={ false } - showTitlesAsTooltip={ true } + showTitlesAsTooltip={ false } /> ) }
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx index f0b569aca19..ce6ed61a23e 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx @@ -176,17 +176,11 @@ const LogoSettings = ( { const isWideAligned = [ 'wide', 'full' ].includes( align ); const isResizable = ! isWideAligned && isLargeViewport; - const { maxWidth } = useSelect( ( select ) => { - // @ts-ignore No types for this exist yet. - const settings = select( blockEditorStore ).getSettings(); - return { - maxWidth: settings.maxWidth, - }; - }, [] ); + const maxWidth = 200; // Set the default width to a responsible size. // Note that this width is also set in the attached frontend CSS file. - const defaultWidth = 120; + const defaultWidth = 60; const currentWidth = width || defaultWidth; const ratio = naturalWidth / naturalHeight; @@ -218,7 +212,7 @@ const LogoSettings = ( { setAttributes( { width: newWidth } ) } min={ minWidth } - max={ maxWidthBuffer } + max={ maxWidth } initialPosition={ Math.min( defaultWidth, maxWidthBuffer ) } value={ currentWidth } disabled={ ! isResizable } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss b/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss index 6fea162c242..ac8b9e016c4 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss @@ -148,6 +148,20 @@ padding: 0 16px; overflow-x: hidden; flex: 1; + + &::-webkit-scrollbar-thumb { + background-color: #c1c1c1; + } + + &::-webkit-scrollbar-track-piece:start { + background: transparent; + margin-top: 250px; + } + + &::-webkit-scrollbar-track-piece:end { + background: transparent; + margin-bottom: 400px; + } } } @@ -361,6 +375,10 @@ } } + .block-editor-block-patterns-list__item-title { + display: none; + } + /* Color sidebar */ .woocommerce-customize-store__color-panel-container { @@ -487,27 +505,7 @@ .edit-site-resizable-frame__handle { background: var(--wp-admin-theme-color); - - .components-popover { - display: inline-flex; - padding: 0 10px; - align-items: flex-start; - gap: 10px; - background: var(--wp-admin-theme-color-background-25); - left: 5px !important; - border-radius: 4px; - height: 20px; - - .components-popover__content { - color: var(--wp-admin-theme-color-darker-20); - font-size: 0.75rem; - font-style: normal; - font-weight: 500; - line-height: 20px; /* 166.667% */ - background: inherit; - padding: 0; - } - } + cursor: ew-resize; } .edit-site-layout__canvas .components-resizable-box__container { @@ -667,3 +665,28 @@ stroke: rgba($black, 0.3); } } + + +.woocommerce-assembler-hub__resizable-frame__drag-handler { + display: inline-flex; + padding: 0 10px; + align-items: flex-start; + gap: 10px; + background: var(--wp-admin-theme-color-background-25); + left: 5px !important; + border-radius: 4px; + height: 20px; + + .components-popover__content { + color: var(--wp-admin-theme-color-darker-20); + font-size: 0.75rem; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 166.667% */ + background: inherit; + padding: 0; + margin-left: 10px; + width: max-content; + box-shadow: none; + } +} diff --git a/plugins/woocommerce/changelog/fix-cys-ui b/plugins/woocommerce/changelog/fix-cys-ui new file mode 100644 index 00000000000..d931c519b82 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-cys-ui @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix CYS assembler hub UI issues From 51eff5c234abd95882438daa76eb8a1b10813378 Mon Sep 17 00:00:00 2001 From: Thomas Shellberg <6723003+tommyshellberg@users.noreply.github.com> Date: Thu, 26 Oct 2023 12:25:11 +0200 Subject: [PATCH 59/60] Woo AI - fix empty build dir due to entrypoint file extension match failure. (#40997) * Woo AI - Fix empty build directory due to entry point file extension match failure. --- plugins/woo-ai/changelog/fix-webpack-build | 4 ++++ plugins/woo-ai/webpack.config.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 plugins/woo-ai/changelog/fix-webpack-build diff --git a/plugins/woo-ai/changelog/fix-webpack-build b/plugins/woo-ai/changelog/fix-webpack-build new file mode 100644 index 00000000000..31cc36fe7ae --- /dev/null +++ b/plugins/woo-ai/changelog/fix-webpack-build @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Fix Woo AI webpack build configuration. diff --git a/plugins/woo-ai/webpack.config.js b/plugins/woo-ai/webpack.config.js index 3bdf5e0eb8a..d131f0792b0 100644 --- a/plugins/woo-ai/webpack.config.js +++ b/plugins/woo-ai/webpack.config.js @@ -4,7 +4,7 @@ const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/depe module.exports = { ...defaultConfig, entry: { - ...defaultConfig.entry, + index: './src/index.ts', }, module: { ...defaultConfig.module, From fa1ef4a8fd91caf4e1fbfe0350413946a074621f Mon Sep 17 00:00:00 2001 From: Barry Hughes <3594411+barryhughes@users.noreply.github.com> Date: Thu, 26 Oct 2023 03:42:49 -0700 Subject: [PATCH 60/60] Remove linting exceptions for WC Admin code. (#41016) --- .../changelog/fix-linting-exceptions | 5 +++ plugins/woocommerce/phpcs.xml | 36 ------------------- 2 files changed, 5 insertions(+), 36 deletions(-) create mode 100644 plugins/woocommerce/changelog/fix-linting-exceptions diff --git a/plugins/woocommerce/changelog/fix-linting-exceptions b/plugins/woocommerce/changelog/fix-linting-exceptions new file mode 100644 index 00000000000..88de0778b71 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-linting-exceptions @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Not adding a changelog entry here, as there will be no change to the shipped product. Instead, this changes which potential errors are flagged during development. + + diff --git a/plugins/woocommerce/phpcs.xml b/plugins/woocommerce/phpcs.xml index fd355d33463..c4b4a07e733 100644 --- a/plugins/woocommerce/phpcs.xml +++ b/plugins/woocommerce/phpcs.xml @@ -102,40 +102,4 @@ tests/php/ - - - - src/Internal/Admin/ - src/Admin/ - - - - - src/Internal/Admin/ - src/Admin/ - - - - - src/Internal/Admin/ - src/Admin/ - - - - - src/Internal/Admin/ - src/Admin/ - - - - - src/Internal/Admin/ - src/Admin/ - - - - - src/Internal/Admin/ - src/Admin/ -