Commit d9ddaf5e733 for woocommerce
commit d9ddaf5e7336b63646b18dfed23b6134d0914a03
Author: Luigi Teschio <gigitux@gmail.com>
Date: Thu Jul 2 13:22:30 2026 +0200
Product Collection: Reduce editor bundle cost (#66150)
* Reduce block editor CES startup cost
* Remove unused Product Collection metadata import
* Add changelog entry for Product Collection inspector cleanup
* fix changelog
diff --git a/plugins/woocommerce/changelog/performance-product-collection-inspector-import b/plugins/woocommerce/changelog/performance-product-collection-inspector-import
new file mode 100644
index 00000000000..fd0afa63358
--- /dev/null
+++ b/plugins/woocommerce/changelog/performance-product-collection-inspector-import
@@ -0,0 +1,4 @@
+Significance: patch
+Type: performance
+
+Product Collection: Reduce editor bundle cost
diff --git a/plugins/woocommerce/client/blocks/assets/css/editor.scss b/plugins/woocommerce/client/blocks/assets/css/editor.scss
index 102de99e953..b721f90811c 100644
--- a/plugins/woocommerce/client/blocks/assets/css/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/editor.scss
@@ -60,9 +60,3 @@ svg.wc-block-editor-components-block-icon--sparkles path {
}
}
}
-
-// Style the error message in the CES modal.
-.woocommerce-customer-effort-score__errors > p {
- color: $alert-red;
- margin-bottom: 16px;
-}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
index d33f4b3208b..9190fd49b0c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
@@ -6,17 +6,15 @@ import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { useIsEmailEditor } from '@woocommerce/email-editor';
import { recordEvent } from '@woocommerce/tracks';
-import { CesFeedbackButton } from '@woocommerce/editor-components/ces-feedback-button';
import {
- PanelBody,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToolsPanel as ToolsPanel,
+ PanelBody,
} from '@wordpress/components';
/**
* Internal dependencies
*/
-import metadata from '../../block.json';
import { useTracksLocation } from '../../tracks-utils';
import {
ProductCollectionContentProps,
@@ -289,10 +287,6 @@ const ProductCollectionInspectorControls = (
) }
</ToolsPanel>
) : null }
- <CesFeedbackButton
- blockName={ `${ metadata.title } block` }
- wrapper={ PanelBody }
- />
</InspectorControls>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/ces-feedback-button/feedback-icon.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/ces-feedback-button/feedback-icon.tsx
deleted file mode 100644
index bba50c058b3..00000000000
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/ces-feedback-button/feedback-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG } from '@wordpress/primitives';
-
-const FeedbackIcon = ( { size = 12 }: { size?: number } ) => (
- <SVG
- width={ size }
- height={ size }
- viewBox="0 0 12 12"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M2.45865 9.08341L1.6665 9.87639L1.6665 1.66675L10.3332 1.66675L10.3332 9.08341L2.45865 9.08341ZM2.87317 10.0834L10.6665 10.0834C11.0347 10.0834 11.3332 9.78494 11.3332 9.41675L11.3332 1.33342C11.3332 0.965226 11.0347 0.666748 10.6665 0.666748H1.33317C0.964982 0.666748 0.666504 0.965225 0.666504 1.33341V11.0166C0.666504 11.2116 0.773993 11.3907 0.946074 11.4825C1.15124 11.5919 1.40385 11.5543 1.56818 11.3898L2.87317 10.0834ZM8.6665 4.66673H3.33317V3.66673H8.6665V4.66673ZM3.33317 7.33339H6.6665V6.33339H3.33317V7.33339Z"
- fill="currentColor"
- />
- </SVG>
-);
-
-export default FeedbackIcon;
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/ces-feedback-button/index.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/ces-feedback-button/index.tsx
deleted file mode 100644
index efa0205b85c..00000000000
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/ces-feedback-button/index.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
- CustomerEffortScoreModalContainer,
- useCustomerEffortScoreModal,
-} from '@woocommerce/customer-effort-score';
-import { Button, TextareaControl, TextControl } from '@wordpress/components';
-import { isEmail } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import FeedbackIcon from './feedback-icon';
-
-declare global {
- interface Window {
- wcTracks?: {
- isEnabled: boolean;
- };
- }
-}
-
-interface CesFeedbackButtonProps {
- blockName: string;
- title?: string;
- firstQuestion?: string;
- feedbackLabel?: string;
- feedbackPlaceholder?: string;
- emailLabel?: string;
- emailHelp?: string;
- buttonText?: string;
- submitLabel?: string;
- wrapper?: React.ElementType;
- wrapperProps?: Record< string, unknown >;
-}
-
-export const CesFeedbackButton = ( {
- blockName,
- title = __( 'Share your experience', 'woocommerce' ),
- firstQuestion = sprintf(
- /* translators: %s is the block name. */
- __(
- 'It was easy for me to accomplish what I wanted with the %s.',
- 'woocommerce'
- ),
- blockName
- ),
- feedbackLabel = sprintf(
- /* translators: %s is the block name. */
- __(
- 'How can we improve the %s block for you? (Optional)',
- 'woocommerce'
- ),
- blockName
- ),
- feedbackPlaceholder = __(
- "What did you try to build using this block? What did and didn't work?",
- 'woocommerce'
- ),
- emailLabel = __( 'Email address (Optional)', 'woocommerce' ),
- emailHelp = __(
- 'Share if you would like to discuss your experience or participate in future research.',
- 'woocommerce'
- ),
- buttonText = __( 'Help us improve', 'woocommerce' ),
- submitLabel = __( "🙏🏻 Thanks for sharing — we're on it!", 'woocommerce' ),
- wrapper: Wrapper,
- wrapperProps = {},
-}: CesFeedbackButtonProps ) => {
- const { showCesModal } = useCustomerEffortScoreModal();
-
- if ( ! window.wcTracks?.isEnabled ) {
- return null;
- }
-
- const handleFeedbackClick = () => {
- showCesModal(
- {
- action: `${ blockName
- .toLowerCase()
- .replace( /\s+/g, '_' ) }_block_feedback`,
- title,
- firstQuestion,
- showDescription: false,
- onsubmitLabel: submitLabel,
- getExtraFieldsToBeShown: (
- extraFieldsValues: { [ key: string ]: string },
- setExtraFieldsValues: ( values: {
- [ key: string ]: string;
- } ) => void,
- errors: Record< string, string > | undefined
- ) => {
- return (
- <div>
- <TextareaControl
- __nextHasNoMarginBottom
- label={ feedbackLabel }
- value={
- extraFieldsValues.feedback_comment || ''
- }
- onChange={ ( value ) =>
- setExtraFieldsValues( {
- ...extraFieldsValues,
- feedback_comment: value,
- } )
- }
- placeholder={ feedbackPlaceholder }
- />
- <TextControl
- __next40pxDefaultSize
- __nextHasNoMarginBottom
- label={ emailLabel }
- type="email"
- value={ extraFieldsValues.email || '' }
- onChange={ ( value ) =>
- setExtraFieldsValues( {
- ...extraFieldsValues,
- email: value,
- } )
- }
- help={
- errors?.email ? (
- <span className="woocommerce-customer-effort-score__errors">
- <p>{ errors.email }</p>
- </span>
- ) : (
- emailHelp
- )
- }
- />
- </div>
- );
- },
- validateExtraFields: ( { email = '' }: { email?: string } ) => {
- const errors: Record< string, string > | undefined = {};
- if ( email.length > 0 && ! isEmail( email ) ) {
- errors.email = __(
- 'Please enter a valid email address.',
- 'woocommerce'
- );
- }
- return errors;
- },
- },
- { blockName, shouldShowComments: () => false },
- {},
- {}
- );
- };
-
- const feedbackButtonWithModal = (
- <>
- <CustomerEffortScoreModalContainer />
- <Button
- variant="tertiary"
- icon={ <FeedbackIcon /> }
- iconSize={ 12 }
- onClick={ handleFeedbackClick }
- className="wc-block-editor__feedback-button"
- >
- { buttonText }
- </Button>
- </>
- );
-
- if ( Wrapper ) {
- return (
- <Wrapper { ...wrapperProps }>{ feedbackButtonWithModal }</Wrapper>
- );
- }
-
- return feedbackButtonWithModal;
-};
diff --git a/plugins/woocommerce/client/blocks/bin/webpack-helpers.js b/plugins/woocommerce/client/blocks/bin/webpack-helpers.js
index aab4612a261..41aa08d30d9 100644
--- a/plugins/woocommerce/client/blocks/bin/webpack-helpers.js
+++ b/plugins/woocommerce/client/blocks/bin/webpack-helpers.js
@@ -24,7 +24,6 @@ const wcDepMap = {
'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
'@woocommerce/blocks-components': [ 'wc', 'blocksComponents' ],
'@woocommerce/types': [ 'wc', 'wcTypes' ],
- '@woocommerce/customer-effort-score': [ 'wc', 'customerEffortScore' ],
'@woocommerce/sanitize': [ 'wc', 'sanitize' ],
};
const wcHandleMap = {
@@ -40,7 +39,6 @@ const wcHandleMap = {
'@woocommerce/blocks-checkout-events': 'wc-blocks-checkout-events',
'@woocommerce/blocks-components': 'wc-blocks-components',
'@woocommerce/types': 'wc-types',
- '@woocommerce/customer-effort-score': 'wc-customer-effort-score',
'@woocommerce/sanitize': 'wc-sanitize',
};
diff --git a/plugins/woocommerce/client/blocks/package.json b/plugins/woocommerce/client/blocks/package.json
index 942f16482b2..695d4372055 100644
--- a/plugins/woocommerce/client/blocks/package.json
+++ b/plugins/woocommerce/client/blocks/package.json
@@ -128,7 +128,6 @@
"@types/wordpress__blocks": "catalog:wp-min",
"@typescript-eslint/eslint-plugin": "5.56.0",
"@typescript-eslint/parser": "5.56.0",
- "@woocommerce/customer-effort-score": "workspace:*",
"@woocommerce/data": "workspace:*",
"@woocommerce/dependency-extraction-webpack-plugin": "workspace:*",
"@woocommerce/internal-build": "workspace:*",
diff --git a/plugins/woocommerce/phpstan-baseline.neon b/plugins/woocommerce/phpstan-baseline.neon
index 7a466ce944f..5ac7528b465 100644
--- a/plugins/woocommerce/phpstan-baseline.neon
+++ b/plugins/woocommerce/phpstan-baseline.neon
@@ -41469,16 +41469,12 @@ parameters:
count: 3
path: src/Admin/API/Reports/Customers/DataStore.php
-
-
-
message: '#^Call to an undefined method object\:\:get_id\(\)\.$#'
identifier: method.notFound
count: 1
path: src/Admin/API/Reports/Customers/DataStore.php
-
-
-
message: '#^Cannot call method get_id\(\) on Automattic\\WooCommerce\\Admin\\API\\Reports\\Customers\\WC_Order\|WC_Order\|WC_Order_Refund\|false\.$#'
identifier: method.nonObject
@@ -49555,12 +49551,6 @@ parameters:
count: 1
path: src/Blocks/AssetsController.php
- -
- message: '#^Method Automattic\\WooCommerce\\Blocks\\AssetsController\:\:register_and_enqueue_site_editor_assets\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Blocks/AssetsController.php
-
-
message: '#^Method Automattic\\WooCommerce\\Blocks\\AssetsController\:\:register_assets\(\) has no return type specified\.$#'
identifier: missingType.return
diff --git a/plugins/woocommerce/src/Blocks/AssetsController.php b/plugins/woocommerce/src/Blocks/AssetsController.php
index 6fb44902d90..ef3e4499d66 100644
--- a/plugins/woocommerce/src/Blocks/AssetsController.php
+++ b/plugins/woocommerce/src/Blocks/AssetsController.php
@@ -38,7 +38,6 @@ final class AssetsController {
protected function init() { // phpcs:ignore WooCommerce.Functions.InternalInjectionMethod.MissingPublic
add_action( 'init', array( $this, 'register_assets' ) );
add_action( 'init', array( $this, 'register_script_modules' ) );
- add_action( 'enqueue_block_editor_assets', array( $this, 'register_and_enqueue_site_editor_assets' ) );
add_filter( 'wp_resource_hints', array( $this, 'add_resource_hints' ), 10, 2 );
add_action( 'body_class', array( $this, 'add_theme_body_class' ), 1 );
add_action( 'admin_body_class', array( $this, 'add_theme_body_class' ), 1 );
@@ -105,17 +104,6 @@ final class AssetsController {
array()
);
- // Customer Effort Score.
- $this->api->register_script(
- 'wc-customer-effort-score',
- 'assets/client/admin/customer-effort-score/index.js',
- array( 'wp-data', 'wp-data-controls', 'wc-store-data' )
- );
- $this->api->register_style(
- 'wc-customer-effort-score',
- 'assets/client/admin/customer-effort-score/style.css',
- );
-
wp_add_inline_script(
'wc-blocks-middleware',
"
@@ -128,15 +116,6 @@ final class AssetsController {
);
}
- /**
- * Register and enqueue assets for exclusive usage within the Site Editor.
- */
- public function register_and_enqueue_site_editor_assets() {
- // Customer Effort Score.
- wp_enqueue_script( 'wc-customer-effort-score' );
- wp_enqueue_style( 'wc-customer-effort-score' );
- }
-
/**
* Defines resource hints to help speed up the loading of some critical blocks.
*
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php
index 2e34b826e15..625a323a3dc 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCollection/Renderer.php
@@ -33,6 +33,10 @@ class Renderer {
* Constructor.
*/
public function __construct() {
+ if ( ! $this->should_handle_frontend_rendering() ) {
+ return;
+ }
+
// Interactivity API: Add navigation directives to the product collection block.
add_filter( 'render_block_woocommerce/product-collection', array( $this, 'handle_rendering' ), 10, 2 );
@@ -61,6 +65,15 @@ class Renderer {
add_filter( 'render_block_context', array( $this, 'extend_context_for_inner_blocks' ), 11, 1 );
}
+ /**
+ * Check if the renderer should add frontend-only interactivity hooks.
+ *
+ * @return bool
+ */
+ private function should_handle_frontend_rendering() {
+ return ! is_admin() && ! \WC()->is_rest_api_request();
+ }
+
/**
* Set the parsed block.
*
@@ -334,12 +347,6 @@ class Renderer {
* }
*/
public function extend_context_for_inner_blocks( $context ) {
- // Run only on frontend.
- // This is needed to avoid SSR renders while in editor. @see https://github.com/woocommerce/woocommerce/issues/45181.
- if ( is_admin() || \WC()->is_rest_api_request() ) {
- return $context;
- }
-
// Add iapi/provider to inner blocks so they can run this store's Interactivity API actions.
$context['iapi/provider'] = 'woocommerce/product-collection';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93404e3ff1b..c32b78e90a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3589,9 +3589,6 @@ importers:
'@typescript-eslint/parser':
specifier: ^5.62.0
version: 5.62.0(eslint@8.57.1)(typescript@5.7.3)
- '@woocommerce/customer-effort-score':
- specifier: workspace:*
- version: link:../../../../packages/js/customer-effort-score
'@woocommerce/data':
specifier: workspace:*
version: link:../../../../packages/js/data