diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index f6bedc0b8506a9..51b72c62d3837d 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -5,7 +5,7 @@ import './style.scss'; import { registerBlock, query as hpq } from 'api'; import Editable from 'components/editable'; -const { children, query, attr } = hpq; +const { children, query, attr, prop } = hpq; registerBlock( 'core/quote', { title: wp.i18n.__( 'Quote' ), @@ -15,6 +15,7 @@ registerBlock( 'core/quote', { attributes: { value: query( 'blockquote > p', children() ), citation: children( 'footer' ), + align: prop( 'blockquote', 'style.textAlign' ), style: ( node ) => { const value = attr( 'blockquote', 'class' )( node ); if ( ! value ) { @@ -30,21 +31,52 @@ registerBlock( 'core/quote', { } }, - controls: [ 1, 2 ].map( ( variation ) => ( { - icon: 'format-quote', - title: wp.i18n.sprintf( wp.i18n.__( 'Quote style %d' ), variation ), - isActive: ( { style = 1 } ) => style === variation, - onClick( attributes, setAttributes ) { - setAttributes( { style: variation } ); - }, - subscript: variation - } ) ), + controls: [ + [ + { + icon: 'editor-alignleft', + title: wp.i18n.__( 'Align left' ), + isActive: ( { align } ) => ! align || 'left' === align, + onClick( attributes, setAttributes ) { + setAttributes( { align: undefined } ); + } + }, + { + icon: 'editor-aligncenter', + title: wp.i18n.__( 'Align center' ), + isActive: ( { align } ) => 'center' === align, + onClick( attributes, setAttributes ) { + setAttributes( { align: 'center' } ); + } + }, + { + icon: 'editor-alignright', + title: wp.i18n.__( 'Align right' ), + isActive: ( { align } ) => 'right' === align, + onClick( attributes, setAttributes ) { + setAttributes( { align: 'right' } ); + } + } + ], + [ 1, 2 ].map( ( variation ) => ( { + icon: 'format-quote', + title: wp.i18n.sprintf( wp.i18n.__( 'Quote style %d' ), variation ), + isActive: ( { style = 1 } ) => style === variation, + onClick( attributes, setAttributes ) { + setAttributes( { style: variation } ); + }, + subscript: variation + } ) ) + ], edit( { attributes, setAttributes, focus, setFocus } ) { - const { value, citation, style = 1 } = attributes; + const { align, value, citation, style = 1 } = attributes; return ( -
++ { value && value.map( ( paragraph, i ) => ({ paragraph }
) ) } diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 31789867c6b1bb..d988b293ffc4c1 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -137,6 +137,11 @@ class VisualEditorBlock extends wp.element.Component { wrapperProps = settings.getEditWrapperProps( block.attributes ); } + // Normalize controls as an array of arrays (toolbars of controls) + const toolbars = settings.controls && settings.controls.length && ! Array.isArray( settings.controls[ 0 ] ) + ? [ settings.controls ] + : settings.controls; + // Disable reason: Each block can receive focus but must be able to contain // block children. Tab keyboard navigation enabled by tabIndex assignment. @@ -159,14 +164,15 @@ class VisualEditorBlock extends wp.element.Component { { isSelected && ! isTyping &&} diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 616d851037d34f..b9a797af83187c 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -42,18 +42,21 @@ msgstr "" #: blocks/library/image/index.js:41 #: blocks/library/list/index.js:25 +#: blocks/library/quote/index.js:38 #: blocks/library/text/index.js:23 msgid "Align left" msgstr "" #: blocks/library/image/index.js:47 #: blocks/library/list/index.js:33 +#: blocks/library/quote/index.js:46 #: blocks/library/text/index.js:31 msgid "Align center" msgstr "" #: blocks/library/image/index.js:53 #: blocks/library/list/index.js:41 +#: blocks/library/quote/index.js:54 #: blocks/library/text/index.js:39 msgid "Align right" msgstr "" @@ -74,7 +77,7 @@ msgstr "" msgid "Quote" msgstr "" -#: blocks/library/quote/index.js:35 +#: blocks/library/quote/index.js:63 msgid "Quote style %d" msgstr ""- { !! settings.controls && ( + { !! toolbars && toolbars.map( ( controls, index ) => ( ( { + key={ index } + controls={ controls.map( ( control ) => ( { ...control, onClick: () => control.onClick( block.attributes, this.setAttributes ), isActive: control.isActive( block.attributes ) } ) ) } /> - ) } + ) ) }