Fix: Cover image tooltips for alignment are duplicated (#11263)

## Description Fixes: #6013 The same tooltip as used for Block Alignment and text Alignment. This PR makes sure we use different tooltips for the text alignment buttons. https://user-images.githubusercontent.com/253067/38373204-92586b58-38e8-11e8-8ec2-09e73368cacb.png ## How has this been tested? I added a cover block and I checked that the tooltips for text alignment are in the format "Text align left/center/right" and block alignment tooltips are in the format "Text left/center/right" ## Screenshots  Before: ![align](https://user-images.githubusercontent.com/253067/38373204-92586b58-38e8-11e8-8ec2-09e73368cacb.png) ![align2](https://user-images.githubusercontent.com/253067/38373205-928a870a-38e8-11e8-8391-ce5135c7593a.png) After: ![image](https://user-images.githubusercontent.com/11271197/47747203-b62a8f80-dc7f-11e8-86fd-970f642296ae.png)
WordPress · Nov 8, 2018 · f20c453 · f20c453
1 parent 53209f4
commit f20c453
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 10 deletions.
diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js
@@ -17,37 +17,37 @@ import { compose } from '@wordpress/compose';
  */
 import { withBlockEditContext } from '../block-edit/context';
 
-const ALIGNMENT_CONTROLS = [
+const DEFAULT_ALIGNMENT_CONTROLS = [
 	{
 		icon: 'editor-alignleft',
-		title: __( 'Align left' ),
+		title: __( 'Align text left' ),
 		align: 'left',
 	},
 	{
 		icon: 'editor-aligncenter',
-		title: __( 'Align center' ),
+		title: __( 'Align text center' ),
 		align: 'center',
 	},
 	{
 		icon: 'editor-alignright',
-		title: __( 'Align right' ),
+		title: __( 'Align text right' ),
 		align: 'right',
 	},
 ];
 
-export function AlignmentToolbar( { isCollapsed, value, onChange } ) {
+export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find( ALIGNMENT_CONTROLS, ( control ) => control.align === value );
+	const activeAlignment = find( alignmentControls, ( control ) => control.align === value );
 
 	return (
 		<Toolbar
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
 			label={ __( 'Change Text Alignment' ) }
-			controls={ ALIGNMENT_CONTROLS.map( ( control ) => {
+			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;
 				const isActive = ( value === align );
 

diff --git a/packages/editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AlignmentToolbar should allow custom alignment controls to be specified 1`] = `
+<Toolbar
+  controls={
+    Array [
+      Object {
+        "align": "custom-left",
+        "icon": "editor-alignleft",
+        "isActive": false,
+        "onClick": [Function],
+        "title": "My custom left",
+      },
+      Object {
+        "align": "custom-right",
+        "icon": "editor-aligncenter",
+        "isActive": true,
+        "onClick": [Function],
+        "title": "My custom right",
+      },
+    ]
+  }
+  icon="editor-aligncenter"
+  label="Change Text Alignment"
+/>
+`;
+
 exports[`AlignmentToolbar should match snapshot 1`] = `
 <Toolbar
   controls={
@@ -9,21 +34,21 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
         "icon": "editor-alignleft",
         "isActive": true,
         "onClick": [Function],
-        "title": "Align left",
+        "title": "Align text left",
       },
       Object {
         "align": "center",
         "icon": "editor-aligncenter",
         "isActive": false,
         "onClick": [Function],
-        "title": "Align center",
+        "title": "Align text center",
       },
       Object {
         "align": "right",
         "icon": "editor-alignright",
         "isActive": false,
         "onClick": [Function],
-        "title": "Align right",
+        "title": "Align text right",
       },
     ]
   }

diff --git a/packages/editor/src/components/alignment-toolbar/test/index.js b/packages/editor/src/components/alignment-toolbar/test/index.js
@@ -41,4 +41,47 @@ describe( 'AlignmentToolbar', () => {
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'center' );
 	} );
+
+	test( 'should allow custom alignment controls to be specified', () => {
+		const wrapperCustomControls = shallow(
+			<AlignmentToolbar
+				value={ 'custom-right' }
+				onChange={ onChangeSpy }
+				alignmentControls={ [
+					{
+						icon: 'editor-alignleft',
+						title: 'My custom left',
+						align: 'custom-left',
+					},
+					{
+						icon: 'editor-aligncenter',
+						title: 'My custom right',
+						align: 'custom-right',
+					},
+				] }
+			/>
+		);
+		expect( wrapperCustomControls ).toMatchSnapshot();
+		const customControls = wrapperCustomControls.props().controls;
+		expect( customControls ).toHaveLength( 2 );
+
+		// should correctly call on change when right alignment is pressed (active alignment)
+		const rightControl = customControls.find(
+			( { align } ) => align === 'custom-right'
+		);
+		expect( rightControl.title ).toBe( 'My custom right' );
+		rightControl.onClick();
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
+		onChangeSpy.mockClear();
+
+		// should correctly call on change when right alignment is pressed (inactive alignment)
+		const leftControl = customControls.find(
+			( { align } ) => align === 'custom-left'
+		);
+		expect( leftControl.title ).toBe( 'My custom left' );
+		leftControl.onClick();
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( 'custom-left' );
+	} );
 } );