Modify table block and address other tests

core-blocks/index.js

@@ -41,6 +41,8 @@ import * as shortcode from './shortcode';
 import * as spacer from './spacer';
 import * as subhead from './subhead';
 import * as table from './table';
+import * as tableRow from './table/row';
+import * as tableCell from './table/cell';
 import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
@@ -83,6 +85,8 @@ export const registerCoreBlocks = () => {
 		spacer,
 		subhead,
 		table,
+		tableRow,
+		tableCell,
 		textColumns,
 		verse,
 		video,

core-blocks/paragraph/index.js

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/editor';
 import {
 	getPhrasingContentSchema,
+	richTextStructure,
 } from '@wordpress/blocks';
 
 /**
@@ -200,9 +201,7 @@ export const settings = {
 			migrate( attributes ) {
 				return {
 					...attributes,
-					content: [
-						<RawHTML key="html">{ attributes.content }</RawHTML>,
-					],
+					content: richTextStructure.create( attributes.content ),
 				};
 			},
 		},

core-blocks/table/cell.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { name as rowName } from './row';
+
+export const name = 'core/table-cell';
+
+export const settings = {
+	title: __( 'Table Cell' ),
+
+	description: __( 'Add some basic text.' ),
+
+	parent: [ rowName ],
+
+	icon: 'editor-table',
+
+	category: 'common',
+
+	keywords: [ __( 'text' ) ],
+
+	supports: {
+		className: false,
+	},
+
+	attributes: {
+		content: {
+			type: 'object',
+			source: 'rich-text',
+			selector: 'td,th',
+		},
+	},
+
+	edit( { attributes, setAttributes } ) {
+		return (
+			<RichText
+				value={ attributes.content }
+				onChange={ ( content ) => {
+					setAttributes( { content } );
+				} }
+				placeholder={ __( 'Add cell content' ) }
+			/>
+		);
+	},
+
+	save( { attributes } ) {
+		return (
+			<RichText.Content tagName="td" value={ attributes.content } />
+		);
+	},
+};

core-blocks/table/editor.scss

@@ -15,3 +15,58 @@
 		background-color: $light-gray-300;
 	}
 }
+
+// These margins make sure that nested blocks stack/overlay with the parent block chrome
+// This is sort of an experiment at making sure the editor looks as much like the end result as possible
+// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
+// When using CSS grid, margins do not collapse on the container.
+.wp-block-table .editor-block-list__layout {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	&:first-child {
+		margin-top: -$block-padding;
+	}
+
+	&:last-child {
+		margin-bottom: -$block-padding;
+	}
+
+	// This max-width is used to constrain the main editor column, it should not cascade into columns
+	.editor-block-list__block {
+		max-width: none;
+	}
+}
+
+// This block has flex container children. Flex container margins do not collapse: https://www.w3.org/TR/css-flexbox-1/#flex-containers.
+// Therefore, let's at least not add any additional margins here.
+// The goal is for the editor to look more like the front-end.
+.editor-block-list__layout .editor-block-list__block[data-type="core/table-row"] > .editor-block-list__block-edit,
+.editor-block-list__layout .editor-block-list__block[data-type="core/table-row"] > .editor-block-list__block-edit {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	// This uncollapses margins on this parent container.
+	padding-top: 0.1px;
+	padding-bottom: 0.1px;
+}
+
+.wp-block-table-row {
+	display: block;
+
+	> .editor-inner-blocks > .editor-block-list__layout {
+		display: flex;
+
+		> [data-type="core/table-row"] {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			width: 0;
+
+			.editor-block-list__block-edit {
+				flex-basis: 100%;
+			}
+		}
+	}
+}
+

core-blocks/table/index.js

@@ -1,31 +1,25 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { getPhrasingContentSchema } from '@wordpress/blocks';
-import {
-	RichText,
-	InspectorControls,
-} from '@wordpress/editor';
-
-import {
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import { getPhrasingContentSchema, createBlock, getBlockAttributes } from '@wordpress/blocks';
+import { InspectorControls, InnerBlocks } from '@wordpress/editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import './style.scss';
 import './theme.scss';
-import TableBlock from './table-block';
+import { name as rowName } from './row';
+import { name as cellName, settings as cellSettings } from './cell';
 
 const tableContentSchema = {
 	tr: {
@@ -65,26 +59,6 @@ export const settings = {
 	category: 'formatting',
 
 	attributes: {
-		rows: {
-			type: 'array',
-			default: [],
-			source: 'query',
-			selector: 'tr',
-			query: {
-				cells: {
-					type: 'array',
-					default: [],
-					source: 'query',
-					selector: 'th,tr',
-					query: {
-						cell: {
-							type: 'object',
-							source: 'rich-text',
-						},
-					},
-				},
-			},
-		},
 		hasFixedLayout: {
 			type: 'boolean',
 			default: false,
@@ -101,22 +75,35 @@ export const settings = {
 				type: 'raw',
 				selector: 'table',
 				schema: tableSchema,
+				transform( node ) {
+					const rows = Array.from( node.querySelectorAll( 'tr' ) );
+
+					const block = createBlock( name, {}, rows.map( ( row ) => {
+						const cells = Array.from( row.querySelectorAll( 'td,th' ) );
+
+						return createBlock( rowName, {}, cells.map( ( cell ) => {
+							const blockAttributes = getBlockAttributes( cellSettings, cell.outerHTML );
+
+							return createBlock( cellName, blockAttributes );
+						} ) );
+					} ) );
+
+					return block;
+				},
 			},
 		],
 	},
 
-	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { content, hasFixedLayout } = attributes;
+	edit( { attributes, setAttributes, className } ) {
+		const { hasFixedLayout } = attributes;
+
 		const toggleFixedLayout = () => {
 			setAttributes( { hasFixedLayout: ! hasFixedLayout } );
 		};
 
-		const classes = classnames(
-			className,
-			{
-				'has-fixed-layout': hasFixedLayout,
-			},
-		);
+		const classes = classnames( className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
 
 		return (
 			<Fragment>
@@ -129,28 +116,28 @@ export const settings = {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<TableBlock
-					onChange={ ( nextContent ) => {
-						setAttributes( { content: nextContent } );
-					} }
-					content={ content }
-					className={ classes }
-					isSelected={ isSelected }
-				/>
+				<div className={ classes }>
+					<InnerBlocks
+						template={ [ [ rowName ], [ rowName ] ] }
+						templateLock="all"
+						allowedBlocks={ [ rowName ] }
+					/>
+				</div>
 			</Fragment>
 		);
 	},
 
 	save( { attributes } ) {
-		const { content, hasFixedLayout } = attributes;
-		const classes = classnames(
-			{
-				'has-fixed-layout': hasFixedLayout,
-			},
-		);
+		const classes = classnames( {
+			'has-fixed-layout': attributes.hasFixedLayout,
+		} );
 
 		return (
-			<RichText.Content tagName="table" className={ classes } value={ content } />
+			<table className={ classes }>
+				<tbody>
+					<InnerBlocks.Content />
+				</tbody>
+			</table>
 		);
 	},
 };

core-blocks/table/row.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { name as tableName } from '.';
+import { name as cellName } from './cell';
+
+export const name = 'core/table-row';
+
+export const settings = {
+	title: __( 'Table Row' ),
+
+	parent: [ tableName ],
+
+	icon: 'editor-table',
+
+	description: __( 'A single column within a columns block.' ),
+
+	category: 'common',
+
+	supports: {
+		className: false,
+	},
+
+	edit() {
+		return (
+			<InnerBlocks
+				template={ [ [ cellName ], [ cellName ] ] }
+				templateLock="all"
+				allowedBlocks={ [ cellName ] }
+			/>
+		);
+	},
+
+	save() {
+		return <tr><InnerBlocks.Content /></tr>;
+	},
+};

core-blocks/table/test/__snapshots__/index.js.snap

@@ -2,40 +2,14 @@
 
 exports[`core/embed block edit matches snapshot 1`] = `
 <div
-  class="wp-block-table editor-rich-text"
+  class="wp-block-table"
 >
-  <div>
-    <div>
-      <div
-        class="components-autocomplete"
-      >
-        <table
-          aria-autocomplete="list"
-          aria-expanded="false"
-          class="editor-rich-text__tinymce"
-          contenteditable="true"
-        >
-          <tbody>
-            <tr>
-              <td>
-                <br />
-              </td>
-              <td>
-                <br />
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <br />
-              </td>
-              <td>
-                <br />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
+  <div
+    class="editor-inner-blocks"
+  >
+    <div
+      class="editor-block-list__layout"
+    />
   </div>
 </div>
 `;