Fix: Cover image tooltips for alignment are duplicated

WordPress · Oct 30, 2018 · a5d642f · a5d642f
1 parent 9d46788
commit a5d642f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -79,6 +79,23 @@ export const name = 'core/cover';
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const IMAGE_BACKGROUND_TYPE = 'image';
 const VIDEO_BACKGROUND_TYPE = 'video';
+const COVER_TEXT_ALIGN_CONTROLS = [
+	{
+		icon: 'editor-alignleft',
+		title: __( 'Text align left' ),
+		align: 'left',
+	},
+	{
+		icon: 'editor-aligncenter',
+		title: __( 'Text align center' ),
+		align: 'center',
+	},
+	{
+		icon: 'editor-alignright',
+		title: __( 'Text align right' ),
+		align: 'right',
+	},
+];
 
 export const settings = {
 	title: __( 'Cover' ),
@@ -257,6 +274,7 @@ export const settings = {
 									onChange={ ( nextAlign ) => {
 										setAttributes( { contentAlign: nextAlign } );
 									} }
+									alignmentControls={ COVER_TEXT_ALIGN_CONTROLS }
 								/>
 								<Toolbar>
 									<MediaUpload

diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js
@@ -35,19 +35,19 @@ const ALIGNMENT_CONTROLS = [
 	},
 ];
 
-export function AlignmentToolbar( { isCollapsed, value, onChange } ) {
+export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentControls = 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 );