Commit 79bcd6a308 for woocommerce
commit 79bcd6a308de91fcaa537bb6d4299a56b9fd092a
Author: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Mon Feb 16 11:26:12 2026 -0500
Email Editor: Move TemplateSelection to EmailActionsFill slot and export for extensibility (#63277)
Email Editor: Move TemplateSelection to EmailActionsFill slot
Register TemplateSelection via EmailActionsFill using registerPlugin,
matching the pattern established for EmailStatus in #63269. Export the
TemplateSelection component from @woocommerce/email-editor so consumers
can unregister and re-render it in custom locations.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
diff --git a/packages/js/email-editor/changelog/add-template-selection-to-email-actions-fill b/packages/js/email-editor/changelog/add-template-selection-to-email-actions-fill
new file mode 100644
index 0000000000..467ee62ee5
--- /dev/null
+++ b/packages/js/email-editor/changelog/add-template-selection-to-email-actions-fill
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Move TemplateSelection to EmailActionsFill slot and export TemplateSelection component for extensibility
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 cf373bbc0e..eac274511d 100644
--- a/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
+++ b/packages/js/email-editor/src/components/sidebar/settings-panel.tsx
@@ -16,7 +16,6 @@ import {
* Internal dependencies
*/
import { RichTextWithButton } from '../personalization-tags/rich-text-with-button';
-import { TemplateSelection } from './template-selection';
import {
recordEvent,
recordEventOnce,
@@ -58,7 +57,6 @@ export function SettingsPanel() {
className="woocommerce-email-editor__settings-panel"
>
<Slot />
- { <TemplateSelection /> }
{ /* @ts-expect-error canCopyContent is missing in @types/wordpress__editor */ }
<ErrorBoundary canCopyContent>
{ <SidebarExtensionComponent /> }
diff --git a/packages/js/email-editor/src/index.ts b/packages/js/email-editor/src/index.ts
index 40273041e9..ec23c6b72d 100644
--- a/packages/js/email-editor/src/index.ts
+++ b/packages/js/email-editor/src/index.ts
@@ -343,15 +343,64 @@ export {
} from './events';
/**
- * A slot fill for the post actions section of the email editor above Template Selection.
+ * A Fill component for the email actions slot in the Settings panel.
*
- * This component is used to allow plugins to add content to the post action section of the email editor.
+ * Use this Fill together with `registerPlugin` to render content in the
+ * email actions slot inside the email editor's Settings panel. Both
+ * EmailStatus and TemplateSelection are rendered through this slot by default.
+ * Registrations can be removed with `unregisterPlugin` and replaced with
+ * custom implementations.
*
* @example
* ```jsx
- * import { EmailActionsFill } from '@woocommerce/email-editor';
- *
- * <EmailActionsFill />
+ * import { EmailActionsFill, TemplateSelection } from '@woocommerce/email-editor';
+ * import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
+ *
+ * // Remove the default TemplateSelection from the Settings panel
+ * unregisterPlugin( 'woocommerce-email-editor-template-selection' );
+ *
+ * // Render TemplateSelection in a custom location via registerPlugin
+ * registerPlugin( 'my-custom-template-selection', {
+ * scope: 'woocommerce-email-editor',
+ * render: () => (
+ * <EmailActionsFill>
+ * <TemplateSelection />
+ * </EmailActionsFill>
+ * ),
+ * } );
* ```
+ *
+ * @since 1.0.0
*/
export { EmailActionsFill } from './components/sidebar/settings-panel';
+
+/**
+ * A sidebar component for selecting and managing email templates.
+ *
+ * Displays the currently active template with options to edit or swap templates.
+ * This component is rendered by default inside the Settings panel via a
+ * `registerPlugin` registration using `EmailActionsFill`. Consumers can remove
+ * it with `unregisterPlugin` and re-render it in a custom location.
+ *
+ * @example
+ * ```jsx
+ * import { EmailActionsFill, TemplateSelection } from '@woocommerce/email-editor';
+ * import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
+ *
+ * // Remove the default TemplateSelection from the Settings panel
+ * unregisterPlugin( 'woocommerce-email-editor-template-selection' );
+ *
+ * // Render TemplateSelection in a custom location
+ * registerPlugin( 'my-custom-template-selection', {
+ * scope: 'woocommerce-email-editor',
+ * render: () => (
+ * <EmailActionsFill>
+ * <TemplateSelection />
+ * </EmailActionsFill>
+ * ),
+ * } );
+ * ```
+ *
+ * @since 1.0.0
+ */
+export { TemplateSelection } from './components/sidebar/template-selection';
diff --git a/plugins/woocommerce/changelog/add-template-selection-slotfill-registration b/plugins/woocommerce/changelog/add-template-selection-slotfill-registration
new file mode 100644
index 0000000000..e7971004f8
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-template-selection-slotfill-registration
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Register TemplateSelection via EmailActionsFill for extensibility
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 d731f71729..879c6946eb 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
@@ -16,6 +16,7 @@ import clsx from 'clsx';
import { useState } from '@wordpress/element';
import {
EmailActionsFill,
+ TemplateSelection,
recordEvent as emailEditorRecordEvent,
} from '@woocommerce/email-editor';
import { registerPlugin } from '@wordpress/plugins';
@@ -300,6 +301,15 @@ export function modifySidebar() {
),
} );
+ registerPlugin( 'woocommerce-email-editor-template-selection', {
+ scope: 'woocommerce-email-editor',
+ render: () => (
+ <EmailActionsFill>
+ <TemplateSelection />
+ </EmailActionsFill>
+ ),
+ } );
+
addFilter(
'woocommerce_email_editor_setting_sidebar_extension_component',
NAME_SPACE,