From 0fed1c4eba8305125fcde8663af4ca81f7a69254 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Oct 2017 09:13:23 +0100 Subject: [PATCH 1/5] Block Toolbar: Move the block toolbar to the editor's header --- components/navigable-menu/index.js | 4 ++ editor/assets/stylesheets/_z-index.scss | 1 - editor/block-switcher/style.scss | 10 ---- editor/block-toolbar/index.js | 75 ++++++++++--------------- editor/block-toolbar/style.scss | 60 ++------------------ editor/header/index.js | 2 + editor/modes/visual-editor/block.js | 2 +- 7 files changed, 43 insertions(+), 111 deletions(-) diff --git a/components/navigable-menu/index.js b/components/navigable-menu/index.js index 2a79d38042b8da..f39fd650b700a5 100644 --- a/components/navigable-menu/index.js +++ b/components/navigable-menu/index.js @@ -26,6 +26,10 @@ class NavigableMenu extends Component { } onKeyDown( event ) { + if ( this.props.onKeyDown ) { + this.props.onKeyDown( event ); + } + const { orientation = 'vertical', onNavigate = noop, deep = false } = this.props; if ( ( orientation === 'vertical' && [ UP, DOWN, TAB ].indexOf( event.keyCode ) === -1 ) || diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index 20c1d406ef585b..9e93faed89eb72 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -7,7 +7,6 @@ $z-layers: ( '.editor-visual-editor__block:before': -1, '.editor-visual-editor__block .wp-block-more:before': -1, '.editor-visual-editor__block {core/image aligned left or right}': 20, - '.editor-block-toolbar': 10, '.editor-visual-editor__block-warning': 1, '.editor-visual-editor__sibling-inserter': 1, '.components-form-toggle__input': 1, diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss index b897d16fb46008..095a6b85818dfd 100644 --- a/editor/block-switcher/style.scss +++ b/editor/block-switcher/style.scss @@ -1,15 +1,5 @@ .editor-block-switcher { position: relative; - background-color: $white; - font-family: $default-font; - font-size: $default-font-size; - line-height: $default-line-height; - margin-right: -1px; - margin-bottom: -1px; - - .components-toolbar { - height: 38px; - } } .editor-block-switcher__toggle { diff --git a/editor/block-toolbar/index.js b/editor/block-toolbar/index.js index babd45053a5c19..629e7652b81712 100644 --- a/editor/block-toolbar/index.js +++ b/editor/block-toolbar/index.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { Slot } from 'react-slot-fill'; -import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; +import { Slot, Fill } from 'react-slot-fill'; import classnames from 'classnames'; import { connect } from 'react-redux'; @@ -10,7 +9,7 @@ import { connect } from 'react-redux'; * WordPress Dependencies */ import { IconButton, Toolbar, NavigableMenu } from '@wordpress/components'; -import { Component, Children, findDOMNode } from '@wordpress/element'; +import { Component, findDOMNode } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { focus, keycodes } from '@wordpress/utils'; @@ -31,11 +30,6 @@ import { getBlockMode } from '../selectors'; */ const { ESCAPE, F10 } = keycodes; -function FirstChild( { children } ) { - const childrenArray = Children.toArray( children ); - return childrenArray[ 0 ] || null; -} - function metaKeyPressed( event ) { return isMac() ? event.metaKey : ( event.ctrlKey && ! event.altKey ); } @@ -118,51 +112,44 @@ class BlockToolbar extends Component { } ); return ( - + -
- { ! showMobileControls && mode === 'visual' && [ - , - , - ] } - -
- { mode === 'visual' && - - } -
- - { ( mode === 'html' || showMobileControls ) && -
- - - - -
+ { ! showMobileControls && mode === 'visual' && [ + , + , + ] } + +
+ { mode === 'visual' && + } - -
+
+ + { ( mode === 'html' || showMobileControls ) && +
+ + + + +
+ } + - + ); } } diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss index 202ebdc575a762..dbcc6563feeb85 100644 --- a/editor/block-toolbar/style.scss +++ b/editor/block-toolbar/style.scss @@ -1,64 +1,14 @@ - .editor-block-toolbar { - display: flex; - position: sticky; - z-index: z-index( '.editor-block-toolbar' ); - margin-top: -$block-controls-height - $item-spacing; - margin-bottom: $item-spacing + 20px; // 20px is the offset from the bottom of the selected block where it stops sticking - white-space: nowrap; - height: $block-controls-height; - - // Mobile viewport - top: $header-height - 1px; - margin-left: -$block-padding; - margin-right: -$block-padding; - - // Allow this invisible layer to be clicked through. - pointer-events: none; - - // Reset pointer-events on children. - & > * { - pointer-events: auto; - } - - // Larger viewports - @include break-small() { - margin-left: 0; - } - - @include break-medium() { - top: $item-spacing; - } - - &.is-appearing-active { - @include animate_fade; - } -} - -.editor-block-toolbar__group { display: inline-flex; - box-shadow: $shadow-toolbar; - width: 100%; - background: $white; - overflow: auto; // allow horizontal scrolling on mobile + overflow: auto; // allow horizontal scrolling on mobile + flex-grow: 1; - @include break-small() { - width: auto; - overflow: hidden; + .components-toolbar { + border: none; + border-left: 1px solid $light-gray-500; } } -$sticky-bottom-offset: 20px; -.editor-block-toolbar + div { - // prevent collapsing margins between block and toolbar, matches the 20px bottom offset - margin-top: -$sticky-bottom-offset - 1px; - padding-top: 1px; - } - -.editor-block-toolbar .components-toolbar { - margin-right: -1px; -} - .editor-block-toolbar .editor-block-switcher { display: inline-flex; } diff --git a/editor/header/index.js b/editor/header/index.js index e4bf0addfb351e..84ede96b37c14b 100644 --- a/editor/header/index.js +++ b/editor/header/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { connect } from 'react-redux'; +import { Slot } from 'react-slot-fill'; /** * WordPress dependencies @@ -47,6 +48,7 @@ function Header( { label={ __( 'Redo' ) } disabled={ ! hasRedo } onClick={ redo } /> +
diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 9992daea8e9fb5..2d40e8027a0987 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -350,7 +350,7 @@ class VisualEditorBlock extends Component { { ( showUI || isProperlyHovered ) && } { ( showUI || isProperlyHovered ) && } - { showUI && isValid && } + { isSelected && isValid && } { isFirstMultiSelected && ! this.props.isSelecting && } From 9c31609c1f751d8d63f348530fcc9887ea8568fb Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 16 Oct 2017 11:59:09 +0200 Subject: [PATCH 2/5] Make the toolbar stack on mobile --- editor/block-toolbar/style.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss index dbcc6563feeb85..ad1a8fc0dbe5f4 100644 --- a/editor/block-toolbar/style.scss +++ b/editor/block-toolbar/style.scss @@ -7,6 +7,29 @@ border: none; border-left: 1px solid $light-gray-500; } + + // this should probably have its own class + > div:not( .editor-block-toolbar__mobile-tools ) { + display: flex; + } + + // stacked toolbar + position: absolute; + top: $header-height; + left: 0; + right: 0; + background: $white; + border-bottom: 1px solid $light-gray-500; + + // merge toolbars after this breakpoint + @include break-large { // we should try and lower this breakpoint through an ellipsis overflow feature + padding-left: $item-spacing; + position: static; + left: auto; + right: auto; + background: none; + border-bottom: none; + } } .editor-block-toolbar .editor-block-switcher { From 8b5c30015d903f1b953b9928d93d7c79be63aa3f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Oct 2017 09:05:32 +0100 Subject: [PATCH 3/5] Block Switcher: Do not show if block not found --- editor/block-switcher/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/editor/block-switcher/index.js b/editor/block-switcher/index.js index 7d78f6082ce957..8169ab9f28def5 100644 --- a/editor/block-switcher/index.js +++ b/editor/block-switcher/index.js @@ -25,6 +25,10 @@ import { getBlock } from '../selectors'; const { DOWN } = keycodes; function BlockSwitcher( { block, onTransform } ) { + if ( ! block ) { + return null; + } + const blockType = getBlockType( block.name ); const blocksToBeTransformedFrom = reduce( getBlockTypes(), ( memo, type ) => { const transformFrom = get( type, 'transforms.from', [] ); From aa9c1ac617017523fce9816cf55a402739bfa32b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Oct 2017 09:22:50 +0100 Subject: [PATCH 4/5] Block Toolbar: Always show on mobile --- editor/assets/stylesheets/_variables.scss | 1 + editor/block-toolbar/style.scss | 18 ------------------ editor/header/index.js | 4 +++- editor/header/style.scss | 23 +++++++++++++++++++++++ editor/modes/visual-editor/style.scss | 4 ++-- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index 7e22a9401301fb..7c367cffbde5f2 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -50,6 +50,7 @@ $item-spacing: 10px; $panel-padding: 16px; $header-height: 56px; $inserter-tabs-height: 36px; +$stacked-toolbar-height: 37px; $sidebar-width: 280px; $sidebar-panel-header-height: 50px; $admin-bar-height: 32px; diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss index ad1a8fc0dbe5f4..24292cf5ecd598 100644 --- a/editor/block-toolbar/style.scss +++ b/editor/block-toolbar/style.scss @@ -12,24 +12,6 @@ > div:not( .editor-block-toolbar__mobile-tools ) { display: flex; } - - // stacked toolbar - position: absolute; - top: $header-height; - left: 0; - right: 0; - background: $white; - border-bottom: 1px solid $light-gray-500; - - // merge toolbars after this breakpoint - @include break-large { // we should try and lower this breakpoint through an ellipsis overflow feature - padding-left: $item-spacing; - position: static; - left: auto; - right: auto; - background: none; - border-bottom: none; - } } .editor-block-toolbar .editor-block-switcher { diff --git a/editor/header/index.js b/editor/header/index.js index 84ede96b37c14b..5d48cab2311e1f 100644 --- a/editor/header/index.js +++ b/editor/header/index.js @@ -48,7 +48,9 @@ function Header( { label={ __( 'Redo' ) } disabled={ ! hasRedo } onClick={ redo } /> - +
+ +
diff --git a/editor/header/style.scss b/editor/header/style.scss index 9b8f691826eb61..3162a8f1918f72 100644 --- a/editor/header/style.scss +++ b/editor/header/style.scss @@ -127,3 +127,26 @@ } } } + + +.editor-header__block-toolbar { + // stacked toolbar + position: absolute; + top: $header-height; + left: 0; + right: 0; + background: $white; + border-bottom: 1px solid $light-gray-500; + min-height: $stacked-toolbar-height; + + // merge toolbars after this breakpoint + @include break-large { // we should try and lower this breakpoint through an ellipsis overflow feature + padding-left: $item-spacing; + position: static; + left: auto; + right: auto; + background: none; + border-bottom: none; + min-height: auto; + } +} diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 7015c388946755..500485d1449269 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -2,7 +2,7 @@ position: relative; height: 100%; margin: 0 auto; - padding: 50px 0; // Floating up/down arrows invisible + padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0; &, & p { @@ -12,7 +12,7 @@ } @include break-small() { - padding: 50px 0; + padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0; } @include break-large() { From 591e55e861ba5fed4be72f0e14b3da7bdc5a8678 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Oct 2017 10:11:19 +0100 Subject: [PATCH 5/5] Polish Editor and Toolbar position in the different breakpoints --- editor/assets/stylesheets/main.scss | 23 +++++++++++++---------- editor/header/style.scss | 24 +++++++++++++++++------- editor/layout/style.scss | 5 ----- editor/modes/visual-editor/style.scss | 10 +--------- 4 files changed, 31 insertions(+), 31 deletions(-) diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 9eaac45c8b8059..bf980881ddcb1a 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -4,24 +4,24 @@ body.gutenberg-editor-page { #update-nag, .update-nag { display: none; } - + #wpcontent { padding-left: 0; } - + #wpbody-content { padding-bottom: 0; } - + #wpfooter { display: none; } - + .a11y-speak-region { left: -1px; top: -1px; } - + svg { fill: currentColor; } @@ -54,12 +54,19 @@ body.gutenberg-editor-page { .gutenberg__editor { position: relative; - height: calc( 100vh - #{ $admin-bar-height-big } ); + height: calc( 100vh - #{ $admin-bar-height-big} ); + padding-top: $header-height + $stacked-toolbar-height; + // The WP header height changes at this breakpoint @include break-medium { height: calc( 100vh - #{ $admin-bar-height } ); } + // The block toolbar disappears at this breakpoint + @include break-large { + padding-top: $header-height; + } + img { max-width: 100%; } @@ -67,10 +74,6 @@ body.gutenberg-editor-page { iframe { width: 100%; } - - @include break-small() { - padding-top: $header-height; - } } .editor-post-title, diff --git a/editor/header/style.scss b/editor/header/style.scss index 3162a8f1918f72..7c0e16ed368338 100644 --- a/editor/header/style.scss +++ b/editor/header/style.scss @@ -11,13 +11,8 @@ left: 0; right: 0; - top: 0; - position: sticky; - - @include break-small() { - top: $admin-bar-height-big; - position: fixed; - } + top: $admin-bar-height-big; + position: fixed; @include break-medium() { top: $admin-bar-height; @@ -139,6 +134,17 @@ border-bottom: 1px solid $light-gray-500; min-height: $stacked-toolbar-height; + .is-sidebar-opened & { + display: none; + } + + @include break-medium { + .is-sidebar-opened & { + display: block; + right: $sidebar-width; + } + } + // merge toolbars after this breakpoint @include break-large { // we should try and lower this breakpoint through an ellipsis overflow feature padding-left: $item-spacing; @@ -148,5 +154,9 @@ background: none; border-bottom: none; min-height: auto; + + .is-sidebar-opened & { + right: auto; + } } } diff --git a/editor/layout/style.scss b/editor/layout/style.scss index e9bd55965acc1f..c2eaba24fdceae 100644 --- a/editor/layout/style.scss +++ b/editor/layout/style.scss @@ -10,11 +10,6 @@ .editor-layout__content { display: flex; flex-direction: column; - margin-top: #{ -1 * $header-height }; - - @include break-medium { - margin-top: 0; - } } .editor-layout__editor { diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 500485d1449269..4ed2c6a7cd27f7 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -2,7 +2,7 @@ position: relative; height: 100%; margin: 0 auto; - padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0; + padding: 50px 0 0; &, & p { @@ -10,14 +10,6 @@ font-size: $editor-font-size; line-height: $editor-line-height; } - - @include break-small() { - padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0; - } - - @include break-large() { - padding: 60px 0; - } } .editor-visual-editor {