Block API: Add block styles variations API

components/disabled/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { includes, debounce } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -84,9 +85,14 @@ class Disabled extends Component {
 	}
 
 	render() {
+		const { className, ...props } = this.props;
 		return (
 			<Provider value={ true }>
-				<div ref={ this.bindNode } className="components-disabled">
+				<div
+					ref={ this.bindNode }
+					className={ classnames( className, 'components-disabled' ) }
+					{ ...props }
+				>
 					{ this.props.children }
 				</div>
 			</Provider>

core-blocks/button/editor.scss

@@ -15,6 +15,7 @@
 
 	.editor-rich-text__tinymce {
 		cursor: text;
+		line-height: 1;
 	}
 }
 

core-blocks/button/index.js

@@ -87,6 +87,12 @@ export const settings = {
 		return props;
 	},
 
+	styles: [
+		{ name: 'default', label: __( 'Rounded' ), isDefault: true },
+		{ name: 'outline', label: __( 'Outline' ) },
+		{ name: 'squared', label: __( 'Squared' ) },
+	],
+
 	edit,
 
 	save( { attributes } ) {

core-blocks/button/style.scss

@@ -20,6 +20,10 @@ $blocks-button__line-height: $big-font-size + 6px;
 		word-break: break-all;
 	}
 
+	&.is-style-squared .wp-block-button__link {
+		border-radius: 0;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}
@@ -38,6 +42,75 @@ $blocks-button__line-height: $big-font-size + 6px;
 	}
 }
 
+.wp-block-button.is-style-outline {
+	.wp-block-button__link {
+		background: transparent;
+		border: 2px solid transparent;
+
+		&.has-pale-pink-background-color {
+			border-color: #f78da7;
+		}
+
+		&.has-vivid-red-background-color {
+			border-color: #cf2e2e;
+		}
+
+		&.has-luminous-vivid-orange-background-color {
+			border-color: #ff6900;
+		}
+
+		&.has-luminous-vivid-amber-background-color {
+			border-color: #fcb900;
+		}
+
+		&.has-light-green-cyan-background-color {
+			border-color: #7bdcb5;
+		}
+
+		&.has-vivid-green-cyan-background-color {
+			border-color: #00d084;
+		}
+
+		&.has-pale-cyan-blue-background-color {
+			border-color: #8ed1fc;
+		}
+
+		&.has-vivid-cyan-blue-background-color {
+			border-color: #0693e3;
+		}
+
+		&.has-very-light-gray-background-color {
+			border-color: #eeeeee;
+		}
+
+		&.has-cyan-bluish-gray-background-color {
+			border-color: #abb8c3;
+		}
+
+		&.has-very-dark-gray-background-color {
+			border-color: #313131;
+		}
+	}
+
+	.wp-block-button__link:not(.has-background) {
+		border-color: $dark-gray-700;
+		&:hover,
+		&:focus,
+		&:active {
+			border-color: $dark-gray-700;
+		}
+	}
+
+	.wp-block-button__link:not(.has-text-color) {
+		color: $dark-gray-700;
+		&:hover,
+		&:focus,
+		&:active {
+			color: $dark-gray-700;
+		}
+	}
+}
+
 .wp-block-button__link:not(.has-text-color) {
 	color: $white;
 	&:hover,

core-blocks/quote/index.js

@@ -1,14 +1,12 @@
 /**
  * External dependencies
  */
-import { castArray, get, isString, isEmpty } from 'lodash';
-import classnames from 'classnames';
+import { castArray, get, isString, isEmpty, omit } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
 import {
@@ -49,10 +47,6 @@ const blockAttributes = {
 	align: {
 		type: 'string',
 	},
-	style: {
-		type: 'number',
-		default: 1,
-	},
 };
 
 export const name = 'core/quote';
@@ -65,6 +59,11 @@ export const settings = {
 
 	attributes: blockAttributes,
 
+	styles: [
+		{ name: 'default', label: __( 'Regular' ), isDefault: true },
+		{ name: 'large', label: __( 'Large' ) },
+	],
+
 	transforms: {
 		from: [
 			{
@@ -179,31 +178,19 @@ export const settings = {
 	},
 
 	edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
-		const { align, value, citation, style } = attributes;
-		const containerClassname = classnames( className, style === 2 ? 'is-large' : '' );
+		const { align, value, citation } = attributes;
 
 		return (
 			<Fragment>
 				<BlockControls>
-					<Toolbar controls={ [ 1, 2 ].map( ( variation ) => ( {
-						icon: 1 === variation ? 'format-quote' : 'testimonial',
-						title: sprintf( __( 'Quote style %d' ), variation ),
-						isActive: Number( style ) === variation,
-						onClick() {
-							setAttributes( { style: variation } );
-						},
-					} ) ) } />
 					<AlignmentToolbar
 						value={ align }
 						onChange={ ( nextAlign ) => {
 							setAttributes( { align: nextAlign } );
 						} }
 					/>
 				</BlockControls>
-				<blockquote
-					className={ containerClassname }
-					style={ { textAlign: align } }
-				>
+				<blockquote className={ className } style={ { textAlign: align } }>
 					<RichText
 						multiline="p"
 						value={ toRichTextValue( value ) }
@@ -241,20 +228,51 @@ export const settings = {
 	},
 
 	save( { attributes } ) {
-		const { align, value, citation, style } = attributes;
+		const { align, value, citation } = attributes;
 
 		return (
-			<blockquote
-				className={ style === 2 ? 'is-large' : '' }
-				style={ { textAlign: align ? align : null } }
-			>
+			<blockquote style={ { textAlign: align ? align : null } }>
 				<RichText.Content value={ toRichTextValue( value ) } />
 				{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
 			</blockquote>
 		);
 	},
 
 	deprecated: [
+		{
+			attributes: {
+				...blockAttributes,
+				style: {
+					type: 'number',
+					default: 1,
+				},
+			},
+
+			migrate( attributes ) {
+				if ( attributes.style === 2 ) {
+					return {
+						...omit( attributes, [ 'style' ] ),
+						className: attributes.className ? attributes.className + ' is-style-large' : 'is-style-large',
+					};
+				}
+
+				return attributes;
+			},
+
+			save( { attributes } ) {
+				const { align, value, citation, style } = attributes;
+
+				return (
+					<blockquote
+						className={ style === 2 ? 'is-large' : '' }
+						style={ { textAlign: align ? align : null } }
+					>
+						<RichText.Content value={ toRichTextValue( value ) } />
+						{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
+					</blockquote>
+				);
+			},
+		},
 		{
 			attributes: {
 				...blockAttributes,
@@ -263,6 +281,10 @@ export const settings = {
 					source: 'children',
 					selector: 'footer',
 				},
+				style: {
+					type: 'number',
+					default: 1,
+				},
 			},
 
 			save( { attributes } ) {

core-blocks/quote/style.scss

@@ -6,7 +6,7 @@
 		font-style: normal;
 	}
 
-	&.is-large {
+	&.is-style-large, &.is-large {
 		margin: 0 0 16px;
 		padding: 0 1em;
 

core-blocks/quote/theme.scss

@@ -12,7 +12,7 @@
 	}
 }
 
-.wp-block-quote:not(.is-large) {
+.wp-block-quote:not(.is-large):not(.is-style-large) {
 	border-left: 4px solid $black;
 	padding-left: 1em;
 }

core-blocks/separator/index.js

@@ -23,6 +23,12 @@ export const settings = {
 
 	keywords: [ __( 'horizontal-line' ), 'hr', __( 'divider' ) ],
 
+	styles: [
+		{ name: 'default', label: __( 'Short Line' ), isDefault: true },
+		{ name: 'wide', label: __( 'Wide Line' ) },
+		{ name: 'dots', label: __( 'Dots' ) },
+	],
+
 	transforms: {
 		from: [
 			{

core-blocks/separator/style.scss

@@ -1,6 +1,26 @@
 .wp-block-separator {
-	border: none;
-	border-bottom: 2px solid $dark-gray-100;
-	max-width: 100px;
-	margin: 1.65em auto;
+	// Default, thin style, is stored in theme.scss so it can be opted out of
+
+	// Wide style
+	&.is-style-wide {
+		border-bottom-width: 1px;
+	}
+
+	// Dots style
+	&.is-style-dots {
+		border: none;
+		text-align: center;
+		max-width: none;
+		line-height: 1;
+		height: auto;
+
+		&:before {
+			content: '\00b7 \00b7 \00b7';
+			color: $dark-gray-700;
+			font-size: 20px;
+			letter-spacing: 2em;
+			padding-left: 2em;
+			font-family: serif;
+		}
+	}
 }

core-blocks/separator/theme.scss

@@ -1,2 +1,10 @@
-// TODO: Remove this comment when adding theme styles.
-// Including an empty file for now so webpack will build an aggregate build/core-blocks/theme.css.
+.wp-block-separator {
+	border: none;
+	border-bottom: 2px solid $dark-gray-100;
+	margin: 1.65em auto;
+
+	// Default, thin style
+	&:not( .is-style-wide ):not( .is-style-dots ) {
+		max-width: 100px;
+	}
+}

core-blocks/test/fixtures/core__quote__style-1.html

@@ -1,3 +1,3 @@
-<!-- wp:core/quote {"style":"1"} -->
+<!-- wp:core/quote -->
 <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 -->

core-blocks/test/fixtures/core__quote__style-1.json

@@ -20,8 +20,7 @@
             ],
             "citation": [
                 "Matt Mullenweg, 2017"
-            ],
-            "style": 1
+            ]
         },
         "innerBlocks": [],
         "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>"

core-blocks/test/fixtures/core__quote__style-1.parsed.json

@@ -1,9 +1,7 @@
 [
     {
         "blockName": "core/quote",
-        "attrs": {
-            "style": "1"
-        },
+        "attrs": null,
         "innerBlocks": [],
         "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"
     },

core-blocks/test/fixtures/core__quote__style-2.html

@@ -1,3 +1,3 @@
-<!-- wp:core/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:core/quote {"className":"is-style-large"} -->
+<blockquote class="wp-block-quote is-style-large"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>
 <!-- /wp:core/quote -->

core-blocks/test/fixtures/core__quote__style-2.json

@@ -21,9 +21,9 @@
             "citation": [
                 "Maya Angelou"
             ],
-            "style": 2
+            "className": "is-style-large"
         },
         "innerBlocks": [],
-        "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>"
+        "originalContent": "<blockquote class=\"wp-block-quote is-style-large\"><p>There is no greater agony than bearing an untold story inside you.</p><cite>Maya Angelou</cite></blockquote>"
     }
 ]