diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index dc323edf32ca2..1261b788a9740 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -49,6 +49,67 @@ const blockAttributes = {
};
const deprecated = [
+ {
+ attributes: blockAttributes,
+ save( { attributes } ) {
+ const {
+ mainColor,
+ customMainColor,
+ textColor,
+ customTextColor,
+ value,
+ citation,
+ className,
+ } = 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 ) {
+ const colors = get( select( 'core/block-editor' ).getSettings(), [ '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,
+ } );
+
+ const blockquoteStyles = blockquoteTextColorClass ? undefined : { color: customTextColor };
+
+ return (
+
+
+
+ { ! RichText.isEmpty( citation ) && }
+
+
+ );
+ },
+ },
{
attributes: blockAttributes,
save( { attributes } ) {
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 010ac8f5078db..5b37164535a28 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 7a85f462d54c8..3a44a8b2e817b 100644
--- a/packages/e2e-tests/fixtures/block-transforms.js
+++ b/packages/e2e-tests/fixtures/block-transforms.js
@@ -390,6 +390,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 @@
+
+