From 1952fbf3fb8975d3e85048e3f34a0261707e7fc0 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Wed, 18 Sep 2019 14:53:45 +0200 Subject: [PATCH 01/12] WIP: add navigate up button on floating toolbar --- .../src/components/block-list/block.native.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index eac9c7be152062..33452a70d42a65 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -11,6 +11,7 @@ import { * WordPress dependencies */ import { Component } from '@wordpress/element'; +import { ToolbarButton } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { getBlockType } from '@wordpress/blocks'; @@ -124,7 +125,15 @@ class BlockListBlock extends Component { return ( <> { showFloatingToolbar && ( ! isFirstBlock || parentId === '' ) && } - { showFloatingToolbar && } + { showFloatingToolbar && + ( + this.props.onSelect( parentId ) } + icon="arrow-up-alt" + /> + + )} Date: Fri, 20 Sep 2019 13:13:35 +0200 Subject: [PATCH 02/12] EOD: change color of FloatingToolbar arrow to white --- .../block-editor/src/components/block-list/block.native.js | 1 + packages/components/src/icon-button/index.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 33452a70d42a65..a58122958bbba7 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -131,6 +131,7 @@ class BlockListBlock extends Component { title={ __( 'Navigate Up' ) } onClick={ () => this.props.onSelect( parentId ) } icon="arrow-up-alt" + extraProps={ { fill: 'white' } } /> )} diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js index 3f15b3458de7df..05debe5ac30c58 100644 --- a/packages/components/src/icon-button/index.js +++ b/packages/components/src/icon-button/index.js @@ -25,12 +25,14 @@ function IconButton( props, ref ) { tooltip, shortcut, labelPosition, + fill, ...additionalProps } = props; const classes = classnames( 'components-icon-button', className, { 'has-text': children, } ); const tooltipText = tooltip || label; + const iconProps = fill ? { fill } : {}; // Should show the tooltip if... const showTooltip = ! additionalProps.disabled && ( @@ -55,7 +57,7 @@ function IconButton( props, ref ) { className={ classes } ref={ ref } > - + { children } ); From 89dae559927d574437527161a1ef56580afd3356 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Thu, 3 Oct 2019 16:47:28 +0200 Subject: [PATCH 03/12] add nav-up icon --- .../src/components/block-list/block.native.js | 3 ++- .../block-editor/src/components/block-list/nav-up-icon.js | 8 ++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 packages/block-editor/src/components/block-list/nav-up-icon.js diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index a58122958bbba7..f6924aac4501c2 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -25,6 +25,7 @@ import BlockEdit from '../block-edit'; import BlockInvalidWarning from './block-invalid-warning'; import BlockMobileToolbar from './block-mobile-toolbar'; import FloatingToolbar from './block-mobile-floating-toolbar'; +import { NavigateUpSVG } from './nav-up-icon' class BlockListBlock extends Component { constructor() { @@ -130,7 +131,7 @@ class BlockListBlock extends Component { this.props.onSelect( parentId ) } - icon="arrow-up-alt" + icon={ NavigateUpSVG } //"arrow-up-alt" extraProps={ { fill: 'white' } } /> diff --git a/packages/block-editor/src/components/block-list/nav-up-icon.js b/packages/block-editor/src/components/block-list/nav-up-icon.js new file mode 100644 index 00000000000000..0370225a3c3537 --- /dev/null +++ b/packages/block-editor/src/components/block-list/nav-up-icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Icon, SVG, Path } from '@wordpress/components'; + +const NavigateUp = ; + +export const NavigateUpSVG = ; From c97a42b45fa8def497b48b290e54cd1e7ce66632 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Thu, 3 Oct 2019 18:07:22 +0200 Subject: [PATCH 04/12] add and style floating-toolbar pipe --- .../src/components/block-list/block.native.js | 20 ++++++++++--------- .../components/block-list/block.native.scss | 6 ++++++ .../components/src/toolbar/style.native.scss | 9 ++++++++- .../src/toolbar/toolbar-container.native.js | 4 ++-- 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index f6924aac4501c2..17ecc5cd4655bf 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -11,7 +11,7 @@ import { * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { ToolbarButton } from '@wordpress/components'; +import { ToolbarButton, Toolbar } from '@wordpress/components'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { getBlockType } from '@wordpress/blocks'; @@ -128,14 +128,16 @@ class BlockListBlock extends Component { { showFloatingToolbar && ( ! isFirstBlock || parentId === '' ) && } { showFloatingToolbar && ( - this.props.onSelect( parentId ) } - icon={ NavigateUpSVG } //"arrow-up-alt" - extraProps={ { fill: 'white' } } - /> - - )} + + this.props.onSelect( parentId ) } + icon={ NavigateUpSVG } + extraProps={ { fill: 'white' } } + /> + + + )} ( - +const ToolbarContainer = ( { useStyle, passedStyle, children, rtl = false } ) => ( + { children } ); From c046e7979e020dc3040ce09db3aa4eeac185f557 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Thu, 3 Oct 2019 20:25:17 +0200 Subject: [PATCH 05/12] review fix --- .../block-editor/src/components/block-list/block.native.js | 3 --- .../block-editor/src/components/block-list/nav-up-icon.js | 6 ++---- packages/components/src/toolbar/toolbar-container.native.js | 4 ++-- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 17ecc5cd4655bf..7b800d8367a864 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -172,7 +172,6 @@ export default compose( [ getBlockHierarchyRootClientId, getBlockRootClientId, getBlock, - getBlockRootClientId, getSelectedBlock, } = select( 'core/block-editor' ); const order = getBlockIndex( clientId, rootClientId ); @@ -199,8 +198,6 @@ export default compose( [ const showFloatingToolbar = isSelected && hasRootInnerBlocks && ! isMediaText && ! isMediaTextParent; - const parentId = getBlockRootClientId( clientId ); - return { icon, name: name || 'core/missing', diff --git a/packages/block-editor/src/components/block-list/nav-up-icon.js b/packages/block-editor/src/components/block-list/nav-up-icon.js index 0370225a3c3537..6adb6f7c032a8e 100644 --- a/packages/block-editor/src/components/block-list/nav-up-icon.js +++ b/packages/block-editor/src/components/block-list/nav-up-icon.js @@ -1,8 +1,6 @@ /** * WordPress dependencies */ -import { Icon, SVG, Path } from '@wordpress/components'; +import { SVG, Path } from '@wordpress/components'; -const NavigateUp = ; - -export const NavigateUpSVG = ; +export default NavigateUp = ; diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js index 88b90a863ccf42..048fe860b774ae 100644 --- a/packages/components/src/toolbar/toolbar-container.native.js +++ b/packages/components/src/toolbar/toolbar-container.native.js @@ -13,8 +13,8 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import styles from './style.scss'; -const ToolbarContainer = ( { useStyle, passedStyle, children, rtl = false } ) => ( - +const ToolbarContainer = ( { getStylesFromColorScheme, passedStyle, children, rtl = false } ) => ( + { children } ); From f90aa6fc57e8ad4a14c7e6163c483c8c5b1f84c0 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 4 Oct 2019 09:04:09 +0200 Subject: [PATCH 06/12] apply pipe opacity --- .../src/components/block-list/block.native.js | 3 ++- .../src/components/block-list/block.native.scss | 17 +++++++++++++---- .../components/src/toolbar/style.native.scss | 13 +++---------- .../src/toolbar/toolbar-container.native.js | 4 ++-- 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 7b800d8367a864..94f250e6e03915 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -128,13 +128,14 @@ class BlockListBlock extends Component { { showFloatingToolbar && ( ! isFirstBlock || parentId === '' ) && } { showFloatingToolbar && ( - + this.props.onSelect( parentId ) } icon={ NavigateUpSVG } extraProps={ { fill: 'white' } } /> + )} diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index 6a738e311150aa..e257e98905d2fa 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -35,8 +35,17 @@ min-height: 50px; } -.floating { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 8px +.toolbar { + border-left-width: 0px; +} + +.pipe { + margin-top: auto; + margin-bottom: auto; + margin-left: 2px; + height: 28px; + width: 1px; + background-color: #e9eff3; + opacity: 0.4; } + diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/style.native.scss index d57bf8bd845aeb..babe5f232827e8 100644 --- a/packages/components/src/toolbar/style.native.scss +++ b/packages/components/src/toolbar/style.native.scss @@ -1,18 +1,11 @@ .container { flex-direction: row; + border-left-width: 1px; border-color: #e9eff3; padding-left: 5px; padding-right: 5px; } .containerDark { - border-color: #525354; -} - -.leftBorder { - border-left-width: 1px; -} - -.rightBorder { - border-right-width: 1px; -} + border-color: #515459; +} \ No newline at end of file diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js index 048fe860b774ae..33fe77d11db4c0 100644 --- a/packages/components/src/toolbar/toolbar-container.native.js +++ b/packages/components/src/toolbar/toolbar-container.native.js @@ -13,8 +13,8 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import styles from './style.scss'; -const ToolbarContainer = ( { getStylesFromColorScheme, passedStyle, children, rtl = false } ) => ( - +const ToolbarContainer = ( { getStylesFromColorScheme, passedStyle, children } ) => ( + { children } ); From 57b82d9a6858a406cc35c131a486f39ab42fe20c Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 4 Oct 2019 09:09:30 +0200 Subject: [PATCH 07/12] apply pipe opacity --- .../src/components/block-list/block.native.js | 26 +++++++++---------- .../src/components/block-list/nav-up-icon.js | 4 ++- .../src/image/test/edit.native.js | 4 +-- packages/components/src/icon-button/index.js | 2 +- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 94f250e6e03915..5310ebc7add6a3 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -25,7 +25,7 @@ import BlockEdit from '../block-edit'; import BlockInvalidWarning from './block-invalid-warning'; import BlockMobileToolbar from './block-mobile-toolbar'; import FloatingToolbar from './block-mobile-floating-toolbar'; -import { NavigateUpSVG } from './nav-up-icon' +import { NavigateUpSVG } from './nav-up-icon'; class BlockListBlock extends Component { constructor() { @@ -128,17 +128,17 @@ class BlockListBlock extends Component { { showFloatingToolbar && ( ! isFirstBlock || parentId === '' ) && } { showFloatingToolbar && ( - - this.props.onSelect( parentId ) } - icon={ NavigateUpSVG } - extraProps={ { fill: 'white' } } - /> - - - - )} + + this.props.onSelect( parentId ) } + icon={ NavigateUpSVG } + extraProps={ { fill: 'white' } } + /> + + + + ) } ; +const NavigateUp = ; + +export default NavigateUp; diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index d585f1f1396a9e..bcaff761adb420 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -40,7 +40,7 @@ describe( 'Image Block', () => { instance.onSetNewTab( true ); - expect( setAttributes ).toBeCalledWith( { linkTarget: '_blank', rel: NEW_TAB_REL } ); + expect( setAttributes ).toHaveBeenCalledWith( { linkTarget: '_blank', rel: NEW_TAB_REL } ); } ); it( 'unset link target', () => { @@ -49,7 +49,7 @@ describe( 'Image Block', () => { instance.onSetNewTab( false ); - expect( setAttributes ).toBeCalledWith( { linkTarget: undefined, rel: undefined } ); + expect( setAttributes ).toHaveBeenCalledWith( { linkTarget: undefined, rel: undefined } ); } ); } ); diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js index 05debe5ac30c58..b135d47b43a7f9 100644 --- a/packages/components/src/icon-button/index.js +++ b/packages/components/src/icon-button/index.js @@ -57,7 +57,7 @@ function IconButton( props, ref ) { className={ classes } ref={ ref } > - + { children } ); From 6395ff22e8d60172851ae8719e9d48feb472037c Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 4 Oct 2019 09:33:03 +0200 Subject: [PATCH 08/12] fix --- packages/block-library/src/image/test/edit.native.js | 4 ++-- packages/components/src/toolbar/style.native.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js index bcaff761adb420..d585f1f1396a9e 100644 --- a/packages/block-library/src/image/test/edit.native.js +++ b/packages/block-library/src/image/test/edit.native.js @@ -40,7 +40,7 @@ describe( 'Image Block', () => { instance.onSetNewTab( true ); - expect( setAttributes ).toHaveBeenCalledWith( { linkTarget: '_blank', rel: NEW_TAB_REL } ); + expect( setAttributes ).toBeCalledWith( { linkTarget: '_blank', rel: NEW_TAB_REL } ); } ); it( 'unset link target', () => { @@ -49,7 +49,7 @@ describe( 'Image Block', () => { instance.onSetNewTab( false ); - expect( setAttributes ).toHaveBeenCalledWith( { linkTarget: undefined, rel: undefined } ); + expect( setAttributes ).toBeCalledWith( { linkTarget: undefined, rel: undefined } ); } ); } ); diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/style.native.scss index babe5f232827e8..e218aa37363e37 100644 --- a/packages/components/src/toolbar/style.native.scss +++ b/packages/components/src/toolbar/style.native.scss @@ -7,5 +7,5 @@ } .containerDark { - border-color: #515459; -} \ No newline at end of file + border-color: #525354; +} From 6e617feac0bd395d1b40e715a084dfd78560bd27 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 4 Oct 2019 11:49:49 +0200 Subject: [PATCH 09/12] remove fill icon color prop --- .../block-editor/src/components/block-list/block.native.js | 3 +-- .../block-editor/src/components/block-list/nav-up-icon.js | 2 +- packages/components/src/icon-button/index.js | 4 +--- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 5310ebc7add6a3..456c5fad6ac2ab 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -25,7 +25,7 @@ import BlockEdit from '../block-edit'; import BlockInvalidWarning from './block-invalid-warning'; import BlockMobileToolbar from './block-mobile-toolbar'; import FloatingToolbar from './block-mobile-floating-toolbar'; -import { NavigateUpSVG } from './nav-up-icon'; +import NavigateUpSVG from './nav-up-icon'; class BlockListBlock extends Component { constructor() { @@ -133,7 +133,6 @@ class BlockListBlock extends Component { title={ __( 'Navigate Up' ) } onClick={ () => this.props.onSelect( parentId ) } icon={ NavigateUpSVG } - extraProps={ { fill: 'white' } } /> diff --git a/packages/block-editor/src/components/block-list/nav-up-icon.js b/packages/block-editor/src/components/block-list/nav-up-icon.js index 862860091c59ac..8fa1c8d20bd761 100644 --- a/packages/block-editor/src/components/block-list/nav-up-icon.js +++ b/packages/block-editor/src/components/block-list/nav-up-icon.js @@ -3,6 +3,6 @@ */ import { SVG, Path } from '@wordpress/components'; -const NavigateUp = ; +const NavigateUp = ; export default NavigateUp; diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js index b135d47b43a7f9..3f15b3458de7df 100644 --- a/packages/components/src/icon-button/index.js +++ b/packages/components/src/icon-button/index.js @@ -25,14 +25,12 @@ function IconButton( props, ref ) { tooltip, shortcut, labelPosition, - fill, ...additionalProps } = props; const classes = classnames( 'components-icon-button', className, { 'has-text': children, } ); const tooltipText = tooltip || label; - const iconProps = fill ? { fill } : {}; // Should show the tooltip if... const showTooltip = ! additionalProps.disabled && ( @@ -57,7 +55,7 @@ function IconButton( props, ref ) { className={ classes } ref={ ref } > - + { children } ); From 1835ae6b1b9c42bf8b4dc8a6a1f7bfb6dc864237 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 4 Oct 2019 12:46:33 +0200 Subject: [PATCH 10/12] fix lint --- .../components/block-list/block.native.scss | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index e257e98905d2fa..2eacefaca6cb05 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -36,16 +36,15 @@ } .toolbar { - border-left-width: 0px; + border-left-width: 0; } - + .pipe { - margin-top: auto; - margin-bottom: auto; - margin-left: 2px; - height: 28px; - width: 1px; - background-color: #e9eff3; - opacity: 0.4; + margin-top: auto; + margin-bottom: auto; + margin-left: 2px; + height: 28px; + width: 1px; + background-color: #e9eff3; + opacity: 0.4; } - From 9fd98281ad00cf276099e09dfe5d18cb8c0fecc7 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 4 Oct 2019 13:15:31 +0200 Subject: [PATCH 11/12] adjust style --- .../block-editor/src/components/block-list/block.native.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index 2eacefaca6cb05..238a352ecdc3d8 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -37,6 +37,8 @@ .toolbar { border-left-width: 0; + margin-right: auto; + padding-left: 2px; } .pipe { From 0243f42df4ff20e5a70ec739509623651c180795 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Mon, 7 Oct 2019 08:20:41 +0200 Subject: [PATCH 12/12] adjust tap area --- .../block-editor/src/components/block-list/block.native.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index 238a352ecdc3d8..e3d18ba3f7c640 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -39,6 +39,7 @@ border-left-width: 0; margin-right: auto; padding-left: 2px; + height: 44px; } .pipe {