Quote Block: Drop the blocks-quote-style-* styles in favor of a is-la…

…rge modifier
WordPress · Nov 27, 2017 · 98e6d1b · 98e6d1b
1 parent 37de716
commit 98e6d1b
Show file tree

Hide file tree

Showing 13 changed files with 18 additions and 16 deletions.
diff --git a/blocks/library/quote/editor.scss b/blocks/library/quote/editor.scss
@@ -1,4 +1,4 @@
-.wp-block-quote.blocks-quote-style-1 {
+.wp-block-quote:not(.is-large) {
 	border-left: 4px solid $black;
 	padding-left: 1em;
 }
diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { isString } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -170,6 +171,7 @@ registerBlockType( 'core/quote', {
 	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, className } ) {
 		const { align, value, citation, style } = attributes;
 		const focusedEditable = focus ? focus.editable || 'value' : null;
+		const containerClassname = classnames( className, style === 2 ? 'is-large' : '' );
 
 		return [
 			focus && (
@@ -199,7 +201,7 @@ registerBlockType( 'core/quote', {
 			),
 			<blockquote
 				key="quote"
-				className={ `${ className } blocks-quote-style-${ style }` }
+				className={ containerClassname }
 			>
 				<Editable
 					multiline="p"
@@ -238,7 +240,7 @@ registerBlockType( 'core/quote', {
 
 		return (
 			<blockquote
-				className={ `blocks-quote-style-${ style }` }
+				className={ style === 2 ? 'is-large' : '' }
 				style={ { textAlign: align ? align : null } }
 			>
 				{ value.map( ( paragraph, i ) => (

diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss
@@ -10,7 +10,7 @@
 		font-style: normal;
 	}
 
-	&.blocks-quote-style-2 {
+	&.is-large {
 		padding: 0 1em;
 		p {
 			font-size: 24px;

diff --git a/blocks/test/fixtures/core__quote__style-1.html b/blocks/test/fixtures/core__quote__style-1.html
@@ -1,3 +1,3 @@
 <!-- wp:core/quote {"style":"1"} -->
-<blockquote class="wp-block-quote blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
+<blockquote class="wp-block-quote"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
 <!-- /wp:core/quote -->
diff --git a/blocks/test/fixtures/core__quote__style-1.json b/blocks/test/fixtures/core__quote__style-1.json
@@ -23,6 +23,6 @@
             ],
             "style": 1
         },
-        "originalContent": "<blockquote class=\"wp-block-quote blocks-quote-style-1\"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>"
+        "originalContent": "<blockquote class=\"wp-block-quote\"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>"
     }
 ]
diff --git a/blocks/test/fixtures/core__quote__style-1.parsed.json b/blocks/test/fixtures/core__quote__style-1.parsed.json
@@ -5,7 +5,7 @@
             "style": "1"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<blockquote class=\"wp-block-quote blocks-quote-style-1\"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>\n"
+        "innerHTML": "\n<blockquote class=\"wp-block-quote\"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__quote__style-1.serialized.html b/blocks/test/fixtures/core__quote__style-1.serialized.html
@@ -1,4 +1,4 @@
 <!-- wp:quote -->
-<blockquote class="wp-block-quote blocks-quote-style-1">
+<blockquote class="wp-block-quote">
     <p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
 <!-- /wp:quote -->
diff --git a/blocks/test/fixtures/core__quote__style-2.html b/blocks/test/fixtures/core__quote__style-2.html
@@ -1,3 +1,3 @@
 <!-- wp:core/quote {"style":"2"} -->
-<blockquote class="wp-block-quote blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
+<blockquote class="wp-block-quote is-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:core/quote -->
diff --git a/blocks/test/fixtures/core__quote__style-2.json b/blocks/test/fixtures/core__quote__style-2.json
@@ -23,6 +23,6 @@
             ],
             "style": 2
         },
-        "originalContent": "<blockquote class=\"wp-block-quote blocks-quote-style-2\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>"
+        "originalContent": "<blockquote class=\"wp-block-quote is-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>"
     }
 ]
diff --git a/blocks/test/fixtures/core__quote__style-2.parsed.json b/blocks/test/fixtures/core__quote__style-2.parsed.json
@@ -5,7 +5,7 @@
             "style": "2"
         },
         "innerBlocks": [],
-        "innerHTML": "\n<blockquote class=\"wp-block-quote blocks-quote-style-2\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>\n"
+        "innerHTML": "\n<blockquote class=\"wp-block-quote is-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__quote__style-2.serialized.html b/blocks/test/fixtures/core__quote__style-2.serialized.html
@@ -1,4 +1,4 @@
 <!-- wp:quote {"style":2} -->
-<blockquote class="wp-block-quote blocks-quote-style-2">
+<blockquote class="wp-block-quote is-large">
     <p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:quote -->
diff --git a/phpunit/fixtures/long-content.html b/phpunit/fixtures/long-content.html
@@ -56,7 +56,7 @@ <h2>Visual Editing</h2>
 <p>A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:</p>
 <!-- /wp:core/paragraph -->
 <!-- wp:core/quote { "style": 1 } -->
-<blockquote class="blocks-quote-style-1 wp-block-quote"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
+<blockquote class="wp-block-quote"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>
 <!-- /wp:core/quote -->
 <!-- wp:core/paragraph -->
 <p>The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It's always easy to add it back.</p>
@@ -65,7 +65,7 @@ <h2>Visual Editing</h2>
 <p>Blocks can be anything you need. For instance, you may want to insert a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.</p>
 <!-- /wp:core/paragraph -->
 <!-- wp:core/quote { "style": 2 } -->
-<blockquote class="blocks-quote-style-2 wp-block-quote"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
+<blockquote class="is-large wp-block-quote"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:core/quote -->
 <!-- wp:core/separator -->
 <hr class="wp-block-separator" />

diff --git a/post-content.js b/post-content.js
@@ -80,7 +80,7 @@ window._wpGutenbergPost.content = {
 		'<!-- /wp:paragraph -->',
 
 		'<!-- wp:quote {"style":1} -->',
-		'<blockquote class="wp-block-quote blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>',
+		'<blockquote class="wp-block-quote"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><cite>Matt Mullenweg, 2017</cite></blockquote>',
 		'<!-- /wp:quote -->',
 
 		'<!-- wp:paragraph -->',
@@ -92,7 +92,7 @@ window._wpGutenbergPost.content = {
 		'<!-- /wp:paragraph -->',
 
 		'<!-- wp:quote {"style":2} -->',
-		'<blockquote class="wp-block-quote blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>',
+		'<blockquote class="wp-block-quote is-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>',
 		'<!-- /wp:quote -->',
 
 		'<!-- wp:separator -->',