From 0ca60f48761a3965e5d81f63f22b97f25c3973d9 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 13 Mar 2019 12:10:45 +0100 Subject: [PATCH] Try: Remove intrinsic block margins, rely on cascade This PR is round 2 of #8350. The ultimate goal is to make it easier for themes to style the editor, and to do less CSS overriding in order to do so. Problem: Currently, every single block is born with an intrinsic top and bottom margin. This margin matches the padding that sits between the block and the "selected block" border, plus 2px of space. This margin is the same regardless of whether the block needs a margin or not, and it is applied to nesting containers as well. In the case of the Columns block for example, that means the _column_ block (singular) has top and bottom margin, even though it shouldn't have that. Since then a number of changes have been made to the editor to make it a good time to revisit this: - The block outlines and toolbars have been refactored to not rely on margins at all to position themselves. These will still be painted correctly outside of the block, though they may overlap content visibly if a zero margin block is selected. - A more solid editor style system has been introduced that makes it easier to customize the editor to look like the front-end. As a result of this, feedback around CSS specificity and having to override these margins have surfaced to a higher degree. Proposed solution: By removing the intrinsic margin, we can re-apply it only to the blocks that actually _should_ be born with an intrinsic margin, such as paragraphs, lists, quotes ,etc. Some discussion points that are likely to surface: where should those vanilla styles be stored? How should they be structured so that themes can easily override them? Should these _not_ be loaded if a theme provides its own editor styles? Should we leverage the cascade and store these generically in one location or should these be applied in the style.scss file for every block in the library? Given these intrinsic margins have been present since day one, can we expect plugin authors to remember to add these margins themselves for every block they make? Is there a back-compat way we provide these default margins to blocks that rely on them? This is a try branch, in order to figure out answers to those questions. This first commit only does a few things: - It rearranges some CSS to put things in more logical locations. - It removes the intrinsic margins, then blanket reapplies them in that new vanilla stylesheet location with a new CSS variable. Next commits will explore how to remove that blanket reapplication, and try to provide those vanilla styles in a per-block basis. See also: https://github.com/WordPress/gutenberg/pull/13989#issuecomment-466359105 https://github.com/WordPress/gutenberg/pull/8350/files --- .../src/components/block-list/style.scss | 9 --- .../src/components/rich-text/style.scss | 3 +- packages/block-library/src/cover/style.scss | 2 +- .../block-library/src/heading/editor.scss | 37 ----------- packages/block-library/src/heading/theme.scss | 66 +++++++++++++++++++ .../block-library/src/paragraph/theme.scss | 4 ++ .../block-library/src/separator/theme.scss | 2 +- packages/block-library/src/style.scss | 29 +++++++- packages/block-library/src/theme.scss | 2 + .../src/components/text-editor/style.scss | 2 +- .../src/components/visual-editor/style.scss | 7 +- packages/edit-post/src/style.scss | 13 +--- packages/editor/src/editor-styles.scss | 4 +- 13 files changed, 111 insertions(+), 69 deletions(-) create mode 100644 packages/block-library/src/heading/theme.scss create mode 100644 packages/block-library/src/paragraph/theme.scss diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index bca7a3dc5f6547..b21da6083fc612 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -56,15 +56,6 @@ margin-left: -$block-padding; margin-right: -$block-padding; } - - // Space every block, and the default appender, using margins. - // This allows margins to collapse, which gives a better representation of how it looks on the frontend. - .block-editor-default-block-appender > .block-editor-default-block-appender__content, - > .block-editor-block-list__block > .block-editor-block-list__block-edit, - > .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit { - margin-top: $block-padding * 2 + $block-spacing; - margin-bottom: $block-padding * 2 + $block-spacing; - } } .block-editor-block-list__layout .block-editor-block-list__block { diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 16fdc282020e0c..5e9c703c869b55 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -4,8 +4,7 @@ position: relative; } -.block-editor-rich-text__editable { - margin: 0; +.editor-rich-text__editable { position: relative; // In HTML, leading and trailing spaces are not visible, and multiple spaces // elsewhere are visually reduced to one space. This rule prevents spaces diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index c11243504016aa..b918ffe4a88a7d 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -6,7 +6,7 @@ background-position: center center; min-height: 430px; width: 100%; - margin: 0 0 1.5em 0; + margin: 0 0 2em 0; display: flex; justify-content: center; align-items: center; diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss index 2a58a2a4155ba5..d794da53de2170 100644 --- a/packages/block-library/src/heading/editor.scss +++ b/packages/block-library/src/heading/editor.scss @@ -6,42 +6,5 @@ h5, h6 { color: inherit; - margin: 0; - } - - // These follow a Major Third type scale - h1 { - font-size: 2.44em; - } - - h2 { - font-size: 1.95em; - } - - h3 { - font-size: 1.56em; - } - - h4 { - font-size: 1.25em; - } - - h5 { - font-size: 1em; - } - - h6 { - font-size: 0.8em; - } - - // Adjust line spacing for larger headings. - h1, - h2, - h3 { - line-height: 1.4; - } - - h4 { - line-height: 1.5; } } diff --git a/packages/block-library/src/heading/theme.scss b/packages/block-library/src/heading/theme.scss new file mode 100644 index 00000000000000..b7cfe500c14c11 --- /dev/null +++ b/packages/block-library/src/heading/theme.scss @@ -0,0 +1,66 @@ +// These follow a Major Third type scale +h1 { + font-size: 2.44em; +} + +h2 { + font-size: 1.95em; +} + +h3 { + font-size: 1.56em; +} + +h4 { + font-size: 1.25em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: 0.8em; +} + +// Adjust line spacing for larger headings. +h1, +h2, +h3 { + line-height: 1.4; +} + +h4 { + line-height: 1.5; +} + +// Default margins. +h1 { + margin-top: 0.67em; + margin-bottom: 0.67em; +} + +h2 { + margin-top: 0.83em; + margin-bottom: 0.83em; +} + +h3 { + margin-top: 1em; + margin-bottom: 1em; +} + +h4 { + margin-top: 1.33em; + margin-bottom: 1.33em; +} + +h5 { + margin-top: 1.67em; + margin-bottom: 1.67em; +} + +h6 { + margin-top: 2.33em; + margin-bottom: 2.33em; +} diff --git a/packages/block-library/src/paragraph/theme.scss b/packages/block-library/src/paragraph/theme.scss new file mode 100644 index 00000000000000..fe039470f4fe6b --- /dev/null +++ b/packages/block-library/src/paragraph/theme.scss @@ -0,0 +1,4 @@ +p { + margin-top: 2em; + margin-bottom: 2em; +} diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 1d679a32ece8fc..2a3c258fc9e981 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -1,7 +1,7 @@ .wp-block-separator { border: none; border-bottom: 2px solid $dark-gray-100; - margin: 1.65em auto; + margin: 2em auto; // Default, thin style &:not(.is-style-wide):not(.is-style-dots) { diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index f9a53b92214177..6ecbdff8c507f1 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -120,7 +120,7 @@ font-size: 13px; } -.has-regular-font-size, // not used now, kept because of backward compatibility. +.has-regular-font-size, // Not used now, kept because of backward compatibility. .has-normal-font-size { font-size: 16px; } @@ -133,7 +133,32 @@ font-size: 36px; } -.has-larger-font-size, // not used now, kept because of backward compatibility. +.has-larger-font-size, // Not used now, kept because of backward compatibility. .has-huge-font-size { font-size: 42px; } + + +/** + * Vanilla Block Editor Styles + * These are base styles that apply across blocks, meant to provide a baseline. + * They are applied both to the editor, and the theme, so we should have as few of these as possible. + */ + +// Gutenberg specific elements +.editor-default-block-appender__content, +.components-placeholder { + margin-top: 2em; + margin-bottom: 2em; +} + +// Apply some base margins to blocks that need them. +// Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only. +img { + max-width: 100%; + height: auto; +} + +iframe { + width: 100%; +} diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss index 7a4dcce562f8ac..7795c46d535054 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -1,7 +1,9 @@ @import "./code/theme.scss"; +@import "./heading/theme.scss"; @import "./preformatted/theme.scss"; @import "./pullquote/theme.scss"; @import "./quote/theme.scss"; +@import "./paragraph/theme.scss"; @import "./search/theme.scss"; @import "./separator/theme.scss"; @import "./table/theme.scss"; diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index e925344dc9e3a2..4168a23c297a99 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -30,7 +30,7 @@ .editor-post-title__block { textarea { border: $border-width solid $light-gray-500; - margin-bottom: 4px; + margin-bottom: $block-spacing; padding: $block-padding; } diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index aa3ee7cbc79958..b4d5f6740534a5 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -70,9 +70,10 @@ margin-left: auto; margin-right: auto; - // Space title similarly to other blocks. - // This uses negative margins so as to not affect the default block margins. - margin-bottom: -$block-padding - $block-spacing - $border-width - $border-width; + // Apply default block margin below the post title. + // This ensures the first block on the page is almost in a good position. + // This rule can be retired once the title becomes an actual block. + margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style. // Stack borders. > div { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 4b8b9e39491402..8c99c4c8c0bf0b 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -112,8 +112,8 @@ body.block-editor-page { } .block-editor__container { - // on mobile the main content area has to scroll - // otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻ + // On mobile the main content area has to scroll, otherwise you can + // invoke the overscroll bounce on the non-scrolling container, for a bad experience. @include break-small { position: absolute; top: 0; @@ -132,15 +132,6 @@ body.block-editor-page { } } - img { - max-width: 100%; - height: auto; - } - - iframe { - width: 100%; - } - .components-navigate-regions { height: 100%; } diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index 1efafd9445f49a..aa851eb7e0fc6b 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -12,8 +12,8 @@ p { ul, ol { - margin: 0; - padding: 0; + margin: 1em 0; + padding: inherit; li { // This overrides a bottom margin globally applied to list items in wp-admin.