Merge pull request #8 from Travelopia/WP-70/toolbar-compatibility

WP-70 Make column/row insertion/deletion compatible
Travelopia · Apr 30, 2024 · 3b443a6 · 3b443a6
2 parents 7a79282 + 0f8a4cb
commit 3b443a6
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 37 deletions.
diff --git a/src/blocks/block-toolbar.tsx b/src/blocks/block-toolbar.tsx
@@ -21,6 +21,7 @@ addFilter(
 			'travelopia/table-row',
 			'travelopia/table-column',
 			'travelopia/table-id',
+			'travelopia/table-row-container-id',
 		];
 
 		if ( settings.usesContext && Array.isArray( settings.usesContext ) ) {
@@ -49,6 +50,7 @@ addFilter( 'editor.BlockEdit', 'travelopia/table-toolbar', ( BlockEdit ) => {
 		const tableRow = context[ 'travelopia/table-row' ] as number;
 		const tableColumn = context[ 'travelopia/table-column' ] as number;
 		const tableId = context[ 'travelopia/table-id' ] as string;
+		const tableRowContainerId = context[ 'travelopia/table-row-container-id' ] as string;
 
 		if (
 			! tableRow ||
@@ -67,6 +69,7 @@ addFilter( 'editor.BlockEdit', 'travelopia/table-toolbar', ( BlockEdit ) => {
 					tableRow={ tableRow }
 					tableColumn={ tableColumn }
 					tableId={ tableId }
+					rowContainerId={ tableRowContainerId }
 				/>
 				<BlockEdit { ...props } />
 			</>

diff --git a/src/blocks/table-column/edit.tsx b/src/blocks/table-column/edit.tsx
@@ -48,6 +48,7 @@ function TableColumnEdit( {
 
 	const tableId: string = context[ 'travelopia/table-id' ] as string;
 	const rowContainerType: string = context[ 'travelopia/table-row-container-type' ] as string;
+	const rowContainerId: string = context[ 'travelopia/table-row-container-id' ] as string;
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -96,6 +97,7 @@ function TableColumnEdit( {
 				tableRow={ row }
 				tableColumn={ column }
 				tableId={ tableId }
+				rowContainerId={ rowContainerId }
 			/>
 			<Tag
 				{ ...innerBlocksProps }

diff --git a/src/blocks/table-column/index.tsx b/src/blocks/table-column/index.tsx
@@ -48,6 +48,7 @@ export const settings: BlockConfiguration = {
 	},
 	usesContext: [
 		'travelopia/table-row-container-type',
+		'travelopia/table-row-container-id',
 	],
 	supports: {
 		html: true,

diff --git a/src/blocks/table-column/toolbar.tsx b/src/blocks/table-column/toolbar.tsx
@@ -23,6 +23,7 @@ import {
 import {
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 
 /**
@@ -31,15 +32,17 @@ import {
 import { name as columnBlockName } from './index';
 import { name as rowBlockName } from '../table-row';
 import { name as cellBlockName } from '../table-cell';
+import { name as rowContainerBlockName } from '../table-row-container';
 
 /**
  * Column block toolbar.
  *
- * @param {Object}  props             Block properties.
- * @param {boolean} props.isSelected  Is block selected.
- * @param {string}  props.tableId     Table block ID.
- * @param {number}  props.tableRow    Table row index.
- * @param {number}  props.tableColumn Table column index.
+ * @param {Object}  props                Block properties.
+ * @param {boolean} props.isSelected     Is block selected.
+ * @param {string}  props.tableId        Table block ID.
+ * @param {number}  props.tableRow       Table row index.
+ * @param {number}  props.tableColumn    Table column index.
+ * @param {string}  props.rowContainerId Table row container ID.
  *
  * @return {JSX.Element} JSX Component.
  */
@@ -48,11 +51,13 @@ export default function Toolbar( {
 	tableId,
 	tableRow,
 	tableColumn,
+	rowContainerId,
 }: {
 	isSelected: boolean;
 	tableId: string;
 	tableRow: number;
 	tableColumn: number;
+	rowContainerId: string;
 } ): JSX.Element {
 	const {
 		getBlock,
@@ -73,6 +78,8 @@ export default function Toolbar( {
 
 	const [ maximumColumnsInCurrentRow, setMaximumColumnsInCurrentRow ] = useState( 0 );
 
+	const rowContainerBlock = useMemo( () => getBlock( rowContainerId ), [ rowContainerId, getBlock ] );
+
 	/**
 	 * Set maximum columns in current row.
 	 */
@@ -116,7 +123,7 @@ export default function Toolbar( {
 		}
 
 		// Check if the row block can be inserted.
-		if ( ! canInsertBlockType( rowBlockName, tableId ) ) {
+		if ( ! canInsertBlockType( rowBlockName, rowContainerId ) ) {
 			return;
 		}
 
@@ -134,7 +141,7 @@ export default function Toolbar( {
 		const newRowBlock = createBlock( rowBlockName, {}, columnBlocks );
 
 		// Insert the new row block.
-		insertBlock( newRowBlock, tableRow + insertionIndex, tableId );
+		insertBlock( newRowBlock, tableRow + insertionIndex, rowContainerId );
 
 		// Update the table block attributes.
 		updateBlockAttributes( tableId, {
@@ -154,8 +161,12 @@ export default function Toolbar( {
 			return;
 		}
 
+		if ( ! rowContainerBlock ) {
+			return;
+		}
+
 		// Get current row block.
-		const currentRowBlock = tableBlock.innerBlocks[ tableRow - 1 ];
+		const currentRowBlock = rowContainerBlock.innerBlocks[ tableRow - 1 ];
 
 		// Check if the current row block is removable.
 		if (
@@ -188,25 +199,37 @@ export default function Toolbar( {
 			return;
 		}
 
+		if ( ! rowContainerBlock ) {
+			return;
+		}
+
 		// Loop through the table row blocks and insert a new column block.
-		tableBlock.innerBlocks.forEach( ( rowBlock ) => {
-			// Check the name of the row block.
-			if ( rowBlock.name !== rowBlockName ) {
+		tableBlock.innerBlocks.forEach( ( currentRowContainerBlock ) => {
+			// Check the name of the row container block.
+			if ( currentRowContainerBlock.name !== rowContainerBlockName ) {
 				return;
 			}
 
-			// Check if the column block can be inserted.
-			if ( ! canInsertBlockType( columnBlockName, rowBlock.clientId ) ) {
-				return;
-			}
+			// Loop through the row container blocks.
+			currentRowContainerBlock.innerBlocks.forEach( ( rowBlock ) => {
+				// Check the name of the row block.
+				if ( rowBlock.name !== rowBlockName ) {
+					return;
+				}
 
-			// Create a new column block.
-			const newColumnBlock = createBlock( columnBlockName, {}, [
-				createBlock( cellBlockName ),
-			] );
+				// Check if the column block can be inserted.
+				if ( ! canInsertBlockType( columnBlockName, rowBlock.clientId ) ) {
+					return;
+				}
 
-			// Insert the new column block.
-			insertBlock( newColumnBlock, tableColumn + insertionIndex, rowBlock.clientId );
+				// Create a new column block.
+				const newColumnBlock = createBlock( columnBlockName, {}, [
+					createBlock( cellBlockName ),
+				] );
+
+				// Insert the new column block.
+				insertBlock( newColumnBlock, tableColumn + insertionIndex, rowBlock.clientId );
+			} );
 		} );
 
 		// Update the table block attributes.
@@ -231,22 +254,30 @@ export default function Toolbar( {
 		const columnsToRemove: string[] = [];
 
 		// Loop through the table row blocks.
-		tableBlock.innerBlocks.forEach( ( rowBlock ) => {
-			// Check the name of the row block.
-			if ( rowBlock.name !== rowBlockName ) {
+		tableBlock.innerBlocks.forEach( ( currentRowContainerBlock ) => {
+			// Check the name of the row container block.
+			if ( currentRowContainerBlock.name !== rowContainerBlockName ) {
 				return;
 			}
 
-			// Get the current column block.
-			const currentColumnBlock = rowBlock.innerBlocks[ tableColumn - 1 ];
+			// Loop through the row container blocks.
+			currentRowContainerBlock.innerBlocks.forEach( ( rowBlock ) => {
+				// Check the name of the row block.
+				if ( rowBlock.name !== rowBlockName ) {
+					return;
+				}
 
-			// Check if the current column block is removable.
-			if (
-				currentColumnBlock?.clientId &&
-				canRemoveBlock( currentColumnBlock.clientId )
-			) {
-				columnsToRemove.push( currentColumnBlock.clientId );
-			}
+				// Get the current column block.
+				const currentColumnBlock = rowBlock.innerBlocks[ tableColumn - 1 ];
+
+				// Check if the current column block is removable.
+				if (
+					currentColumnBlock?.clientId &&
+					canRemoveBlock( currentColumnBlock.clientId )
+				) {
+					columnsToRemove.push( currentColumnBlock.clientId );
+				}
+			} );
 		} );
 
 		// Remove the columns.
@@ -543,19 +574,19 @@ export default function Toolbar( {
 		{
 			icon: tableRowBefore,
 			title: __( 'Insert row before', 'tp' ),
-			isDisabled: ! isSelected,
+			isDisabled: ( ! isSelected || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
 			onClick: () => onInsertRow( -1 ),
 		},
 		{
 			icon: tableRowAfter,
 			title: __( 'Insert row after', 'tp' ),
-			isDisabled: ! isSelected,
+			isDisabled: ( ! isSelected || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
 			onClick: onInsertRow,
 		},
 		{
 			icon: tableRowDelete,
 			title: __( 'Delete row', 'tp' ),
-			isDisabled: ! isSelected,
+			isDisabled: ( ! isSelected || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
 			onClick: onDeleteRow,
 		},
 		{

diff --git a/src/blocks/table-row-container/edit.tsx b/src/blocks/table-row-container/edit.tsx
@@ -24,6 +24,7 @@ import classnames from 'classnames';
  * Internal dependencies.
  */
 import { name as rowBlockName } from '../table-row';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Edit function.
@@ -34,7 +35,7 @@ import { name as rowBlockName } from '../table-row';
  */
 function TableRowContainerEdit( props: BlockEditProps<any> ): JSX.Element {
 	// Block props.
-	const { className, attributes, setAttributes } = props;
+	const { className, attributes, setAttributes, clientId } = props;
 
 	// Inner block props.
 	const blockProps = useBlockProps( {
@@ -47,6 +48,10 @@ function TableRowContainerEdit( props: BlockEditProps<any> ): JSX.Element {
 	// Determine tag.
 	const Tag: string = attributes.type;
 
+	useEffect( () => {
+		setAttributes( { blockId: clientId } );
+	}, [ clientId, setAttributes ] );
+
 	// Return component.
 	return (
 		<>

diff --git a/src/blocks/table-row-container/index.tsx b/src/blocks/table-row-container/index.tsx
@@ -41,10 +41,14 @@ export const settings: BlockConfiguration = {
 			type: 'boolean',
 			default: false,
 		},
+		blockId: {
+			type: 'string',
+		},
 	},
 	providesContext: {
 		'travelopia/table-row-container-type': 'type' as never,
 		'travelopia/table-row-container-sticky': 'isSticky' as never,
+		'travelopia/table-row-container-id': 'blockId' as never,
 	},
 	supports: {
 		html: false,