From 490c14baf39c70d86854bd5909337a8a3ce3b513 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 21 Oct 2022 19:18:48 +0900
Subject: [PATCH] Table Block: Add a deprecation for the figcaption element
 class name (#45161)

* Table Block: fix table deprecation

* Add comment

* Add new fixture for the v3 deprecation

Co-authored-by: Glen Davies <glen.davies@automattic.com>
---
 .../block-library/src/table/deprecated.js     | 935 +++++++++++-------
 .../blocks/core__table__deprecated-3.html     |   3 +
 .../blocks/core__table__deprecated-3.json     | 144 +++
 .../core__table__deprecated-3.parsed.json     |  11 +
 .../core__table__deprecated-3.serialized.html |   3 +
 5 files changed, 748 insertions(+), 348 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__table__deprecated-3.html
 create mode 100644 test/integration/fixtures/blocks/core__table__deprecated-3.json
 create mode 100644 test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html

diff --git a/packages/block-library/src/table/deprecated.js b/packages/block-library/src/table/deprecated.js
index 01c0120d5307e..ed138c4518aa3 100644
--- a/packages/block-library/src/table/deprecated.js
+++ b/packages/block-library/src/table/deprecated.js
@@ -10,12 +10,10 @@ import {
 	RichText,
 	getColorClassName,
 	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
-const supports = {
-	align: true,
-};
-
 // As the previous arbitrary colors won't match theme color palettes, the hex
 // value will be mapped to the style.color.background attribute as if it was
 // a custom color selection.
@@ -26,380 +24,426 @@ const oldColors = {
 	'subtle-pale-pink': '#fcf0ef',
 };
 
-const deprecated = [
-	// Deprecation migrating table block to use colors block support feature.
-	{
-		attributes: {
-			hasFixedLayout: {
-				type: 'boolean',
-				default: false,
-			},
-			backgroundColor: {
-				type: 'string',
-			},
-			caption: {
-				type: 'string',
-				source: 'html',
-				selector: 'figcaption',
-				default: '',
-			},
-			head: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'thead tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
-							align: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'data-align',
-							},
+// In #41140 support was added to global styles for caption elements which
+// added a `wp-element-caption` classname to the embed figcaption element.
+const v3 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			default: '',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			body: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tbody tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
-							align: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'data-align',
-							},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			foot: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tfoot tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
-							align: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'data-align',
-							},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
 		},
-		supports: {
-			anchor: true,
-			align: true,
-			__experimentalSelector: '.wp-block-table > table',
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
-		save: ( { attributes } ) => {
-			const {
-				hasFixedLayout,
-				head,
-				body,
-				foot,
-				backgroundColor,
-				caption,
-			} = attributes;
-			const isEmpty = ! head.length && ! body.length && ! foot.length;
-
-			if ( isEmpty ) {
-				return null;
-			}
+		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,
+			},
+		},
+		__experimentalBorder: {
+			__experimentalSkipSerialization: true,
+			color: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-table > table',
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, caption } = attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
 
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const colorProps = getColorClassesAndStyles( attributes );
+		const borderProps = getBorderClassesAndStyles( attributes );
 
-			const classes = classnames( backgroundClass, {
+		const classes = classnames(
+			colorProps.className,
+			borderProps.className,
+			{
 				'has-fixed-layout': hasFixedLayout,
-				'has-background': !! backgroundClass,
-			} );
-
-			const hasCaption = ! RichText.isEmpty( caption );
-
-			const Section = ( { type, rows } ) => {
-				if ( ! rows.length ) {
-					return null;
-				}
-
-				const Tag = `t${ type }`;
-
-				return (
-					<Tag>
-						{ rows.map( ( { cells }, rowIndex ) => (
-							<tr key={ rowIndex }>
-								{ cells.map(
-									(
-										{ content, tag, scope, align },
-										cellIndex
-									) => {
-										const cellClasses = classnames( {
-											[ `has-text-align-${ align }` ]:
-												align,
-										} );
-
-										return (
-											<RichText.Content
-												className={
-													cellClasses
-														? cellClasses
-														: undefined
-												}
-												data-align={ align }
-												tagName={ tag }
-												value={ content }
-												key={ cellIndex }
-												scope={
-													tag === 'th'
-														? scope
-														: undefined
-												}
-											/>
-										);
-									}
-								) }
-							</tr>
-						) ) }
-					</Tag>
-				);
-			};
+			}
+		);
+
+		const hasCaption = ! RichText.isEmpty( caption );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
+				return null;
+			}
+
+			const Tag = `t${ type }`;
 
 			return (
-				<figure { ...useBlockProps.save() }>
-					<table className={ classes === '' ? undefined : classes }>
-						<Section type="head" rows={ head } />
-						<Section type="body" rows={ body } />
-						<Section type="foot" rows={ foot } />
-					</table>
-					{ hasCaption && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								(
+									{ content, tag, scope, align },
+									cellIndex
+								) => {
+									const cellClasses = classnames( {
+										[ `has-text-align-${ align }` ]: align,
+									} );
+
+									return (
+										<RichText.Content
+											className={
+												cellClasses
+													? cellClasses
+													: undefined
+											}
+											data-align={ align }
+											tagName={ tag }
+											value={ content }
+											key={ cellIndex }
+											scope={
+												tag === 'th' ? scope : undefined
+											}
+										/>
+									);
+								}
+							) }
+						</tr>
+					) ) }
+				</Tag>
 			);
+		};
+
+		return (
+			<figure { ...useBlockProps.save() }>
+				<table
+					className={ classes === '' ? undefined : classes }
+					style={ { ...colorProps.style, ...borderProps.style } }
+				>
+					<Section type="head" rows={ head } />
+					<Section type="body" rows={ body } />
+					<Section type="foot" rows={ foot } />
+				</table>
+				{ hasCaption && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+// Deprecation migrating table block to use colors block support feature.
+const v2 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
 		},
-		isEligible: ( attributes ) => {
-			return (
-				attributes.backgroundColor &&
-				attributes.backgroundColor in oldColors &&
-				! attributes.style
-			);
+		backgroundColor: {
+			type: 'string',
 		},
-
-		// This version is the first to introduce the style attribute to the
-		// table block. As a result, we'll explicitly override that.
-		migrate: ( attributes ) => {
-			return {
-				...attributes,
-				backgroundColor: undefined,
-				style: {
-					color: {
-						background: oldColors[ attributes.backgroundColor ],
-					},
-				},
-			};
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			default: '',
 		},
-	},
-	{
-		attributes: {
-			hasFixedLayout: {
-				type: 'boolean',
-				default: false,
-			},
-			backgroundColor: {
-				type: 'string',
-			},
-			head: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'thead tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			body: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tbody tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			foot: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tfoot tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
 		},
-		supports,
-		save( { attributes } ) {
-			const { hasFixedLayout, head, body, foot, backgroundColor } =
-				attributes;
-			const isEmpty = ! head.length && ! body.length && ! foot.length;
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		__experimentalSelector: '.wp-block-table > table',
+	},
+	save: ( { attributes } ) => {
+		const { hasFixedLayout, head, body, foot, backgroundColor, caption } =
+			attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
 
-			if ( isEmpty ) {
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+
+		const classes = classnames( backgroundClass, {
+			'has-fixed-layout': hasFixedLayout,
+			'has-background': !! backgroundClass,
+		} );
+
+		const hasCaption = ! RichText.isEmpty( caption );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
 				return null;
 			}
 
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
+			const Tag = `t${ type }`;
 
-			const classes = classnames( backgroundClass, {
-				'has-fixed-layout': hasFixedLayout,
-				'has-background': !! backgroundClass,
-			} );
-
-			const Section = ( { type, rows } ) => {
-				if ( ! rows.length ) {
-					return null;
-				}
-
-				const Tag = `t${ type }`;
-
-				return (
-					<Tag>
-						{ rows.map( ( { cells }, rowIndex ) => (
-							<tr key={ rowIndex }>
-								{ cells.map(
-									( { content, tag, scope }, cellIndex ) => (
+			return (
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								(
+									{ content, tag, scope, align },
+									cellIndex
+								) => {
+									const cellClasses = classnames( {
+										[ `has-text-align-${ align }` ]: align,
+									} );
+
+									return (
 										<RichText.Content
+											className={
+												cellClasses
+													? cellClasses
+													: undefined
+											}
+											data-align={ align }
 											tagName={ tag }
 											value={ content }
 											key={ cellIndex }
@@ -407,23 +451,218 @@ const deprecated = [
 												tag === 'th' ? scope : undefined
 											}
 										/>
-									)
-								) }
-							</tr>
-						) ) }
-					</Tag>
-				);
-			};
+									);
+								}
+							) }
+						</tr>
+					) ) }
+				</Tag>
+			);
+		};
 
-			return (
-				<table className={ classes }>
+		return (
+			<figure { ...useBlockProps.save() }>
+				<table className={ classes === '' ? undefined : classes }>
 					<Section type="head" rows={ head } />
 					<Section type="body" rows={ body } />
 					<Section type="foot" rows={ foot } />
 				</table>
-			);
+				{ hasCaption && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+	isEligible: ( attributes ) => {
+		return (
+			attributes.backgroundColor &&
+			attributes.backgroundColor in oldColors &&
+			! attributes.style
+		);
+	},
+
+	// This version is the first to introduce the style attribute to the
+	// table block. As a result, we'll explicitly override that.
+	migrate: ( attributes ) => {
+		return {
+			...attributes,
+			backgroundColor: undefined,
+			style: {
+				color: {
+					background: oldColors[ attributes.backgroundColor ],
+				},
+			},
+		};
+	},
+};
+
+const v1 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+					},
+				},
+			},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+					},
+				},
+			},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+					},
+				},
+			},
 		},
 	},
-];
+	supports: {
+		align: true,
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, backgroundColor } =
+			attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+
+		const classes = classnames( backgroundClass, {
+			'has-fixed-layout': hasFixedLayout,
+			'has-background': !! backgroundClass,
+		} );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
+				return null;
+			}
+
+			const Tag = `t${ type }`;
 
-export default deprecated;
+			return (
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								( { content, tag, scope }, cellIndex ) => (
+									<RichText.Content
+										tagName={ tag }
+										value={ content }
+										key={ cellIndex }
+										scope={
+											tag === 'th' ? scope : undefined
+										}
+									/>
+								)
+							) }
+						</tr>
+					) ) }
+				</Tag>
+			);
+		};
+
+		return (
+			<table className={ classes }>
+				<Section type="head" rows={ head } />
+				<Section type="body" rows={ body } />
+				<Section type="foot" rows={ foot } />
+			</table>
+		);
+	},
+};
+
+/**
+ * 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 [ v3, v2, v1 ];
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.html b/test/integration/fixtures/blocks/core__table__deprecated-3.html
new file mode 100644
index 0000000000000..a22436c55bdb1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.html
@@ -0,0 +1,3 @@
+<!-- wp:core/table -->
+<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>
+<!-- /wp:core/table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.json b/test/integration/fixtures/blocks/core__table__deprecated-3.json
new file mode 100644
index 0000000000000..4f500a7691fa8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.json
@@ -0,0 +1,144 @@
+[
+	{
+		"name": "core/table",
+		"isValid": true,
+		"attributes": {
+			"hasFixedLayout": false,
+			"caption": "A table for testing",
+			"head": [
+				{
+					"cells": [
+						{
+							"content": "Version",
+							"tag": "th"
+						},
+						{
+							"content": "Musician",
+							"tag": "th"
+						},
+						{
+							"content": "Date",
+							"tag": "th"
+						}
+					]
+				}
+			],
+			"body": [
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a>",
+							"tag": "td"
+						},
+						{
+							"content": "No musician chosen.",
+							"tag": "td"
+						},
+						{
+							"content": "May 27, 2003",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Miles Davis",
+							"tag": "td"
+						},
+						{
+							"content": "January 3, 2004",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a>",
+							"tag": "td"
+						},
+						{
+							"content": "…",
+							"tag": "td"
+						},
+						{
+							"content": "…",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Clifford Brown",
+							"tag": "td"
+						},
+						{
+							"content": "December 8, 2015",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Coleman Hawkins",
+							"tag": "td"
+						},
+						{
+							"content": "April 12, 2016",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Pepper Adams",
+							"tag": "td"
+						},
+						{
+							"content": "August 16, 2016",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Sarah Vaughan",
+							"tag": "td"
+						},
+						{
+							"content": "December 6, 2016",
+							"tag": "td"
+						}
+					]
+				}
+			],
+			"foot": []
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json
new file mode 100644
index 0000000000000..030ced272fcab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/table",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
new file mode 100644
index 0000000000000..66246c83295a9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:table -->
+<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
+<!-- /wp:table -->