From 2660f77e405b98e8ba6f33044f5c9a06934c70e3 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Feb 2021 10:37:38 +0100
Subject: [PATCH 1/4] Normalize the image block toolbar

---
 packages/block-editor/README.md               |  4 +
 .../README.md                                 |  0
 .../block-alignment-control/index.js          | 12 +++
 .../test/__snapshots__/index.js.snap          |  0
 .../test/index.js                             |  0
 .../ui.js}                                    | 16 ++--
 packages/block-editor/src/components/index.js |  5 +-
 packages/block-library/src/image/edit.js      | 75 +++++++++----------
 packages/block-library/src/image/image.js     | 35 ++++++---
 9 files changed, 87 insertions(+), 60 deletions(-)
 rename packages/block-editor/src/components/{block-alignment-toolbar => block-alignment-control}/README.md (100%)
 create mode 100644 packages/block-editor/src/components/block-alignment-control/index.js
 rename packages/block-editor/src/components/{block-alignment-toolbar => block-alignment-control}/test/__snapshots__/index.js.snap (100%)
 rename packages/block-editor/src/components/{block-alignment-toolbar => block-alignment-control}/test/index.js (100%)
 rename packages/block-editor/src/components/{block-alignment-toolbar/index.js => block-alignment-control/ui.js} (88%)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 31c2dde299bb94..55653a083dd7c6 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -86,6 +86,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/autocomplete/README.md>
 
+<a name="BlockAlignmentControl" href="#BlockAlignmentControl">#</a> **BlockAlignmentControl**
+
+Undocumented declaration.
+
 <a name="BlockAlignmentToolbar" href="#BlockAlignmentToolbar">#</a> **BlockAlignmentToolbar**
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/README.md b/packages/block-editor/src/components/block-alignment-control/README.md
similarity index 100%
rename from packages/block-editor/src/components/block-alignment-toolbar/README.md
rename to packages/block-editor/src/components/block-alignment-control/README.md
diff --git a/packages/block-editor/src/components/block-alignment-control/index.js b/packages/block-editor/src/components/block-alignment-control/index.js
new file mode 100644
index 00000000000000..0c6db311a25731
--- /dev/null
+++ b/packages/block-editor/src/components/block-alignment-control/index.js
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentUI from './ui';
+
+export function BlockAlignmentControl( props ) {
+	return <BlockAlignmentUI { ...props } isToolbar={ false } />;
+}
+
+export function BlockAlignmentToolbar( props ) {
+	return <BlockAlignmentUI { ...props } isToolbar />;
+}
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
similarity index 100%
rename from packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
rename to packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
similarity index 100%
rename from packages/block-editor/src/components/block-alignment-toolbar/test/index.js
rename to packages/block-editor/src/components/block-alignment-control/test/index.js
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-control/ui.js
similarity index 88%
rename from packages/block-editor/src/components/block-alignment-toolbar/index.js
rename to packages/block-editor/src/components/block-alignment-control/ui.js
index 25670879ad815c..57bdbd0f520f78 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarGroup } from '@wordpress/components';
+import { DropdownMenu, ToolbarGroup } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
 	positionCenter,
@@ -49,10 +49,11 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-export function BlockAlignmentToolbar( {
+export function BlockAlignmentUI( {
 	value,
 	onChange,
 	controls = DEFAULT_CONTROLS,
+	isToolbar,
 	isCollapsed = true,
 } ) {
 	const { wideControlsEnabled = false } = useSelect( ( select ) => {
@@ -61,7 +62,7 @@ export function BlockAlignmentToolbar( {
 		return {
 			wideControlsEnabled: settings.alignWide,
 		};
-	} );
+	}, [] );
 	const layout = useLayout();
 	const supportsAlignments = layout.type === 'default';
 
@@ -88,10 +89,12 @@ export function BlockAlignmentToolbar( {
 	const defaultAlignmentControl =
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
+	const UIComponent = isToolbar ? ToolbarGroup : DropdownMenu;
+	const extraProps = isToolbar ? { isCollapsed } : {};
+
 	return (
-		<ToolbarGroup
+		<UIComponent
 			popoverProps={ POPOVER_PROPS }
-			isCollapsed={ isCollapsed }
 			icon={
 				activeAlignmentControl
 					? activeAlignmentControl.icon
@@ -107,8 +110,9 @@ export function BlockAlignmentToolbar( {
 					onClick: applyOrUnset( control ),
 				};
 			} ) }
+			{ ...extraProps }
 		/>
 	);
 }
 
-export default BlockAlignmentToolbar;
+export default BlockAlignmentUI;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 0b857366d2a363..16977e34af4976 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -7,7 +7,10 @@ export * from './gradients';
 export * from './font-sizes';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as Autocomplete } from './autocomplete';
-export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
+export {
+	BlockAlignmentControl,
+	BlockAlignmentToolbar,
+} from './block-alignment-control';
 export { default as __experimentalBlockFullHeightAligmentToolbar } from './block-full-height-alignment-toolbar';
 export { default as __experimentalBlockAlignmentMatrixToolbar } from './block-alignment-matrix-toolbar';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index d042bd4fc4a61c..15477e3e1eaca9 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -264,14 +264,6 @@ export function ImageEdit( {
 	}, [ isTemp ] );
 
 	const isExternal = isExternalImage( id, url );
-	const controls = (
-		<BlockControls>
-			<BlockAlignmentToolbar
-				value={ align }
-				onChange={ updateAlignment }
-			/>
-		</BlockControls>
-	);
 	const src = isExternal ? url : undefined;
 	const mediaPreview = !! url && (
 		<img
@@ -282,21 +274,6 @@ export function ImageEdit( {
 		/>
 	);
 
-	const mediaPlaceholder = (
-		<MediaPlaceholder
-			icon={ <BlockIcon icon={ icon } /> }
-			onSelect={ onSelectImage }
-			onSelectURL={ onSelectURL }
-			notices={ noticeUI }
-			onError={ onUploadError }
-			accept="image/*"
-			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			value={ { id, src } }
-			mediaPreview={ mediaPreview }
-			disableMediaButtons={ url }
-		/>
-	);
-
 	const classes = classnames( className, {
 		'is-transient': isBlobURL( url ),
 		'is-resized': !! width || !! height,
@@ -310,25 +287,41 @@ export function ImageEdit( {
 	} );
 
 	return (
-		<>
-			{ controls }
-			<figure { ...blockProps }>
-				{ url && (
-					<Image
-						attributes={ attributes }
-						setAttributes={ setAttributes }
-						isSelected={ isSelected }
-						insertBlocksAfter={ insertBlocksAfter }
-						onReplace={ onReplace }
-						onSelectImage={ onSelectImage }
-						onSelectURL={ onSelectURL }
-						onUploadError={ onUploadError }
-						containerRef={ ref }
+		<figure { ...blockProps }>
+			{ url && (
+				<Image
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					onReplace={ onReplace }
+					onSelectImage={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onUploadError={ onUploadError }
+					containerRef={ ref }
+				/>
+			) }
+			{ ! url && (
+				<BlockControls>
+					<BlockAlignmentToolbar
+						value={ align }
+						onChange={ updateAlignment }
 					/>
-				) }
-				{ mediaPlaceholder }
-			</figure>
-		</>
+				</BlockControls>
+			) }
+			<MediaPlaceholder
+				icon={ <BlockIcon icon={ icon } /> }
+				onSelect={ onSelectImage }
+				onSelectURL={ onSelectURL }
+				notices={ noticeUI }
+				onError={ onUploadError }
+				accept="image/*"
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				value={ { id, src } }
+				mediaPreview={ mediaPreview }
+				disableMediaButtons={ url }
+			/>
+		</figure>
 	);
 }
 
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 810c5172b44cd7..4997320b5f935b 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -28,6 +28,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
+	BlockAlignmentControl,
 } from '@wordpress/block-editor';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -259,6 +260,16 @@ export default function Image( {
 		} );
 	}
 
+	function updateAlignment( nextAlign ) {
+		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
+			? { width: undefined, height: undefined }
+			: {};
+		setAttributes( {
+			...extraUpdatedAttributes,
+			align: nextAlign,
+		} );
+	}
+
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -271,8 +282,12 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls>
-				{ ! multiImageSelection && ! isEditingImage && (
-					<ToolbarGroup>
+				<ToolbarGroup>
+					<BlockAlignmentControl
+						value={ align }
+						onChange={ updateAlignment }
+					/>
+					{ ! multiImageSelection && ! isEditingImage && (
 						<ImageURLInputUI
 							url={ href || '' }
 							onChangeUrl={ onSetHref }
@@ -283,26 +298,22 @@ export default function Image( {
 							linkClass={ linkClass }
 							rel={ rel }
 						/>
-					</ToolbarGroup>
-				) }
-				{ allowCrop && (
-					<ToolbarGroup>
+					) }
+					{ allowCrop && (
 						<ToolbarButton
 							onClick={ () => setIsEditingImage( true ) }
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>
-					</ToolbarGroup>
-				) }
-				{ externalBlob && (
-					<ToolbarGroup>
+					) }
+					{ externalBlob && (
 						<ToolbarButton
 							onClick={ uploadExternal }
 							icon={ upload }
 							label={ __( 'Upload external image' ) }
 						/>
-					</ToolbarGroup>
-				) }
+					) }
+				</ToolbarGroup>
 				{ ! multiImageSelection && ! isEditingImage && (
 					<MediaReplaceFlow
 						mediaId={ id }

From 7b2932a55c8fbeef6af929fa08fdf6f88626ed0b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Feb 2021 13:16:10 +0100
Subject: [PATCH 2/4] Move the convert to cover button

---
 packages/block-library/src/image/image.js | 26 +++++++++++------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 4997320b5f935b..543a5580216523 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -313,6 +313,18 @@ export default function Image( {
 							label={ __( 'Upload external image' ) }
 						/>
 					) }
+					{ ! multiImageSelection && coverBlockExists && (
+						<ToolbarButton
+							icon={ textColor }
+							label={ __( 'Add text over image' ) }
+							onClick={ () =>
+								replaceBlocks(
+									currentId,
+									switchToBlockType( block, 'core/cover' )
+								)
+							}
+						/>
+					) }
 				</ToolbarGroup>
 				{ ! multiImageSelection && ! isEditingImage && (
 					<MediaReplaceFlow
@@ -325,20 +337,6 @@ export default function Image( {
 						onError={ onUploadError }
 					/>
 				) }
-				{ ! multiImageSelection && coverBlockExists && (
-					<ToolbarGroup>
-						<ToolbarButton
-							icon={ textColor }
-							label={ __( 'Add text over image' ) }
-							onClick={ () =>
-								replaceBlocks(
-									currentId,
-									switchToBlockType( block, 'core/cover' )
-								)
-							}
-						/>
-					</ToolbarGroup>
-				) }
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Image settings' ) }>

From b591e195042b8d360141fe838e6d530596c8f85e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Feb 2021 13:30:37 +0100
Subject: [PATCH 3/4] Consolidate image editor toolbar

---
 packages/block-library/src/image/image-editing/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-library/src/image/image-editing/index.js b/packages/block-library/src/image/image-editing/index.js
index 223c291f191aae..7e5fac9b75cf01 100644
--- a/packages/block-library/src/image/image-editing/index.js
+++ b/packages/block-library/src/image/image-editing/index.js
@@ -39,8 +39,6 @@ export default function ImageEditor( {
 							<AspectRatioDropdown toggleProps={ toggleProps } />
 						) }
 					</ToolbarItem>
-				</ToolbarGroup>
-				<ToolbarGroup>
 					<RotationButton />
 				</ToolbarGroup>
 				<ToolbarGroup>

From c2ecfbb5006778787d118b7d8aeb748c7fea6c65 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 22 Feb 2021 15:13:22 +0100
Subject: [PATCH 4/4] Fix tests

---
 .../test/__snapshots__/index.js.snap                      | 2 +-
 .../src/components/block-alignment-control/test/index.js  | 6 +++---
 .../src/components/block-alignment-control/ui.js          | 5 +++--
 packages/block-editor/src/components/index.native.js      | 2 +-
 packages/components/src/dropdown-menu/index.js            | 8 ++++++--
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
index 5910fc1b29e976..bf43a991115033 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BlockAlignmentToolbar should match snapshot 1`] = `
+exports[`BlockAlignmentUI should match snapshot 1`] = `
 <ToolbarGroup
   controls={
     Array [
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
index 98d6f31d25f6a9..f69d4739ea5ca5 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-alignment-control/test/index.js
@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { BlockAlignmentToolbar } from '../';
+import BlockAlignmentUI from '../ui';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test
@@ -20,12 +20,12 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 } );
 useSelect.mockImplementation( () => ( { wideControlsEnabled: false } ) );
 
-describe( 'BlockAlignmentToolbar', () => {
+describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();
 
 	const wrapper = shallow(
-		<BlockAlignmentToolbar value={ alignment } onChange={ onChange } />
+		<BlockAlignmentUI value={ alignment } onChange={ onChange } isToolbar />
 	);
 
 	const controls = wrapper.props().controls;
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 57bdbd0f520f78..0ac3f4345e8e7f 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -49,12 +49,13 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-export function BlockAlignmentUI( {
+function BlockAlignmentUI( {
 	value,
 	onChange,
 	controls = DEFAULT_CONTROLS,
 	isToolbar,
 	isCollapsed = true,
+	isToolbarButton = true,
 } ) {
 	const { wideControlsEnabled = false } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -90,7 +91,7 @@ export function BlockAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : DropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar ? { isCollapsed } : { isToolbarButton };
 
 	return (
 		<UIComponent
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 614cd0515f34c8..3fbd2e0fc752fe 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -1,5 +1,5 @@
 // Block Creation Components
-export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
+export { BlockAlignmentToolbar } from './block-alignment-control';
 export { BlockContextProvider } from './block-context';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
index 74796e1c29dea5..64778f9da3914c 100644
--- a/packages/components/src/dropdown-menu/index.js
+++ b/packages/components/src/dropdown-menu/index.js
@@ -15,6 +15,7 @@ import { menu } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
+import ToolbarButton from '../toolbar-button';
 import Dropdown from '../dropdown';
 import { NavigableMenu } from '../navigable-container';
 
@@ -49,6 +50,7 @@ function DropdownMenu( {
 	menuLabel,
 	position,
 	noIcons,
+	isToolbarButton = false,
 } ) {
 	if ( menuLabel ) {
 		deprecated( '`menuLabel` prop in `DropdownComponent`', {
@@ -84,6 +86,8 @@ function DropdownMenu( {
 		popoverProps
 	);
 
+	const ButtonComponent = isToolbarButton ? ToolbarButton : Button;
+
 	return (
 		<Dropdown
 			className={ classnames( 'components-dropdown-menu', className ) }
@@ -113,7 +117,7 @@ function DropdownMenu( {
 				);
 
 				return (
-					<Button
+					<ButtonComponent
 						{ ...mergedToggleProps }
 						icon={ icon }
 						onClick={ ( event ) => {
@@ -135,7 +139,7 @@ function DropdownMenu( {
 						showTooltip={ toggleProps?.showTooltip ?? true }
 					>
 						{ mergedToggleProps.children }
-					</Button>
+					</ButtonComponent>
 				);
 			} }
 			renderContent={ ( props ) => {