Commit 7be4cbfb1a for woocommerce
commit 7be4cbfb1a10a2b3f30544c1f2a3b3fab2f22caa
Author: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Wed Feb 11 09:39:53 2026 -0500
Fix blank modal when swapping email templates (#63229)
* Fix blank modal when swapping email templates
In swap mode, templates generated from custom email content have no
category assigned, causing the category-based filtering to show nothing.
Skip filtering when no category is selected, conditionally hide the
empty sidebar, and add CSS to fill the vacated space.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Add changelog entry for swap template fix
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix prettier formatting in style.scss
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
diff --git a/packages/js/email-editor/changelog/fix-swap-template-blank-modal b/packages/js/email-editor/changelog/fix-swap-template-blank-modal
new file mode 100644
index 0000000000..64a333671b
--- /dev/null
+++ b/packages/js/email-editor/changelog/fix-swap-template-blank-modal
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix blank modal when using swap template action in email editor
diff --git a/packages/js/email-editor/src/components/template-select/select-modal.tsx b/packages/js/email-editor/src/components/template-select/select-modal.tsx
index 00d8d58408..52ae40a6c9 100644
--- a/packages/js/email-editor/src/components/template-select/select-modal.tsx
+++ b/packages/js/email-editor/src/components/template-select/select-modal.tsx
@@ -103,12 +103,18 @@ function SelectTemplateBody( {
}, [ displayCategories, selectedCategory ] );
return (
- <div className="block-editor-block-patterns-explorer">
- <TemplateCategoriesListSidebar
- templateCategories={ displayCategories }
- selectedCategory={ selectedCategory }
- onClickCategory={ handleCategorySelection }
- />
+ <div
+ className={ `block-editor-block-patterns-explorer${
+ displayCategories.length === 0 ? ' no-sidebar' : ''
+ }` }
+ >
+ { displayCategories.length > 0 && (
+ <TemplateCategoriesListSidebar
+ templateCategories={ displayCategories }
+ selectedCategory={ selectedCategory }
+ onClickCategory={ handleCategorySelection }
+ />
+ ) }
<TemplateList
templates={ templates }
diff --git a/packages/js/email-editor/src/components/template-select/style.scss b/packages/js/email-editor/src/components/template-select/style.scss
index be7fa61968..922906b265 100644
--- a/packages/js/email-editor/src/components/template-select/style.scss
+++ b/packages/js/email-editor/src/components/template-select/style.scss
@@ -39,6 +39,12 @@
}
}
+.block-editor-block-patterns-explorer.no-sidebar
+ .block-editor-block-patterns-explorer__list {
+ margin-left: 0;
+ padding-left: 2rem;
+}
+
.email-editor-modal-footer {
background-color: #fff;
bottom: 0;
diff --git a/packages/js/email-editor/src/components/template-select/template-list.tsx b/packages/js/email-editor/src/components/template-select/template-list.tsx
index 3755daad3e..0bfb1a469c 100644
--- a/packages/js/email-editor/src/components/template-select/template-list.tsx
+++ b/packages/js/email-editor/src/components/template-select/template-list.tsx
@@ -139,9 +139,11 @@ export function TemplateList( {
}: Props ) {
const filteredTemplates = useMemo(
() =>
- templates.filter(
- ( template ) => template.category === selectedCategory
- ),
+ selectedCategory !== null && selectedCategory !== undefined
+ ? templates.filter(
+ ( template ) => template.category === selectedCategory
+ )
+ : templates,
[ selectedCategory, templates ]
);