Convert core toolbar buttons into ToolbarButton (#20008)

WordPress · May 7, 2020 · b87d666 · b87d666
1 parent 8eed967
commit b87d666
Show file tree

Hide file tree

Showing 39 changed files with 498 additions and 253 deletions.
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';
 import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
 
 const DEFAULT_ALIGNMENT_CONTROLS = [
@@ -58,7 +58,7 @@ export function AlignmentToolbar( props ) {
 	}
 
 	return (
-		<Toolbar
+		<ToolbarGroup
 			isCollapsed={ isCollapsed }
 			icon={ setIcon() }
 			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 {
@@ -58,7 +58,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';
 import {
@@ -67,7 +67,7 @@ export function BlockAlignmentToolbar( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	return (
-		<Toolbar
+		<ToolbarGroup
 			isCollapsed={ isCollapsed }
 			icon={
 				activeAlignmentControl

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,17 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { createSlotFill, Toolbar } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	createSlotFill,
+	ToolbarGroup,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,15 +20,32 @@ 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( ToolbarContext );
+	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+}
+
+function BlockControlsFill( { controls, children } ) {
+	return (
+		<Fill>
+			{ ( fillProps ) => {
+				// Children passed to BlockControlsFill will not have access to any
+				// React Context whose Provider is part of the BlockControlsSlot tree.
+				// So we re-create the Provider in this subtree.
+				const value = ! isEmpty( fillProps ) ? fillProps : null;
+				return (
+					<ToolbarContext.Provider value={ value }>
+						<ToolbarGroup controls={ controls } />
+						{ children }
+					</ToolbarContext.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,16 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	createSlotFill,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,8 +19,28 @@ import { ifBlockEditSelected } from '../block-edit/context';
 
 const { Fill, Slot } = createSlotFill( 'BlockFormatControls' );
 
-const BlockFormatControls = ifBlockEditSelected( Fill );
+function BlockFormatControlsSlot( props ) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+}
+
+function BlockFormatControlsFill( props ) {
+	return (
+		<Fill>
+			{ ( fillProps ) => {
+				const value = ! isEmpty( fillProps ) ? fillProps : null;
+				return (
+					<ToolbarContext.Provider value={ value }>
+						{ props.children }
+					</ToolbarContext.Provider>
+				);
+			} }
+		</Fill>
+	);
+}
+
+const BlockFormatControls = ifBlockEditSelected( BlockFormatControlsFill );
 
-BlockFormatControls.Slot = Slot;
+BlockFormatControls.Slot = BlockFormatControlsSlot;
 
 export default BlockFormatControls;
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -484,6 +484,7 @@
 	border-radius: $radius-block-ui;
 	background-color: $white;
 
+	.block-editor-block-toolbar .components-toolbar-group,
 	.block-editor-block-toolbar .components-toolbar {
 		border-right-color: $dark-gray-primary;
 	}

diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { castArray, first, last, partial } from 'lodash';
+import { castArray, first, last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -121,9 +121,14 @@ const BlockMoverButton = forwardRef(
 		);
 		const moverFunction =
 			direction === 'up' ? moveBlocksUp : moveBlocksDown;
-		const onClick = isDisabled
-			? null
-			: partial( moverFunction, clientIds, rootClientId );
+
+		const onClick = ( event ) => {
+			moverFunction( clientIds, rootClientId );
+			if ( props.onClick ) {
+				props.onClick( event );
+			}
+		};
+
 		const descriptionId = `block-editor-block-mover-button__description-${ instanceId }`;
 
 		return (
@@ -141,9 +146,9 @@ const BlockMoverButton = forwardRef(
 						isRTL
 					) }
 					aria-describedby={ descriptionId }
-					onClick={ onClick }
-					aria-disabled={ isDisabled }
 					{ ...props }
+					onClick={ isDisabled ? null : onClick }
+					aria-disabled={ isDisabled }
 				/>
 				<span
 					id={ descriptionId }

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -7,7 +7,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarGroup,
+	__experimentalToolbarItem as ToolbarItem,
+} from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
@@ -73,16 +76,28 @@ export class BlockMover extends Component {
 						onDragEnd={ onDraggableEnd }
 					>
 						<ToolbarGroup>
-							<BlockMoverUpButton
-								clientIds={ clientIds }
+							<ToolbarItem
 								onFocus={ this.onFocus }
 								onBlur={ this.onBlur }
-							/>
-							<BlockMoverDownButton
-								clientIds={ clientIds }
+							>
+								{ ( itemProps ) => (
+									<BlockMoverUpButton
+										clientIds={ clientIds }
+										{ ...itemProps }
+									/>
+								) }
+							</ToolbarItem>
+							<ToolbarItem
 								onFocus={ this.onFocus }
 								onBlur={ this.onBlur }
-							/>
+							>
+								{ ( itemProps ) => (
+									<BlockMoverDownButton
+										clientIds={ clientIds }
+										{ ...itemProps }
+									/>
+								) }
+							</ToolbarItem>
 						</ToolbarGroup>
 					</div>
 				) }