Heading: Add block classname deprecation (#46138)

WordPress · Nov 30, 2022 · d2bfddc · d2bfddc
1 parent 8be1039
commit d2bfddc
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 136 deletions.
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
@@ -63,155 +63,228 @@ const migrateTextAlign = ( attributes ) => {
 		: attributes;
 };
 
-const deprecated = [
-	{
-		supports: {
-			align: [ 'wide', 'full' ],
-			anchor: true,
-			className: false,
-			color: { link: true },
-			fontSize: true,
-			lineHeight: true,
-			__experimentalSelector: {
-				'core/heading/h1': 'h1',
-				'core/heading/h2': 'h2',
-				'core/heading/h3': 'h3',
-				'core/heading/h4': 'h4',
-				'core/heading/h5': 'h5',
-				'core/heading/h6': 'h6',
-			},
-			__unstablePasteTextInline: true,
+const v1 = {
+	supports: blockSupports,
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		attributes: blockAttributes,
-		isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
-		migrate: migrateTextAlign,
-		save( { attributes } ) {
-			const { align, content, level } = attributes;
-			const TagName = 'h' + level;
-
-			const className = classnames( {
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<TagName { ...useBlockProps.save( { className } ) }>
-					<RichText.Content value={ content } />
-				</TagName>
-			);
+		textColor: {
+			type: 'string',
 		},
 	},
-	{
-		supports: blockSupports,
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, level, content, textColor, customTextColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = classnames( {
+			[ textClass ]: textClass,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					textAlign: align,
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+};
+const v2 = {
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, content, customTextColor, level, textColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-				'has-text-color': textColor || customTextColor,
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		textColor: {
+			type: 'string',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, content, customTextColor, level, textColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = classnames( {
+			[ textClass ]: textClass,
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+	supports: blockSupports,
+};
+const v3 = {
+	supports: blockSupports,
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, content, customTextColor, level, textColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		textColor: {
+			type: 'string',
 		},
-		supports: blockSupports,
 	},
-	{
-		supports: blockSupports,
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, content, customTextColor, level, textColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = classnames( {
+			[ textClass ]: textClass,
+			'has-text-color': textColor || customTextColor,
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+};
+const v4 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: false,
+		color: { link: true },
+		fontSize: true,
+		lineHeight: true,
+		__experimentalSelector: {
+			'core/heading/h1': 'h1',
+			'core/heading/h2': 'h2',
+			'core/heading/h3': 'h3',
+			'core/heading/h4': 'h4',
+			'core/heading/h5': 'h5',
+			'core/heading/h6': 'h6',
+		},
+		__unstablePasteTextInline: true,
+	},
+	attributes: blockAttributes,
+	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+	migrate: migrateTextAlign,
+	save( { attributes } ) {
+		const { align, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+};
+
+// This deprecation covers the serialization of the `wp-block-heading` class
+// into the block's markup after className support was enabled.
+const v5 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
 			},
-			textColor: {
-				type: 'string',
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+				textTransform: true,
 			},
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, level, content, textColor, customTextColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						textAlign: align,
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		__experimentalSelector: 'h1,h2,h3,h4,h5,h6',
+		__unstablePasteTextInline: true,
+		__experimentalSlashInserter: true,
+	},
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'h1,h2,h3,h4,h5,h6',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		placeholder: {
+			type: 'string',
 		},
 	},
-];
+	save( { attributes } ) {
+		const { textAlign, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+};
+
+const deprecated = [ v5, v4, v3, v2, v1 ];
 
 export default deprecated;
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.html b/test/integration/fixtures/blocks/core__heading__deprecated-5.html
@@ -0,0 +1,3 @@
+<!-- wp:heading {"textAlign":"right","textColor":"primary"} -->
+<h2 class="has-text-align-right has-primary-color has-text-color">Text</h2>
+<!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.json b/test/integration/fixtures/blocks/core__heading__deprecated-5.json
@@ -0,0 +1,13 @@
+[
+	{
+		"name": "core/heading",
+		"isValid": true,
+		"attributes": {
+			"textAlign": "right",
+			"content": "Text",
+			"level": 2,
+			"textColor": "primary"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.parsed.json b/test/integration/fixtures/blocks/core__heading__deprecated-5.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/heading",
+		"attrs": {
+			"textAlign": "right",
+			"textColor": "primary"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<h2 class=\"has-text-align-right has-primary-color has-text-color\">Text</h2>\n",
+		"innerContent": [
+			"\n<h2 class=\"has-text-align-right has-primary-color has-text-color\">Text</h2>\n"
+		]
+	}
+]