Commit 820a0d96b83 for woocommerce
commit 820a0d96b836db6d2e81bf3e2376c7140ccf8702
Author: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Mon Oct 12 15:04:35 2026 +0200
Make the email editor canvas follow the admin color scheme (#69604)
* Let admin color scheme styles into the email editor canvas
The canvas iframe only keeps core stylesheets from an allowlist, and
that list dropped wp-base-styles, which wp-edit-blocks depends on and
which sets the admin color scheme variables. The canvas therefore fell
back to the default accent color while the sidebar used the user's
scheme, so personalization tag chips showed two different blues.
* Use the admin color fallback for the template area outline
The template area outline is drawn inside the canvas iframe and read
only --wp-components-color-accent, which is never set there, so it
always fell back to the default blue. Now that the canvas loads the
admin color scheme, fall back to --wp-admin-theme-color first, as the
personalization tag chip and core components do, so the outline
matches the rest of the canvas.
* Use a logical border for the template area toolbar divider
The divider between the template area label and the Edit template
button used border-right, so in right-to-left languages it ended up on
the outer edge of the toolbar instead of between the two items.
* Match the color scheme stylesheet by handle in the canvas test
The test looked for the exact single-quoted id attribute, so a change in
how core prints link tags would fail it while the feature still works.
It now matches the handle the same way the iframe asset filter does,
and drops an assertion the line check already covers.
* Add a changelog entry for the RTL template area divider
The divider fix changes what merchants see in right-to-left languages,
so it needs its own entry next to the outline color one.
* Check the divider borders with plain string matches
The test only needs to rule out two property names, so two toContain
checks read more simply than a regular expression.
diff --git a/packages/js/email-editor/changelog/fix-WOOPLUG-7714-template-area-admin-color b/packages/js/email-editor/changelog/fix-WOOPLUG-7714-template-area-admin-color
new file mode 100644
index 00000000000..6e24f5b0876
--- /dev/null
+++ b/packages/js/email-editor/changelog/fix-WOOPLUG-7714-template-area-admin-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Use the admin color scheme for the template area outline in the email editor canvas.
diff --git a/packages/js/email-editor/changelog/fix-WOOPLUG-7714-template-area-rtl-divider b/packages/js/email-editor/changelog/fix-WOOPLUG-7714-template-area-rtl-divider
new file mode 100644
index 00000000000..8cdcd1f60ea
--- /dev/null
+++ b/packages/js/email-editor/changelog/fix-WOOPLUG-7714-template-area-rtl-divider
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Show the template area toolbar divider in the email editor canvas on the correct side in right-to-left languages.
diff --git a/packages/js/email-editor/src/components/template-canvas-affordance/template-canvas-affordance.tsx b/packages/js/email-editor/src/components/template-canvas-affordance/template-canvas-affordance.tsx
index 9a25f877085..dcb3d129aca 100644
--- a/packages/js/email-editor/src/components/template-canvas-affordance/template-canvas-affordance.tsx
+++ b/packages/js/email-editor/src/components/template-canvas-affordance/template-canvas-affordance.tsx
@@ -65,12 +65,12 @@ const CANVAS_STYLES = `
.woocommerce-email-editor-template-area-affordance__frame:hover,
.woocommerce-email-editor-template-area-affordance__frame:focus-visible,
.woocommerce-email-editor-template-area-affordance__frame.is-active {
- border-color: var(--wp-components-color-accent, #3858e9);
+ border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
outline: none;
}
.woocommerce-email-editor-template-area-affordance__label {
align-items: center;
- border-right: 1px solid #ddd;
+ border-inline-end: 1px solid #ddd;
display: inline-flex;
font-weight: 500;
gap: 8px;
@@ -84,16 +84,16 @@ const CANVAS_STYLES = `
.woocommerce-email-editor-template-area-affordance__button.components-button {
border-radius: 0;
box-shadow: none;
- color: var(--wp-components-color-accent, #3858e9);
+ color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
height: 48px;
padding: 0 18px;
white-space: nowrap;
}
.woocommerce-email-editor-template-area-affordance__button.components-button:hover:not(:disabled) {
- color: var(--wp-components-color-accent, #3858e9);
+ color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}
.woocommerce-email-editor-template-area-affordance__button.components-button:focus-visible {
- box-shadow: inset 0 0 0 1.5px var(--wp-components-color-accent, #3858e9);
+ box-shadow: inset 0 0 0 1.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}
`;
diff --git a/packages/js/email-editor/src/components/template-canvas-affordance/test/template-canvas-affordance.spec.tsx b/packages/js/email-editor/src/components/template-canvas-affordance/test/template-canvas-affordance.spec.tsx
index ea35d8b694b..95aa4c8e29f 100644
--- a/packages/js/email-editor/src/components/template-canvas-affordance/test/template-canvas-affordance.spec.tsx
+++ b/packages/js/email-editor/src/components/template-canvas-affordance/test/template-canvas-affordance.spec.tsx
@@ -183,6 +183,55 @@ describe( 'TemplateCanvasAffordance', () => {
);
} );
+ it( 'falls back to the admin theme color for the template area outline', async () => {
+ const iframe = addEditorCanvas();
+ setupUseSelectMock();
+
+ render( <TemplateCanvasAffordance /> );
+
+ await waitFor( () => {
+ expect(
+ iframe.contentDocument?.getElementById(
+ 'woocommerce-email-editor-template-area-affordance-style'
+ )
+ ).toBeInTheDocument();
+ } );
+
+ const css =
+ iframe.contentDocument?.getElementById(
+ 'woocommerce-email-editor-template-area-affordance-style'
+ )?.textContent ?? '';
+
+ expect( css ).toContain( 'var(--wp-admin-theme-color, #3858e9)' );
+ expect( css ).not.toContain(
+ 'var(--wp-components-color-accent, #3858e9)'
+ );
+ } );
+
+ it( 'uses logical borders for the toolbar divider so it works in RTL', async () => {
+ const iframe = addEditorCanvas();
+ setupUseSelectMock();
+
+ render( <TemplateCanvasAffordance /> );
+
+ await waitFor( () => {
+ expect(
+ iframe.contentDocument?.getElementById(
+ 'woocommerce-email-editor-template-area-affordance-style'
+ )
+ ).toBeInTheDocument();
+ } );
+
+ const css =
+ iframe.contentDocument?.getElementById(
+ 'woocommerce-email-editor-template-area-affordance-style'
+ )?.textContent ?? '';
+
+ expect( css ).toContain( 'border-inline-end' );
+ expect( css ).not.toContain( 'border-left' );
+ expect( css ).not.toContain( 'border-right' );
+ } );
+
it( 'shows the toolbar after the template area is selected', async () => {
const iframe = addEditorCanvas();
setupUseSelectMock();
diff --git a/packages/php/email-editor/changelog/fix-WOOPLUG-7714-admin-color-scheme-canvas b/packages/php/email-editor/changelog/fix-WOOPLUG-7714-admin-color-scheme-canvas
new file mode 100644
index 00000000000..5804100c53f
--- /dev/null
+++ b/packages/php/email-editor/changelog/fix-WOOPLUG-7714-admin-color-scheme-canvas
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Match personalization tag chips in the email editor canvas to the admin color scheme, as in the sidebar.
diff --git a/packages/php/email-editor/src/Engine/class-settings-controller.php b/packages/php/email-editor/src/Engine/class-settings-controller.php
index 8b6c38c92b9..d3ca314a104 100644
--- a/packages/php/email-editor/src/Engine/class-settings-controller.php
+++ b/packages/php/email-editor/src/Engine/class-settings-controller.php
@@ -207,6 +207,7 @@ class Settings_Controller {
'wp-block-library-css',
'wp-block-editor-content-css',
'wp-edit-blocks-css',
+ 'wp-base-styles-css', // Admin color scheme variables.
);
foreach ( \WP_Block_Type_Registry::get_instance()->get_all_registered() as $block ) {
diff --git a/packages/php/email-editor/tests/integration/Engine/Settings_Controller_Test.php b/packages/php/email-editor/tests/integration/Engine/Settings_Controller_Test.php
index 7b68d8557fb..4f96491be4a 100644
--- a/packages/php/email-editor/tests/integration/Engine/Settings_Controller_Test.php
+++ b/packages/php/email-editor/tests/integration/Engine/Settings_Controller_Test.php
@@ -58,4 +58,21 @@ class Settings_Controller_Test extends \Email_Editor_Integration_Test_Case {
$this->assertSame( $expected_css, reset( $styles_with_comment_rules )['css'], 'The iframe must receive the shared rich-text-comment.css unchanged' );
$this->assertDoesNotMatchRegularExpression( '/\{[^}]*\{/', $expected_css, 'Nested rules must be flattened so selector prefixing keeps them valid' );
}
+
+ /**
+ * Test it keeps the admin color scheme stylesheet in the iframe assets.
+ */
+ public function testItKeepsAdminColorSchemeStylesInIframeAssets(): void {
+ $settings = $this->settings_controller->get_settings();
+
+ $scheme_lines = array_filter(
+ explode( "\n", $settings['__unstableResolvedAssets']['styles'] ),
+ function ( string $line ): bool {
+ return false !== strpos( $line, 'wp-base-styles-css' );
+ }
+ );
+
+ $this->assertCount( 1, $scheme_lines, 'The admin color scheme stylesheet must be printed in the iframe assets' );
+ $this->assertStringContainsString( 'base-styles/admin-schemes', reset( $scheme_lines ) );
+ }
}