WordPress · jorgefilipecosta · Nov 5, 2019 · Nov 4, 2019 · Nov 4, 2019 · Nov 1, 2019
diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
@@ -332,6 +332,11 @@
  */
 
 // These are additional styles for all captions, when the theme opts in to block styles.
+@mixin caption-style() {
+	margin-top: 0.5em;
+	margin-bottom: 1em;
+}
+
 @mixin caption-style-theme() {
 	color: $dark-gray-500;
 	font-size: $default-font-size;

@@ -708,37 +708,6 @@
 	&.is-multi-selected > .block-editor-block-mover {
 		left: -$block-side-ui-width - $block-side-ui-clearance;
 	}
-
-	// For floats, show block mover when block is selected, and never on hover.
-	&[data-align="left"],
-	&[data-align="right"] {
-		// Show always when the block is selected.
-		&.is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
-			// Don't show on mobile, allow the special mobile toolbar to work there.
-			display: none;
-			@include break-small() {
-				display: block;
-				opacity: 1;
-				animation: none;
-
-				// Make wider and taller to make "safe" hover area bigger.
-				// The intent is to make it less likely that you hover float-adjacent
-				// blocks that visually appear below the block.
-				width: $block-side-ui-width + $block-side-ui-clearance + $block-padding + $border-width;
-				height: auto;
-				padding-bottom: $block-padding;
-
-				// Unset the negative top margin, or it might overlap the block toolbar.
-				margin-top: 0;
-			}
-		}
-
-		// Don't show on hover, or on the "ghost" when dragging.
-		&.is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
-		&.is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover {
-			display: none;
-		}
-	}
 }
 
 

@@ -1,4 +1,11 @@
 .wp-block-audio {
+	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
+	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	figcaption {
+		@include caption-style();
+	}
+
 	// Show full-width when not aligned.
 	audio {
 		width: 100%;

@@ -9,6 +9,12 @@
 }
 
 .wp-block-embed {
+	// Supply caption styles to embeds, even if the theme hasn't opted in.
+	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
+	// so we supply the styles so as to not appear broken or unstyled in those.
+	figcaption {
+		@include caption-style();
+	}
 	// The embed block is in a `figure` element, and many themes zero this out.
 	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
 	margin-bottom: 1em;

@@ -54,6 +54,13 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
+
+	// Supply caption styles to images, even if the theme hasn't opted in.
+	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	figcaption {
+		@include caption-style();
+	}
 }
 
 // Variations

@@ -48,7 +48,113 @@ const blockAttributes = {
 	},
 };
 
+function parseBorderColor( styleString ) {
+	if ( ! styleString ) {
+		return;
+	}
+	const matches = styleString.match( /border-color:([^;]+)[;]?/ );
+	if ( matches && matches[ 1 ] ) {
+		return matches[ 1 ];
+	}
+}
+
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			// figureStyle is an attribute that never existed.
+			// We are using it as a way to access the styles previously applied to the figure.
+			figureStyle: {
+				source: 'attribute',
+				selector: 'figure',
+				attribute: 'style',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				mainColor,
+				customMainColor,
+				textColor,
+				customTextColor,
+				value,
+				citation,
+				className,
+				figureStyle,
+			} = attributes;
+
+			const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+			let figureClasses, figureStyles;
+
+			// Is solid color style
+			if ( isSolidColorStyle ) {
+				const backgroundClass = getColorClassName( 'background-color', mainColor );
+
+				figureClasses = classnames( {
+					'has-background': ( backgroundClass || customMainColor ),
+					[ backgroundClass ]: backgroundClass,
+				} );
+
+				figureStyles = {
+					backgroundColor: backgroundClass ? undefined : 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,
+				};
+			// If normal style and a named color are 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 ) {
+				// Previously here we queried the color settings to know the color value
+				// of a named color. This made the save function impure and the block was refactored,
+				// because meanwhile a change in the editor made it impossible to query color settings in the save function.
+				// Here instead of querying the color settings to know the color value, we retrieve the value
+				// directly from the style previously serialized.
+				const borderColor = parseBorderColor( figureStyle );
+				figureStyles = {
+					borderColor,
+				};
+			}
+
+			const blockquoteTextColorClass = getColorClassName( 'color', textColor );
+			const blockquoteClasses = ( textColor || customTextColor ) && classnames( 'has-text-color', {
+				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+			} );
+
+			const blockquoteStyles = blockquoteTextColorClass ? undefined : { color: customTextColor };
+
+			return (
+				<figure className={ figureClasses } style={ figureStyles }>
+					<blockquote className={ blockquoteClasses } style={ blockquoteStyles } >
+						<RichText.Content value={ value } multiline />
+						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+					</blockquote>
+				</figure>
+			);
+		},
+		migrate( { className, figureStyle, mainColor, ...attributes } ) {
+			const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+			// If is the default style, and a main color is set,
+			// migrate the main color value into a custom color.
+			// The custom color value is retrived by parsing the figure styles.
+			if ( ! isSolidColorStyle && mainColor && figureStyle ) {
+				const borderColor = parseBorderColor( figureStyle );
+				if ( borderColor ) {
+					return {
+						...attributes,
+						className,
+						customMainColor: borderColor,
+					};
+				}
+			}
+			return {
+				className,
+				mainColor,
+				...attributes,
+			};
+		},
+	},
 	{
 		attributes: blockAttributes,
 		save( { attributes } ) {

@@ -32,12 +32,20 @@ class PullQuoteEdit extends Component {
 	}
 
 	pullQuoteMainColorSetter( colorValue ) {
-		const { colorUtils, textColor, setTextColor, setMainColor, className } = this.props;
+		const { colorUtils, textColor, setAttributes, setTextColor, setMainColor, className } = this.props;
 		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
 		const needTextColor = ! textColor.color || this.wasTextColorAutomaticallyComputed;
 		const shouldSetTextColor = isSolidColorStyle && needTextColor && colorValue;
 
-		setMainColor( colorValue );
+		if ( isSolidColorStyle ) {
+			// If we use the solid color style, set the color using the normal mechanism.
+			setMainColor( colorValue );
+		} else {
+			// If we use the default style, set the color as a custom color to force the usage of an inline style.
+			// Default style uses a border color for which classes are not available.
+			setAttributes( { customMainColor: colorValue } );
+		}
+
 		if ( shouldSetTextColor ) {
 			this.wasTextColorAutomaticallyComputed = true;
 			setTextColor( colorUtils.getMostReadableColor( colorValue ) );
@@ -50,6 +58,23 @@ class PullQuoteEdit extends Component {
 		this.wasTextColorAutomaticallyComputed = false;
 	}
 
+	componentDidUpdate( prevProps ) {
+		const {
+			attributes,
+			className,
+			mainColor,
+			setAttributes,
+		} = this.props;
+		// If the block includes a named color and we switched from the
+		// solid color style to the default style.
+		if ( attributes.mainColor && ! includes( className, SOLID_COLOR_CLASS ) && includes( prevProps.className, SOLID_COLOR_CLASS ) ) {
+			// Remove the named color, and set the color as a custom color.
+			// This is done because named colors use classes, in the default style we use a border color,
+			// and themes don't set classes for border colors.
+			setAttributes( { mainColor: undefined, customMainColor: mainColor.color } );
+		}
+	}
+
 	render() {
 		const {
 			attributes,

@@ -2,19 +2,15 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import {
 	getColorClassName,
 	RichText,
-	getColorObjectByAttributeValues,
 } from '@wordpress/block-editor';
-import {
-	select,
-} from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -53,14 +49,6 @@ export default function save( { attributes } ) {
 		figureStyles = {
 			borderColor: customMainColor,
 		};
-	// If normal style and a named color are 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/block-editor' ).getSettings(), [ 'colors' ], [] );
-		const colorObject = getColorObjectByAttributeValues( colors, mainColor );
-		figureStyles = {
-			borderColor: colorObject.color,
-		};
 	}
 
 	const blockquoteTextColorClass = getColorClassName( 'color', textColor );

@@ -170,27 +170,3 @@
 	/*rtl:ignore*/
 	text-align: right;
 }
-
-/**
- * Vanilla Block Styles
- * These are base styles that apply across blocks, meant to provide a baseline.
- * They are applied both to the editor and the theme, so we should have as few of these as possible.
- * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
- */
-
-// Caption styles.
-// Supply these even if the theme hasn't opted in, because the figcaption element is not likely to be styled in the majority of existing themes.
-// By providing a minimum of margin styles, we ensure it doesn't look broken or unstyled in those themes.
-figcaption {
-	margin-top: 0.5em;
-}
-
-// Apply some base styles to blocks that need them.
-img {
-	max-width: 100%;
-	height: auto;
-}
-
-iframe {
-	width: 100%;
-}
@@ -16,4 +16,11 @@
 	&.aligncenter {
 		text-align: center;
 	}
+
+	// Supply caption styles to videos, even if the theme hasn't opted in.
+	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
+	// so we supply the styles so as to not appear broken or unstyled in those themes.
+	figcaption {
+		@include caption-style();
+	}
 }
@@ -368,6 +368,13 @@ export const EXPECTED_TRANSFORMS = {
 			'Group',
 		],
 	},
+	'core__pullquote__main-color': {
+		originalBlock: 'Pullquote',
+		availableTransforms: [
+			'Quote',
+			'Group',
+		],
+	},
 	'core__pullquote__multi-paragraph': {
 		originalBlock: 'Pullquote',
 		availableTransforms: [

@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"mainColor":"accent","textColor":"secondary"} -->
+<figure class="wp-block-pullquote" style="border-color:#cd2653"><blockquote class="has-text-color has-secondary-color"><p>pullquote</p></blockquote></figure>
+<!-- /wp:pullquote -->
@@ -0,0 +1,15 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/pullquote",
+        "isValid": true,
+        "attributes": {
+            "value": "<p>pullquote</p>",
+            "citation": "",
+            "customMainColor": "#cd2653",
+            "textColor": "secondary"
+        },
+        "innerBlocks": [],
+        "originalContent": "<figure class=\"wp-block-pullquote\" style=\"border-color:#cd2653\"><blockquote class=\"has-text-color has-secondary-color\"><p>pullquote</p></blockquote></figure>"
+    }
+]
@@ -0,0 +1,23 @@
+[
+    {
+        "blockName": "core/pullquote",
+        "attrs": {
+            "mainColor": "accent",
+            "textColor": "secondary"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<figure class=\"wp-block-pullquote\" style=\"border-color:#cd2653\"><blockquote class=\"has-text-color has-secondary-color\"><p>pullquote</p></blockquote></figure>\n",
+        "innerContent": [
+            "\n<figure class=\"wp-block-pullquote\" style=\"border-color:#cd2653\"><blockquote class=\"has-text-color has-secondary-color\"><p>pullquote</p></blockquote></figure>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"customMainColor":"#cd2653","textColor":"secondary"} -->
+<figure class="wp-block-pullquote" style="border-color:#cd2653"><blockquote class="has-text-color has-secondary-color"><p>pullquote</p></blockquote></figure>
+<!-- /wp:pullquote -->
@@ -0,0 +1,3 @@
+<!-- wp:pullquote {"customMainColor":"#2207d0","textColor":"subtle-background","className":"has-background is-style-default"} -->
+<figure class="wp-block-pullquote has-background is-style-default" style="border-color:#2207d0"><blockquote class="has-text-color has-subtle-background-color"><p>Pullquote custom color</p><cite>my citation</cite></blockquote></figure>
+<!-- /wp:pullquote -->