Blocks: Add quote blocks style controls (#482)

WordPress · Apr 21, 2017 · f75cdde · f75cdde
1 parent cea106f
commit f75cdde
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 15 deletions.
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -27,7 +27,7 @@ registerBlock( 'core/heading', {
 			onClick( attributes, setAttributes ) {
 				setAttributes( { nodeName: 'H' + level } );
 			},
-			level
+			subscript: level
 		} ) )
 	],
 

diff --git 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 ) => `<p>${ paragraph }</p>` ).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 (
-			<blockquote className="blocks-quote">
+			<blockquote className={ `blocks-quote blocks-quote-style-${ style }` }>
 				<Editable
 					value={ fromValueToParagraphs( value ) }
 					onChange={
@@ -55,9 +71,10 @@ registerBlock( 'core/quote', {
 
 	save( attributes ) {
 		const { value, citation } = attributes;
+		const style = +attributes.style || 1;
 
 		return (
-			<blockquote>
+			<blockquote className={ `blocks-quote-style-${ style }` }>
 				{ value && value.map( ( paragraph, i ) => (
 					<p
 						key={ i }

diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss
@@ -2,18 +2,17 @@
 	margin: 0;
 	box-shadow: inset 0px 0px 0px 0px $light-gray-500;
 	transition: all .2s ease;
-	font-size: 20px;
-	border-left: 4px solid $black;
-	padding-left: 1em;
-	font-style: italic;
 
 	footer {
 		color: $dark-gray-100;
-		font-size: 0.9em;
-		font-style: normal;
 		margin-left: 1.3em;
 		position: relative;
 
+		p {
+			font-size: 0.9em;
+			font-style: normal;
+		}
+
 		&:before {
 			content: '— ';
 			position: absolute;
@@ -22,3 +21,19 @@
 		}
 	}
 }
+
+.editor-visual-editor .blocks-quote-style-1 {
+	border-left: 4px solid $black;
+	padding-left: 1em;
+	& > .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
@@ -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
@@ -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
@@ -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
@@ -21,7 +21,7 @@ window._wpGutenbergPost = {
 			'<!-- /wp:core/text -->',
 
 			'<!-- wp:core/quote -->',
-			'<blockquote><p>Real artists ship.</p><footer><p><a href="http://www.folklore.org/StoryView.py?story=Real_Artists_Ship.txt">Steve Jobs, 1983</a></p></footer></blockquote>',
+			'<blockquote class="blocks-quote-style-2"><p>Real artists ship.</p><footer><p><a href="http://www.folklore.org/StoryView.py?story=Real_Artists_Ship.txt">Steve Jobs, 1983</a></p></footer></blockquote>',
 			'<!-- /wp:core/quote -->',
 
 			'<!-- wp:core/image -->',
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ registerBlock( 'core/heading', { @@
     			onClick( attributes, setAttributes ) {
     				setAttributes( { nodeName: 'H' + level } );
     			},
-    			level
+    			subscript: level
     		} ) )
     	],
@@ Expand Down @@