diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss index 7fda170813add..3c6ee25a4a468 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 043ddd2613607..fd96103e2a6ba 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. - .editor-default-block-appender > .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 { - margin-top: $block-padding * 2 + $block-spacing; - margin-bottom: $block-padding * 2 + $block-spacing; - } } .editor-block-list__layout .editor-block-list__block { diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index f9a53b9221417..aff7bfd7e4c2b 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 bec0e8484c580..743d72ec5b7b4 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%; }