Implement the smart toolbar for The block's toolbar

WordPress · Aug 23, 2018 · b67ffcf · b67ffcf
1 parent f0524c7
commit b67ffcf
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 41 deletions.
diff --git 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
@@ -155,6 +155,24 @@ class ParagraphBlock extends Component {
 							setAttributes( { align: nextAlign } );
 						} }
 					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Text Settings' ) } className="blocks-font-size">

diff --git 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 } ) => (
+			<IconButton
+				icon="arrow-down-alt2"
+				onClick={ onToggle }
+				aria-expanded={ 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 } ) => (
-							<IconButton
-								icon="arrow-down-alt2"
-								onClick={ onToggle }
-								aria-expanded={ 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
@@ -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 (
-			<div ref={ this.bindNode } role="presentation">
+			<Fragment>
 				{ isFunction( children ) ? children( fills.filter( Boolean ) ) : fills }
-			</div>
+			</Fragment>
 		);
 	}
 }

diff --git 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
@@ -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
@@ -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 (
-		<ResponsiveToolbar className="editor-block-toolbar">
-			<BlockSwitcher clientIds={ blockClientIds } />
-			<BlockControls.Slot />
-			<BlockFormatControls.Slot />
+		<div className="editor-block-toolbar">
+			<ResponsiveToolbar
+				className="editor-block-toolbar__tools"
+				extraContentClassName="editor-block-toolbar__tools-dropdown"
+				renderToggle={ ( { onToggle, isOpen } ) => (
+					<Toolbar controls={ [ {
+						icon: 'arrow-down-alt2',
+						title: __( 'More Tools' ),
+						onClick: onToggle,
+						extraProps: { 'aria-expanded': isOpen },
+					} ] } />
+				) }
+			>
+				<BlockSwitcher clientIds={ blockClientIds } />
+				<BlockControls.Slot />
+				<BlockFormatControls.Slot />
+			</ResponsiveToolbar>
 			<BlockSettingsMenu clientIds={ blockClientIds } />
-		</ResponsiveToolbar>
+		</div>
 	);
 }
 

diff --git 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;
+}