From a3a03be9209b7fb730c3ba80c63fd284819dea2b Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 3 May 2017 11:51:53 -0700 Subject: [PATCH 01/10] Pullquote Block - initial block --- blocks/library/index.js | 1 + blocks/library/pullquote/index.js | 89 +++++++++++++++++++++++++++++ blocks/library/pullquote/style.scss | 46 +++++++++++++++ 3 files changed, 136 insertions(+) create mode 100644 blocks/library/pullquote/index.js create mode 100644 blocks/library/pullquote/style.scss diff --git a/blocks/library/index.js b/blocks/library/index.js index 9a0e2eaa95540..655e7ab40dd43 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -7,3 +7,4 @@ import './list'; import './quote'; import './separator'; import './button'; +import './pullquote'; diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js new file mode 100644 index 0000000000000..5b09266929d33 --- /dev/null +++ b/blocks/library/pullquote/index.js @@ -0,0 +1,89 @@ +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlock, query as hpq } from 'api'; +import Editable from 'components/editable'; + +const { children, query, attr } = hpq; + +registerBlock( 'core/pullquote', { + title: wp.i18n.__( 'Pullquote' ), + icon: 'format-quote', + category: 'common', + + attributes: { + value: query( 'blockquote > p', children() ), + citation: children( 'footer' ), + style: ( node ) => { + const value = attr( 'blockquote', 'class' )( node ); + if ( ! value ) { + return; + } + + const match = value.match( /\bblocks-quote-style-(\d+)\b/ ); + if ( ! match ) { + return; + } + + return Number( match[ 1 ] ); + } + }, + + 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, style = 1 } = attributes; + + return ( +
+ setAttributes( { + value: nextValue + } ) + } + focus={ focus && focus.editable === 'value' ? focus : null } + onFocus={ () => setFocus( { editable: 'value' } ) } + + /> + { ( citation || !! focus ) && ( +
+ setAttributes( { + citation: nextCitation + } ) + } + focus={ focus && focus.editable === 'citation' ? focus : null } + onFocus={ () => setFocus( { editable: 'citation' } ) } + /> +
+ ) } +
+ ); + }, + + save( { attributes } ) { + const { value, citation, style = 1 } = attributes; + + return ( +
+ { value && wp.element.Children.map( value, ( paragraph, i ) => ( +

{ paragraph }

+ ) ) } +
{ citation }
+
+ ); + } +} ); diff --git a/blocks/library/pullquote/style.scss b/blocks/library/pullquote/style.scss new file mode 100644 index 0000000000000..ccd8e971e8686 --- /dev/null +++ b/blocks/library/pullquote/style.scss @@ -0,0 +1,46 @@ +.blocks-pullquote { + + color: $white; + background-color: #BBB; + box-shadow: none; + + // replace with full-width, 700px = editor size, 160px = sidebar + width: calc(100vw - 160px); + margin-top: 0; + margin-bottom: 0; + margin-left: calc((700px - 100vw)/2 + 60px ); // not quite sure why 60px works + margin-right: calc((700px - 100vw)/2 ); + + + padding: 4em 25%; + text-align: center; + + footer { + color: $black; + margin-left: 1.3em; + position: relative; + + p { + font-size: 22px; + font-style: normal; + } + + } +} + +.editor-visual-editor .blocks-pullquote-style-1 { + & > .blocks-editable p { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 38px; + } +} + +.editor-visual-editor .blocks-pullquote-style-2 { + & > .blocks-editable p { + font-size: 36px; + font-style: italic; + line-height: 38px; + } +} From 0017e3ab2a8cb66ebd8f1ce72d2f614243b1a0e2 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Tue, 2 May 2017 16:26:06 -0700 Subject: [PATCH 02/10] Allow classnames to be specified for icon To be able to color icon controls, needed to support passing in additional classnames to the IconButton. --- editor/components/toolbar/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index 627d691c16c7a..cb202e813b838 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -28,7 +28,7 @@ function Toolbar( { controls } ) { } } className={ classNames( 'editor-toolbar__control', { 'is-active': control.isActive - } ) } /> + }, control.classNames ) } /> ) ) } ); From 056cd7c48137227d4ca366c697ee4a838c2260f8 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 3 May 2017 11:52:44 -0700 Subject: [PATCH 03/10] Merge --- blocks/library/pullquote/index.js | 55 +++++++++++++++++++++-------- blocks/library/pullquote/style.scss | 31 +++++++++++++++- 2 files changed, 70 insertions(+), 16 deletions(-) diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js index 5b09266929d33..1993742c8ec27 100644 --- a/blocks/library/pullquote/index.js +++ b/blocks/library/pullquote/index.js @@ -21,30 +21,55 @@ registerBlock( 'core/pullquote', { return; } - const match = value.match( /\bblocks-quote-style-(\d+)\b/ ); + const match = value.match( /\bblocks-pullquote-style-(\d+)\b/ ); if ( ! match ) { return; } return Number( match[ 1 ] ); - } - }, + }, + bg: ( node ) => { + const value = attr( 'blockquote', 'class' )( node ); + if ( ! value ) { + return; + } - 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 } ); + const match = value.match( /\bblocks-pullquote-bg-(\d+)\b/ ); + if ( ! match ) { + return; + } + + return Number( match[ 1 ] ); }, - subscript: variation - } ) ), + }, + + 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 + } ) ), + ...[ 1, 2, 3 ].map( ( variation ) => ( { + icon: 'art', + title: wp.i18n.sprintf( wp.i18n.__( 'Background Color %d' ), variation ), + onClick( attributes, setAttributes ) { + setAttributes( { bg: variation } ); + }, + isActive: () => false, + subscript: variation, + classNames: [ `color${ variation }` ] // icon color + } ) ), + ], edit( { attributes, setAttributes, focus, setFocus } ) { - const { value, citation, style = 1 } = attributes; + const { value, citation, style = 1, bg = 1 } = attributes; return ( -
+
+
{ value && wp.element.Children.map( value, ( paragraph, i ) => (

{ paragraph }

) ) } diff --git a/blocks/library/pullquote/style.scss b/blocks/library/pullquote/style.scss index ccd8e971e8686..b94d5e456ef6e 100644 --- a/blocks/library/pullquote/style.scss +++ b/blocks/library/pullquote/style.scss @@ -1,7 +1,11 @@ +$c1: #29A188; +$c2: #FCB740; +$c3: #F03D56; + .blocks-pullquote { color: $white; - background-color: #BBB; + background-color: inherit; box-shadow: none; // replace with full-width, 700px = editor size, 160px = sidebar @@ -28,6 +32,18 @@ } } +.blocks-pullquote-bg-1 { + background-color: $c1; +} + +.blocks-pullquote-bg-2 { + background-color: $c2; +} + +.blocks-pullquote-bg-3 { + background-color: $c3; +} + .editor-visual-editor .blocks-pullquote-style-1 { & > .blocks-editable p { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; @@ -44,3 +60,16 @@ line-height: 38px; } } + +// color icon controls +.editor-toolbar__control.editor-button.color1 { + color: $c1; +} + +.editor-toolbar__control.editor-button.color2 { + color: $c2; +} + +.editor-toolbar__control.editor-button.color3 { + color: $c3; +} \ No newline at end of file From 75df7b6c6155af54501b886e009a452261cfb71f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 3 May 2017 14:11:20 +0200 Subject: [PATCH 04/10] Pull back the design a little bit ;) Revert to a more minimalist design for now. --- blocks/library/pullquote/index.js | 4 +- blocks/library/pullquote/style.scss | 72 ++++------------------------- 2 files changed, 12 insertions(+), 64 deletions(-) diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js index 1993742c8ec27..933b02643fccf 100644 --- a/blocks/library/pullquote/index.js +++ b/blocks/library/pullquote/index.js @@ -71,7 +71,7 @@ registerBlock( 'core/pullquote', { return (
setAttributes( { value: nextValue @@ -84,7 +84,7 @@ registerBlock( 'core/pullquote', { { ( citation || !! focus ) && (