Add another pullquote style (WordPress#9763)

The commit adds a new style variation Solid Color to the Pull Quote block.
We also now allow users to choose Main Color and Text Color.

packages/block-library/src/pullquote/edit.js

@@ -0,0 +1,145 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { includes, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Component,
+	Fragment,
+} from '@wordpress/element';
+import {
+	RichText,
+	ContrastChecker,
+	InspectorControls,
+	withColors,
+	PanelColorSettings,
+} from '@wordpress/editor';
+
+export const SOLID_COLOR_STYLE_NAME = 'solid-color';
+export const SOLID_COLOR_CLASS = `is-style-${ SOLID_COLOR_STYLE_NAME }`;
+
+export const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) );
+export const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( {
+	children: subValue,
+} ) );
+
+class PullQuoteEdit extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.wasTextColorAutomaticallyComputed = false;
+		this.pullQuoteMainColorSetter = this.pullQuoteMainColorSetter.bind( this );
+		this.pullQuoteTextColorSetter = this.pullQuoteTextColorSetter.bind( this );
+	}
+
+	pullQuoteMainColorSetter( colorValue ) {
+		const { colorUtils, textColor, setTextColor, setMainColor } = this.props;
+		setMainColor( colorValue );
+		if ( ! textColor.color || this.wasTextColorAutomaticallyComputed ) {
+			this.wasTextColorAutomaticallyComputed = true;
+			setTextColor( colorUtils.getMostReadableColor( colorValue ) );
+		}
+	}
+
+	pullQuoteTextColorSetter( colorValue ) {
+		const { setTextColor } = this.props;
+		setTextColor( colorValue );
+		this.wasTextColorAutomaticallyComputed = false;
+	}
+
+	render() {
+		const {
+			attributes,
+			mainColor,
+			textColor,
+			setAttributes,
+			isSelected,
+			className,
+		} = this.props;
+
+		const { value, citation } = attributes;
+
+		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const figureStyle = isSolidColorStyle ?
+			{ backgroundColor: mainColor.color } :
+			{ borderColor: mainColor.color };
+		const blockquoteStyle = {
+			color: textColor.color,
+		};
+		const blockquoteClasses = textColor.color ? classnames( 'has-text-color', {
+			[ textColor.class ]: textColor.class,
+		} ) : undefined;
+		return (
+			<Fragment>
+				<figure style={ figureStyle } className={ classnames(
+					className, {
+						[ mainColor.class ]: isSolidColorStyle && mainColor.class,
+					} ) }>
+					<blockquote style={ blockquoteStyle } className={ blockquoteClasses }>
+						<RichText
+							multiline="p"
+							value={ toRichTextValue( value ) }
+							onChange={
+								( nextValue ) => setAttributes( {
+									value: fromRichTextValue( nextValue ),
+								} )
+							}
+							/* translators: the text of the quotation */
+							placeholder={ __( 'Write quote…' ) }
+							wrapperClassName="block-library-pullquote__content"
+						/>
+						{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+							<RichText
+								value={ citation }
+								/* translators: the individual or entity quoted */
+								placeholder={ __( 'Write citation…' ) }
+								onChange={
+									( nextCitation ) => setAttributes( {
+										citation: nextCitation,
+									} )
+								}
+								className="wp-block-pullquote__citation"
+							/>
+						) }
+					</blockquote>
+				</figure>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						colorSettings={ [
+							{
+								value: mainColor.color,
+								onChange: this.pullQuoteMainColorSetter,
+								label: __( 'Main Color' ),
+							},
+							{
+								value: textColor.color,
+								onChange: this.pullQuoteTextColorSetter,
+								label: __( 'Text Color' ),
+							},
+						] }
+					>
+						{ isSolidColorStyle && (
+							<ContrastChecker
+								{ ...{
+									textColor: textColor.color,
+									backgroundColor: mainColor.color,
+								} }
+								isLargeText={ false }
+							/>
+						) }
+					</PanelColorSettings>
+				</InspectorControls>
+			</Fragment>
+		);
+	}
+}
+
+export default withColors( { mainColor: 'background-color', textColor: 'color' } )(
+	PullQuoteEdit
+);

packages/block-library/src/pullquote/editor.scss

@@ -22,7 +22,25 @@
 
 	& blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 	& blockquote > .editor-rich-text p {
-		font-size: 24px;
+		font-size: 28px;
 		line-height: 1.6;
 	}
 }
+
+.wp-block-pullquote.is-style-solid-color {
+	margin-left: 0;
+	margin-right: 0;
+
+	& blockquote > .editor-rich-text p {
+		font-size: 32px;
+	}
+
+	.wp-block-pullquote__citation {
+		text-transform: none;
+		font-style: normal;
+	}
+}
+
+.wp-block-pullquote .wp-block-pullquote__citation {
+	color: inherit;
+}

packages/block-library/src/pullquote/index.js

@@ -1,20 +1,29 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import classnames from 'classnames';
+import { get, includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
+	getColorClassName,
 	RichText,
+	getColorObjectByAttributeValues,
 } from '@wordpress/editor';
+import {
+	select,
+} from '@wordpress/data';
+
+import {
+	default as edit,
+	SOLID_COLOR_STYLE_NAME,
+	SOLID_COLOR_CLASS,
+	toRichTextValue,
+} from './edit';
 
-const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) );
-const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( {
-	children: subValue,
-} ) );
 const blockAttributes = {
 	value: {
 		type: 'array',
@@ -31,6 +40,18 @@ const blockAttributes = {
 		source: 'children',
 		selector: 'cite',
 	},
+	mainColor: {
+		type: 'string',
+	},
+	customMainColor: {
+		type: 'string',
+	},
+	textColor: {
+		type: 'string',
+	},
+	customTextColor: {
+		type: 'string',
+	},
 };
 
 export const name = 'core/pullquote';
@@ -47,52 +68,53 @@ export const settings = {
 
 	attributes: blockAttributes,
 
+	styles: [
+		{ name: 'default', label: __( 'Regular' ), isDefault: true },
+		{ name: SOLID_COLOR_STYLE_NAME, label: __( 'Solid Color' ) },
+	],
+
 	supports: {
-		align: true,
+		align: [ 'left', 'right', 'wide', 'full' ],
 	},
 
-	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { value, citation } = attributes;
-
-		return (
-			<figure className={ className }>
-				<blockquote>
-					<RichText
-						multiline="p"
-						value={ toRichTextValue( value ) }
-						onChange={
-							( nextValue ) => setAttributes( {
-								value: fromRichTextValue( nextValue ),
-							} )
-						}
-						/* translators: the text of the quotation */
-						placeholder={ __( 'Write quote…' ) }
-						wrapperClassName="block-library-pullquote__content"
-					/>
-					{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
-						<RichText
-							value={ citation }
-							/* translators: the individual or entity quoted */
-							placeholder={ __( 'Write citation…' ) }
-							onChange={
-								( nextCitation ) => setAttributes( {
-									citation: nextCitation,
-								} )
-							}
-							className="wp-block-pullquote__citation"
-						/>
-					) }
-				</blockquote>
-			</figure>
-		);
-	},
+	edit,
 
 	save( { attributes } ) {
-		const { value, citation } = attributes;
-
+		const { mainColor, customMainColor, textColor, customTextColor, value, citation, className } = attributes;
+		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+		let figureClass, figureStyles;
+		// Is solid color style
+		if ( isSolidColorStyle ) {
+			figureClass = getColorClassName( 'background-color', mainColor );
+			if ( ! figureClass ) {
+				figureStyles = {
+					backgroundColor: customMainColor,
+				};
+			}
+		// Is normal style and a custom color is being used ( we can set a style directly with its value)
+		} else if ( customMainColor ) {
+			figureStyles = {
+				borderColor: customMainColor,
+			};
+		// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
+		// as there is no expectation that themes create classes that set border colors.
+		} else if ( mainColor ) {
+			const colors = get( select( 'core/editor' ).getEditorSettings(), [ 'colors' ], [] );
+			const colorObject = getColorObjectByAttributeValues( colors, mainColor );
+			figureStyles = {
+				borderColor: colorObject.color,
+			};
+		}
+
+		const blockquoteTextColorClass = getColorClassName( 'color', textColor );
+		const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
+			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+		} ) : undefined;
+		const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
 		return (
-			<figure>
-				<blockquote>
+			<figure className={ figureClass } style={ figureStyles }>
+				<blockquote className={ blockquoteClasses } style={ blockquoteStyle } >
 					<RichText.Content value={ toRichTextValue( value ) } />
 					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 				</blockquote>

packages/block-library/src/pullquote/style.scss

@@ -12,12 +12,45 @@
 	}
 
 	p {
-		font-size: 24px;
+		font-size: 28px;
 		line-height: 1.6;
 	}
 
 	cite,
 	footer {
 		position: relative;
 	}
+	.has-text-color a {
+		color: inherit;
+	}
+}
+
+.wp-block-pullquote:not(.is-style-solid-color) {
+	background: none;
+}
+
+.wp-block-pullquote.is-style-solid-color {
+	border: none;
+	blockquote {
+		margin-left: auto;
+		margin-right: auto;
+		text-align: left;
+
+		max-width: 60%;
+
+		p {
+			margin-top: 0;
+			margin-bottom: 0;
+			font-size: 32px;
+		}
+
+		cite {
+			text-transform: none;
+			font-style: normal;
+		}
+	}
+}
+
+.wp-block-pullquote cite {
+	color: inherit;
 }

packages/block-library/src/pullquote/theme.scss

@@ -9,6 +9,6 @@
 		color: $dark-gray-600;
 		text-transform: uppercase;
 		font-size: $default-font-size;
-		font-style: italic;
+		font-style: normal;
 	}
 }