Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add theme styles component for email editor

Browse Source 
[MAILPOET-5640]
This commit is contained in:
Jan Lysý
2024-03-13 09:58:17 +01:00
committed by Jan Lysý
parent 1828f16273
commit 95f3766b4d
5 changed files with 142 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
View File

@@ -14,6 +14,9 @@ import {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
__unstableEditorStyles as EditorStyles, __unstableEditorStyles as EditorStyles,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
BlockContextProvider,
} from '@wordpress/block-editor'; } from '@wordpress/block-editor';
import { UnsavedChangesWarning } from '@wordpress/editor'; import { UnsavedChangesWarning } from '@wordpress/editor';
import { uploadMedia } from '@wordpress/media-utils'; import { uploadMedia } from '@wordpress/media-utils';
@@ -33,7 +36,7 @@ import { Header } from '../header';
import { ListviewSidebar } from '../listview-sidebar/listview-sidebar'; import { ListviewSidebar } from '../listview-sidebar/listview-sidebar';
import { InserterSidebar } from '../inserter-sidebar/inserter-sidebar'; import { InserterSidebar } from '../inserter-sidebar/inserter-sidebar';
import { EditorNotices, EditorSnackbars, SentEmailNotice } from '../notices'; import { EditorNotices, EditorSnackbars, SentEmailNotice } from '../notices';
import { StylesSidebar } from '../styles-sidebar'; import { StylesSidebar, ThemeStyles } from '../styles-sidebar';
import { FooterCredit } from './footer-credit'; import { FooterCredit } from './footer-credit';
export function BlockEditor() { export function BlockEditor() {
@@ -128,87 +131,97 @@ export function BlockEditor() {
} }
return ( return (
<BlockEditorProvider // BlockContextProvider has set templateSlug because the hook `useGlobalStylesOutputWithConfig` doesn't render layout padding without it.
value={blocks} <BlockContextProvider
onInput={onInput} value={{
onChange={onChange} postId,
settings={settings} postType: 'mailpoet_email',
useSubRegistry={false} templateSlug: 'mailpoet-email',
}}
> >
<FullscreenMode isActive={isFullscreenActive} /> <BlockEditorProvider
<UnsavedChangesWarning /> value={blocks}
<AutosaveMonitor /> onInput={onInput}
<SentEmailNotice /> onChange={onChange}
<Sidebar /> settings={settings}
<StylesSidebar /> useSubRegistry={false}
<InterfaceSkeleton >
className={className} <FullscreenMode isActive={isFullscreenActive} />
header={<Header />} <UnsavedChangesWarning />
editorNotices={<EditorNotices />} <AutosaveMonitor />
notices={<EditorSnackbars />} <SentEmailNotice />
content={ <Sidebar />
<> <StylesSidebar />
<EditorNotices /> <InterfaceSkeleton
<div className="edit-post-visual-editor"> className={className}
<BlockSelectionClearer header={<Header />}
className="edit-post-visual-editor__content-area" editorNotices={<EditorNotices />}
style={contentAreaStyles} notices={<EditorSnackbars />}
> content={
<div <>
style={inlineStyles} <EditorNotices />
className={classnames({ <div className="edit-post-visual-editor">
'is-mobile-preview': previewDeviceType === 'Mobile', <BlockSelectionClearer
'is-desktop-preview': previewDeviceType === 'Desktop', className="edit-post-visual-editor__content-area"
})} style={contentAreaStyles}
> >
<EditorStyles <div
styles={settings.styles} style={inlineStyles}
scope=".editor-styles-wrapper" className={classnames({
/> 'is-mobile-preview': previewDeviceType === 'Mobile',
<BlockSelectionClearer 'is-desktop-preview': previewDeviceType === 'Desktop',
className="editor-styles-wrapper block-editor-writing-flow" })}
style={{ width: '100%' }}
> >
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} <ThemeStyles />
{/* @ts-ignore BlockEditorKeyboardShortcuts.Register has no types */} <EditorStyles
<BlockEditorKeyboardShortcuts.Register /> styles={settings.styles}
<BlockTools> scope=".editor-styles-wrapper"
<WritingFlow> />
<ObserveTyping> <BlockSelectionClearer
<BlockList className="editor-styles-wrapper block-editor-writing-flow"
className={classnames( style={{ width: '100%' }}
{ >
'is-mobile-preview': {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
previewDeviceType === 'Mobile', {/* @ts-ignore BlockEditorKeyboardShortcuts.Register has no types */}
}, <BlockEditorKeyboardShortcuts.Register />
'is-layout-constrained has-global-padding', <BlockTools>
)} <WritingFlow>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment <ObserveTyping>
// @ts-ignore We have an older package of @wordpress/block-editor that doesn't contain the correct type <BlockList
layout={layout} className={classnames(
/> {
</ObserveTyping> 'is-mobile-preview':
</WritingFlow> previewDeviceType === 'Mobile',
</BlockTools> },
</BlockSelectionClearer> 'is-layout-constrained has-global-padding',
</div> )}
{!isPremiumPluginActive && ( // eslint-disable-next-line @typescript-eslint/ban-ts-comment
<FooterCredit // @ts-ignore We have an older package of @wordpress/block-editor that doesn't contain the correct type
logoSrc={`${cdnUrl}email-editor/logo-footer.png`} layout={layout}
/> />
)} </ObserveTyping>
</BlockSelectionClearer> </WritingFlow>
</div> </BlockTools>
</> </BlockSelectionClearer>
} </div>
sidebar={<ComplementaryArea.Slot scope={storeName} />} {!isPremiumPluginActive && (
secondarySidebar={ <FooterCredit
(isInserterSidebarOpened && <InserterSidebar />) || logoSrc={`${cdnUrl}email-editor/logo-footer.png`}
(isListviewSidebarOpened && <ListviewSidebar />) />
} )}
/> </BlockSelectionClearer>
{/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */} </div>
<BlockCompatibilityWarnings /> </>
</BlockEditorProvider> }
sidebar={<ComplementaryArea.Slot scope={storeName} />}
secondarySidebar={
(isInserterSidebarOpened && <InserterSidebar />) ||
(isListviewSidebarOpened && <ListviewSidebar />)
}
/>
{/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */}
<BlockCompatibilityWarnings />
</BlockEditorProvider>
</BlockContextProvider>
); );
} }

1
mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/index.ts
View File

@@ -1,3 +1,4 @@
import './index.scss'; import './index.scss';
export * from './styles-sidebar'; export * from './styles-sidebar';
export * from './theme-styles';

40
mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/theme-styles.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { merge } from 'lodash';
import {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
__unstableEditorStyles as EditorStyles,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
privateApis as blockEditorPrivateApi,
} from '@wordpress/block-editor';
import { unlock } from '../../../lock-unlock';
import { EmailStyles, storeName } from '../../store';
const { useGlobalStylesOutputWithConfig } = unlock(blockEditorPrivateApi);
export function ThemeStyles(): JSX.Element {
const { theme } = useSelect(
(select) => ({
theme: select(storeName).getTheme(),
}),
[],
);
const [mailpoetEmailData] = useEntityProp(
'postType',
'mailpoet_email',
'mailpoet_data',
);
const mergedConfig = useMemo(
() => merge({}, theme, mailpoetEmailData?.theme) as EmailStyles,
[theme, mailpoetEmailData],
);
const [styles] = useGlobalStylesOutputWithConfig(mergedConfig);
return <EditorStyles styles={styles} scope=".editor-styles-wrapper" />;
}

10
mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
View File

@@ -6,12 +6,14 @@ use MailPoet\Config\ServicesChecker;
use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer; use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer;
use MailPoet\EmailEditor\Engine\SettingsController; use MailPoet\EmailEditor\Engine\SettingsController;
use MailPoet\Util\CdnAssetUrl; use MailPoet\Util\CdnAssetUrl;
use MailPoet\EmailEditor\Engine\ThemeController;
use MailPoet\Util\pQuery\DomNode; use MailPoet\Util\pQuery\DomNode;
use MailPoetVendor\Html2Text\Html2Text; use MailPoetVendor\Html2Text\Html2Text;
class Renderer { class Renderer {
private \MailPoetVendor\CSS $cssInliner; private \MailPoetVendor\CSS $cssInliner;
private SettingsController $settingsController; private SettingsController $settingsController;
private ThemeController $themeController;
private ContentRenderer $contentRenderer; private ContentRenderer $contentRenderer;
private CdnAssetUrl $cdnAssetUrl; private CdnAssetUrl $cdnAssetUrl;
private ServicesChecker $servicesChecker; private ServicesChecker $servicesChecker;
@@ -27,18 +29,22 @@ class Renderer {
SettingsController $settingsController, SettingsController $settingsController,
ContentRenderer $contentRenderer, ContentRenderer $contentRenderer,
CdnAssetUrl $cdnAssetUrl, CdnAssetUrl $cdnAssetUrl,
ServicesChecker $servicesChecker ServicesChecker $servicesChecker,
ThemeController $themeController
) { ) {
$this->cssInliner = $cssInliner; $this->cssInliner = $cssInliner;
$this->settingsController = $settingsController; $this->settingsController = $settingsController;
$this->contentRenderer = $contentRenderer; $this->contentRenderer = $contentRenderer;
$this->cdnAssetUrl = $cdnAssetUrl; $this->cdnAssetUrl = $cdnAssetUrl;
$this->servicesChecker = $servicesChecker; $this->servicesChecker = $servicesChecker;
$this->themeController = $themeController;
} }
public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array { public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array {
$layout = $this->settingsController->getLayout(); $layout = $this->settingsController->getLayout();
$themeStyles = $this->settingsController->getEmailStyles(); $theme = $this->themeController->getTheme();
$theme = apply_filters('mailpoet_email_editor_rendering_theme_styles', $theme, $post);
$themeStyles = $theme->get_data()['styles'];
$padding = $themeStyles['spacing']['padding']; $padding = $themeStyles['spacing']['padding'];
$contentBackground = $themeStyles['color']['background']['content']; $contentBackground = $themeStyles['color']['background']['content'];

3
mailpoet/lib/EmailEditor/Engine/SettingsController.php
View File

@@ -39,7 +39,6 @@ class SettingsController {
public function getSettings(): array { public function getSettings(): array {
$coreDefaultSettings = get_default_block_editor_settings(); $coreDefaultSettings = get_default_block_editor_settings();
$editorTheme = $this->getTheme();
$themeSettings = $this->themeController->getSettings(); $themeSettings = $this->themeController->getSettings();
// body selector is later transformed to .editor-styles-wrapper // body selector is later transformed to .editor-styles-wrapper
@@ -54,8 +53,6 @@ class SettingsController {
$flexEmailLayoutStyles = file_get_contents(__DIR__ . '/flex-email-layout.css'); $flexEmailLayoutStyles = file_get_contents(__DIR__ . '/flex-email-layout.css');
$settings['styles'] = [ $settings['styles'] = [
['css' => wp_get_global_stylesheet(['base-layout-styles'])],
['css' => $editorTheme->get_stylesheet()],
['css' => $contentVariables], ['css' => $contentVariables],
['css' => $flexEmailLayoutStyles], ['css' => $flexEmailLayoutStyles],
]; ];