diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index dc323edf32ca2..150bd1eb615c9 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -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 (
+
+
+
+ { ! RichText.isEmpty( citation ) && }
+
+
+ );
+ },
+ 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 } ) {
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 5e26805bcf502..509c95c39e26a 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -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,
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index bb07a42d68146..c2f9833046fa0 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { includes } from 'lodash';
/**
* WordPress dependencies
@@ -10,11 +10,7 @@ import { get, includes } from 'lodash';
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 );
diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js
index ff297c84a5d3d..4d0218628bf36 100644
--- a/packages/e2e-tests/fixtures/block-transforms.js
+++ b/packages/e2e-tests/fixtures/block-transforms.js
@@ -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: [
diff --git a/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.html b/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.html
new file mode 100644
index 0000000000000..b3fd2c37a633d
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.html
@@ -0,0 +1,3 @@
+
+