Load and apply layout styles in the email editor

This commit enables us to load styles for editor content.
The rules are prefixed by .editor-styles-wrapper class
[MAILPOET-5715]
This commit is contained in:
Rostislav Wolny
2023-11-13 18:44:16 +04:00
committed by Jan Lysý
parent 3de159dd03
commit 5eb9551d28
2 changed files with 10 additions and 2 deletions

View File

@ -11,6 +11,9 @@ import {
// @ts-ignore No types for this exist yet.
__experimentalUseResizeCanvas as useResizeCanvas,
BlockSelectionClearer,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';
import { uploadMedia } from '@wordpress/media-utils';
import classnames from 'classnames';
@ -147,6 +150,10 @@ export function BlockEditor() {
'is-desktop-preview': previewDeviceType === 'Desktop',
})}
>
<EditorStyles
styles={settings.styles}
scope=".editor-styles-wrapper"
/>
<BlockSelectionClearer
className="editor-styles-wrapper block-editor-writing-flow"
style={{ width: '100%' }}
@ -157,7 +164,7 @@ export function BlockEditor() {
<BlockTools>
<WritingFlow>
<ObserveTyping>
<BlockList />
<BlockList className="is-layout-constrained" />
</ObserveTyping>
</WritingFlow>
</BlockTools>

View File

@ -102,7 +102,8 @@ class SettingsController {
$settings = array_merge($coreDefaultSettings, self::DEFAULT_SETTINGS);
$settings['allowedBlockTypes'] = self::ALLOWED_BLOCK_TYPES;
$settings['defaultEditorStyles'] = [[ 'css' => $this->getEmailContentStyles() ]];
$settings['styles'] = [['css' => wp_get_global_stylesheet(['base-layout-styles'])]];
$settings['__experimentalFeatures'] = $coreSettings;
return $settings;