From b67ffcf377a3aedcf30dd58b4f3eb0c8b093fba2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 23 Aug 2018 18:23:47 +0100 Subject: [PATCH] Implement the smart toolbar for The block's toolbar --- .../header/header-toolbar/style.scss | 6 +++- packages/block-library/src/paragraph/edit.js | 18 ++++++++++++ .../src/responsive-toolbar/index.js | 29 +++++++++++++------ packages/components/src/slot-fill/slot.js | 6 ++-- packages/components/src/toolbar/style.scss | 1 - .../src/components/block-list/style.scss | 16 ---------- .../src/components/block-toolbar/index.js | 26 +++++++++++++---- .../src/components/block-toolbar/style.scss | 21 ++++++++++---- 8 files changed, 82 insertions(+), 41 deletions(-) diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss index b793efacb91b9b..49395035898585 100644 --- a/edit-post/components/header/header-toolbar/style.scss +++ b/edit-post/components/header/header-toolbar/style.scss @@ -8,8 +8,9 @@ } .edit-post-header-toolbar { - display: inline-flex; + display: flex; align-items: center; + flex-grow: 1; @include break-large() { .editor-block-switcher .components-toolbar { @@ -28,9 +29,12 @@ background: $white; min-height: $block-toolbar-height; border-bottom: $border-width solid $light-gray-500; + flex-grow: 1; .editor-block-toolbar { border-left: none; + border-top: 0; + border-bottom: 0; } .editor-block-toolbar .components-toolbar { diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 0d12b7f8e4d7db..255ae8708c77aa 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -155,6 +155,24 @@ class ParagraphBlock extends Component { setAttributes( { align: nextAlign } ); } } /> + { + setAttributes( { align: nextAlign } ); + } } + /> + { + setAttributes( { align: nextAlign } ); + } } + /> + { + setAttributes( { align: nextAlign } ); + } } + /> diff --git a/packages/components/src/responsive-toolbar/index.js b/packages/components/src/responsive-toolbar/index.js index 56222280ef4b69..9300747963b541 100644 --- a/packages/components/src/responsive-toolbar/index.js +++ b/packages/components/src/responsive-toolbar/index.js @@ -99,7 +99,21 @@ class ResponsiveToolbar extends Component { } render() { - const { children, instanceId, className, ...props } = this.props; + const defaultRenderToggle = ( { onToggle, isOpen } ) => ( + + ); + const { + children, + instanceId, + className, + extraContentClassName, + renderToggle = defaultRenderToggle, + ...props + } = this.props; const { countHiddenChildren } = this.state; return ( @@ -124,14 +138,11 @@ class ResponsiveToolbar extends Component { noArrow position="bottom left" className="components-responsive-toolbar__dropdown" - contentClassName={ `components-responsive-toolbar__dropdown-content-${ instanceId }` } - renderToggle={ ( { onToggle, isOpen } ) => ( - - ) } + contentClassName={ classnames( + extraContentClassName, + `components-responsive-toolbar__dropdown-content-${ instanceId }` ) + } + renderToggle={ renderToggle } renderContent={ () => { return Children.map( children, ( child, index ) => { return cloneElement( child, { key: index } ); diff --git a/packages/components/src/slot-fill/slot.js b/packages/components/src/slot-fill/slot.js index cf6a51cb1ca188..5df02f615d1459 100644 --- a/packages/components/src/slot-fill/slot.js +++ b/packages/components/src/slot-fill/slot.js @@ -6,7 +6,7 @@ import { noop, map, isString, isFunction } from 'lodash'; /** * WordPress dependencies */ -import { Component, Children, cloneElement } from '@wordpress/element'; +import { Component, Children, cloneElement, Fragment } from '@wordpress/element'; class Slot extends Component { constructor() { @@ -67,9 +67,9 @@ class Slot extends Component { } ); return ( -
+ { isFunction( children ) ? children( fills.filter( Boolean ) ) : fills } -
+ ); } } diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index e61b412ab10bde..94afdbd2038296 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -2,7 +2,6 @@ margin: 0; border: $border-width solid $light-gray-500; background-color: $white; - display: inline-flex; } div.components-toolbar { diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index fa26b011ebdaa4..5d1ca341e6f5cd 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -847,22 +847,6 @@ left: 0; right: 0; - // Paint the borders on the toolbar itself on mobile. - border-top: $border-width solid $light-gray-500; - .components-toolbar { - border-top: none; - border-bottom: none; - - } - - @include break-small() { - border-top: none; - .components-toolbar { - border-top: $border-width solid $light-gray-500; - border-bottom: $border-width solid $light-gray-500; - } - } - // Floated items have special needs for the contextual toolbar position. .editor-block-list__block[data-align="left"] &, .editor-block-list__block[data-align="right"] & { diff --git a/packages/editor/src/components/block-toolbar/index.js b/packages/editor/src/components/block-toolbar/index.js index 5fa580ef55449b..764a61a82c92b7 100644 --- a/packages/editor/src/components/block-toolbar/index.js +++ b/packages/editor/src/components/block-toolbar/index.js @@ -2,7 +2,8 @@ * WordPress Dependencies */ import { withSelect } from '@wordpress/data'; -import { ResponsiveToolbar } from '@wordpress/components'; +import { Toolbar, ResponsiveToolbar } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal Dependencies @@ -27,12 +28,25 @@ function BlockToolbar( { blockClientIds, isValid, mode } ) { } return ( - - - - +
+ ( + + ) } + > + + + + - +
); } diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss index 0a76cbaf8f26d8..dfadd1090c3919 100644 --- a/packages/editor/src/components/block-toolbar/style.scss +++ b/packages/editor/src/components/block-toolbar/style.scss @@ -4,20 +4,21 @@ width: 100%; overflow: auto; // Allow horizontal scrolling on mobile. position: relative; + background: $white; + + // Avoid right border on the container + border-top: $border-width solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; + border-left: $border-width solid $light-gray-500; // Allow overflow on desktop. @include break-small() { 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: 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; @@ -32,3 +33,13 @@ } } } + +.editor-block-toolbar__tools { + display: inline-block; + width: calc(100% - 36px); +} + +.editor-block-toolbar__tools-dropdown .components-popover__content { + display: flex; + flex-wrap: wrap; +}