Commit 6f79e9ebac7 for woocommerce
commit 6f79e9ebac7361b1c149a66628cadd1d46b4c414
Author: louwie17 <lourensschep@gmail.com>
Date: Tue Mar 24 12:56:19 2026 +0100
[WOOPRD-3190] Fix activity panel SlotFill re-render loop (#63795)
* [WOOPRD-3190] Stabilize abbreviated notification SlotFill
Move createSlotFill for abbreviated notifications to module scope to avoid recreating Slot on every render, which can trigger repeated re-renders. Add a small window.wp.element debug helper script to quickly inject an AbbreviatedNotification fill when testing.
Made-with: Cursor
* [WOOPRD-3190] Remove helper file and add changelog
Remove the temporary window.wp.element helper script from docs examples and add a WooCommerce changelog entry for the SlotFill re-render loop fix.
Made-with: Cursor
diff --git a/plugins/woocommerce/changelog/wooprd-3190-activity-panel-oops-something-went-wrong b/plugins/woocommerce/changelog/wooprd-3190-activity-panel-oops-something-went-wrong
new file mode 100644
index 00000000000..5fd25c748a5
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-3190-activity-panel-oops-something-went-wrong
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Prevent Activity panel abbreviated notification SlotFill from triggering repeated re-renders by creating the slot at module scope.
diff --git a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js
index ddc9446d4b2..e7f7d12d955 100644
--- a/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js
+++ b/plugins/woocommerce/client/admin/client/activity-panel/panels/inbox/abbreviated-notifications-panel.js
@@ -28,6 +28,9 @@ const REVIEWS_PANEL_ID = 'reviews-panel';
const STOCK_PANEL_ID = 'stock-panel';
export const ABBREVIATED_NOTIFICATION_SLOT_NAME = 'AbbreviatedNotification';
+const { Slot: AbbreviatedNotificationSlot } = createSlotFill(
+ ABBREVIATED_NOTIFICATION_SLOT_NAME
+);
export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
const {
@@ -46,7 +49,7 @@ export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
isSetupTaskListHidden: ! isTaskListVisible( 'setup' ),
isExtendedTaskListHidden: ! isTaskListVisible( 'extended' ),
};
- } );
+ }, [] );
const trackAbbreviatedCardClick = ( name ) => {
recordEvent( 'activity_panel_click', {
@@ -54,7 +57,6 @@ export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
} );
};
- const { Slot } = createSlotFill( ABBREVIATED_NOTIFICATION_SLOT_NAME );
const isWCAdminPage = isWCAdmin();
return (
@@ -161,7 +163,7 @@ export const AbbreviatedNotificationsPanel = ( { thingsToDoNextCount } ) => {
</Text>
</AbbreviatedCard>
) }
- { ! isExtendedTaskListHidden && <Slot /> }
+ { ! isExtendedTaskListHidden && <AbbreviatedNotificationSlot /> }
</div>
);
};