diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss index ed6db103f0f1c..3532dac28d63d 100644 --- a/assets/stylesheets/_variables.scss +++ b/assets/stylesheets/_variables.scss @@ -9,6 +9,7 @@ $default-line-height: 1.4; $editor-font: "Noto Serif", serif; $editor-html-font: Menlo, Consolas, monaco, monospace; $editor-font-size: 16px; +$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding). $text-editor-font-size: 14px; $editor-line-height: 1.8; $big-font-size: 18px; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 7e1a87bc2febd..cbd3098e765d6 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/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss index 6a268661c34e4..b98472ede59b8 100644 --- a/packages/block-editor/src/components/default-block-appender/style.scss +++ b/packages/block-editor/src/components/default-block-appender/style.scss @@ -13,6 +13,8 @@ outline: $border-width solid transparent; transition: 0.2s outline; resize: none; + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; // Emulate the dimensions of a paragraph block. // On mobile and in nested contexts, the plus to add blocks shows up on the right. diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 1b8a089ba6789..f640130958a0c 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -10,14 +10,17 @@ } .wp-block-button { - display: inline-block; - margin-bottom: 0; position: relative; [contenteditable] { cursor: text; } + // Don't let placeholder expand parent width. + .block-editor-rich-text { + display: inline-block; + } + // Make placeholder text white unless custom colors or outline versions are chosen. &:not(.has-text-color):not(.is-style-outline) .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable { color: $white; diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index a9006f488d5e7..1ba7da6425f5f 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -2,7 +2,6 @@ $blocks-button__height: 56px; .wp-block-button { color: $white; - margin-bottom: 1.5em; &.aligncenter { text-align: center; diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index a352eb29c845f..7830f7780880a 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -107,12 +107,18 @@ margin-left: -$border-width; } - // The Column block is a child of the Columns block and is mostly a passthrough container. - // Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins. - // @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way. + // Zero out margins. + > [data-block] { + margin-top: 0; + margin-bottom: 0; + } + + // The Columns block is a flex-container, therefore it nullifies margin collapsing. + // Therefore, blocks inside this will appear to create a double margin. + // We compensate for this using negative margins. > div > .block-core-columns > .editor-inner-blocks { - margin-top: -$block-padding - $block-padding; - margin-bottom: -$block-padding - $block-padding; + margin-top: -$default-block-margin; + margin-bottom: -$default-block-margin; } } } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 2cc0cf0ec4999..ab2ec375ca1e8 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -1,5 +1,6 @@ .wp-block-columns { display: flex; + margin-bottom: $default-block-margin; // Responsiveness: Allow wrapping on mobile. flex-wrap: wrap; diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index e3fc37169eaea..a0c659e1b9368 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -6,7 +6,6 @@ background-position: center center; min-height: 430px; width: 100%; - margin: 0 0 1.5em 0; display: flex; justify-content: center; align-items: center; diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index cbdcda4e203ac..c0c465d33ffbf 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -10,7 +10,6 @@ @import "./classic/editor.scss"; @import "./gallery/editor.scss"; @import "./group/editor.scss"; -@import "./heading/editor.scss"; @import "./html/editor.scss"; @import "./image/editor.scss"; @import "./latest-comments/editor.scss"; @@ -34,3 +33,18 @@ @import "./text-columns/editor.scss"; @import "./verse/editor.scss"; @import "./video/editor.scss"; + + +/** + * Editor Normalization Styles + * + * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper. + * This allows us to create normalization styles that are easily overridden by editor styles. + */ + +// Provide every block with a default base margin. This margin provides a consistent spacing +// between blocks in the editor. +[data-block] { + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; +} diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 3232b5c37a13e..419fc365f468a 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -1,8 +1,15 @@ -// Override the default list style type _only in the editor_ -// to avoid :not() selector specificity issues. -// See https://github.com/WordPress/gutenberg/pull/10358 -ul.wp-block-gallery li { - list-style-type: none; +ul.wp-block-gallery { + // Override the default list style type _only in the editor_ + // to avoid :not() selector specificity issues. + // See https://github.com/WordPress/gutenberg/pull/10358 + li { + list-style-type: none; + } + + // Override the bottom margin every block gets. + .is-selected & { + margin-bottom: 0; + } } .blocks-gallery-item { diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss deleted file mode 100644 index 2a58a2a4155ba..0000000000000 --- a/packages/block-library/src/heading/editor.scss +++ /dev/null @@ -1,47 +0,0 @@ -.wp-block-heading { - h1, - h2, - h3, - h4, - 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/html/editor.scss b/packages/block-library/src/html/editor.scss index 7e93bd2fe5688..2990803cb8eaa 100644 --- a/packages/block-library/src/html/editor.scss +++ b/packages/block-library/src/html/editor.scss @@ -1,17 +1,21 @@ -.wp-block-html .block-editor-plain-text { - font-family: $editor-html-font; - color: $dark-gray-800; - padding: 0.8em 1em; - border: 1px solid $light-gray-500; - border-radius: 4px; +.wp-block-html { + margin-bottom: $default-block-margin; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size; - @include break-small { - font-size: $default-font-size; - } + .block-editor-plain-text { + font-family: $editor-html-font; + color: $dark-gray-800; + padding: 0.8em 1em; + border: 1px solid $light-gray-500; + border-radius: 4px; + + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } - &:focus { - box-shadow: none; + &:focus { + box-shadow: none; + } } } diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss index b4706db686679..5b5edb5b5c310 100644 --- a/packages/block-library/src/more/editor.scss +++ b/packages/block-library/src/more/editor.scss @@ -1,6 +1,8 @@ .block-editor-block-list__block[data-type="core/more"] { max-width: 100%; text-align: center; + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; } .block-editor .wp-block-more { // needs specificity diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss index 3b5dd437e6f86..99f3679e5ae60 100644 --- a/packages/block-library/src/nextpage/editor.scss +++ b/packages/block-library/src/nextpage/editor.scss @@ -1,5 +1,7 @@ .block-editor-block-list__block[data-type="core/nextpage"] { max-width: 100%; + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; } .wp-block-nextpage { diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 41f7ba2a45ee8..46bb986758629 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,6 +1,7 @@ .wp-block-pullquote { border-top: 4px solid $dark-gray-500; border-bottom: 4px solid $dark-gray-500; + margin-bottom: $default-block-margin; color: $dark-gray-600; cite, diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss index 3826e0a998b3e..12455da81199b 100644 --- a/packages/block-library/src/quote/editor.scss +++ b/packages/block-library/src/quote/editor.scss @@ -1,7 +1,3 @@ -.wp-block-quote { - margin: 0; - - &__citation { - font-size: $default-font-size; - } +.wp-block-quote__citation { + font-size: $default-font-size; } diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index 8e6edd7d7ff86..c3b684b8e2b15 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,6 +1,6 @@ .wp-block-quote { border-left: 4px solid $black; - margin: 20px 0; + margin: 0 0 $default-block-margin 0; padding-left: 1em; cite, diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index 1d679a32ece8f..80834e1ebf839 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -1,7 +1,8 @@ .wp-block-separator { border: none; border-bottom: 2px solid $dark-gray-100; - margin: 1.65em auto; + margin-left: auto; + margin-right: auto; // Default, thin style &:not(.is-style-wide):not(.is-style-dots) { diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss index ffa3592b84868..cbb22c2ba1508 100644 --- a/packages/block-library/src/shortcode/editor.scss +++ b/packages/block-library/src/shortcode/editor.scss @@ -5,6 +5,7 @@ background-color: $dark-opacity-light-200; font-size: $default-font-size; font-family: $default-font; + margin-bottom: $default-block-margin; label { display: flex; diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss index ad8a55cea3499..77fba2118222a 100644 --- a/packages/block-library/src/spacer/editor.scss +++ b/packages/block-library/src/spacer/editor.scss @@ -1,3 +1,7 @@ .block-library-spacer__resize-container.is-selected { background: $light-gray-200; } + +.block-library-spacer__resize-container { + margin-bottom: $default-block-margin; +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 285c139b3b0fa..83588d4f223dd 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -141,8 +141,9 @@ /** * Vanilla Block Styles - * These are base styles that apply across blocks. - * We should have as few of these as possible. + * 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. + * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only. */ // Caption styles. @@ -151,3 +152,13 @@ figcaption { margin-top: 0.5em; } + +// Apply some base styles to blocks that need them. +img { + max-width: 100%; + height: auto; +} + +iframe { + width: 100%; +} diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 895ea0d4065c8..63938e69498e9 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -1,5 +1,5 @@ .components-placeholder { - margin: 0; + margin-bottom: $default-block-margin; display: flex; flex-direction: column; align-items: center; @@ -8,10 +8,8 @@ min-height: 200px; width: 100%; text-align: center; - font-family: $default-font; - font-size: $default-font-size; - // use opacity to work in various editor styles + // Use opacity to work in various editor styles. background: $dark-opacity-light-200; .is-dark-theme & { @@ -19,6 +17,13 @@ } } +.components-placeholder__instructions, +.components-placeholder__label, +.components-placeholder__fieldset { + font-family: $default-font; + font-size: $default-font-size; +} + .components-placeholder__label { display: flex; align-items: center; diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index 159d208c4fd10..234eb46917b24 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; &:focus { diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index d0ec876d55315..5910de04cd026 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -63,9 +63,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 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 ae0225bc6c97e..be47d4c70dc96 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -88,15 +88,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 1efafd9445f49..cd8b6657cbf4e 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -1,3 +1,13 @@ +/** + * Editor Normalization Styles + * + * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming + * of the editor by themes. + * Why do these exist? Why not rely on browser defaults? + * These styles are necessary so long as CSS can bleed from the wp-admin into the editing canvas itself. + * Let's continue working to refactor these away, whether through Shadow DOM or better scoping of upstream styles. + */ + body { font-family: $editor-font; font-size: $editor-font-size; @@ -5,15 +15,95 @@ body { color: $dark-gray-900; } +/* Headings */ +// These follow a Major Third type scale +// https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Noto%20Serif&fontweight=600 +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; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: inherit; +} + p { font-size: inherit; line-height: inherit; + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; } ul, ol { - margin: 0; - padding: 0; + margin-bottom: $default-block-margin; + padding: inherit; li { // This overrides a bottom margin globally applied to list items in wp-admin.