diff --git a/blocks/library/heading/style.scss b/blocks/library/heading/style.scss index a7fde21d91ccc..cf488f8916887 100644 --- a/blocks/library/heading/style.scss +++ b/blocks/library/heading/style.scss @@ -1,16 +1,11 @@ .editor-visual-editor__block[data-type="core/heading"] { - padding-top: 0; - padding-bottom: 0; - h1, h2, h3, h4, h5, h6 { - // for this block only we change the block padding to reflect margin instead margin: 0; - padding: .5em 0; } h1 { diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 751d53a61c7c0..1fe31f9c20fe6 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -17,57 +17,9 @@ } &[data-align="wide"] { - // Here be dragons... - // - // Variable offsets: - // - Left sidebar - // - Hidden at small viewports - // - Foldable - // - Expanded at medium and above - // - Post settings - // - Collapsed - // - Expanded - - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; - width: 100vw; padding-left: 0; padding-right: 0; - max-width: none; - - .editor-layout.is-sidebar-opened & { - margin-left: calc( -50vw + #{ $sidebar-width / 2 } ); - margin-right: calc( -50vw + #{ $sidebar-width / 2 } ); - width: calc( 100vw - #{ $sidebar-width } ); - } - - @include break-medium() { - margin-left: calc( -50vw + 80px ); - margin-right: calc( -50vw + 80px ); - width: calc( 100vw - 160px ); - - .auto-fold &, - .folded & { - margin-left: calc( -50vw + 18px ); - margin-right: calc( -50vw + 18px ); - width: calc( 100vw - 36px ); - } - - .editor-layout.is-sidebar-opened & { - margin-left: calc( -50vw + 80px + #{ $sidebar-width / 2 } ); - margin-right: calc( -50vw + 80px + #{ $sidebar-width / 2 } ); - width: calc( 100vw - 160px - #{ $sidebar-width } ); - - .auto-fold &, - .folded & { - margin-left: calc( -50vw + 18px + #{ $sidebar-width / 2 } ); - margin-right: calc( -50vw + 18px + #{ $sidebar-width / 2 } ); - width: calc( 100vw - 36px - #{ $sidebar-width } ); - } - } - } + margin-right: -#{ $block-padding + $block-mover-margin }; /* Compensate for .editor-visual-editor centering padding */ &:before { left: 0; @@ -78,6 +30,13 @@ .editor-block-mover { display: none; } + + .editor-visual-editor__block-controls { + max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) }; + margin-left: auto; + margin-right: auto; + } + } } diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index 21899c37adf55..b9114769784c3 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -49,6 +49,10 @@ $admin-sidebar-width-collapsed: 36px; $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 ); $text-editor-max-width: 760px; +/* Editor */ +$text-editor-max-width: 760px; +$visual-editor-max-width: 700px; + /* Blocks */ $block-padding: 14px; $block-mover-margin: 18px; @@ -88,7 +92,7 @@ Let's try and use as few of these as possible, and be mindful about adding new o $break-huge: 1440px; $break-wide: 1280px; -$break-large: 960px; -$break-medium: 782px; +$break-large: 960px; // admin sidebar auto folds +$break-medium: 782px; // adminbar goes big $break-small: 600px; $break-mobile: 480px; diff --git a/editor/header/style.scss b/editor/header/style.scss index c7f9c907590dd..a2419337c371b 100644 --- a/editor/header/style.scss +++ b/editor/header/style.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: row; align-items: center; - z-index: 1; + z-index: 2; top: $admin-bar-height-big; left: 0; right: 0; diff --git a/editor/layout/index.js b/editor/layout/index.js index e58edd5128a17..f57e57ed5cd72 100644 --- a/editor/layout/index.js +++ b/editor/layout/index.js @@ -7,7 +7,6 @@ import classnames from 'classnames'; /** * Internal dependencies */ -import './style.scss'; import Header from '../header'; import Sidebar from '../sidebar'; import TextEditor from '../modes/text-editor'; diff --git a/editor/layout/style.scss b/editor/layout/style.scss deleted file mode 100644 index 07ca5bb39dd18..0000000000000 --- a/editor/layout/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.editor-layout__content { - overflow: hidden; -} diff --git a/editor/modes/text-editor/style.scss b/editor/modes/text-editor/style.scss index 921c6f0c8117a..e96500ece8dbe 100644 --- a/editor/modes/text-editor/style.scss +++ b/editor/modes/text-editor/style.scss @@ -101,7 +101,10 @@ &:focus { box-shadow: none; } +} +/* Use padding to center text in the textarea, this allows you to click anywhere to focus it */ +.editor-text-editor { padding-left: 20px; padding-right: 20px; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 56b7e0ddd9e42..357f7889aaca5 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,6 +1,5 @@ .editor-visual-editor { margin: 0 auto; - max-width: 700px; padding: 50px 10px; /* Floating up/down arrows invisible */ &, @@ -11,18 +10,26 @@ } @include break-small() { - padding: 50px 40px; /* Floating up/down appear */ + padding: 50px 0 50px #{ $block-padding + $block-mover-margin }; /* Floating up/down appear, also compensate for mover */ } @include break-large() { - padding: 60px 30px; + padding: 60px 0 60px #{ $block-padding + $block-mover-margin }; /* Compensate for mover on the left side */ } } +/* "Hassle-free full bleed" from CSS Tricks */ +.editor-visual-editor > *:not( [data-align="wide"] ) { + max-width: $visual-editor-max-width; + margin-left: auto; + margin-right: auto; +} + .editor-visual-editor__block { position: relative; - left: -#{ $block-padding + $block-mover-margin }; // make room for the mover - padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin }; // compensate for mover + left: -#{ $block-padding + $block-mover-margin }; /* Make room for the mover */ + padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin }; /* Compensate for mover */ + margin-right: #{ $block-padding + $block-mover-margin }; transition: 0.2s border-color; &:before { @@ -31,7 +38,7 @@ position: absolute; top: 0; bottom: 0; - left: #{ $block-padding + $block-mover-margin }; // compensate for mover + left: #{ $block-padding + $block-mover-margin }; /* Compensate for mover */ right: 0; border: 2px solid transparent; transition: 0.2s border-color; @@ -66,17 +73,33 @@ .editor-visual-editor__block-controls { @include animate_fade; - position: absolute; - bottom: 100%; - margin-bottom: -4px; - left: #{ $block-padding * 2 + $block-mover-margin }; // compensate for mover, and indent same as padding display: flex; + position: sticky; z-index: 1; + margin-top: -46px - $item-spacing; // 46 is toolbar height + margin-bottom: $item-spacing + 20px; // 20px is the offset from the bottom of the selected block where it stops sticking + + top: $header-height + $admin-bar-height-big + $item-spacing; + + @include break-medium() { + top: $header-height + $admin-bar-height + $item-spacing; + } +} + +.editor-visual-editor__block-controls + div { + margin-top: -20px; + + // prevent collapsing margins between the block and the toolbar + &:before { + content: ""; + display: table; + clear: both; + } } .editor-visual-editor__block-controls .components-toolbar { display: inline-flex; - margin-right: 10px; + margin-right: $item-spacing; } .editor-visual-editor__block-controls .editor-block-switcher { @@ -84,5 +107,5 @@ } .editor-visual-editor .editor-inserter { - margin: $item-spacing; + margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick }