WordPress · diegohaz · Oct 10, 2019 · Oct 10, 2019 · Oct 10, 2019 · Oct 12, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -7,7 +7,7 @@ import { find } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 
 const DEFAULT_ALIGNMENT_CONTROLS = [
 	{
@@ -43,7 +43,7 @@ export function AlignmentToolbar( props ) {
 	const activeAlignment = find( alignmentControls, ( control ) => control.align === value );
 
 	return (
-		<Toolbar
+		<ToolbarGroup
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
 			label={ label }

diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlignmentToolbar should allow custom alignment controls to be specified 1`] = `
-<Toolbar
+<ToolbarGroup
   controls={
     Array [
       Object {
@@ -27,7 +27,7 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
 `;
 
 exports[`AlignmentToolbar should match snapshot 1`] = `
-<Toolbar
+<ToolbarGroup
   controls={
     Array [
       Object {

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -51,7 +51,7 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	return (
-		<Toolbar
+		<ToolbarGroup
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon }
 			label={ __( 'Change alignment' ) }

diff --git a/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockAlignmentToolbar should match snapshot 1`] = `
-<Toolbar
+<ToolbarGroup
   controls={
     Array [
       Object {

diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, Toolbar } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+import { createSlotFill, ToolbarGroup, __experimentalToolbarContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,15 +11,26 @@ import { ifBlockEditSelected } from '../block-edit/context';
 
 const { Fill, Slot } = createSlotFill( 'BlockControls' );
 
-const BlockControlsFill = ( { controls, children } ) => (
-	<Fill>
-		<Toolbar controls={ controls } />
-		{ children }
-	</Fill>
-);
+function BlockControlsSlot( props ) {
+	const accessibleToolbarState = useContext( __experimentalToolbarContext );
+	return <Slot { ...props } fillProps={ accessibleToolbarState || null } />;
+}
+
+function BlockControlsFill( { controls, children } ) {
+	return (
+		<Fill>
+			{ ( fillProps ) => (
+				<__experimentalToolbarContext.Provider value={ fillProps }>
+					<ToolbarGroup controls={ controls } />
+					{ children }
+				</__experimentalToolbarContext.Provider>
+			) }
+		</Fill>
+	);
+}
 
 const BlockControls = ifBlockEditSelected( BlockControlsFill );
 
-BlockControls.Slot = Slot;
+BlockControls.Slot = BlockControlsSlot;
 
 export default BlockControls;
diff --git a/packages/block-editor/src/components/block-format-controls/index.js b/packages/block-editor/src/components/block-format-controls/index.js
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+import { createSlotFill, __experimentalToolbarContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,8 +11,25 @@ import { ifBlockEditSelected } from '../block-edit/context';
 
 const { Fill, Slot } = createSlotFill( 'BlockFormatControls' );
 
-const BlockFormatControls = ifBlockEditSelected( Fill );
+function BlockFormatControlsSlot( props ) {
+	const accessibleToolbarState = useContext( __experimentalToolbarContext );
+	return <Slot { ...props } fillProps={ accessibleToolbarState || null } />;
+}
 
-BlockFormatControls.Slot = Slot;
+function BlockFormatControlsFill( props ) {
+	return (
+		<Fill { ...props }>
+			{ ( fillProps ) => (
+				<__experimentalToolbarContext.Provider value={ fillProps }>
+					{ props.children }
+				</__experimentalToolbarContext.Provider>
+			) }
+		</Fill>
+	);
+}
+
+const BlockFormatControls = ifBlockEditSelected( BlockFormatControlsFill );
+
+BlockFormatControls.Slot = BlockFormatControlsSlot;
 
 export default BlockFormatControls;
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Toolbar, Button } from '@wordpress/components';
+import { ToolbarGroup, Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 
@@ -28,7 +28,7 @@ const BlockBreadcrumb = forwardRef( ( { clientId }, ref ) => {
 
 	return (
 		<div className="editor-block-list__breadcrumb block-editor-block-list__breadcrumb">
-			<Toolbar>
+			<ToolbarGroup>
 				{ rootClientId && (
 					<>
 						<BlockTitle clientId={ rootClientId } />
@@ -38,7 +38,7 @@ const BlockBreadcrumb = forwardRef( ( { clientId }, ref ) => {
 				<Button ref={ ref } onClick={ () => setNavigationMode( false ) }>
 					<BlockTitle clientId={ clientId } />
 				</Button>
-			</Toolbar>
+			</ToolbarGroup>
 		</div>
 	);
 } );

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -1,3 +1,7 @@
+.block-editor-block-contextual-toolbar {
+	display: block;
+}
+
 .block-editor-block-list__layout .components-draggable__clone {
 	// Hide the Block UI when dragging the block.
 	// This ensures the page scroll properly (no sticky elements).
@@ -875,13 +879,15 @@
 
 		// Paint the borders on the toolbar itself on mobile.
 		border-top: $border-width solid $light-gray-800;
+		.components-toolbar-group,
 		.components-toolbar {
 			border-top: none;
 			border-bottom: none;
 		}
 
 		@include break-small() {
 			border-top: none;
+			.components-toolbar-group,
 			.components-toolbar {
 				border-top: $border-width solid $light-gray-800;
 				border-bottom: $border-width solid $light-gray-800;
@@ -1025,6 +1031,7 @@
 	left: -$block-padding - $block-left-border-width;
 	top: (($block-padding * -2) - $block-left-border-width);
 
+	.components-toolbar-group,
 	.components-toolbar {
 		border: none;
 		line-height: 1;
@@ -1066,6 +1073,7 @@
 		left: -$block-padding;
 		top: -$block-toolbar-height - $block-padding;
 
+		.components-toolbar-group,
 		.components-toolbar {
 			background: $white;
 			border: $border-width solid $blue-medium-focus;

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -8,7 +8,7 @@ import { castArray, flow } from 'lodash';
  */
 import { __, _n } from '@wordpress/i18n';
 import {
-	Toolbar,
+	ToolbarGroup,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -46,7 +46,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 				onInsertBefore,
 				onRemove,
 			} ) => (
-				<Toolbar>
+				<ToolbarGroup>
 					<DropdownMenu
 						icon="ellipsis"
 						label={ __( 'More options' ) }
@@ -124,7 +124,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 							</>
 						) }
 					</DropdownMenu>
-				</Toolbar>
+				</ToolbarGroup>
 			) }
 		</BlockActions>
 	);

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -7,7 +7,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Dropdown, IconButton, Toolbar, PanelBody, Path, SVG } from '@wordpress/components';
+import { Dropdown, IconButton, ToolbarGroup, PanelBody, Path, SVG } from '@wordpress/components';
 import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock, getBlockFromExample } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
@@ -71,14 +71,14 @@ export class BlockSwitcher extends Component {
 
 		if ( ! hasBlockStyles && ! possibleBlockTransformations.length ) {
 			return (
-				<Toolbar>
+				<ToolbarGroup>
 					<IconButton
 						disabled
 						className="editor-block-switcher__no-switcher-icon block-editor-block-switcher__no-switcher-icon"
 						label={ __( 'Block icon' ) }
 						icon={ <BlockIcon icon={ icon } showColors /> }
 					/>
-				</Toolbar>
+				</ToolbarGroup>
 			);
 		}
 
@@ -109,7 +109,7 @@ export class BlockSwitcher extends Component {
 					);
 
 					return (
-						<Toolbar>
+						<ToolbarGroup>
 							<IconButton
 								className="editor-block-switcher__toggle block-editor-block-switcher__toggle"
 								onClick={ onToggle }
@@ -125,7 +125,7 @@ export class BlockSwitcher extends Component {
 									</>
 								) }
 							/>
-						</Toolbar>
+						</ToolbarGroup>
 					);
 				} }
 				renderContent={ ( { onClose } ) => (

diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockSwitcher should render disabled block switcher with multi block of different types when no transforms 1`] = `
-<Toolbar>
+<ToolbarGroup>
   <ForwardRef(IconButton)
     className="editor-block-switcher__no-switcher-icon block-editor-block-switcher__no-switcher-icon"
     disabled={true}
@@ -13,7 +13,7 @@ exports[`BlockSwitcher should render disabled block switcher with multi block of
     }
     label="Block icon"
   />
-</Toolbar>
+</ToolbarGroup>
 `;
 
 exports[`BlockSwitcher should render enabled block switcher with multi block when transforms exist 1`] = `

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -35,11 +35,18 @@
 		line-height: 0;
 	}
 
+	.components-toolbar-group {
+		border-color: $light-gray-800;
+		border-left: 0;
+		margin: 0;
+	}
+
 	// Add a left border and adjust the color for Top Toolbar mode.
 	.has-fixed-toolbar & {
 		box-shadow: none;
 		border-left: $border-width solid $light-gray-500;
 
+		.components-toolbar-group,
 		.components-toolbar {
 			border-color: $light-gray-500;
 		}

diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -36,7 +36,7 @@ export function BlockVerticalAlignmentToolbar( { value, onChange, controls = DEF
 	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	return (
-		<Toolbar
+		<ToolbarGroup
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignment ? activeAlignment.icon : defaultAlignmentControl.icon }
 			label={ _x( 'Change vertical alignment', 'Block vertical alignment setting label' ) }