diff --git a/packages/editor/src/components/alignment-toolbar/index.js b/packages/editor/src/components/alignment-toolbar/index.js index 5aa2d61b0c083..e06ee34f4d7d6 100644 --- 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 ( { + 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 index 2308f4cda66ae..34e440f5d76fe 100644 --- 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`] = ` + +`; + exports[`AlignmentToolbar should match snapshot 1`] = ` { expect( onChangeSpy ).toHaveBeenCalledTimes( 1 ); expect( onChangeSpy ).toHaveBeenCalledWith( 'center' ); } ); + + test( 'should allow custom alignment controls to be specified', () => { + const wrapperCustomControls = shallow( + + ); + 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' ); + } ); } );