From a0137e88de5fbe36e4b8d85bd5000e076ca8d4fd Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 1 Aug 2018 11:51:17 +0200 Subject: [PATCH 1/2] Try moving block margins to each block MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is a followup PR to discussion in https://github.com/WordPress/gutenberg/pull/8283#issuecomment-409127657. The chief purpose is to remove all margins on blocks, and let each and every block add these margins back themselves. The purpose of this is to more closely mimic how a WordPress theme is built — a paragraph might have one margin, a heading another, a list yet another. By not blanket applying a margin to every child, but letting each define their own, we're essentially building a vanilla editor stylesheet. This is a try branch, and very much a work in progress. It is being pushed now to convey the purpose and to discuss whether/how this should be tackled. For example right now the beginnings of this vanila stylesheet lives in the main.scss file, but we might want to put these into the style.scss for every block individually. Please marinate on this and lay your thoughts on me. --- edit-post/assets/stylesheets/_variables.scss | 2 + edit-post/assets/stylesheets/main.scss | 45 ++++++++++++++++--- .../src/components/block-list/style.scss | 10 ----- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss index e4844ef629a8b1..f253a9c20aa172 100644 --- a/edit-post/assets/stylesheets/_variables.scss +++ b/edit-post/assets/stylesheets/_variables.scss @@ -56,6 +56,8 @@ $block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // spac $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; +$default-block-margin: $block-padding * 2 + $block-spacing; // This is the default margin between blocks. + // Buttons & UI Widgets $button-style__radius-roundrect: 4px; $button-style__radius-round: 50%; diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 695725a9ea910a..3f7bdb4fdeb4ba 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -91,8 +91,8 @@ body.gutenberg-editor-page { } .gutenberg__editor { - // 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, causing (ノಠ益ಠ)ノ彡┻━┻. @include break-small { position: absolute; top: 0; @@ -102,11 +102,46 @@ body.gutenberg-editor-page { min-height: calc( 100vh - #{ $admin-bar-height-big } ); } - // The WP header height changes at this breakpoint + // The WP header height changes at this breakpoint. @include break-medium { min-height: calc( 100vh - #{ $admin-bar-height } ); } + .components-navigate-regions { + height: 100%; + } +} + +/** + * Vanilla editor styles + */ + +.gutenberg__editor { + + // Gutenberg specific elements + .editor-default-block-appender__content, + .components-placeholder { + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; + } + + // Core blocks + .wp-block-button, + .wp-block-code, + .wp-block-categories, + .wp-block-cover-image, + .wp-block-embed { + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; + } + + p, + ul, + ol { + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; + } + img { max-width: 100%; height: auto; @@ -115,10 +150,6 @@ body.gutenberg-editor-page { iframe { width: 100%; } - - .components-navigate-regions { - height: 100%; - } } // Override core input styles to provide ones consistent with Gutenberg diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index e26bf5839040ec..8e3d2111f985f1 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -136,16 +136,6 @@ .editor-block-list__block:first-child .editor-block-list__block-edit { margin-top: $block-padding - $block-spacing / 2; } - - // 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. - .editor-default-block-appender__content, - .editor-block-list__block .editor-block-list__block-edit, - .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit, - .editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceding rule. - margin-top: $block-padding * 2 + $block-spacing; - margin-bottom: $block-padding * 2 + $block-spacing; - } } .editor-block-list__layout .editor-block-list__block { From 819e251959d24f4c96904421e057bc44b62b7dba Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 2 Aug 2018 10:29:54 +0200 Subject: [PATCH 2/2] Try a more blanket statement to target all blocks. Experiment, since this is still a try branch. --- edit-post/assets/stylesheets/main.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 3f7bdb4fdeb4ba..2ff5d6079d5131 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -126,11 +126,7 @@ body.gutenberg-editor-page { } // Core blocks - .wp-block-button, - .wp-block-code, - .wp-block-categories, - .wp-block-cover-image, - .wp-block-embed { + [ class*="wp-block-" ] { margin-top: $default-block-margin; margin-bottom: $default-block-margin; }