@wordpress/block-library 7.12.0 → 7.12.2-next.d6164808d3.0

package/src/pullquote/deprecated.js

@@ -15,6 +15,12 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { select } from '@wordpress/data';
+import {
+	create,
+	replace,
+	toHTMLString,
+	__UNSTABLE_LINE_SEPARATOR,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -58,458 +64,530 @@ function parseBorderColor( styleString ) {
 	}
 }
 
-// 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
-const deprecated = [
-	{
-		attributes: {
-			...blockAttributes,
-		},
-		save( { attributes } ) {
-			const {
-				mainColor,
-				customMainColor,
-				customTextColor,
-				textColor,
-				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,
-				};
-			}
+function multilineToInline( value ) {
+	return toHTMLString( {
+		value: replace(
+			create( { html: value, multilineTag: 'p' } ),
+			new RegExp( __UNSTABLE_LINE_SEPARATOR, 'g' ),
+			'\n'
+		),
+	} );
+}
 
-			const blockquoteTextColorClass = getColorClassName(
-				'color',
-				textColor
-			);
-			const blockquoteClasses = classnames( {
-				'has-text-color': textColor || customTextColor,
-				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
-			} );
+const v5 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, citation, value } = attributes;
+		const shouldShowCitation = ! RichText.isEmpty( citation );
+
+		return (
+			<figure
+				{ ...useBlockProps.save( {
+					className: classnames( {
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+					} ),
+				} ) }
+			>
+				<blockquote>
+					<RichText.Content value={ value } multiline />
+					{ shouldShowCitation && (
+						<RichText.Content tagName="cite" value={ citation } />
+					) }
+				</blockquote>
+			</figure>
+		);
+	},
+	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 (
-				<figure
-					{ ...useBlockProps.save( {
-						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,
+const v4 = {
+	attributes: {
+		...blockAttributes,
+	},
+	save( { attributes } ) {
+		const {
 			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,
-						},
-					};
-				} else {
-					// Block supports: Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
-					style = {
-						color: {
-							background: customMainColor,
-						},
-					};
-				}
-			}
+			textColor,
+			value,
+			citation,
+			className,
+		} = attributes;
 
-			// Block supports: Set style.color.text if a deprecated block has a `customTextColor` attribute.
-			if ( customTextColor && style ) {
-				style.color = {
-					...style.color,
-					text: customTextColor,
-				};
-			}
+		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+		let figureClasses, figureStyles;
 
-			return {
-				className,
-				backgroundColor: isSolidColorStyle ? mainColor : undefined,
-				borderColor: isSolidColorStyle ? undefined : mainColor,
-				textAlign: isSolidColorStyle ? 'left' : undefined,
-				style,
-				...attributes,
+		// 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,
+			};
+		}
+
+		const blockquoteTextColorClass = getColorClassName(
+			'color',
+			textColor
+		);
+		const blockquoteClasses = classnames( {
+			'has-text-color': textColor || customTextColor,
+			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+		} );
+
+		const blockquoteStyles = blockquoteTextColorClass
+			? undefined
+			: { color: customTextColor };
+
+		return (
+			<figure
+				{ ...useBlockProps.save( {
+					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>
+		);
 	},
-	{
-		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 (
-				<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( {
+		// 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 (
+			<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>
+		);
 	},
-	{
-		attributes: blockAttributes,
-		save( { 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,
+	migrate( {
+		value,
+		className,
+		figureStyle,
+		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 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( blockEditorStore ).getSettings(),
-					[ 'colors' ],
-					[]
-				);
-				const colorObject = getColorObjectByAttributeValues(
-					colors,
-					mainColor
-				);
-				figureStyles = {
-					borderColor: colorObject.color,
+			} 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,
-					  } )
-					: undefined;
-			const blockquoteStyle = blockquoteTextColorClass
-				? undefined
-				: { color: customTextColor };
-			return (
-				<figure className={ figureClass } style={ figureStyles }>
-					<blockquote
-						className={ blockquoteClasses }
-						style={ blockquoteStyle }
-					>
-						<RichText.Content value={ value } multiline />
-						{ ! RichText.isEmpty( citation ) && (
-							<RichText.Content
-								tagName="cite"
-								value={ citation }
-							/>
-						) }
-					</blockquote>
-				</figure>
-			);
-		},
-		migrate( {
-			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 = {
+		// 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 {
+					value: multilineToInline( value ),
+					...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: customMainColor,
+							color: borderColor,
 						},
-					};
-				} else {
-					// Block supports: Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
-					style = {
-						color: {
-							background: customMainColor,
-						},
-					};
-				}
+					},
+				};
 			}
+		}
+		return {
+			value: multilineToInline( value ),
+			className,
+			backgroundColor: isSolidColorStyle ? mainColor : undefined,
+			borderColor: isSolidColorStyle ? undefined : mainColor,
+			textAlign: isSolidColorStyle ? 'left' : undefined,
+			style,
+			...attributes,
+		};
+	},
+};
 
-			// Block supports: Set style.color.text if a deprecated block has a `customTextColor` attribute.
-			if ( customTextColor && style ) {
-				style.color = {
-					...style.color,
-					text: customTextColor,
+const v2 = {
+	attributes: blockAttributes,
+	save( { 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,
 				};
 			}
-
-			return {
-				className,
-				backgroundColor: isSolidColorStyle ? mainColor : undefined,
-				borderColor: isSolidColorStyle ? undefined : mainColor,
-				textAlign: isSolidColorStyle ? 'left' : undefined,
-				style,
-				...attributes,
+			// 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,
 			};
-		},
-	},
-	{
-		attributes: {
-			...blockAttributes,
-		},
-		save( { attributes } ) {
-			const { value, citation } = attributes;
-			return (
-				<blockquote>
+			// 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( blockEditorStore ).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,
+				  } )
+				: undefined;
+		const blockquoteStyle = blockquoteTextColorClass
+			? undefined
+			: { color: customTextColor };
+		return (
+			<figure className={ figureClass } style={ figureStyles }>
+				<blockquote
+					className={ blockquoteClasses }
+					style={ blockquoteStyle }
+				>
 					<RichText.Content value={ value } multiline />
 					{ ! RichText.isEmpty( citation ) && (
 						<RichText.Content tagName="cite" value={ citation } />
 					) }
 				</blockquote>
-			);
-		},
+			</figure>
+		);
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			citation: {
-				type: 'string',
-				source: 'html',
-				selector: 'footer',
-			},
-			align: {
-				type: 'string',
-				default: 'none',
-			},
-		},
+	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,
+					},
+				};
+			} else {
+				// Block supports: Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
+				style = {
+					color: {
+						background: customMainColor,
+					},
+				};
+			}
+		}
 
-		save( { attributes } ) {
-			const { value, citation, align } = attributes;
+		// Block supports: Set style.color.text if a deprecated block has a `customTextColor` attribute.
+		if ( customTextColor && style ) {
+			style.color = {
+				...style.color,
+				text: customTextColor,
+			};
+		}
 
-			return (
-				<blockquote className={ `align${ align }` }>
-					<RichText.Content value={ value } multiline />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="footer" value={ citation } />
-					) }
-				</blockquote>
-			);
+		return {
+			value: multilineToInline( value ),
+			className,
+			backgroundColor: isSolidColorStyle ? mainColor : undefined,
+			borderColor: isSolidColorStyle ? undefined : mainColor,
+			textAlign: isSolidColorStyle ? 'left' : undefined,
+			style,
+			...attributes,
+		};
+	},
+};
+
+const v1 = {
+	attributes: {
+		...blockAttributes,
+	},
+	save( { attributes } ) {
+		const { value, citation } = attributes;
+		return (
+			<blockquote>
+				<RichText.Content value={ value } multiline />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate( { value, ...attributes } ) {
+		return {
+			value: multilineToInline( value ),
+			...attributes,
+		};
+	},
+};
+
+const v0 = {
+	attributes: {
+		...blockAttributes,
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'footer',
+		},
+		align: {
+			type: 'string',
+			default: 'none',
 		},
 	},
-];
 
-export default deprecated;
+	save( { attributes } ) {
+		const { value, citation, align } = attributes;
+
+		return (
+			<blockquote className={ `align${ align }` }>
+				<RichText.Content value={ value } multiline />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="footer" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	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 ];