From 7c3bd20d7520988d1c4cda52e1479311229ea4c3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 21 Apr 2017 12:12:09 +0100 Subject: [PATCH 1/7] Blocks: Add quote blocks style controls --- blocks/library/quote/index.js | 18 ++++++++++++++---- blocks/library/quote/style.scss | 27 +++++++++++++++++++++------ languages/gutenberg.pot | 4 ++++ 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 7d661d08032230..96c820b7603a97 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -20,11 +20,21 @@ registerBlock( 'core/quote', { citation: html( 'footer' ) }, + controls: [ '1', '2' ].map( ( level ) => ( { + icon: 'format-quote', + title: wp.i18n.sprintf( wp.i18n.__( 'Quote %s' ), level ), + isActive: ( { style = '1' } ) => style === level, + onClick( attributes, setAttributes ) { + setAttributes( { style: level } ); + }, + level + } ) ), + edit( { attributes, setAttributes, focus, setFocus } ) { - const { value, citation } = attributes; + const { value, citation, style = '1' } = attributes; 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/languages/gutenberg.pot b/languages/gutenberg.pot index fa69aa477e4cbe..d286df9b065b01 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -55,6 +55,10 @@ msgstr "" msgid "Quote" msgstr "" +#: blocks/library/quote/index.js:25 +msgid "Quote %s" +msgstr "" + #: blocks/library/text/index.js:13 msgid "Text" msgstr "" From 2fa123379b93a7ff1d3aacd7348d271e64688663 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 21 Apr 2017 15:15:19 +0100 Subject: [PATCH 2/7] Quote block: variation instead of level and more accurate placeholder --- blocks/library/quote/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 96c820b7603a97..38dabfe2dbfae7 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -20,14 +20,14 @@ registerBlock( 'core/quote', { citation: html( 'footer' ) }, - controls: [ '1', '2' ].map( ( level ) => ( { + controls: [ '1', '2' ].map( ( variation ) => ( { icon: 'format-quote', - title: wp.i18n.sprintf( wp.i18n.__( 'Quote %s' ), level ), - isActive: ( { style = '1' } ) => style === level, + title: wp.i18n.sprintf( wp.i18n.__( 'Quote %s' ), variation ), + isActive: ( { style = '1' } ) => style === style, onClick( attributes, setAttributes ) { - setAttributes( { style: level } ); + setAttributes( { style: variation } ); }, - level + level: variation } ) ), edit( { attributes, setAttributes, focus, setFocus } ) { From c844bd5f35a37aa7ca623916af21cf0df07ebaec Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 21 Apr 2017 15:27:57 +0100 Subject: [PATCH 3/7] Block Toolbar: rename level to subscript --- blocks/library/heading/index.js | 2 +- blocks/library/quote/index.js | 4 ++-- editor/components/toolbar/index.js | 2 +- editor/components/toolbar/style.scss | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index e0891c0916ca2b..f7c15718d8b4fe 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 38dabfe2dbfae7..668da7db95449e 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -23,11 +23,11 @@ registerBlock( 'core/quote', { controls: [ '1', '2' ].map( ( variation ) => ( { icon: 'format-quote', title: wp.i18n.sprintf( wp.i18n.__( 'Quote %s' ), variation ), - isActive: ( { style = '1' } ) => style === style, + isActive: ( { style = '1' } ) => style === variation, onClick( attributes, setAttributes ) { setAttributes( { style: variation } ); }, - level: variation + subscript: variation } ) ), edit( { attributes, setAttributes, focus, setFocus } ) { diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index 9cd00d1b19244f..2a63d1cb38d9d4 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 bd45751be00b2a..2668e0e40412b0 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; From 968ec56be1fe574e8d9a4b0d4b0d596f3685f09b Mon Sep 17 00:00:00 2001 From: James Nylen Date: Fri, 21 Apr 2017 17:08:39 +0200 Subject: [PATCH 4/7] Use a number for quote style --- blocks/library/quote/index.js | 12 +++++++----- languages/gutenberg.pot | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 668da7db95449e..5fd786aa431e01 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -20,10 +20,10 @@ registerBlock( 'core/quote', { citation: html( 'footer' ) }, - controls: [ '1', '2' ].map( ( variation ) => ( { + controls: [ 1, 2 ].map( ( variation ) => ( { icon: 'format-quote', - title: wp.i18n.sprintf( wp.i18n.__( 'Quote %s' ), variation ), - isActive: ( { style = '1' } ) => style === variation, + title: wp.i18n.sprintf( wp.i18n.__( 'Quote %d' ), variation ), + isActive: ( { style = 1 } ) => +style === +variation, onClick( attributes, setAttributes ) { setAttributes( { style: variation } ); }, @@ -31,7 +31,8 @@ registerBlock( 'core/quote', { } ) ), edit( { attributes, setAttributes, focus, setFocus } ) { - const { value, citation, style = '1' } = attributes; + const { value, citation } = attributes; + const style = +attributes.style || 1; return (

@@ -64,7 +65,8 @@ registerBlock( 'core/quote', { }, save( attributes ) { - const { value, citation, style = '1' } = attributes; + const { value, citation } = attributes; + const style = +attributes.style || 1; return (
diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index d286df9b065b01..df5e32b71b6882 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -56,7 +56,7 @@ msgid "Quote" msgstr "" #: blocks/library/quote/index.js:25 -msgid "Quote %s" +msgid "Quote %d" msgstr "" #: blocks/library/text/index.js:13 From 33e7ef9439ca1855217359b53639fb53ad373890 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Fri, 21 Apr 2017 17:09:00 +0200 Subject: [PATCH 5/7] Clarify quote style message --- blocks/library/quote/index.js | 2 +- languages/gutenberg.pot | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 5fd786aa431e01..f702e998917079 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -22,7 +22,7 @@ registerBlock( 'core/quote', { controls: [ 1, 2 ].map( ( variation ) => ( { icon: 'format-quote', - title: wp.i18n.sprintf( wp.i18n.__( 'Quote %d' ), variation ), + title: wp.i18n.sprintf( wp.i18n.__( 'Quote style %d' ), variation ), isActive: ( { style = 1 } ) => +style === +variation, onClick( attributes, setAttributes ) { setAttributes( { style: variation } ); diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index df5e32b71b6882..370099df3999e3 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -56,7 +56,7 @@ msgid "Quote" msgstr "" #: blocks/library/quote/index.js:25 -msgid "Quote %d" +msgid "Quote style %d" msgstr "" #: blocks/library/text/index.js:13 From 02e832c7da5a814a4a8b66bc4ac24bc2f573d0bb Mon Sep 17 00:00:00 2001 From: James Nylen Date: Fri, 21 Apr 2017 17:36:14 +0200 Subject: [PATCH 6/7] Parse quote style number out of saved markup --- blocks/library/quote/index.js | 10 ++++++++-- languages/gutenberg.pot | 2 +- post-content.js | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index f702e998917079..3dd36b5e02975b 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,7 +17,13 @@ registerBlock( 'core/quote', { attributes: { value: query( 'blockquote > p', html() ), - citation: html( 'footer' ) + citation: html( 'footer' ), + style: node => { + const value = attr( 'blockquote', 'class' )( node ); + console.log( value ); + const match = value.match( /\bblocks-quote-style-(\d+)\b/ ); + return match ? +match[ 1 ] : null; + }, }, controls: [ 1, 2 ].map( ( variation ) => ( { diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 370099df3999e3..93612bb70e7571 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -55,7 +55,7 @@ msgstr "" msgid "Quote" msgstr "" -#: blocks/library/quote/index.js:25 +#: blocks/library/quote/index.js:31 msgid "Quote style %d" msgstr "" diff --git a/post-content.js b/post-content.js index 152d43f9ec3507..4a1b3cbd6bc628 100644 --- a/post-content.js +++ b/post-content.js @@ -21,7 +21,7 @@ window._wpGutenbergPost = { '', '', - '

Real artists ship.

', + '

Real artists ship.

', '', '', From 4b8d3e4fd81245ddd2cabbe3100dd3886f2178c1 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Fri, 21 Apr 2017 17:50:28 +0200 Subject: [PATCH 7/7] Fix the build :| --- blocks/library/quote/index.js | 1 - languages/gutenberg.pot | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 3dd36b5e02975b..354d5e8ce59b56 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -20,7 +20,6 @@ registerBlock( 'core/quote', { citation: html( 'footer' ), style: node => { const value = attr( 'blockquote', 'class' )( node ); - console.log( value ); const match = value.match( /\bblocks-quote-style-(\d+)\b/ ); return match ? +match[ 1 ] : null; }, diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 93612bb70e7571..25d0c46ff77165 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -55,7 +55,7 @@ msgstr "" msgid "Quote" msgstr "" -#: blocks/library/quote/index.js:31 +#: blocks/library/quote/index.js:30 msgid "Quote style %d" msgstr ""