Block API: Add block styles variations API (#7362)

* Block API: Add block styles variation API

* Adding some unit tests

* Fix unit tests

* Fix e2e tests

* Update the block switcher UI to show style variations and previews

* Always open the block transforms panel and avoid leaking the text-align

* Use the same inserterg grid view for block transforms

* Fix unit tests

* Add style variations e2e test

* Use block icon with colors in main block toolbar.

Move styles to the relevant scopes.

* Adjust padding of block switcher chip to avoid toolbar clipping.

* Center preview for block styles.

* Use button to ensure valid HTML

* Fix lint

* Add alternate styles for separator.

* Show style variations when the block type doesn't have any block transform

* Improve a11y of the style switcher

* Add Button block style variants and fix line height.

* Polish the visuals a bit.

- Stack borders
- Vertically center the contents in the previews
- Tweak hover/focus styles

* Fix tabs/spaces.

* Fix keyboard navigation into the styles preview buttons

* Polish preview container, fix focus, separator

* Adding the is-active className to the block-styles component

* Move the styles BlockAPI to the root level (out of the transforms)

* Rename CSS class to utilize is-active.

Sorry about the typo.

* Showing style variation labels

* Polish the separator styles

- Bug: the body text was not the same gray as the title. This fixes that.
- The new Dots separator style is simpler, smaller, better centered, and uses the same color as the text.
- The wide separator style is now thinner.

* Fix grid items width

* Use proper label names for quote styles.

* Polish separator styles for frontend

- Rename remaining instance of "asterisks" to "dots"
- Move default separator style to theme.scss so it can be opted into
- Scope default style so it doesn't bleed into dots and wide styles
- Refine dots and wide styles to better work on frontend

* Add button outline style.

* Fix unit tests (Block Switcher without blocks)

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>"
     }
 ]