Table Block: Fixed width table cells on by default

packages/block-library/src/table/block.json

@@ -9,7 +9,7 @@
 	"attributes": {
 		"hasFixedLayout": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		},
 		"caption": {
 			"type": "rich-text",

packages/block-library/src/table/deprecated.js

@@ -12,6 +12,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 // As the previous arbitrary colors won't match theme color palettes, the hex
@@ -24,6 +25,300 @@ const oldColors = {
 	'subtle-pale-pink': '#fcf0ef',
 };
 
+// Fixed width table cells on by default.
+const v4 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		caption: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'figcaption',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'rich-text',
+							source: 'rich-text',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
+						},
+						colspan: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'colspan',
+						},
+						rowspan: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'rowspan',
+						},
+					},
+				},
+			},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'rich-text',
+							source: 'rich-text',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
+						},
+						colspan: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'colspan',
+						},
+						rowspan: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'rowspan',
+						},
+					},
+				},
+			},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'rich-text',
+							source: 'rich-text',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
+						},
+						colspan: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'colspan',
+						},
+						rowspan: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'rowspan',
+						},
+					},
+				},
+			},
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		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',
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, caption } = attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const colorProps = getColorClassesAndStyles( attributes );
+		const borderProps = getBorderClassesAndStyles( attributes );
+
+		const classes = classnames(
+			colorProps.className,
+			borderProps.className,
+			{
+				'has-fixed-layout': hasFixedLayout,
+			}
+		);
+
+		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,
+										colspan,
+										rowspan,
+									},
+									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
+											}
+											colSpan={ colspan }
+											rowSpan={ rowspan }
+										/>
+									);
+								}
+							) }
+						</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 }
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 // 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 = {
@@ -665,4 +960,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1 ];
+export default [ v4, v3, v2, v1 ];

packages/blocks/src/api/raw-handling/test/paste-handler.js

@@ -77,7 +77,7 @@ describe( 'pasteHandler', () => {
 
 		delete result.attributes.caption;
 		expect( result.attributes ).toEqual( {
-			hasFixedLayout: false,
+			hasFixedLayout: true,
 			head: [
 				{
 					cells: [
@@ -117,7 +117,7 @@ describe( 'pasteHandler', () => {
 
 		delete result.attributes.caption;
 		expect( result.attributes ).toEqual( {
-			hasFixedLayout: false,
+			hasFixedLayout: true,
 			head: [
 				{
 					cells: [

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-a-caption-to-be-added-1-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table><figcaption class="wp-element-caption">Caption!</figcaption></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table><figcaption class="wp-element-caption">Caption!</figcaption></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-1-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-2-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-cells-to-be-selected-when-the-cell-area-outside-of-the-RichText-is-clicked-1-chromium.txt

@@ -1,3 +1,3 @@
-<!-- wp:table {"hasFixedLayout":true} -->
+<!-- wp:table -->
 <figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><br><br><br><br></td><td>Second cell.</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-columns-to-be-aligned-1-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>None</td><td class="has-text-align-left" data-align="left">To the left</td><td class="has-text-align-center" data-align="center">Centered</td><td class="has-text-align-right" data-align="right">Right aligned</td></tr><tr><td></td><td class="has-text-align-left" data-align="left"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-right" data-align="right"></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>None</td><td class="has-text-align-left" data-align="left">To the left</td><td class="has-text-align-center" data-align="center">Centered</td><td class="has-text-align-right" data-align="right">Right aligned</td></tr><tr><td></td><td class="has-text-align-left" data-align="left"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-right" data-align="right"></td></tr></tbody></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-1-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th>header</th><th></th></tr></thead><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td>footer</td><td></td></tr></tfoot></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>header</th><th></th></tr></thead><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td>footer</td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-2-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-allows-text-to-by-typed-into-cells-1-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>This</td><td>is</td></tr><tr><td>table</td><td>block</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>This</td><td>is</td></tr><tr><td>table</td><td>block</td></tr></tbody></table></figure>
 <!-- /wp:table -->

test/e2e/specs/editor/blocks/__snapshots__/Table-displays-a-form-for-choosing-the-row-and-column-count-of-the-table-1-chromium.txt

@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->