From 96f11d4af6e5b94c412d55b598e082d0315037ca Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 14 Jun 2018 12:59:46 +0200 Subject: [PATCH] Refactoring the block toolbar to adjust for changes. The previous block toolbar implementation used margins and positioning which had to be accounted for by the block padding. The new implementation here mitigates its own footprint by using floats, and hence works better with collapsing margins. --- edit-post/assets/stylesheets/_variables.scss | 2 +- .../header/header-toolbar/style.scss | 21 ++++-- edit-post/components/visual-editor/style.scss | 17 +++-- editor/components/block-list/style.scss | 70 ++++++++++++------- editor/components/block-toolbar/style.scss | 9 ++- 5 files changed, 80 insertions(+), 39 deletions(-) diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss index f4b4455078897..40d41e208d018 100644 --- a/edit-post/assets/stylesheets/_variables.scss +++ b/edit-post/assets/stylesheets/_variables.scss @@ -29,7 +29,7 @@ $empty-paragraph-height: $text-editor-font-size * 4; // Visuals $shadow-popover: 0 3px 30px rgba( $dark-gray-900, .1 ); $shadow-toolbar: 0 2px 10px rgba( $dark-gray-900, .1 ), 0 0 2px rgba( $dark-gray-900, .1 ); -$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .1 ), 0 2px 2px rgba( $dark-gray-900, .1 ); +$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .05 ), 0 2px 2px rgba( $dark-gray-900, .05 ); // Editor Widths $sidebar-width: 280px; diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss index fd6245e5dd299..3afa02aa5f7cf 100644 --- a/edit-post/components/header/header-toolbar/style.scss +++ b/edit-post/components/header/header-toolbar/style.scss @@ -1,4 +1,4 @@ -// hide all action buttons except the inserter on mobile +// Hide all action buttons except the inserter on mobile. .edit-post-header-toolbar > .components-button { display: none; @@ -18,15 +18,26 @@ } } +// Block toolbar when fixed to the top of the screen. .edit-post-header-toolbar__block-toolbar { - // stacked toolbar + // Stack toolbar below Editor Bar. position: absolute; top: $header-height; left: 0; right: 0; + width: 100%; background: $white; - border-bottom: 1px solid $light-gray-500; min-height: $block-toolbar-height; + border-bottom: 1px solid $light-gray-500; + + .editor-block-toolbar { + border-left: none; + } + + .editor-block-toolbar .components-toolbar { + border-top: none; + border-bottom: none; + } .is-sidebar-opened & { display: none; @@ -39,8 +50,8 @@ } } - // merge toolbars after this breakpoint - @include break-large { // we should try and lower this breakpoint through an ellipsis overflow feature + // Move toolbar into top Editor Bar. + @include break-large { padding-left: $item-spacing; position: static; left: auto; diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index b1dfb0ef42d5e..0b63c3e30c69f 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -50,11 +50,18 @@ margin-right: -$block-side-ui-width; } - &[data-align="full"] > .editor-block-contextual-toolbar, - &[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars - max-width: $content-width + 2; // 1px border left and right - margin-left: auto; - margin-right: auto; + // Center the block toolbar on wide and full-wide blocks. + &[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar, + &[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar { // Don't affect nested block toolbars. + width: calc( 100% + #{ $parent-block-padding + $parent-block-padding + $border-width + $border-width } ); + height: 0px; // This collapses the container to an invisible element without margin. + text-align: center; + + .editor-block-toolbar { + max-width: $content-width + $block-padding + $block-padding; + width: 100%; + position: relative; + } } } diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 1f136a0765ae7..02cb3270c5520 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -131,19 +131,20 @@ margin-bottom: -$block-padding; } + // Adjust the spacing of the appender, or the first block, to sit near the title. + .editor-default-block-appender__content, + .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__block .editor-block-list__block-edit, + .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { // Explicitly target nested blocks, as those need to override the preceeding rule. margin-top: $block-padding * 2 + $block-spacing; margin-bottom: $block-padding * 2 + $block-spacing; } - - // Adjust the spacing of the appender, or the first block, to sit near the title. - .editor-default-block-appender__content, - .editor-block-list__block:first-child .editor-block-list__block-edit { - margin-top: $block-padding - $block-spacing / 2; - } } .editor-block-list__layout .editor-block-list__block { @@ -220,14 +221,14 @@ transition: outline .1s linear; pointer-events: none; - // show wider padding for top level blocks + // Show wider padding for top level blocks. right: -$parent-block-padding; left: -$parent-block-padding; top: -$block-padding; bottom: -$block-padding; } - // show smaller padding for child blocks + // Show smaller padding for child blocks. .editor-block-list__block-edit:before { right: -$block-padding; left: -$block-padding; @@ -241,8 +242,6 @@ &.is-selected > .editor-block-list__block-edit:before { // use opacity to work in various editor styles outline: $border-width solid $dark-opacity-light-500; - top: -$block-padding; - bottom: -$block-padding; .is-dark-theme & { outline-color: $light-opacity-light-500; @@ -390,7 +389,7 @@ // Mover and settings above > .editor-block-mover, > .editor-block-settings-menu { - top: -$block-side-ui-width - $border-width; // This moves the menu up by the height of the button + border. + top: -$block-side-ui-width - $block-padding - $border-width; bottom: auto; min-height: 0; height: auto; @@ -403,11 +402,11 @@ } > .editor-block-mover { - left: 10px; + left: $parent-block-padding; } > .editor-block-settings-menu { - right: 10px; + right: $parent-block-padding; width: $block-side-ui-width * 2; flex-direction: row; } @@ -514,7 +513,7 @@ /** - * Left and right side UI + * Left and right side UI, & Unified toolbar on Mobile */ .editor-block-list__block { @@ -589,11 +588,13 @@ .editor-block-list__block-mobile-toolbar { display: flex; flex-direction: row; - margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. + margin-top: $item-spacing + $block-toolbar-height - $block-padding; // Make room for the height of the block toolbar above. margin-right: -$block-padding; - margin-bottom: -$block-padding - $border-width; margin-left: -$block-padding; border-top: $border-width solid $light-gray-500; + height: $block-toolbar-height; + + transform: translateY( #{ $block-padding + $border-width } ); @include break-small() { display: none; @@ -601,7 +602,7 @@ // Show a shadow below the selected block to imply separation. box-shadow: $shadow-below-only; - @include break-mobile() { + @include break-small() { box-shadow: none; } @@ -775,12 +776,28 @@ // Position toolbar below the block on mobile. position: absolute; - bottom: $block-toolbar-height; - left: $block-padding; - right: $block-padding; + bottom: $block-toolbar-height - $block-padding; + left: 0; + right: 0; + + // Paint the borders on the toolbar itself on mobile. + border-top: 1px solid $light-gray-500; + .components-toolbar { + border-top: none; + border-bottom: none; + + } + + @include break-small() { + border-top: none; + .components-toolbar { + border-top: 1px solid $light-gray-500; + border-bottom: 1px solid $light-gray-500; + } + } // Position the contextual toolbar above the block. - @include break-mobile() { + @include break-small() { position: sticky; bottom: auto; left: auto; @@ -834,10 +851,9 @@ } } +// Position the block toolbar when contextual. .editor-block-contextual-toolbar .editor-block-toolbar { width: 100%; - background: $white; - border: $border-width solid $light-gray-500; // Hide right border on desktop, where the .components-toolbar instead has a right border. @include break-small() { @@ -845,8 +861,10 @@ } // This prevents floats from messing up the position. - position: absolute; - left: 0; + @include break-small() { + position: absolute; + left: 0; + } .editor-block-list__block[data-align="right"] & { left: auto; diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss index 1fedaad2e9d6f..dee5d69ddf12a 100644 --- a/editor/components/block-toolbar/style.scss +++ b/editor/components/block-toolbar/style.scss @@ -2,7 +2,6 @@ display: inline-flex; flex-grow: 1; width: 100%; - background: $white; overflow: auto; // Allow horizontal scrolling on mobile. position: relative; @@ -11,8 +10,14 @@ overflow: inherit; } + // Show a left border on the parent container. + border-left: $border-width solid $light-gray-500; + + // The component is born with a border, but we only need some of them. .components-toolbar { - border: none; + border: 0; + border-top: $border-width solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; // Add a right border to show as separator in the block toolbar. border-right: $border-width solid $light-gray-500;