diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss index 7fda170813addd..3c6ee25a4a468a 100644 --- a/assets/stylesheets/_variables.scss +++ b/assets/stylesheets/_variables.scss @@ -57,6 +57,7 @@ $block-spacing: 4px; // Vertical space between blocks. $block-side-ui-width: 28px; // Width of the movers/drag handle UI. $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block. $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint. +$default-block-margin: ($block-padding * 2) + $block-spacing; // This is the default margin between blocks. // Buttons & UI Widgets $radius-round-rectangle: 4px; 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-library/src/style.scss b/packages/block-library/src/style.scss index f9a53b92214177..aff7bfd7e4c2bb 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,37 @@ 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: $default-block-margin; + margin-bottom: $default-block-margin; +} + +// Re-apply margins to all blocks. This is a temporary step to get the surrounding stuff to work. +// In upcoming pushes, this will be removed and replaced with actual individual block CSS styles. +[class*="wp-block"] .editor-block-list__block-edit { + margin-top: $default-block-margin; + margin-bottom: $default-block-margin; +} + +img { + max-width: 100%; + height: auto; +} + +iframe { + width: 100%; +} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 44595911436094..3a9040e322f206 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -111,8 +111,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; @@ -131,15 +131,6 @@ body.block-editor-page { } } - img { - max-width: 100%; - height: auto; - } - - iframe { - width: 100%; - } - .components-navigate-regions { height: 100%; }