KAD-3786 Insert before/after

stellarwp · Nov 8, 2024 · bda7f5c · bda7f5c
1 parent 806d9bf
commit bda7f5c
Show file tree

Hide file tree

Showing 7 changed files with 569 additions and 166 deletions.
diff --git a/src/blocks/table/block.json b/src/blocks/table/block.json
@@ -9,13 +9,8 @@
 		"uniqueID": {
 			"type": "string"
 		},
-		"rows": {
-			"type": "number",
-			"default": 2
-		},
 		"columns": {
-			"type": "number",
-			"default": 2
+			"type": "number"
 		},
 		"dataTypography": {
 			"type": "array",
@@ -180,10 +175,60 @@
 		"maxWidthUnit": {
 			"type": "string",
 			"default": "%"
+		},
+		"cellPadding": {
+			"type": "array",
+			"default": ["xxs", "xs", "xxs", "xs"]
+		},
+		"tabletCellPadding": {
+			"type": "array",
+			"default": ["", "", "", ""]
+		},
+		"mobileCellPadding": {
+			"type": "array",
+			"default": ["", "", "", ""]
+		},
+		"cellPaddingType": {
+			"type": "string",
+			"default": "px"
+		},
+		"headerAlign": {
+			"type": "string",
+			"default": "center"
+		},
+		"headerAlignTablet": {
+			"type": "string",
+			"default": ""
+		},
+		"headerAlignMobile": {
+			"type": "string",
+			"default": ""
+		},
+		"textAlign": {
+			"type": "string",
+			"default": "left"
+		},
+		"textAlignTablet": {
+			"type": "string",
+			"default": ""
+		},
+		"textAlignMobile": {
+			"type": "string",
+			"default": ""
+		},
+		"isFirstRowHeader": {
+			"type": "boolean",
+			"default": false
+		},
+		"isFirstColumnHeader": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"providesContext": {
-		"kadence/table-columns": "columns"
+		"kadence/table/columns": "columns",
+		"kadence/table/isFirstRowHeader": "isFirstRowHeader",
+		"kadence/table/isFirstColumnHeader": "isFirstColumnHeader"
 	},
 	"supports": {
 		"kbMetadata": true

diff --git a/src/blocks/table/children/data/block.json b/src/blocks/table/children/data/block.json
@@ -9,13 +9,13 @@
 	"attributes": {
 		"uniqueID": {
 			"type": "string"
-		},
-		"isHeader": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"supports": {
 		"kbMetadata": true
-	}
+	},
+	"usesContext": [
+		"kadence/table/thisRowIsHeader",
+		"kadence/table/isFirstColumnHeader"
+	]
 }
diff --git a/src/blocks/table/children/data/edit.js b/src/blocks/table/children/data/edit.js
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { BlockControls, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import metadata from './block.json';
+import { plus, columns } from '@wordpress/icons';
 
 import {
 	KadenceBlockDefaults,
@@ -13,24 +14,47 @@ import {
 	SelectParentBlock,
 } from '@kadence/components';
 import { setBlockDefaults, getUniqueId, getPostOrFseId } from '@kadence/helpers';
-
+import { createBlock } from '@wordpress/blocks';
+import { flow } from 'lodash';
 import classnames from 'classnames';
-import { ToggleControl } from '@wordpress/components';
+import { ToolbarDropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 
 const DEFAULT_BLOCK = [['core/paragraph', {}]];
 export function Edit(props) {
-	const { attributes, setAttributes, className, clientId } = props;
+	const { attributes, setAttributes, className, clientId, context } = props;
 
-	const { uniqueID, isHeader } = attributes;
+	const { uniqueID } = attributes;
 
 	const [activeTab, setActiveTab] = useState('general');
 
 	const { addUniqueID } = useDispatch('kadenceblocks/data');
-	const { isUniqueID, isUniqueBlock, parentData } = useSelect(
+	const { replaceInnerBlocks } = useDispatch('core/block-editor');
+	const { insertBlock, updateBlockAttributes } = useDispatch('core/block-editor');
+
+	const {
+		isUniqueID,
+		isUniqueBlock,
+		parentData,
+		index,
+		parentTableClientId,
+		parentColumns,
+		columnPosition,
+		siblingRows,
+	} = useSelect(
 		(select) => {
+			const blockParents = select('core/block-editor').getBlockParents(clientId);
+			const tableClientId = blockParents[0];
+			const rowId = blockParents[1];
+			const rowBlocks = select('core/block-editor').getBlockOrder(rowId);
 			return {
 				isUniqueID: (value) => select('kadenceblocks/data').isUniqueID(value),
 				isUniqueBlock: (value, clientId) => select('kadenceblocks/data').isUniqueBlock(value, clientId),
+				index: select('core/block-editor').getBlockIndex(clientId),
+				parentTableClientId: tableClientId,
+				parentColumns: select('core/block-editor').getBlockAttributes(tableClientId).columns,
+				currentRowClientId: rowId,
+				columnPosition: rowBlocks.indexOf(clientId),
+				siblingRows: select('core/block-editor').getBlocks(tableClientId),
 				parentData: {
 					rootBlock: select('core/block-editor').getBlock(
 						select('core/block-editor').getBlockHierarchyRootClientId(clientId)
@@ -65,11 +89,134 @@ export function Edit(props) {
 		}
 	}, []);
 
-	const Tag = isHeader ? 'th' : 'td';
+	const addRow = (position) => {
+		let insertIndex;
+
+		switch (position) {
+			case 'before':
+				insertIndex = index;
+				break;
+			case 'after':
+				insertIndex = index + 1;
+				break;
+			case 'top':
+				insertIndex = 0;
+				break;
+			case 'bottom':
+				insertIndex = undefined;
+				break;
+			default:
+				return;
+		}
+
+		const newRow = createBlock('kadence/table-row', {});
+		insertBlock(newRow, insertIndex, parentTableClientId, false);
+	};
+
+	const addColumn = (position) => {
+		const newColumnCount = parentColumns + 1;
+
+		let insertIndex;
+		switch (position) {
+			case 'before':
+				insertIndex = columnPosition;
+				break;
+			case 'after':
+				insertIndex = columnPosition + 1;
+				break;
+			case 'start':
+				insertIndex = 0;
+				break;
+			case 'end':
+				insertIndex = parentColumns;
+				break;
+			default:
+				return;
+		}
+
+		siblingRows.forEach((row) => {
+			const newCells = [...row.innerBlocks];
+			const newCell = createBlock('kadence/table-data', {});
+			newCells.splice(insertIndex, 0, newCell);
+
+			replaceInnerBlocks(row.clientId, newCells, false);
+			updateBlockAttributes(parentTableClientId, { columns: newColumnCount });
+		});
+	};
+
+	const rowControls = [
+		{
+			title: __('Add Row Before', 'kadence-blocks'),
+			onClick: () => addRow('before'),
+		},
+		{
+			title: __('Add Row After', 'kadence-blocks'),
+			onClick: () => addRow('after'),
+		},
+		{
+			title: __('Add Row at Top', 'kadence-blocks'),
+			onClick: () => addRow('top'),
+		},
+		{
+			title: __('Add Row at Bottom', 'kadence-blocks'),
+			onClick: () => addRow('bottom'),
+		},
+	];
+
+	const columnControls = [
+		{
+			title: __('Add Column Before', 'kadence-blocks'),
+			onClick: () => addColumn('before'),
+		},
+		{
+			title: __('Add Column After', 'kadence-blocks'),
+			onClick: () => addColumn('after'),
+		},
+		{
+			title: __('Add Column at Start', 'kadence-blocks'),
+			onClick: () => addColumn('start'),
+		},
+		{
+			title: __('Add Column at End', 'kadence-blocks'),
+			onClick: () => addColumn('end'),
+		},
+	];
+
+	const thisRowIsHeader = context['kadence/table/thisRowIsHeader'];
+	const firstColumnIsHeader = context['kadence/table/isFirstColumnHeader'];
+	const Tag = (index === 0 && firstColumnIsHeader) || thisRowIsHeader ? 'th' : 'td';
 
 	return (
 		<Tag {...blockProps}>
 			<BlockControls>
+				<ToolbarDropdownMenu icon={plus} label={__('Add Row', 'kadence-blocks')}>
+					{({ onClose }) => (
+						<>
+							<MenuGroup>
+								{rowControls.map((control) => (
+									<MenuItem key={control.title} onClick={flow(onClose, control.onClick)}>
+										{control.title}
+									</MenuItem>
+								))}
+							</MenuGroup>
+						</>
+					)}
+				</ToolbarDropdownMenu>
+
+				<ToolbarDropdownMenu icon={columns} label={__('Add Column', 'kadence-blocks')}>
+					{({ onClose }) => (
+						<>
+							<MenuGroup>
+								{columnControls.map((control) => (
+									<MenuItem key={control.title} onClick={flow(onClose, control.onClick)}>
+										{control.title}
+									</MenuItem>
+								))}
+							</MenuGroup>
+						</>
+					)}
+				</ToolbarDropdownMenu>
+
 				<CopyPasteAttributes
 					attributes={attributes}
 					setAttributes={setAttributes}
@@ -90,12 +237,7 @@ export function Edit(props) {
 
 				{activeTab === 'general' && (
 					<KadencePanelBody title={__('General', 'kadence-blocks')} initialOpen={true}>
-						<ToggleControl
-							label={__('Table Header', 'kadence-blocks')}
-							checked={isHeader}
-							onChange={(value) => setAttributes({ isHeader: value })}
-							help={__('Switches to th tag and applies header typography styles.', 'kadence-blocks')}
-						/>
+						General settings
 					</KadencePanelBody>
 				)}
 				{activeTab === 'advanced' && (

diff --git a/src/blocks/table/children/row/block.json b/src/blocks/table/children/row/block.json
@@ -36,7 +36,10 @@
 			"default": "px"
 		}
 	},
-	"usesContext": [ "kadence/table-columns" ],
+	"usesContext": [
+		"kadence/table/columns",
+		"kadence/table/isFirstRowHeader"
+	],
 	"supports": {
 		"kbMetadata": true
 	}