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
@@ -101,33 +101,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-mobile-preview {
|
|
||||||
.wp-block-columns {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix for mobile preview height
|
// Fix for mobile preview height
|
||||||
&.is-mobile-preview {
|
&.is-mobile-preview {
|
||||||
> div {
|
> div {
|
||||||
@@ -144,48 +117,6 @@
|
|||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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
|
|
||||||
}
|
|
||||||
|
|
||||||
// Resetting the margin for images in the editor to avoid unexpected spacing
|
|
||||||
.editor-styles-wrapper .wp-block-image {
|
|
||||||
figcaption {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alignleft,
|
|
||||||
&.alignright {
|
|
||||||
margin-inline: 0 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
&.aligncenter {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.alignright {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-styles-wrapper {
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-mobile-preview {
|
|
||||||
// Ensure image resizes to fit the mobile preview
|
|
||||||
figure > div {
|
|
||||||
height: auto !important;
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide the advanced settings in the sidebar. This panel is not used in the email editor at this moment.
|
// Hide the advanced settings in the sidebar. This panel is not used in the email editor at this moment.
|
||||||
.block-editor-block-inspector__advanced {
|
.block-editor-block-inspector__advanced {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -55,9 +55,9 @@ class SettingsController {
|
|||||||
$settings['allowedBlockTypes'] = self::ALLOWED_BLOCK_TYPES;
|
$settings['allowedBlockTypes'] = self::ALLOWED_BLOCK_TYPES;
|
||||||
// Assets for iframe editor (component styles, scripts, etc.)
|
// Assets for iframe editor (component styles, scripts, etc.)
|
||||||
$settings['__unstableResolvedAssets'] = $this->iframeAssets;
|
$settings['__unstableResolvedAssets'] = $this->iframeAssets;
|
||||||
$flexEmailLayoutStyles = file_get_contents(__DIR__ . '/flex-email-layout.css');
|
$editorContentStyles = file_get_contents(__DIR__ . '/editor-content.css');
|
||||||
$settings['styles'] = [
|
$settings['styles'] = [
|
||||||
['css' => $flexEmailLayoutStyles],
|
['css' => $editorContentStyles],
|
||||||
];
|
];
|
||||||
|
|
||||||
$settings['__experimentalFeatures'] = $themeSettings;
|
$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