Commit 9a37e60065 for woocommerce
commit 9a37e60065149fd8ff3e1572f16beea3660413d3
Author: Rostislav Wolný <1082140+costasovo@users.noreply.github.com>
Date: Mon Feb 16 10:35:57 2026 +0100
Add new slotfill to the email editor sidebar (#63269)
* Add slotfill allowing adding new email actions to settings panel
* Refactor Woo's email status component to use the new Slotfill
* Add change log
diff --git a/packages/js/email-editor/changelog/stomail-7602-implement-design-for-the-email-post-summary-panel-v2 b/packages/js/email-editor/changelog/stomail-7602-implement-design-for-the-email-post-summary-panel-v2
new file mode 100644
index 0000000000..c1f5946a52
--- /dev/null
+++ b/packages/js/email-editor/changelog/stomail-7602-implement-design-for-the-email-post-summary-panel-v2
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add EmailActionsFill allowing extenders to add custom email actions to the sidebar
diff --git a/packages/js/email-editor/src/components/sidebar/settings-panel.tsx b/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
index 224e5ad90d..cf373bbc0e 100644
--- a/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
+++ b/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
@@ -4,6 +4,7 @@
import { __ } from '@wordpress/i18n';
import { applyFilters } from '@wordpress/hooks';
import { useMemo } from '@wordpress/element';
+import { createSlotFill } from '@wordpress/components';
// eslint-disable-next-line @woocommerce/dependency-group
import {
ErrorBoundary,
@@ -28,6 +29,17 @@ const tracking = {
debouncedRecordEvent,
};
+/**
+ * A slot fill for the email actions section of the email editor.
+ *
+ * This component is used to render the email actions section of the email editor.
+ */
+const { Fill: EmailActionsFill, Slot } = createSlotFill(
+ 'WooCommerceEmailEditorPostSummarySection'
+);
+
+export { EmailActionsFill };
+
export function SettingsPanel() {
const SidebarExtensionComponent = useMemo(
() =>
@@ -39,23 +51,13 @@ export function SettingsPanel() {
[]
);
- const EmailStatusComponent = useMemo(
- () =>
- applyFilters(
- 'woocommerce_email_editor_setting_sidebar_email_status_component',
- () => null,
- tracking
- ) as () => JSX.Element,
- []
- );
-
return (
<PluginDocumentSettingPanel
name="email-settings-panel"
title={ __( 'Settings', 'woocommerce' ) }
className="woocommerce-email-editor__settings-panel"
>
- { <EmailStatusComponent /> }
+ <Slot />
{ <TemplateSelection /> }
{ /* @ts-expect-error canCopyContent is missing in @types/wordpress__editor */ }
<ErrorBoundary canCopyContent>
diff --git a/packages/js/email-editor/src/index.ts b/packages/js/email-editor/src/index.ts
index 84e8819296..40273041e9 100644
--- a/packages/js/email-editor/src/index.ts
+++ b/packages/js/email-editor/src/index.ts
@@ -341,3 +341,17 @@ export {
*/
isEventTrackingEnabled,
} from './events';
+
+/**
+ * A slot fill for the post actions section of the email editor above Template Selection.
+ *
+ * This component is used to allow plugins to add content to the post action section of the email editor.
+ *
+ * @example
+ * ```jsx
+ * import { EmailActionsFill } from '@woocommerce/email-editor';
+ *
+ * <EmailActionsFill />
+ * ```
+ */
+export { EmailActionsFill } from './components/sidebar/settings-panel';
diff --git a/plugins/woocommerce/changelog/stomail-7602-implement-design-for-the-email-post-summary-panel-v2 b/plugins/woocommerce/changelog/stomail-7602-implement-design-for-the-email-post-summary-panel-v2
new file mode 100644
index 0000000000..3fd308aa87
--- /dev/null
+++ b/plugins/woocommerce/changelog/stomail-7602-implement-design-for-the-email-post-summary-panel-v2
@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: Email status component in email editor is rendered via a slotfill
+
+
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/email-editor-integration/sidebar_settings.tsx b/plugins/woocommerce/client/admin/client/wp-admin-scripts/email-editor-integration/sidebar_settings.tsx
index 36f1374d7b..d731f71729 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/email-editor-integration/sidebar_settings.tsx
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/email-editor-integration/sidebar_settings.tsx
@@ -14,6 +14,11 @@ import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
import clsx from 'clsx';
import { useState } from '@wordpress/element';
+import {
+ EmailActionsFill,
+ recordEvent as emailEditorRecordEvent,
+} from '@woocommerce/email-editor';
+import { registerPlugin } from '@wordpress/plugins';
/**
* Internal dependencies
@@ -286,13 +291,15 @@ const SidebarSettings = ( {
};
export function modifySidebar() {
- addFilter(
- 'woocommerce_email_editor_setting_sidebar_email_status_component',
- NAME_SPACE,
- ( _originalComponent, tracking ) => {
- return () => <EmailStatus recordEvent={ tracking.recordEvent } />;
- }
- );
+ registerPlugin( 'woocommerce-email-editor-email-status', {
+ scope: 'woocommerce-email-editor',
+ render: () => (
+ <EmailActionsFill>
+ <EmailStatus recordEvent={ emailEditorRecordEvent } />
+ </EmailActionsFill>
+ ),
+ } );
+
addFilter(
'woocommerce_email_editor_setting_sidebar_extension_component',
NAME_SPACE,