diff --git a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx index 8fbc5803f1..924d8f5671 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx +++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx @@ -14,6 +14,9 @@ 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. + BlockContextProvider, } from '@wordpress/block-editor'; import { UnsavedChangesWarning } from '@wordpress/editor'; import { uploadMedia } from '@wordpress/media-utils'; @@ -33,7 +36,7 @@ import { Header } from '../header'; import { ListviewSidebar } from '../listview-sidebar/listview-sidebar'; import { InserterSidebar } from '../inserter-sidebar/inserter-sidebar'; import { EditorNotices, EditorSnackbars, SentEmailNotice } from '../notices'; -import { StylesSidebar } from '../styles-sidebar'; +import { StylesSidebar, ThemeStyles } from '../styles-sidebar'; import { FooterCredit } from './footer-credit'; export function BlockEditor() { @@ -128,87 +131,97 @@ export function BlockEditor() { } return ( - - - - - - - - } - editorNotices={} - notices={} - content={ - <> - -
- -
+ + + + + + + } + editorNotices={} + notices={} + content={ + <> + +
+ - - - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore BlockEditorKeyboardShortcuts.Register has no types */} - - - - - - - - - -
- {!isPremiumPluginActive && ( - - )} - -
- - } - sidebar={} - secondarySidebar={ - (isInserterSidebarOpened && ) || - (isListviewSidebarOpened && ) - } - /> - {/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */} - - + + + + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore BlockEditorKeyboardShortcuts.Register has no types */} + + + + + + + + + +
+ {!isPremiumPluginActive && ( + + )} + + + + } + sidebar={} + secondarySidebar={ + (isInserterSidebarOpened && ) || + (isListviewSidebarOpened && ) + } + /> + {/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */} + +
+ ); } diff --git a/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/index.ts b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/index.ts index 898d53cea3..0a81ebade4 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/index.ts +++ b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/index.ts @@ -1,3 +1,4 @@ import './index.scss'; export * from './styles-sidebar'; +export * from './theme-styles'; diff --git a/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/theme-styles.tsx b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/theme-styles.tsx new file mode 100644 index 0000000000..932353a3a4 --- /dev/null +++ b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/theme-styles.tsx @@ -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 ; +} diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php index b25436ad2d..03d574937c 100644 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php +++ b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php @@ -6,12 +6,14 @@ use MailPoet\Config\ServicesChecker; use MailPoet\EmailEditor\Engine\Renderer\ContentRenderer\ContentRenderer; use MailPoet\EmailEditor\Engine\SettingsController; use MailPoet\Util\CdnAssetUrl; +use MailPoet\EmailEditor\Engine\ThemeController; use MailPoet\Util\pQuery\DomNode; use MailPoetVendor\Html2Text\Html2Text; class Renderer { private \MailPoetVendor\CSS $cssInliner; private SettingsController $settingsController; + private ThemeController $themeController; private ContentRenderer $contentRenderer; private CdnAssetUrl $cdnAssetUrl; private ServicesChecker $servicesChecker; @@ -27,18 +29,22 @@ class Renderer { SettingsController $settingsController, ContentRenderer $contentRenderer, CdnAssetUrl $cdnAssetUrl, - ServicesChecker $servicesChecker + ServicesChecker $servicesChecker, + ThemeController $themeController ) { $this->cssInliner = $cssInliner; $this->settingsController = $settingsController; $this->contentRenderer = $contentRenderer; $this->cdnAssetUrl = $cdnAssetUrl; $this->servicesChecker = $servicesChecker; + $this->themeController = $themeController; } public function render(\WP_Post $post, string $subject, string $preHeader, string $language, $metaRobots = ''): array { $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']; $contentBackground = $themeStyles['color']['background']['content']; diff --git a/mailpoet/lib/EmailEditor/Engine/SettingsController.php b/mailpoet/lib/EmailEditor/Engine/SettingsController.php index 1fac1da4a0..76a8475885 100644 --- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php +++ b/mailpoet/lib/EmailEditor/Engine/SettingsController.php @@ -39,7 +39,6 @@ class SettingsController { public function getSettings(): array { $coreDefaultSettings = get_default_block_editor_settings(); - $editorTheme = $this->getTheme(); $themeSettings = $this->themeController->getSettings(); // body selector is later transformed to .editor-styles-wrapper @@ -54,8 +53,6 @@ class SettingsController { $flexEmailLayoutStyles = file_get_contents(__DIR__ . '/flex-email-layout.css'); $settings['styles'] = [ - ['css' => wp_get_global_stylesheet(['base-layout-styles'])], - ['css' => $editorTheme->get_stylesheet()], ['css' => $contentVariables], ['css' => $flexEmailLayoutStyles], ];