Move styles for content in email editor to one place
[MAILPOET-6249]
This commit is contained in:
Rostislav Wolny
committed by
Jan Lysý
Jan Lysý
parent
1c2078d698
commit
000bbd993b
@@ -55,9 +55,9 @@ class SettingsController {
|
||||
$settings['allowedBlockTypes'] = self::ALLOWED_BLOCK_TYPES;
|
||||
// Assets for iframe editor (component styles, scripts, etc.)
|
||||
$settings['__unstableResolvedAssets'] = $this->iframeAssets;
|
||||
$flexEmailLayoutStyles = file_get_contents(__DIR__ . '/flex-email-layout.css');
|
||||
$editorContentStyles = file_get_contents(__DIR__ . '/editor-content.css');
|
||||
$settings['styles'] = [
|
||||
['css' => $flexEmailLayoutStyles],
|
||||
['css' => $editorContentStyles],
|
||||
];
|
||||
|
||||
$settings['__experimentalFeatures'] = $themeSettings;
|
||||
|
||||
125
packages/php/email-editor/src/Engine/editor-content.css
Normal file
125
packages/php/email-editor/src/Engine/editor-content.css
Normal file
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
* Styles for the email editor.
|
||||
*/
|
||||
/*
|
||||
* Flex layout used for buttons block for email editor.
|
||||
*/
|
||||
.is-layout-email-flex {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
:where(body .is-layout-flex) {
|
||||
gap: var(--wp--style--block-gap, 16px);
|
||||
}
|
||||
|
||||
.is-mobile-preview .is-layout-email-flex {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-mobile-preview .is-layout-email-flex .block-editor-block-list__block {
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-mobile-preview .is-layout-email-flex .wp-block-button__link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Email Editor specific styles for vertical gap between blocks in column and group.
|
||||
* This is needed because we disable layout for core/group, core/column and core/columns blocks, and .is-layout-flex is not applied.
|
||||
*/
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile)
|
||||
> .wp-block-column
|
||||
> .wp-block:first-child,
|
||||
.wp-block-group > .wp-block:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block,
|
||||
.wp-block-group > .wp-block {
|
||||
margin-bottom: var(--wp--style--block-gap, 16px);
|
||||
margin-top: var(--wp--style--block-gap, 16px);
|
||||
}
|
||||
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile)
|
||||
> .wp-block-column
|
||||
> .wp-block:last-child,
|
||||
.wp-block-group > .wp-block:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Use box sizing border box for columns that have defined a width (they have flex-basis set).
|
||||
*/
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile)
|
||||
> .wp-block-column[style*='flex-basis'] {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* For the WYSIWYG experience we don't want to display any margins between blocks in the editor
|
||||
*/
|
||||
.wp-block {
|
||||
clear: both; // for ensuring that floated elements (images) are cleared
|
||||
}
|
||||
|
||||
/*
|
||||
* Image block enhancements
|
||||
*/
|
||||
.wp-block-image figcaption {
|
||||
/* Resetting the margin for images in the editor to avoid unexpected spacing */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-image.alignleft,
|
||||
.wp-block-image.alignright {
|
||||
margin-inline: 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-block-image.aligncenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.wp-block-image.alignright {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set default padding-left to have consistent default look in editor and in email
|
||||
* This also overrides the default values in browsers for padding-inline-start
|
||||
*/
|
||||
ul,
|
||||
ol,
|
||||
ul.has-background,
|
||||
ol.has-background {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override default button border radius which is set in core to 9999px
|
||||
*/
|
||||
.wp-block-button__link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Mobile preview fixes
|
||||
*/
|
||||
.is-mobile-preview figure > div {
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.is-mobile-preview .wp-block-columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-mobile-preview .wp-block-column {
|
||||
box-sizing: border-box;
|
||||
/* override flex-basis set in style attribute to fix the height of the column in mobile preview. Blocks overriding is as a part of style.css in blocks-library */
|
||||
flex-basis: auto !important;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
.is-layout-email-flex {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
:where(body .is-layout-flex) {
|
||||
gap: var(--wp--style--block-gap, 16px);
|
||||
}
|
||||
|
||||
.is-mobile-preview .is-layout-email-flex {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-mobile-preview .is-layout-email-flex .block-editor-block-list__block {
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-mobile-preview .is-layout-email-flex .wp-block-button__link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Email Editor specific styles for vertical gap between blocks in column and group.
|
||||
* This is needed because we disable layout for core/group, core/column and core/columns blocks, and .is-layout-flex is not applied.
|
||||
*/
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile)
|
||||
> .wp-block-column
|
||||
> .wp-block:first-child,
|
||||
.wp-block-group > .wp-block:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block,
|
||||
.wp-block-group > .wp-block {
|
||||
margin-bottom: var(--wp--style--block-gap, 16px);
|
||||
margin-top: var(--wp--style--block-gap, 16px);
|
||||
}
|
||||
|
||||
.wp-block-columns:not(.is-not-stacked-on-mobile)
|
||||
> .wp-block-column
|
||||
> .wp-block:last-child,
|
||||
.wp-block-group > .wp-block:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user