+
+ );
+ },
+ migrate( { value, ...attributes } ) {
+ return {
+ value: multilineToInline( value ),
+ ...attributes,
+ };
+ },
+};
- const blockquoteStyles = blockquoteTextColorClass
- ? undefined
- : { color: customTextColor };
+// TODO: this is ripe for a bit of a clean up according to the example in https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/#example
- return (
-
-
+
+ );
},
- {
- 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,
+ migrate( {
+ value,
+ className,
+ mainColor,
+ customMainColor,
+ customTextColor,
+ ...attributes
+ } ) {
+ const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+ let style;
+
+ if ( customMainColor ) {
+ if ( ! isSolidColorStyle ) {
+ // Block supports: Set style.border.color if a deprecated block has a default style and a `customMainColor` attribute.
+ style = {
+ border: {
+ color: 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,
+ } else {
+ // Block supports: Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
+ style = {
+ color: {
+ background: customMainColor,
+ },
};
}
+ }
- const blockquoteTextColorClass = getColorClassName(
- 'color',
- textColor
- );
- const blockquoteClasses =
- ( textColor || customTextColor ) &&
- classnames( 'has-text-color', {
- [ blockquoteTextColorClass ]: blockquoteTextColorClass,
- } );
-
- const blockquoteStyles = blockquoteTextColorClass
- ? undefined
- : { color: customTextColor };
-
- return (
-
-
-
- );
- },
- migrate( {
+ // Block supports: Set style.color.text if a deprecated block has a `customTextColor` attribute.
+ if ( customTextColor && style ) {
+ style.color = {
+ ...style.color,
+ text: customTextColor,
+ };
+ }
+
+ return {
+ value: multilineToInline( value ),
className,
- figureStyle,
+ backgroundColor: isSolidColorStyle ? mainColor : undefined,
+ borderColor: isSolidColorStyle ? undefined : mainColor,
+ textAlign: isSolidColorStyle ? 'left' : undefined,
+ style,
+ ...attributes,
+ };
+ },
+};
+
+const v3 = {
+ 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,
- ...attributes
- } ) {
- const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
- let style;
-
- if ( customMainColor ) {
- if ( ! isSolidColorStyle ) {
- // Block supports: Set style.border.color if a deprecated block has a default style and a `customMainColor` attribute.
- style = {
- border: {
- color: customMainColor,
- },
- };
- } else {
- // Block supports: Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
- style = {
- color: {
- background: customMainColor,
- },
- };
- }
- }
+ value,
+ citation,
+ className,
+ figureStyle,
+ } = attributes;
- // Block supports: Set style.color.text if a deprecated block has a `customTextColor` attribute.
- if ( customTextColor && style ) {
- style.color = {
- ...style.color,
- text: customTextColor,
- };
- }
- // If is the default style, and a main color is set,
- // migrate the main color value into a custom border color.
- // The custom border color value is retrieved by parsing the figure styles.
- if ( ! isSolidColorStyle && mainColor && figureStyle ) {
- const borderColor = parseBorderColor( figureStyle );
- if ( borderColor ) {
- return {
- ...attributes,
- className,
- // Block supports: Set style.border.color if a deprecated block has `mainColor`, inline border CSS and is not a solid color style.
- style: {
- border: {
- color: borderColor,
- },
- },
- };
- }
- }
- return {
- className,
- backgroundColor: isSolidColorStyle ? mainColor : undefined,
- borderColor: isSolidColorStyle ? undefined : mainColor,
- textAlign: isSolidColorStyle ? 'left' : undefined,
- style,
- ...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 (
+
+
+ );
+ },
+ migrate( { value, ...attributes } ) {
+ return {
+ value: multilineToInline( value ),
+ ...attributes,
+ };
+ },
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v5, v4, v3, v2, v1, v0 ];
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 77a6f12b602716..637d83d5b42897 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -52,7 +52,7 @@ function PullQuoteEdit( {
' +
// translators: Quote serving as example for the Pullquote block. Attributed to Matt Mullenweg.
__(
'One of the hardest things to do in technology is disrupt yourself.'
- ) +
- '