From 2ca611bacbae8c3d37bf88e54d01bb69bd7bffe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Lys=C3=BD?= Date: Thu, 9 Nov 2023 17:34:45 +0400 Subject: [PATCH] Reset default margin and set default padding-left Because we want to have the best user experience for most of email client, we reset the margin and set padding-left for the same look. [MAILPOET-5645] --- .../engine/components/block-editor/index.scss | 16 ++++++++++++++++ .../lib/EmailEditor/Engine/Renderer/styles.css | 11 +++++++++++ 2 files changed, 27 insertions(+) diff --git a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss index 4650d91832..d1a0886d12 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss +++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss @@ -54,6 +54,22 @@ .edit-post-visual-editor__content-area { display: block; // Override flex to achieve height follow the length of the document + + // Because block editor uses .has-background class after setting a background color + // we want to reset margin and padding for this class to avoid unexpected spacing + .has-background { + margin: 0; + padding: 0; + } + + // 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; + } } // For the WYSIWYG experience we don't want to display any margins between blocks in the editor diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css b/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css index d0e5be44ec..aa9e5e0e5a 100644 --- a/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css +++ b/mailpoet/lib/EmailEditor/Engine/Renderer/styles.css @@ -36,6 +36,17 @@ p { margin: 13px 0; } +ul, +ol, +li { + margin: 0; +} +/* Wa want ensure the same design for all email clients */ +ul, +ol { + padding-left: 40px; +} + /* https://www.emailonacid.com/blog/article/email-development/tips-for-coding-email-preheaders */ .email_preheader, .email_preheader * {