Merge pull request #17 from Travelopia/refactor/WP-70-use-block-apis

WP-70 use Gutenberg APIs in table block for horizontal actions in toolbar
Travelopia · May 24, 2024 · ca6f249 · ca6f249
2 parents 55aac49 + 34a98ae
commit ca6f249
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 113 deletions.
diff --git a/dist/editor/blocks.asset.php b/dist/editor/blocks.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '5211a7cb149a8f82718e');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '355925a3d15cdd8ab715');
diff --git a/dist/editor/blocks.js b/dist/editor/blocks.js
diff --git a/src/editor/blocks/block-toolbar.tsx b/src/editor/blocks/block-toolbar.tsx
@@ -22,6 +22,7 @@ addFilter(
 			'travelopia/table-column',
 			'travelopia/table-id',
 			'travelopia/table-row-container-id',
+			'travelopia/table-column-id',
 		];
 
 		if ( settings.usesContext && Array.isArray( settings.usesContext ) ) {
@@ -51,6 +52,7 @@ addFilter( 'editor.BlockEdit', 'travelopia/table-toolbar', ( BlockEdit ) => {
 		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;
+		const tableColumnId = context[ 'travelopia/table-column-id' ] as string;
 
 		if (
 			! tableRow ||
@@ -70,6 +72,7 @@ addFilter( 'editor.BlockEdit', 'travelopia/table-toolbar', ( BlockEdit ) => {
 					tableColumn={ tableColumn }
 					tableId={ tableId }
 					rowContainerId={ tableRowContainerId }
+					columnId={ tableColumnId }
 				/>
 				<BlockEdit { ...props } />
 			</>

diff --git a/src/editor/blocks/table-column/edit.tsx b/src/editor/blocks/table-column/edit.tsx
@@ -89,6 +89,10 @@ function TableColumnEdit( {
 		setAttributes( { row, column } );
 	}, [ row, column, setAttributes ] );
 
+	useEffect( () => {
+		setAttributes( { blockId: clientId } );
+	}, [ clientId, setAttributes ] );
+
 	// Determine tag.
 	let Tag: string = 'td';
 	if ( 'tbody' !== rowContainerType ) {
@@ -113,6 +117,7 @@ function TableColumnEdit( {
 				tableColumn={ column }
 				tableId={ tableId }
 				rowContainerId={ rowContainerId }
+				columnId={ clientId }
 			/>
 			<Tag
 				{ ...innerBlocksProps }

diff --git a/src/editor/blocks/table-column/index.tsx b/src/editor/blocks/table-column/index.tsx
@@ -44,10 +44,14 @@ export const settings: BlockConfiguration = {
 		isSticky: {
 			type: 'boolean',
 		},
+		blockId: {
+			type: 'string',
+		},
 	},
 	providesContext: {
 		'travelopia/table-row': 'row' as never,
 		'travelopia/table-column': 'column' as never,
+		'travelopia/table-column-id': 'blockId' as never,
 	},
 	usesContext: [
 		'travelopia/table-row-container-type',

diff --git a/src/editor/blocks/table-column/toolbar.tsx b/src/editor/blocks/table-column/toolbar.tsx
@@ -43,6 +43,7 @@ import { name as rowContainerBlockName } from '../table-row-container';
  * @param {number}  props.tableRow       Table row index.
  * @param {number}  props.tableColumn    Table column index.
  * @param {string}  props.rowContainerId Table row container ID.
+ * @param {string}  props.columnId       Column block ID.
  *
  * @return {JSX.Element} JSX Component.
  */
@@ -52,19 +53,22 @@ export default function Toolbar( {
 	tableRow,
 	tableColumn,
 	rowContainerId,
+	columnId,
 }: {
 	isSelected: boolean;
 	tableId: string;
 	tableRow: number;
 	tableColumn: number;
 	rowContainerId: string;
+	columnId: string;
 } ): JSX.Element {
 	const {
 		getBlock,
 		canInsertBlockType,
 		getBlockAttributes,
 		// @ts-ignore
 		canRemoveBlock,
+		getAdjacentBlockClientId,
 	} = select( 'core/block-editor' );
 
 	const {
@@ -78,7 +82,7 @@ export default function Toolbar( {
 
 	const [ maximumColumnsInCurrentRow, setMaximumColumnsInCurrentRow ] = useState( 0 );
 
-	const rowContainerBlock = useMemo( () => getBlock( rowContainerId ), [ rowContainerId, getBlock ] );
+	const rowContainerBlockType = useMemo( () => getBlock( rowContainerId )?.attributes?.type, [ rowContainerId, getBlock ] );
 
 	/**
 	 * Set maximum columns in current row.
@@ -161,6 +165,10 @@ export default function Toolbar( {
 			return;
 		}
 
+		// Get current row container block.
+		const rowContainerBlock = getBlock( rowContainerId );
+
+		// Check if the row container block exists.
 		if ( ! rowContainerBlock ) {
 			return;
 		}
@@ -199,6 +207,10 @@ export default function Toolbar( {
 			return;
 		}
 
+		// Get current row container block.
+		const rowContainerBlock = getBlock( rowContainerId );
+
+		// Check if the row container block exists.
 		if ( ! rowContainerBlock ) {
 			return;
 		}
@@ -301,60 +313,23 @@ export default function Toolbar( {
 			return;
 		}
 
-		// Traverse rows.
-		tableBlock.innerBlocks.some( ( currentRowContainerBlock ) => {
-			if ( currentRowContainerBlock.name !== rowContainerBlockName ) {
-				return false;
-			}
-
-			// Avoid merging thead/tfoot column with tbody column.
-			const currentRowContainerBlockAttributes = getBlockAttributes( currentRowContainerBlock.clientId );
-			if ( currentRowContainerBlockAttributes?.type !== rowContainerBlock?.attributes?.type ) {
-				return false;
-			}
-
-			return currentRowContainerBlock.innerBlocks.some( ( rowBlock, index ): boolean => {
-				// Get current row.
-				const rowNumber: number = index + 1;
-				if ( rowBlock.name !== rowBlockName || rowNumber !== tableRow || ! rowBlock.innerBlocks.length ) {
-					return false;
-				}
-
-				// Prepare variables.
-				let columnToMergeInto: BlockInstance | undefined;
-				let columnToMergeFrom: BlockInstance | undefined;
-
-				// Traverse columns in current row.
-				rowBlock.innerBlocks.some( ( columnBlock, columnIndex ): boolean => {
-					// Get column to merge from and into.
-					const columnNumber: number = columnIndex + 1;
-					if ( columnNumber === tableColumn - 1 ) {
-						columnToMergeInto = columnBlock;
-					} else if ( columnNumber === tableColumn ) {
-						columnToMergeFrom = columnBlock;
-					}
-
-					// Short circuit if we found them.
-					if ( columnToMergeInto && columnToMergeFrom ) {
-						return true;
-					}
-
-					// We haven't found them, loop some more.
-					return false;
-				} );
+		const currentBlock = getBlock( columnId );
+		if ( ! currentBlock ) {
+			return;
+		}
 
-				// Check if we have a "to" and "from" column.
-				if ( ! columnToMergeFrom || ! columnToMergeInto ) {
-					return false;
-				}
+		const previousBlockClientId = getAdjacentBlockClientId( columnId, -1 );
+		if ( ! previousBlockClientId ) {
+			return;
+		}
 
-				// Merge columns.
-				mergeColumnsHorizontally( columnToMergeFrom, columnToMergeInto );
+		const previousBlock = getBlock( previousBlockClientId );
+		if ( ! previousBlock ) {
+			return;
+		}
 
-				// Short-circuit loop.
-				return true;
-			} );
-		} );
+		// Merge columns.
+		mergeColumnsHorizontally( currentBlock, previousBlock );
 	};
 
 	/**
@@ -369,60 +344,22 @@ export default function Toolbar( {
 			return;
 		}
 
-		// Traverse rows.
-		tableBlock.innerBlocks.some( ( currentRowContainerBlock ) => {
-			if ( currentRowContainerBlock.name !== rowContainerBlockName ) {
-				return false;
-			}
-
-			// Avoid merging thead/tfoot column with tbody column.
-			const currentRowContainerBlockAttributes = getBlockAttributes( currentRowContainerBlock.clientId );
-			if ( currentRowContainerBlockAttributes?.type !== rowContainerBlock?.attributes?.type ) {
-				return false;
-			}
-
-			return currentRowContainerBlock.innerBlocks.some( ( rowBlock, index ): boolean => {
-				// Get current row.
-				const rowNumber: number = index + 1;
-				if ( rowBlock.name !== rowBlockName || rowNumber !== tableRow || ! rowBlock.innerBlocks.length ) {
-					return false;
-				}
-
-				// Prepare variables.
-				let columnToMergeInto: BlockInstance | undefined;
-				let columnToMergeFrom: BlockInstance | undefined;
-
-				// Traverse columns in current row.
-				rowBlock.innerBlocks.some( ( columnBlock, columnIndex ): boolean => {
-					// Get column to merge from and into.
-					const columnNumber: number = columnIndex + 1;
-					if ( columnNumber === tableColumn ) {
-						columnToMergeInto = columnBlock;
-					} else if ( columnNumber === tableColumn + 1 ) {
-						columnToMergeFrom = columnBlock;
-					}
-
-					// Short circuit if we found them.
-					if ( columnToMergeInto && columnToMergeFrom ) {
-						return true;
-					}
-
-					// We haven't found them, loop some more.
-					return false;
-				} );
-
-				// Check if we have a "to" and "from" column.
-				if ( ! columnToMergeFrom || ! columnToMergeInto ) {
-					return false;
-				}
+		const currentBlock = getBlock( columnId );
+		if ( ! currentBlock ) {
+			return;
+		}
+		const nextBlockClientId = getAdjacentBlockClientId( columnId, 1 );
+		if ( ! nextBlockClientId ) {
+			return;
+		}
 
-				// Merge columns.
-				mergeColumnsHorizontally( columnToMergeFrom, columnToMergeInto );
+		const nextBlock = getBlock( nextBlockClientId );
+		if ( ! nextBlock ) {
+			return;
+		}
 
-				// Short-circuit loop.
-				return true;
-			} );
-		} );
+		// Merge columns.
+		mergeColumnsHorizontally( nextBlock, currentBlock );
 	};
 
 	/**
@@ -437,6 +374,14 @@ export default function Toolbar( {
 			return;
 		}
 
+		// Get current row container block.
+		const rowContainerBlock = getBlock( rowContainerId );
+
+		// Check if the row container block exists.
+		if ( ! rowContainerBlock ) {
+			return;
+		}
+
 		// Prepare variables.
 		let columnToMergeInto: BlockInstance | undefined;
 		let columnToMergeFrom: BlockInstance | undefined;
@@ -505,6 +450,14 @@ export default function Toolbar( {
 			return;
 		}
 
+		// Get current row container block.
+		const rowContainerBlock = getBlock( rowContainerId );
+
+		// Check if the row container block exists.
+		if ( ! rowContainerBlock ) {
+			return;
+		}
+
 		// Prepare variables.
 		let columnToMergeInto: BlockInstance | undefined;
 		let columnToMergeFrom: BlockInstance | undefined;
@@ -642,19 +595,19 @@ export default function Toolbar( {
 		{
 			icon: tableRowBefore,
 			title: __( 'Insert row before', 'tp' ),
-			isDisabled: ( ! isSelected || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
+			isDisabled: ( ! isSelected || rowContainerBlockType === 'tfoot' || rowContainerBlockType === 'thead' ),
 			onClick: () => onInsertRow( -1 ),
 		},
 		{
 			icon: tableRowAfter,
 			title: __( 'Insert row after', 'tp' ),
-			isDisabled: ( ! isSelected || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
+			isDisabled: ( ! isSelected || rowContainerBlockType === 'tfoot' || rowContainerBlockType === 'thead' ),
 			onClick: onInsertRow,
 		},
 		{
 			icon: tableRowDelete,
 			title: __( 'Delete row', 'tp' ),
-			isDisabled: ( ! isSelected || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
+			isDisabled: ( ! isSelected || rowContainerBlockType === 'tfoot' || rowContainerBlockType === 'thead' ),
 			onClick: onDeleteRow,
 		},
 		{
@@ -690,13 +643,13 @@ export default function Toolbar( {
 		{
 			icon: arrowUp,
 			title: __( 'Merge column up', 'tp' ),
-			isDisabled: ( tableRow < 2 || rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
+			isDisabled: ( tableRow < 2 || rowContainerBlockType === 'tfoot' || rowContainerBlockType === 'thead' ),
 			onClick: onMergeColumnUp,
 		},
 		{
 			icon: arrowDown,
 			title: __( 'Merge column down', 'tp' ),
-			isDisabled: ( rowContainerBlock?.attributes?.type === 'tfoot' || rowContainerBlock?.attributes?.type === 'thead' ),
+			isDisabled: ( rowContainerBlockType === 'tfoot' || rowContainerBlockType === 'thead' ),
 			onClick: onMergeColumnDown,
 		},
 	] as DropdownOption[];

diff --git a/src/editor/blocks/table-row/edit.tsx b/src/editor/blocks/table-row/edit.tsx
@@ -19,6 +19,7 @@ import classnames from 'classnames';
  * Internal dependencies.
  */
 import { name as columnBlockName } from '../table-column';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Edit function.
@@ -29,7 +30,7 @@ import { name as columnBlockName } from '../table-column';
  */
 function TableRowEdit( props: BlockEditProps<any> ): JSX.Element {
 	// Block props.
-	const { className } = props;
+	const { className, clientId, setAttributes } = props;
 
 	// Inner block props.
 	const blockProps = useBlockProps( {
@@ -40,6 +41,10 @@ function TableRowEdit( props: BlockEditProps<any> ): JSX.Element {
 		templateLock: false,
 	} );
 
+	useEffect( () => {
+		setAttributes( { blockId: clientId } );
+	}, [ clientId, setAttributes ] );
+
 	return (
 		<tr { ...innerBlocksProps } />
 	);

diff --git a/src/editor/blocks/table-row/index.tsx b/src/editor/blocks/table-row/index.tsx
@@ -28,7 +28,11 @@ export const settings: BlockConfiguration = {
 	parent: [ 'travelopia/table-row-container' ],
 	category: 'text',
 	keywords: [ __( 'row', 'tp' ) ],
-	attributes: {},
+	attributes: {
+		blockId: {
+			type: 'string',
+		},
+	},
 	usesContext: [
 		'travelopia/table-row-container-type',
 	],