Normalize the block toolbar of the audio, file, media and text, video…

…, site logo and post featured image blocks. (#30012)
WordPress · Mar 19, 2021 · ee18bd7 · ee18bd7
1 parent f8a8465
commit ee18bd7
Show file tree

Hide file tree

Showing 20 changed files with 171 additions and 167 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -218,11 +218,13 @@ _Returns_
 
 Undocumented declaration.
 
-<a name="BlockVerticalAlignmentToolbar" href="#BlockVerticalAlignmentToolbar">#</a> **BlockVerticalAlignmentToolbar**
+<a name="BlockVerticalAlignmentControl" href="#BlockVerticalAlignmentControl">#</a> **BlockVerticalAlignmentControl**
 
-_Related_
+Undocumented declaration.
 
--   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md>
+<a name="BlockVerticalAlignmentToolbar" href="#BlockVerticalAlignmentToolbar">#</a> **BlockVerticalAlignmentToolbar**
+
+Undocumented declaration.
 
 <a name="ButtonBlockerAppender" href="#ButtonBlockerAppender">#</a> **ButtonBlockerAppender**
 

diff --git a/...lock-vertical-alignment-toolbar/README.md → ...lock-vertical-alignment-control/README.md b/...lock-vertical-alignment-toolbar/README.md → ...lock-vertical-alignment-control/README.md
@@ -1,20 +1,20 @@
-BlockVerticalAlignmentToolbar
+BlockVerticalAlignmentControl
 =============================
 
-`BlockVerticalAlignmentToolbar` is a simple `Toolbar` component designed to provide _vertical_ alignment UI controls for use within the editor `BlockControls` toolbar.
+`BlockVerticalAlignmentControl` is a simple component designed to provide _vertical_ alignment UI controls for use within the editor `BlockControls` toolbar.
 
-This builds upon similar patterns to the [`BlockAlignmentToolbar`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/block-alignment-toolbar) but is focused on vertical alignment only.
+This builds upon similar patterns to the [`BlockAlignmentControl`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/block-alignment-control) but is focused on vertical alignment only.
 
 ## Usage
 
-In a block's `edit` implementation, render a `<BlockControls />` component. Then inside of this add the `<BlockVerticalAlignmentToolbar />` where required. 
+In a block's `edit` implementation, render a `<BlockControls />` component. Then inside of this add the `<BlockVerticalAlignmentControl />` where required. 
 
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
 import {
 	BlockControls,
-	BlockVerticalAlignmentToolbar,
+	BlockVerticalAlignmentControl,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
@@ -40,8 +40,8 @@ registerBlockType( 'my-plugin/my-block', {
 
 		return (
 			<>
-				<BlockControls>
-					<BlockVerticalAlignmentToolbar
+				<BlockControls group="block">
+					<BlockVerticalAlignmentControl
 						onChange={ onChange }
 						value={ verticalAlignment }
 					/>
@@ -68,12 +68,6 @@ _Note:_ the user can repeatedly click on the toolbar buttons to toggle the align
 
 The current value of the alignment setting. You may only choose from the `Options` listed above.
 
-### `isCollapsed`
-* **Type:** `Boolean`
-* **Default:** `true`
-
-Whether to display toolbar options in the dropdown menu. This toolbar is collapsed by default.
-
 ### `onChange`
 * **Type:** `Function`
 
@@ -87,4 +81,4 @@ const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment
 
 ## Examples
 
-The [Core Columns](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/columns) Block utilises the `BlockVerticalAlignmentToolbar`.
+The [Core Columns](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/columns) Block utilises the `BlockVerticalAlignmentControl`.
diff --git a/...block-vertical-alignment-toolbar/icons.js → ...block-vertical-alignment-control/icons.js b/...block-vertical-alignment-toolbar/icons.js → ...block-vertical-alignment-control/icons.js
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/index.js
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import BlockVerticalAlignmentUI from './ui';
+
+export function BlockVerticalAlignmentControl( props ) {
+	return <BlockVerticalAlignmentUI { ...props } isToolbar={ false } />;
+}
+
+export function BlockVerticalAlignmentToolbar( props ) {
+	return <BlockVerticalAlignmentUI { ...props } isToolbar />;
+}
diff --git a/...-toolbar/test/__snapshots__/index.js.snap → ...-control/test/__snapshots__/index.js.snap b/...-toolbar/test/__snapshots__/index.js.snap → ...-control/test/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = `
+exports[`BlockVerticalAlignmentUI should match snapshot 1`] = `
 <ToolbarGroup
   controls={
     Array [

diff --git a/...-vertical-alignment-toolbar/test/index.js → ...-vertical-alignment-control/test/index.js b/...-vertical-alignment-toolbar/test/index.js → ...-vertical-alignment-control/test/index.js
@@ -6,14 +6,15 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { BlockVerticalAlignmentToolbar } from '../';
+import BlockVerticalAlignmentUI from '../ui';
 
-describe( 'BlockVerticalAlignmentToolbar', () => {
+describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();
 
 	const wrapper = shallow(
-		<BlockVerticalAlignmentToolbar
+		<BlockVerticalAlignmentUI
+			isToolbar
 			value={ alignment }
 			onChange={ onChange }
 		/>

diff --git a/...block-vertical-alignment-toolbar/index.js → ...ts/block-vertical-alignment-control/ui.js b/...block-vertical-alignment-toolbar/index.js → ...ts/block-vertical-alignment-control/ui.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { ToolbarGroup } from '@wordpress/components';
+import { ToolbarGroup, DropdownMenu } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,11 +31,13 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-export function BlockVerticalAlignmentToolbar( {
+function BlockVerticalAlignmentUI( {
 	value,
 	onChange,
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
+	isToolbar,
+	isToolbarButton = true,
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -45,10 +47,12 @@ export function BlockVerticalAlignmentToolbar( {
 	const defaultAlignmentControl =
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
+	const UIComponent = isToolbar ? ToolbarGroup : DropdownMenu;
+	const extraProps = isToolbar ? { isCollapsed } : { isToolbarButton };
+
 	return (
-		<ToolbarGroup
+		<UIComponent
 			popoverProps={ POPOVER_PROPS }
-			isCollapsed={ isCollapsed }
 			icon={
 				activeAlignment
 					? activeAlignment.icon
@@ -66,11 +70,12 @@ export function BlockVerticalAlignmentToolbar( {
 					onClick: applyOrUnset( control ),
 				};
 			} ) }
+			{ ...extraProps }
 		/>
 	);
 }
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md
  */
-export default BlockVerticalAlignmentToolbar;
+export default BlockVerticalAlignmentUI;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -28,7 +28,10 @@ export { default as __experimentalBlockNavigationEditor } from './block-navigati
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
-export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
+export {
+	BlockVerticalAlignmentToolbar,
+	BlockVerticalAlignmentControl,
+} from './block-vertical-alignment-control';
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';

diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
@@ -10,7 +10,10 @@ export {
 } from './block-controls';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
-export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
+export {
+	BlockVerticalAlignmentToolbar,
+	BlockVerticalAlignmentControl,
+} from './block-vertical-alignment-control';
 export * from './colors';
 export * from './gradients';
 export * from './font-sizes';

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -13,7 +13,6 @@ import {
 	FormFileUpload,
 	NavigableMenu,
 	MenuItem,
-	ToolbarGroup,
 	ToolbarButton,
 	Dropdown,
 	withFilters,
@@ -119,17 +118,15 @@ const MediaReplaceFlow = ( {
 			popoverProps={ POPOVER_PROPS }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarGroup className="media-replace-flow">
-					<ToolbarButton
-						ref={ editMediaButtonRef }
-						aria-expanded={ isOpen }
-						aria-haspopup="true"
-						onClick={ onToggle }
-						onKeyDown={ openOnArrowDown }
-					>
-						{ name }
-					</ToolbarButton>
-				</ToolbarGroup>
+				<ToolbarButton
+					ref={ editMediaButtonRef }
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+					onClick={ onToggle }
+					onKeyDown={ openOnArrowDown }
+				>
+					{ name }
+				</ToolbarButton>
 			) }
 			renderContent={ ( { onClose } ) => (
 				<>

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -134,7 +134,7 @@ function AudioEdit( {
 
 	return (
 		<>
-			<BlockControls>
+			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ src }

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -10,7 +10,6 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	withNotices,
-	ToolbarGroup,
 	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -182,20 +181,18 @@ function FileEdit( { attributes, setAttributes, noticeUI, noticeOperations } ) {
 					changeShowDownloadButton,
 				} }
 			/>
-			<BlockControls>
-				<ToolbarGroup>
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ href }
-						accept="*"
-						onSelect={ onSelectFile }
-						onError={ onUploadError }
-					/>
-					<ClipboardToolbarButton
-						text={ href }
-						disabled={ isBlobURL( href ) }
-					/>
-				</ToolbarGroup>
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ href }
+					accept="*"
+					onSelect={ onSelectFile }
+					onError={ onUploadError }
+				/>
+				<ClipboardToolbarButton
+					text={ href }
+					disabled={ isBlobURL( href ) }
+				/>
 			</BlockControls>
 			<div { ...blockProps }>
 				<div className={ 'wp-block-file__content-wrapper' }>

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -11,7 +11,7 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { withNotices } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
-	BlockAlignmentToolbar,
+	BlockAlignmentControl,
 	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
@@ -302,8 +302,8 @@ export function ImageEdit( {
 				/>
 			) }
 			{ ! url && (
-				<BlockControls>
-					<BlockAlignmentToolbar
+				<BlockControls group="block">
+					<BlockAlignmentControl
 						value={ align }
 						onChange={ updateAlignment }
 					/>