Commit 83cb490bd7a for woocommerce
commit 83cb490bd7a8fce6eee8893004436fe215d8d2d9
Author: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Fri Nov 13 07:26:17 2026 +0100
Use the recommended @wordpress/ui components in the email editor (#70916)
* Use Stack and Text in the trash and reset email modals
The “use recommended components” lint rule flags the experimental
HStack, VStack and Text from @wordpress/components. Both confirm
modals now use Stack and Text from @wordpress/ui.
The gap between the question and the buttons goes from 20px to the
16px token, which the new Dialog also uses under its description.
The buttons align to the end of the row instead of the physical
right, so they follow the text direction.
* Use the ui Link in the personalization tags modal
ExternalLink from @wordpress/components is flagged by the “use
recommended components” lint rule. The “Learn more” link now uses
Link from @wordpress/ui with openInNewTab.
Link sets no rel attribute, so the one ExternalLink added is passed
in and the link still sends no referrer.
* Move the styles sidebar to @wordpress/ui components
The styles sidebar used HStack, VStack, Heading and Card from
@wordpress/components, which the “use recommended components” lint
rule flags. It now uses Stack, Text and Card from @wordpress/ui.
The old code wrapped the root and typography screens in a Card only
for its 16px padding, with the border switched off. The new Card
always draws a border, so those wrappers are now a padded Stack and
only the style preview tile stays a Card.
The old Card was also the positioned parent of the preview’s
absolute layers. The new Card is not positioned, so the preview now
positions them itself. Without that, the blurred colour layer covers
the whole sidebar and blocks its buttons.
HStack filled the width of its parent and Stack does not. The colour
row sets its width itself, because the block editor styles size the
label from it and would cut “Color” down to “C…”.
The screen title sat in a Spacer that HStack turned into a flexible
item. Stack does not do that, so the title is now a direct child.
Text resets heading margins, so the header class and its margin
rule are gone.
* Use the components Notice in the template list
Notice from @wordpress/ui is not on the allowed list of the “use
recommended components” lint rule yet. The note on the Recent tab
goes back to Notice from @wordpress/components until it is.
* Drop the email editor lint suppressions
All 24 “use recommended components” violations in the email editor
are fixed, so the suppression file has no entries left. ESLint only
reads the file when it exists, so it is removed, and the package
gets its changelog entry.
* Write the styles screen padding as a plain value
The rule used $grid-unit-20, but this stylesheet does not import the
base-styles variables. It compiled only because another stylesheet
that does is listed before it. The rules next to it already use 16px.
* Name the Notice change in the email editor changelog
The entry listed only the @wordpress/ui components. The note on the
template picker’s Recent tab now uses the @wordpress/components
Notice, which looks different on WordPress 7.0, so the entry says
which Notice it is. The apostrophes are typographic.
* Mark the email editor changelog entry as minor
The JS package guideline pairs type “update” with minor significance
for a non-breaking change to existing functionality. The entry said
patch.
diff --git a/packages/js/email-editor/changelog/update-wooplug-8061-wordpress-ui-components b/packages/js/email-editor/changelog/update-wooplug-8061-wordpress-ui-components
new file mode 100644
index 00000000000..ae02420e954
--- /dev/null
+++ b/packages/js/email-editor/changelog/update-wooplug-8061-wordpress-ui-components
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Use Stack, Text, Card and Link from @wordpress/ui in the email editor’s Styles sidebar and dialogs, and the @wordpress/components Notice on the template picker’s Recent tab.
diff --git a/packages/js/email-editor/eslint-suppressions.json b/packages/js/email-editor/eslint-suppressions.json
deleted file mode 100644
index 0be4725f70f..00000000000
--- a/packages/js/email-editor/eslint-suppressions.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
- "src/components/header/trash-email-post.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 3
- }
- },
- "src/components/personalization-tags/personalization-tags-modal.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 1
- }
- },
- "src/components/sidebar/reset-email-template.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 3
- }
- },
- "src/components/styles-sidebar/panels/color-dropdown-item.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 1
- }
- },
- "src/components/styles-sidebar/panels/typography-panel.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 5
- }
- },
- "src/components/styles-sidebar/screens/preview.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 2
- }
- },
- "src/components/styles-sidebar/screens/screen-header.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 3
- }
- },
- "src/components/styles-sidebar/screens/screen-root.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 5
- }
- },
- "src/components/template-select/template-list.tsx": {
- "@wordpress/use-recommended-components": {
- "count": 1
- }
- }
-}
\ No newline at end of file
diff --git a/packages/js/email-editor/src/components/header/trash-email-post.tsx b/packages/js/email-editor/src/components/header/trash-email-post.tsx
index ae4a92e48e0..a267560922a 100644
--- a/packages/js/email-editor/src/components/header/trash-email-post.tsx
+++ b/packages/js/email-editor/src/components/header/trash-email-post.tsx
@@ -7,12 +7,8 @@ import { store as noticesStore } from '@wordpress/notices';
import { trash } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
-import {
- Button,
- __experimentalText as Text,
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
+import { Stack, Text } from '@wordpress/ui';
import { decodeEntities } from '@wordpress/html-entities';
import { applyFilters } from '@wordpress/hooks';
@@ -135,11 +131,11 @@ const getTrashEmailPostAction = () => {
};
return (
- <VStack spacing="5">
+ <Stack direction="column" gap="lg">
<Text>
{ getModalTitle( items, shouldPermanentlyDelete ) }
</Text>
- <HStack justify="right">
+ <Stack direction="row" justify="flex-end" gap="sm">
<Button
variant="tertiary"
onClick={ () => {
@@ -308,8 +304,8 @@ const getTrashEmailPostAction = () => {
)
: __( 'Move to trash', __i18n_text_domain__ ) }
</Button>
- </HStack>
- </VStack>
+ </Stack>
+ </Stack>
);
},
};
diff --git a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
index cee5db1aa55..e5e5d929d3c 100644
--- a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { ExternalLink, Modal, SearchControl } from '@wordpress/components';
+import { Modal, SearchControl } from '@wordpress/components';
+import { Link } from '@wordpress/ui';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
@@ -88,8 +89,10 @@ const PersonalizationTagsModal = ( {
'Insert personalization tags to dynamically fill in information and personalize your emails.',
__i18n_text_domain__
) }{ ' ' }
- <ExternalLink
+ <Link
href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list"
+ openInNewTab
+ rel="external noreferrer noopener"
onClick={ () =>
recordEvent(
'personalization_tags_modal_learn_more_link_clicked',
@@ -98,7 +101,7 @@ const PersonalizationTagsModal = ( {
}
>
{ __( 'Learn more', __i18n_text_domain__ ) }
- </ExternalLink>
+ </Link>
</p>
<SearchControl
onChange={ ( theSearchQuery ) => {
diff --git a/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx b/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx
index 324e283e935..080dd8e47f4 100644
--- a/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx
+++ b/packages/js/email-editor/src/components/sidebar/reset-email-template.tsx
@@ -7,12 +7,8 @@ import { store as coreStore, type WpTemplate } from '@wordpress/core-data';
import { backup } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
-import {
- Button,
- __experimentalText as Text,
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
+import { Stack, Text } from '@wordpress/ui';
import { decodeEntities } from '@wordpress/html-entities';
import { parse, serialize } from '@wordpress/blocks';
import apiFetch from '@wordpress/api-fetch';
@@ -89,9 +85,9 @@ const getResetEmailTemplateAction = () => {
);
return (
- <VStack spacing="5">
+ <Stack direction="column" gap="lg">
<Text>{ modalTitle }</Text>
- <HStack justify="right">
+ <Stack direction="row" justify="flex-end" gap="sm">
<Button
variant="tertiary"
onClick={ () => {
@@ -208,8 +204,8 @@ const getResetEmailTemplateAction = () => {
>
{ __( 'Reset', __i18n_text_domain__ ) }
</Button>
- </HStack>
- </VStack>
+ </Stack>
+ </Stack>
);
},
};
diff --git a/packages/js/email-editor/src/components/styles-sidebar/panels/color-dropdown-item.tsx b/packages/js/email-editor/src/components/styles-sidebar/panels/color-dropdown-item.tsx
index 323585bbfaa..9cfaed02cf9 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/panels/color-dropdown-item.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/panels/color-dropdown-item.tsx
@@ -11,9 +11,9 @@ import {
Dropdown,
FlexItem,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
- __experimentalHStack as HStack,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
import {
// @ts-expect-error TS7016: Could not find a declaration file for module '@wordpress/block-editor'.
@@ -76,7 +76,13 @@ export function ColorDropdownItem( {
ref={ dropdownButtonRef }
__next40pxDefaultSize
>
- <HStack justify="flex-start">
+ { /* Full width: the block editor styles size the label relative to this row. */ }
+ <Stack
+ direction="row"
+ align="center"
+ gap="sm"
+ style={ { width: '100%' } }
+ >
<ColorIndicator
className="block-editor-panel-color-gradient-settings__color-indicator"
colorValue={ inheritedValue }
@@ -87,7 +93,7 @@ export function ColorDropdownItem( {
>
{ label }
</FlexItem>
- </HStack>
+ </Stack>
</Button>
{ hasValue() && (
<Button
diff --git a/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx b/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx
index f4c76ae42fc..01f4df99165 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/panels/typography-panel.tsx
@@ -5,14 +5,10 @@ import { __, sprintf } from '@wordpress/i18n';
import {
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
- __experimentalVStack as VStack,
- __experimentalHStack as HStack,
- __experimentalHeading as Heading,
__experimentalNavigatorButton as NavigatorButton,
FlexItem,
- Card,
- CardBody,
} from '@wordpress/components';
+import { Stack, Text } from '@wordpress/ui';
/**
* Internal dependencies
@@ -58,7 +54,7 @@ function ElementItem( { element, label }: { element: string; label: string } ) {
)
}
>
- <HStack justify="flex-start">
+ <Stack direction="row" align="center" gap="sm">
<FlexItem
className="edit-site-global-styles-screen-typography__indicator"
style={ {
@@ -77,7 +73,7 @@ function ElementItem( { element, label }: { element: string; label: string } ) {
Aa
</FlexItem>
<FlexItem>{ label }</FlexItem>
- </HStack>
+ </Stack>
</NavigatorButton>
</Item>
);
@@ -85,36 +81,33 @@ function ElementItem( { element, label }: { element: string; label: string } ) {
export function TypographyPanel() {
return (
- <Card size="small" variant="primary" isBorderless>
- <CardBody>
- <VStack spacing={ 3 }>
- <Heading
- level={ 3 }
- className="edit-site-global-styles-subtitle"
- >
- { __( 'Elements', __i18n_text_domain__ ) }
- </Heading>
- <ItemGroup isBordered isSeparated size="small">
- <ElementItem
- element="text"
- label={ __( 'Text', __i18n_text_domain__ ) }
- />
- <ElementItem
- element="link"
- label={ __( 'Links', __i18n_text_domain__ ) }
- />
- <ElementItem
- element="heading"
- label={ __( 'Headings', __i18n_text_domain__ ) }
- />
- <ElementItem
- element="button"
- label={ __( 'Buttons', __i18n_text_domain__ ) }
- />
- </ItemGroup>
- </VStack>
- </CardBody>
- </Card>
+ <Stack
+ direction="column"
+ gap="md"
+ className="woocommerce-email-editor-styles-screen-body"
+ >
+ <Text variant="heading-sm" render={ <h3 /> }>
+ { __( 'Elements', __i18n_text_domain__ ) }
+ </Text>
+ <ItemGroup isBordered isSeparated size="small">
+ <ElementItem
+ element="text"
+ label={ __( 'Text', __i18n_text_domain__ ) }
+ />
+ <ElementItem
+ element="link"
+ label={ __( 'Links', __i18n_text_domain__ ) }
+ />
+ <ElementItem
+ element="heading"
+ label={ __( 'Headings', __i18n_text_domain__ ) }
+ />
+ <ElementItem
+ element="button"
+ label={ __( 'Buttons', __i18n_text_domain__ ) }
+ />
+ </ItemGroup>
+ </Stack>
);
}
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/preview.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/preview.tsx
index c7d760563f2..5ff80357df9 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/preview.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/preview.tsx
@@ -3,11 +3,8 @@
*/
import { useSelect } from '@wordpress/data';
import { useState, useMemo } from '@wordpress/element';
-import {
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
- __unstableMotion as motion,
-} from '@wordpress/components';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
/**
* Internal dependencies
@@ -161,6 +158,7 @@ export function Preview( {
>
<motion.div
style={ {
+ position: 'relative',
height: normalizedHeight * ratio,
width: '100%',
background: backgroundColor,
@@ -178,9 +176,11 @@ export function Preview( {
overflow: 'hidden',
} }
>
- <HStack
- spacing={ 10 * ratio }
+ <Stack
+ direction="row"
+ align="center"
justify="center"
+ gap="3xl"
style={ {
height: '100%',
overflow: 'hidden',
@@ -199,7 +199,7 @@ export function Preview( {
>
Aa
</motion.div>
- <VStack spacing={ 4 * ratio }>
+ <Stack direction="column" gap="lg">
{ highlightedColors.map(
( { slug, color }, index ) => (
<motion.div
@@ -231,8 +231,8 @@ export function Preview( {
/>
)
) }
- </VStack>
- </HStack>
+ </Stack>
+ </Stack>
</motion.div>
<motion.div
variants={ withHoverView && midFrame }
@@ -246,9 +246,8 @@ export function Preview( {
opacity: 0.1,
} }
>
- <HStack
- spacing={ 0 }
- justify="flex-start"
+ <Stack
+ direction="row"
style={ {
height: '100%',
overflow: 'hidden',
@@ -264,7 +263,7 @@ export function Preview( {
} }
/>
) ) }
- </HStack>
+ </Stack>
</motion.div>
<motion.div
variants={ secondFrame }
@@ -276,8 +275,8 @@ export function Preview( {
top: 0,
} }
>
- <VStack
- spacing={ 3 * ratio }
+ <Stack
+ direction="column"
justify="center"
style={ {
height: '100%',
@@ -300,7 +299,7 @@ export function Preview( {
{ label }
</div>
) }
- </VStack>
+ </Stack>
</motion.div>
</motion.div>
</div>
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx
index 6fcbf429c47..2f2d9da14db 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-header.tsx
@@ -4,12 +4,10 @@
import { __ } from '@wordpress/i18n';
import { chevronLeft } from '@wordpress/icons';
import {
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
__experimentalSpacer as Spacer,
- __experimentalHeading as Heading,
__experimentalView as View,
} from '@wordpress/components';
+import { Stack, Text } from '@wordpress/ui';
/**
* Internal dependencies
@@ -33,10 +31,10 @@ type Props = {
*/
export function ScreenHeader( { title, description, onBack }: Props ) {
return (
- <VStack spacing={ 0 }>
+ <Stack direction="column">
<View>
<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
- <HStack spacing={ 2 }>
+ <Stack direction="row" align="center" gap="sm">
<Navigator.BackButton
style={ { minWidth: 24, padding: 0 } }
icon={ chevronLeft }
@@ -47,16 +45,10 @@ export function ScreenHeader( { title, description, onBack }: Props ) {
) }
onClick={ onBack }
/>
- <Spacer>
- <Heading
- className="woocommerce-email-editor-styles-header"
- level={ 2 }
- size={ 13 }
- >
- { title }
- </Heading>
- </Spacer>
- </HStack>
+ <Text variant="heading-md" render={ <h2 /> }>
+ { title }
+ </Text>
+ </Stack>
</Spacer>
</View>
{ description && (
@@ -64,7 +56,7 @@ export function ScreenHeader( { title, description, onBack }: Props ) {
{ description }
</p>
) }
- </VStack>
+ </Stack>
);
}
diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx
index e6b68b2be7f..72db9a3aa69 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-root.tsx
@@ -4,17 +4,13 @@
import { __ } from '@wordpress/i18n';
import { typography, color, background, layout } from '@wordpress/icons';
import {
- __experimentalVStack as VStack,
- Card,
- CardBody,
- CardMedia,
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
- __experimentalHStack as HStack,
__experimentalNavigatorButton as NavigatorButton,
Icon,
FlexItem,
} from '@wordpress/components';
+import { Card, Stack } from '@wordpress/ui';
/**
* Internal dependencies
@@ -26,102 +22,90 @@ import { recordEvent } from '../../../events';
export function ScreenRoot(): JSX.Element {
const hasBackgroundScreen = useHasBackgroundScreen();
return (
- <Card
- size="small"
- className="edit-site-global-styles-screen-root"
- variant="primary"
+ <Stack
+ direction="column"
+ gap="lg"
+ className="woocommerce-email-editor-styles-screen-body"
>
- <CardBody>
- <VStack spacing={ 4 }>
- <Card>
- <CardMedia>
- <Preview />
- </CardMedia>
- </Card>
- <ItemGroup>
- <NavigatorButton
- path="/typography"
- onClick={ () =>
- recordEvent(
- 'styles_sidebar_navigation_click',
- { path: 'typography' }
- )
- }
- >
- <Item>
- <HStack justify="flex-start">
- <Icon icon={ typography } size={ 24 } />
- <FlexItem>
- { __(
- 'Typography',
- __i18n_text_domain__
- ) }
- </FlexItem>
- </HStack>
- </Item>
- </NavigatorButton>
- <NavigatorButton
- path="/colors"
- onClick={ () =>
- recordEvent(
- 'styles_sidebar_navigation_click',
- { path: 'colors' }
- )
- }
- >
- <Item>
- <HStack justify="flex-start">
- <Icon icon={ color } size={ 24 } />
- <FlexItem>
- { __( 'Colors', __i18n_text_domain__ ) }
- </FlexItem>
- </HStack>
- </Item>
- </NavigatorButton>
- { hasBackgroundScreen && (
- <NavigatorButton
- path="/background"
- onClick={ () =>
- recordEvent(
- 'styles_sidebar_navigation_click',
- { path: 'background' }
- )
- }
- >
- <Item>
- <HStack justify="flex-start">
- <Icon icon={ background } size={ 24 } />
- <FlexItem>
- { __(
- 'Background',
- __i18n_text_domain__
- ) }
- </FlexItem>
- </HStack>
- </Item>
- </NavigatorButton>
- ) }
- <NavigatorButton
- path="/layout"
- onClick={ () =>
- recordEvent(
- 'styles_sidebar_navigation_click',
- { path: 'layout' }
- )
- }
- >
- <Item>
- <HStack justify="flex-start">
- <Icon icon={ layout } size={ 24 } />
- <FlexItem>
- { __( 'Layout', __i18n_text_domain__ ) }
- </FlexItem>
- </HStack>
- </Item>
- </NavigatorButton>
- </ItemGroup>
- </VStack>
- </CardBody>
- </Card>
+ <Card.Root>
+ <Card.Content>
+ <Card.FullBleed>
+ <Preview />
+ </Card.FullBleed>
+ </Card.Content>
+ </Card.Root>
+ <ItemGroup>
+ <NavigatorButton
+ path="/typography"
+ onClick={ () =>
+ recordEvent( 'styles_sidebar_navigation_click', {
+ path: 'typography',
+ } )
+ }
+ >
+ <Item>
+ <Stack direction="row" align="center" gap="sm">
+ <Icon icon={ typography } size={ 24 } />
+ <FlexItem>
+ { __( 'Typography', __i18n_text_domain__ ) }
+ </FlexItem>
+ </Stack>
+ </Item>
+ </NavigatorButton>
+ <NavigatorButton
+ path="/colors"
+ onClick={ () =>
+ recordEvent( 'styles_sidebar_navigation_click', {
+ path: 'colors',
+ } )
+ }
+ >
+ <Item>
+ <Stack direction="row" align="center" gap="sm">
+ <Icon icon={ color } size={ 24 } />
+ <FlexItem>
+ { __( 'Colors', __i18n_text_domain__ ) }
+ </FlexItem>
+ </Stack>
+ </Item>
+ </NavigatorButton>
+ { hasBackgroundScreen && (
+ <NavigatorButton
+ path="/background"
+ onClick={ () =>
+ recordEvent( 'styles_sidebar_navigation_click', {
+ path: 'background',
+ } )
+ }
+ >
+ <Item>
+ <Stack direction="row" align="center" gap="sm">
+ <Icon icon={ background } size={ 24 } />
+ <FlexItem>
+ { __( 'Background', __i18n_text_domain__ ) }
+ </FlexItem>
+ </Stack>
+ </Item>
+ </NavigatorButton>
+ ) }
+ <NavigatorButton
+ path="/layout"
+ onClick={ () =>
+ recordEvent( 'styles_sidebar_navigation_click', {
+ path: 'layout',
+ } )
+ }
+ >
+ <Item>
+ <Stack direction="row" align="center" gap="sm">
+ <Icon icon={ layout } size={ 24 } />
+ <FlexItem>
+ { __( 'Layout', __i18n_text_domain__ ) }
+ </FlexItem>
+ </Stack>
+ </Item>
+ </NavigatorButton>
+ </ItemGroup>
+ </Stack>
);
}
diff --git a/packages/js/email-editor/src/components/styles-sidebar/style.scss b/packages/js/email-editor/src/components/styles-sidebar/style.scss
index 0f3e823345a..9755690dc5c 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/style.scss
+++ b/packages/js/email-editor/src/components/styles-sidebar/style.scss
@@ -19,16 +19,12 @@
width: 100%;
}
- .woocommerce-email-editor-styles-header {
- margin-bottom: 0;
- }
-
.woocommerce-email-editor-styles-header-description {
padding: 0 16px;
}
- h3.edit-site-global-styles-subtitle {
- margin-bottom: 0;
+ .woocommerce-email-editor-styles-screen-body {
+ padding: 16px;
}
.single-column {
@@ -58,9 +54,4 @@
.interface-complementary-area-header__small {
display: none;
}
-
- // Hide border around styles screen root.
- .edit-site-global-styles-screen-root {
- box-shadow: none;
- }
}
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 c3670a065cf..2f5f444af03 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
@@ -6,7 +6,8 @@ import { store as editorStore } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import { blockDefault } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
-import { EmptyState, Notice, Stack } from '@wordpress/ui';
+import { Notice } from '@wordpress/components';
+import { EmptyState, Stack } from '@wordpress/ui';
// @ts-expect-error No types available for this component
import { BlockPreview } from '@wordpress/block-editor';
@@ -155,14 +156,12 @@ export function TemplateList( {
className="email-editor-template-select__list"
>
{ selectedCategory === 'recent' && (
- <Notice.Root intent="info">
- <Notice.Description>
- { __(
- 'Templates created on the legacy editor will not appear here.',
- __i18n_text_domain__
- ) }
- </Notice.Description>
- </Notice.Root>
+ <Notice status="info" isDismissible={ false }>
+ { __(
+ 'Templates created on the legacy editor will not appear here.',
+ __i18n_text_domain__
+ ) }
+ </Notice>
) }
<MemorizedTemplateListBox