Commit 7513d8f08a for woocommerce
commit 7513d8f08a14a8771d89b7fe2fb523781c321f23
Author: Sérgio Gomes <mail@sgomes.com>
Date: Tue Jul 1 13:38:40 2025 +0100
Fix performance issue in withSidebarNotices (#59292)
* Fix performance issue in withSidebarNotices
* Manually add changelog entry
diff --git a/plugins/woocommerce/changelog/fix-sidebar-notices-performance-issue b/plugins/woocommerce/changelog/fix-sidebar-notices-performance-issue
new file mode 100644
index 0000000000..ed80f470f7
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-sidebar-notices-performance-issue
@@ -0,0 +1,4 @@
+Significance: minor
+Type: performance
+
+Improves performance when editing site templates.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
index 784826df6c..2fa1f052f7 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
@@ -25,15 +25,9 @@ declare module '@wordpress/block-editor' {
let store: StoreDescriptor;
}
-const withSidebarNotices = createHigherOrderComponent(
- ( BlockEdit ) => ( props ) => {
- const {
- clientId,
- name: blockName,
- isSelected: isBlockSelected,
- } = props;
-
- const { isCart, isCheckout, parentId } = useSelect( ( select ) => {
+const SidebarNotices = ( { clientId } ) => {
+ const { isCart, isCheckout, parentId } = useSelect(
+ ( select ) => {
const { getBlockParentsByBlockName, getBlockName } =
select( blockEditorStore );
@@ -75,30 +69,46 @@ const withSidebarNotices = createHigherOrderComponent(
? clientId
: parents[ targetParentBlock ],
};
- } );
+ },
+ [ clientId ]
+ );
+
+ return (
+ ( isCart || isCheckout ) && (
+ <InspectorControls>
+ <IncompatibleExtensionsNotice
+ block={
+ isCart ? 'woocommerce/cart' : 'woocommerce/checkout'
+ }
+ clientId={ parentId }
+ />
- // Show sidebar notices only when a WooCommerce block is selected.
- if (
- ! blockName.startsWith( 'woocommerce/' ) ||
- ! isBlockSelected ||
- ! ( isCart || isCheckout )
- ) {
- return <BlockEdit key="edit" { ...props } />;
- }
+ <DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />
+ <CartCheckoutFeedbackPrompt />
+ </InspectorControls>
+ )
+ );
+};
+
+const withSidebarNotices = createHigherOrderComponent(
+ ( BlockEdit ) => ( props ) => {
+ const {
+ clientId,
+ name: blockName,
+ isSelected: isBlockSelected,
+ } = props;
return (
<>
- <InspectorControls>
- <IncompatibleExtensionsNotice
- block={
- isCart ? 'woocommerce/cart' : 'woocommerce/checkout'
- }
- clientId={ parentId }
- />
-
- <DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />
- <CartCheckoutFeedbackPrompt />
- </InspectorControls>
+ {
+ // Show sidebar notices only when a WooCommerce block is selected.
+ // This early check helps prevent expensive and unnecessary work
+ // in the block editor store.
+ blockName.startsWith( 'woocommerce/' ) &&
+ isBlockSelected && (
+ <SidebarNotices clientId={ clientId } />
+ )
+ }
<BlockEdit key="edit" { ...props } />
</>
);