Better Table Block Performance

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' => 'b1810d803332a02c48b9');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '334c1c080a1b29585228');

src/editor/blocks/index.ts

@@ -15,7 +15,3 @@ const blocks = [
  */
 blocks.forEach( ( { init } ) => init() );
 
-/**
- * Add block toolbar.
- */
-import './block-toolbar';

src/editor/blocks/table/block.json

@@ -13,13 +13,7 @@
     "html": false,
     "alignWide": false
   },
-  "providesContext": {
-    "travelopia/table-id": "blockId",
-    "travelopia/table-total-rows": "rows",
-    "travelopia/table-total-columns": "columns",
-    "travelopia/table-has-thead": "hasThead",
-    "travelopia/table-has-tfoot": "hasTfoot"
-  },
+  "providesContext": {},
   "attributes": {
     "anchor": {
       "type": "string",

src/editor/blocks/table/children/cell/edit.tsx

@@ -8,6 +8,11 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies.
+ */
+import Toolbar from '../../../toolbar';
+
 /**
  * Edit function.
  *
@@ -17,19 +22,22 @@ import {
  */
 export default function Edit( props: BlockEditProps<any> ): JSX.Element {
 	// Destructure properties.
-	const { attributes, setAttributes } = props;
+	const { attributes, setAttributes, clientId, isSelected } = props;
 	const blockProps = useBlockProps( {
 		className: 'travelopia-table__cell',
 	} );
 
 	// Return cell content.
 	return (
-		<RichText
-			tagName="span"
-			{ ...blockProps }
-			placeholder={ __( 'Cell content', 'tp' ) }
-			onChange={ ( content: string ) => setAttributes( { content } ) }
-			value={ attributes.content }
-		/>
+		<>
+			{ isSelected && <Toolbar cellClientId={ clientId } /> }
+			<RichText
+				tagName="span"
+				{ ...blockProps }
+				placeholder={ __( 'Cell content', 'tp' ) }
+				onChange={ ( content: string ) => setAttributes( { content } ) }
+				value={ attributes.content }
+			/>
+		</>
 	);
 }

src/editor/blocks/table/children/column/block.json

@@ -26,14 +26,9 @@
       }
     }
   },
-  "providesContext": {
-    "travelopia/table-row": "row",
-    "travelopia/table-column": "column",
-    "travelopia/table-column-id": "blockId"
-  },
+  "providesContext": {},
   "usesContext": [
-    "travelopia/table-row-container-type",
-    "travelopia/table-row-container-id"
+    "travelopia/table-row-container-type"
   ],
   "attributes": {
     "row": {

src/editor/blocks/table/children/column/edit.tsx

@@ -8,10 +8,7 @@ import {
 	InspectorControls,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { BlockEditProps } from '@wordpress/blocks';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 
@@ -30,7 +27,6 @@ import { name as cellBlockName } from '../cell';
  *
  * @param {Object}   props               Edit properties.
  * @param {string}   props.className     Class name.
- * @param {string}   props.clientId      Client ID.
  * @param {Object}   props.attributes    Attributes.
  * @param {Function} props.setAttributes Set attributes.
  * @param {Object}   props.context       Block context.
@@ -39,7 +35,6 @@ import { name as cellBlockName } from '../cell';
  */
 export default function Edit( {
 	className,
-	clientId,
 	attributes,
 	setAttributes,
 	context,
@@ -67,36 +62,6 @@ export default function Edit( {
 		},
 	);
 
-	// Get the row and column index.
-	const { row, column } = useSelect(
-		( select: any ) => {
-			// Calculate the row and column index.
-			const columnIndex = select( blockEditorStore ).getBlockIndex( clientId );
-			const rowClientId =
-				select( blockEditorStore ).getBlockRootClientId( clientId );
-			const rowIndex = select( blockEditorStore ).getBlockIndex( rowClientId );
-
-			// Return the row and column index.
-			return {
-				row: rowIndex + 1, // Start index at 1.
-				column: columnIndex + 1,
-			};
-		},
-		[ clientId ],
-	);
-
-	// Update the row and column index.
-	useEffect( () => {
-		// Set the row and column index.
-		setAttributes( { row, column } );
-	}, [ row, column, setAttributes ] );
-
-	// Set the block ID.
-	useEffect( () => {
-		// Set the block ID.
-		setAttributes( { blockId: clientId } );
-	}, [ clientId, setAttributes ] );
-
 	// Determine tag.
 	let Tag: string = 'td';
 

src/editor/blocks/table/children/row-container/block.json

@@ -12,9 +12,7 @@
     "html": false
   },
   "providesContext": {
-    "travelopia/table-row-container-type": "type",
-    "travelopia/table-row-container-sticky": "isSticky",
-    "travelopia/table-row-container-id": "blockId"
+    "travelopia/table-row-container-type": "type"
   },
   "attributes": {
     "type": {

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

@@ -24,7 +24,6 @@ import classnames from 'classnames';
  * Internal dependencies.
  */
 import { name as rowBlockName } from '../row';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Edit function.
@@ -35,7 +34,7 @@ import { useEffect } from '@wordpress/element';
  */
 export default function Edit( props: BlockEditProps<any> ): JSX.Element {
 	// Block props.
-	const { className, attributes, setAttributes, clientId } = props;
+	const { className, attributes, setAttributes } = props;
 
 	// Inner block props.
 	const blockProps = useBlockProps( {
@@ -50,12 +49,6 @@ export default function Edit( props: BlockEditProps<any> ): JSX.Element {
 	// Determine tag.
 	const Tag: string = attributes.type;
 
-	// Set block id.
-	useEffect( () => {
-		// Set block attributes.
-		setAttributes( { blockId: clientId } );
-	}, [ clientId, setAttributes ] );
-
 	// Return component.
 	return (
 		<>

src/editor/blocks/table/children/row/edit.tsx

@@ -19,7 +19,6 @@ import classnames from 'classnames';
  * Internal dependencies.
  */
 import { name as columnBlockName } from '../column';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Edit function.
@@ -30,7 +29,7 @@ import { useEffect } from '@wordpress/element';
  */
 export default function Edit( props: BlockEditProps<any> ): JSX.Element {
 	// Block props.
-	const { className, clientId, setAttributes } = props;
+	const { className } = props;
 
 	// Inner block props.
 	const blockProps = useBlockProps( {
@@ -41,12 +40,6 @@ export default function Edit( props: BlockEditProps<any> ): JSX.Element {
 		templateLock: false,
 	} );
 
-	// Set block id.
-	useEffect( () => {
-		// Set block attributes.
-		setAttributes( { blockId: clientId } );
-	}, [ clientId, setAttributes ] );
-
 	// Return inner blocks.
 	return (
 		<tr { ...innerBlocksProps } />

src/editor/blocks/table/edit.tsx

@@ -8,7 +8,6 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { BlockEditProps, createBlock } from '@wordpress/blocks';
-import { useEffect } from '@wordpress/element';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { select, dispatch } from '@wordpress/data';
 
@@ -137,12 +136,6 @@ export default function Edit( props: BlockEditProps<any> ): JSX.Element {
 		},
 	);
 
-	// Set blockId attribute.
-	useEffect( () => {
-		// Set blockId attribute.
-		setAttributes( { blockId: clientId } );
-	}, [ clientId, setAttributes ] );
-
 	/**
 	 * Handle THEAD change.
 	 *