diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index e0891c0916ca2..f7c15718d8b4f 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -27,7 +27,7 @@ registerBlock( 'core/heading', { onClick( attributes, setAttributes ) { setAttributes( { tag: 'H' + level } ); }, - level + subscript: level } ) ) ], diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 7d661d0803223..354d5e8ce59b5 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 { parse, html, query } = hpq; +const { parse, html, query, attr } = hpq; const fromValueToParagraphs = ( value ) => value ? value.map( ( paragraph ) => `
${ paragraph }
` ).join( '' ) : ''; const fromParagraphsToValue = ( paragraphs ) => parse( paragraphs, query( 'p', html() ) ); @@ -17,14 +17,30 @@ registerBlock( 'core/quote', { attributes: { value: query( 'blockquote > p', html() ), - citation: html( 'footer' ) + citation: html( 'footer' ), + style: node => { + const value = attr( 'blockquote', 'class' )( node ); + const match = value.match( /\bblocks-quote-style-(\d+)\b/ ); + return match ? +match[ 1 ] : null; + }, }, + 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 + } ) ), + edit( { attributes, setAttributes, focus, setFocus } ) { const { value, citation } = attributes; + const style = +attributes.style || 1; return ( -++ { value && value.map( ( paragraph, i ) => (.blocks-editable p { + font-size: 20px; + } +} + +.editor-visual-editor .blocks-quote-style-2 { + padding: 0 1em; + & > .blocks-editable p { + font-size: 24px; + font-style: italic; + } +} diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index 9cd00d1b19244..2a63d1cb38d9d 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -21,7 +21,7 @@ function Toolbar( { controls } ) { key={ index } icon={ control.icon } label={ control.title } - data-level={ control.level } + data-subscript={ control.subscript } onClick={ ( event ) => { event.stopPropagation(); control.onClick(); diff --git a/editor/components/toolbar/style.scss b/editor/components/toolbar/style.scss index bd45751be00b2..2668e0e40412b 100644 --- a/editor/components/toolbar/style.scss +++ b/editor/components/toolbar/style.scss @@ -31,8 +31,8 @@ color: $white; } - &[data-level]:after { - content: attr( data-level ); + &[data-subscript]:after { + content: attr( data-subscript ); font-family: $default-font; font-size: 10px; font-weight: bold; diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index fa69aa477e4cb..25d0c46ff7716 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -55,6 +55,10 @@ msgstr "" msgid "Quote" msgstr "" +#: blocks/library/quote/index.js:30 +msgid "Quote style %d" +msgstr "" + #: blocks/library/text/index.js:13 msgid "Text" msgstr "" diff --git a/post-content.js b/post-content.js index 152d43f9ec350..4a1b3cbd6bc62 100644 --- a/post-content.js +++ b/post-content.js @@ -21,7 +21,7 @@ window._wpGutenbergPost = { '', '', - '
', + 'Real artists ship.
', '', '',Real artists ship.