WP-70 Table Header and Footer

src/blocks/index.ts

@@ -7,6 +7,7 @@ import { registerBlockType } from '@wordpress/blocks';
  * Import blocks.
  */
 import * as table from './table';
+import * as tableRowContainer from './table-row-container';
 import * as tableRow from './table-row';
 import * as tableColumn from './table-column';
 import * as tableCell from './table-cell';
@@ -21,6 +22,7 @@ import './block-toolbar';
  */
 const blocks = [
 	table,
+	tableRowContainer,
 	tableRow,
 	tableColumn,
 	tableCell,

src/blocks/table-column/edit.tsx

@@ -46,10 +46,15 @@ function TableColumnEdit( {
 		className: classnames( className, 'travelopia-table__column' ),
 	} );
 
-	const tableId = context[ 'travelopia/table-id' ] as string;
+	const tableId: string = context[ 'travelopia/table-id' ] as string;
+	const rowContainerType: string = context[ 'travelopia/table-row-container-type' ] as string;
 
 	const innerBlocksProps = useInnerBlocksProps(
-		{ ...blockProps },
+		{
+			...blockProps,
+			colSpan: attributes.colSpan,
+			rowSpan: attributes.rowSpan,
+		},
 		{
 			template: [ [ cellBlockName ] ],
 			templateLock: false,
@@ -78,6 +83,12 @@ function TableColumnEdit( {
 		setAttributes( { row, column } );
 	}, [ row, column, setAttributes ] );
 
+	// Determine tag.
+	let Tag: string = 'td';
+	if ( 'tbody' !== rowContainerType ) {
+		Tag = 'th';
+	}
+
 	return (
 		<>
 			<Toolbar
@@ -86,10 +97,8 @@ function TableColumnEdit( {
 				tableColumn={ column }
 				tableId={ tableId }
 			/>
-			<td
+			<Tag
 				{ ...innerBlocksProps }
-				colSpan={ attributes.colSpan }
-				rowSpan={ attributes.rowSpan }
 			/>
 		</>
 	);

src/blocks/table-column/index.tsx

@@ -46,6 +46,9 @@ export const settings: BlockConfiguration = {
 		'travelopia/table-row': 'row' as never,
 		'travelopia/table-column': 'column' as never,
 	},
+	usesContext: [
+		'travelopia/table-row-container-type',
+	],
 	supports: {
 		html: true,
 		color: {
@@ -55,6 +58,6 @@ export const settings: BlockConfiguration = {
 	},
 	edit,
 	save() {
-		return <td><InnerBlocks.Content /></td>;
+		return <InnerBlocks.Content />;
 	},
 };

src/blocks/table-row-container/edit.tsx

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
+import {
+	BlockEditProps,
+} from '@wordpress/blocks';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { name as rowBlockName } from '../table-row';
+
+/**
+ * Edit function.
+ *
+ * @param {Object} props Edit properties.
+ *
+ * @return {JSX.Element} JSX Component.
+ */
+function TableRowContainerEdit( props: BlockEditProps<any> ): JSX.Element {
+	// Block props.
+	const { className, attributes, setAttributes } = props;
+
+	// Inner block props.
+	const blockProps = useBlockProps( {
+		className: classnames( className, 'travelopia-table__row-container' ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( { ...blockProps }, {
+		allowedBlocks: [ rowBlockName ],
+	} );
+
+	// Determine tag.
+	const Tag: string = attributes.type;
+
+	// Return component.
+	return (
+		<>
+			{ 'thead' === attributes.type &&
+				<InspectorControls>
+					<PanelBody title={ __( 'Row Container Options', 'tp' ) }>
+						<ToggleControl
+							label={ __( 'Is Sticky', 'tp' ) }
+							checked={ attributes.isSticky }
+							onChange={ ( isSticky: boolean ) => setAttributes( { isSticky } ) }
+							help={ __( 'Is this container sticky?', 'tp' ) }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			}
+			<Tag { ...innerBlocksProps } />
+		</>
+	);
+}
+
+export default TableRowContainerEdit;

src/blocks/table-row-container/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { BlockConfiguration } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+} from '@wordpress/block-editor';
+import {
+	blockTable as icon,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import edit from './edit';
+
+/**
+ * Block data.
+ */
+export const name: string = 'travelopia/table-row-container';
+
+export const settings: BlockConfiguration = {
+	apiVersion: 3,
+	icon,
+	title: __( 'Row Container', 'tp' ),
+	description: __( 'A container for a row (THEAD, TBODY, TFOOT).', 'tp' ),
+	parent: [ 'travelopia/table' ],
+	category: 'text',
+	keywords: [
+		__( 'thead', 'tp' ),
+		__( 'tbody', 'tp' ),
+		__( 'tfoot', 'tp' ),
+	],
+	attributes: {
+		type: {
+			type: 'string',
+			default: 'tbody',
+		},
+		isSticky: {
+			type: 'boolean',
+			default: false,
+		},
+	},
+	providesContext: {
+		'travelopia/table-row-container-type': 'type' as never,
+		'travelopia/table-row-container-sticky': 'isSticky' as never,
+	},
+	supports: {
+		html: false,
+	},
+	edit,
+	save() {
+		return <InnerBlocks.Content />;
+	},
+};

src/blocks/table-row/edit.tsx

@@ -1,11 +1,14 @@
 /**
  * WordPress dependencies.
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
-import { BlockEditProps } from '@wordpress/blocks';
+import {
+	BlockEditProps,
+} from '@wordpress/blocks';
 
 /**
  * External dependencies.
@@ -25,12 +28,16 @@ import { name as columnBlockName } from '../table-column';
  * @return {JSX.Element} JSX Component.
  */
 function TableRowEdit( props: BlockEditProps<any> ): JSX.Element {
+	// Block props.
 	const { className } = props;
+
+	// Inner block props.
 	const blockProps = useBlockProps( {
 		className: classnames( className, 'travelopia-table__row' ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( { ...blockProps }, {
 		allowedBlocks: [ columnBlockName ],
+		templateLock: false,
 	} );
 
 	return (

src/blocks/table-row/index.tsx

@@ -25,10 +25,13 @@ export const settings: BlockConfiguration = {
 	icon,
 	title: __( 'Row', 'tp' ),
 	description: __( 'Individual row of the table.', 'tp' ),
-	parent: [ 'travelopia/table' ],
+	parent: [ 'travelopia/table-row-container' ],
 	category: 'text',
 	keywords: [ __( 'row', 'tp' ) ],
 	attributes: {},
+	usesContext: [
+		'travelopia/table-row-container-type',
+	],
 	supports: {
 		html: true,
 		color: {
@@ -38,6 +41,6 @@ export const settings: BlockConfiguration = {
 	},
 	edit,
 	save() {
-		return <tr><InnerBlocks.Content /></tr>;
+		return <InnerBlocks.Content />;
 	},
 };