Rewrite table block to use a simpler RichText value #8767

ellatrix · 2018-08-09T11:15:42Z

Description

Split out from #7890 (RichText Structure). The table block uses the RichText component for the whole table (many nested elements) in ordere to take advantage of some TinyMCE table controls. This is not really needed: we can create our own table structure with smaller RichText values, create our own table controls based on that, and drop the TinyMCE table plugin. The RichText component is also not really made for such huge fields, only one line of text with formatting, or at most multiple lines with formatting (array of block-like elements).

In addition to this, the empty state for the table block shows now some inputs to easily create a table of desired dimensions.

The new format also makes it easier to add more controls later, such as adding a head and foot, and maybe move the controls within table to insert and delete rows and columns. Before we didn't really have that freedom.

How has this been tested?

Ensure the table block still works as before. All controls should be present and work as expected.

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

ellatrix · 2018-08-09T11:29:15Z

core-blocks/table/table-block.js

-						plugins: ( settings.plugins || [] ).concat( 'table' ),
-						table_tab_navigation: false,
-					} ) }
-					onSetup={ ( editor ) => this.handleSetup( editor, isSelected ) }


Oh, ignore me, we're still using it in the list block.

jasmussen · 2018-08-09T11:55:03Z

I'm seeing these two things:

and

In master I'm not seeing the initial prompt to choose how many table cells to insert, nor do I see as many inline table commands:

That initial prompt, I think, can work well! I think we'll want to style it a little bit, I can probably help there. The chief change being that we'll want to use $default-font and $default-font-size.

The extra buttons on the toolbar are fine on the desktop, but how do we make them scale to mobile? I have some ideas for a smart toolbar that pops off items into an overflow menu as space becomes a premium, but in absence of that, perhaps the dropdown was better?

Also, I noticed that this control broke:

It's broken in master too, but mentioning regardless. The point of this is to make sure columns are the same width, no matter the contents inside.

jasmussen · 2018-08-09T11:59:09Z

Regression with fixed width noted in #7899.

ellatrix · 2018-08-09T12:08:15Z

That initial prompt, I think, can work well! I think we'll want to style it a little bit, I can probably help there.

Yes, please! :)

Before an earlier rebase this looked better, it would probably be good if controls added inside blocks somehow magically look good (for other block authors).

nor do I see as many inline table commands

Sorry I forgot they were inside a dropdown. No problem to change.

ellatrix · 2018-08-09T12:10:53Z

Also as mentioned in the summary I added the prompt to quickly be able to create the right table size needed. This is inspired by the TinyMCE editor table button. Otherwise you'd have to start off with 4x4 and insert many rows and columns. It would also be cool to be able to add more as you type of course. If the prompt is not so good we can take it away, it was just to try out something different.

jasmussen · 2018-08-09T12:30:49Z

I dig the prompt, I think it's a perfect use of the block concept.

I also agree it would be nice if block UI were born with the right font and size, any good idea how to do that?

I don't necessarily prefer the dropdown, but I think it's probably necessary until such a time as we have a smarter toolbar.

ellatrix · 2018-08-09T13:34:29Z

I also agree it would be nice if block UI were born with the right font and size, any good idea how to do that?

I'm not sure, but if it requires different styles for the inspector and inside blocks, maybe it requires different components? But it would be good if the same styles work for both.

noisysocks · 2018-08-15T03:16:47Z

There's an error when running npm run dev:

[0] ERROR in ./packages/block-library/src/table/edit.js
[0] Module not found: Error: Can't resolve './state' in '/Users/robert/projects/gutenberg/packages/block-library/src/table'
[0]  @ ./packages/block-library/src/table/edit.js 21:0-107 75:20-31 101:22-39 121:22-31 142:22-31 164:22-34 185:22-34
[0]  @ ./packages/block-library/src/table/index.js
[0]  @ ./block-library/index.js

noisysocks · 2018-08-15T03:36:38Z

First impressions without having looked at the code:

Centre-aligning the table doesn't position the table in the centre of the editor. It also makes the text in each cell centred, which is inconsistent with what right-aligning the table does.

It would be really nice if pressing ↑ and ↓ moved focus into the cell that's above or below the currently selected cell. Right now it moves focus into the cell that's left or right of the currently selected cell.
It might be nice to set a minimum width on each cell so that the placeholder showing and hiding doesn't cause columns to resize. Or maybe just ditch the placeholder.

Add Row Before and Add Column Before seem to always insert a row or column at the start of the table instead of above or to the left of the currently selected row or column.

You can no longer use your mouse to resize rows and columns as you could before.

noisysocks

This is some great looking code!

I definitely think this refactor makes the table block easier to work with—it should help us a lot with tackling #6923.

noisysocks · 2018-08-15T04:20:27Z

packages/block-library/src/table/edit.js

+						value={ initialRowCount }
+						onChange={ this.onChangeInitialRowCount }
+					/>
+					<Button isPrimary onClick={ this.onCreateTable }>Create</Button>


We should localise this label.

<Button isPrimary onClick={ this.onCreateTable }>{ __( 'Create' ) }</Button>

noisysocks · 2018-08-15T04:31:59Z

packages/block-library/src/table/edit.js

+		}
+
+		const classes = classnames( className, {
+			'has-fixed-layout': hasFixedLayout,


If we decide to keep it so that rows and columns can't be resized, allowing table-layout: fixed isn't very useful.

I've left this as it is currently in master. Does it need a change? There's nothing that can be resized atm either.

I didn't realise that we weren't saving the widths and heights in master. All good then!

noisysocks · 2018-08-15T04:38:28Z

packages/block-library/src/table/edit.js

+				icon: 'table-row-before',
+				title: __( 'Add Row Before' ),
+				isDisabled: ! selectedCell,
+				onClick: selectedCell && this.createOnInsertRow( selectedCell ),


Missing the delta argument here and on line 164.

onClick: selectedCell && this.createOnInsertRow( selectedCell, -1 ),

Why -1? Inserting one after should be +1 and right before 0?

Yes, you're right, we should pass 0 here. My mistake! 🙂

noisysocks · 2018-08-15T04:44:34Z

packages/block-library/src/table/edit.js

+								columnIndex === selectedCell.columnIndex
+							);
+
+							const id = {


Minor: I think cell or cellState might be a better name since this is what eventually becomes this.state.selectedCell.

noisysocks · 2018-08-15T04:51:13Z

packages/block-library/src/table/edit.js

+
+	onCreateTable() {
+		const { setAttributes } = this.props;
+		const { initialRowCount, initialColumnCount } = this.state;


Should we do some bounds checking here? The block seems to break if I enter 0 and 1 as my initial column and row count.

noisysocks · 2018-08-15T05:04:39Z

packages/block-library/src/table/edit.js

+
+							return (
+								<CellTag key={ columnIndex } className={ classes }>
+									<RichText


A 10x10 table means we will have 100 instances of TinyMCE loaded on the page. Will these sorts of uses-cases use too much memory?

Yes, sure, we should also be looking into the general performance of this. A table with 100 cells is the same as 100 paragraphs.

noisysocks · 2018-08-15T05:05:16Z

packages/block-library/src/table/edit.js

+						label={ __( 'Column Count' ) }
+						value={ initialColumnCount }
+						onChange={ this.onChangeInitialColumnCount }
+					/>


I think it would feel nice to auto-select this field when the table block is inserted.

Getting the following error when adding autoFocus:

error The autoFocus prop should not be used, as it can reduce usability and accessibility for users

Should this be something that is part of writing flow instead, that is, always focussing content when a block is created?

Oh. Sure, sounds good 🙂

noisysocks · 2018-08-15T05:07:05Z

core-blocks/table/state.js

@@ -0,0 +1,104 @@
+/**


Splitting these functions out is a great idea 🌈

noisysocks · 2018-08-15T05:09:49Z

packages/blocks/src/api/parser.js

@@ -115,6 +115,11 @@ export function matcherFromSource( sourceConfig ) {
 		case 'query':
 			const subMatchers = mapValues( sourceConfig.query, matcherFromSource );
 			return query( sourceConfig.selector, subMatchers );
+		case 'tag':


Can we add unit tests for this new attribute source?

There's no tests for the other sources either. Could add tests for all of them though... Not sure if valuable.

My gut says we should have them since this is an API we expose to third party block authors. But if there's none in master then we can do this separately! 👌

noisysocks · 2018-08-15T05:12:47Z

packages/block-library/src/table/index.js

+				<Section type="head" rows={ head } />
+				<Section type="body" rows={ body } />
+				<Section type="foot" rows={ foot } />
+			</table>
 		);


Will we need to add anything to the deprecated attribute or does this generate the same markup as before?

In there that should still work. I'll test.

So the save value will still look the same. I don't think it needs a deprecation?

Works for me! 👍

This is cool given that is backward compatible 👍

talldan

This looks good. As mentioned, these changes seem like it would make the proposed additions to the table block much easier. 👍

As @noisysocks pointed out, I did wonder what the performance implications were in having so many RichText elements. I don't know much about it, but have seen it discussed that we're looking to improve the performance.

I've added a few comments, mostly stylistic things and mostly focusing on the edit file.

talldan · 2018-08-15T04:53:35Z

packages/block-library/src/table/edit.js

+		setAttributes( { hasFixedLayout: ! hasFixedLayout } );
+	}
+
+	createOnChange( { section, rowIndex, columnIndex } ) {


I think these createX methods would be tidier and simpler if the state and props were only accessed in the returned function. i.e.:

onInsertRow( delta ) { return () => { const { section, rowIndex } = this.state.selectedCell; const { attributes, setAttributes } = this.props; const newRowIndex = rowIndex + delta; setAttributes( insertRow( attributes, { section, rowIndex: newRowIndex } ) ); this.setState( { selectedCell: null } ); }; }

It would also mean any issues with the variables being accessed through closure could be avoided, ie. it's always the latest state that is being accessed.

talldan · 2018-08-15T04:56:15Z

core-blocks/table/state.js

@@ -0,0 +1,104 @@
+/**


Just a naming thing - I'm not sure that 'state' accurately conveys what this file does (it makes me think it stores state).

I feel like something along the lines of helpers or attribute-helpers might be an improvement.

I like the pattern of having these functions in an easily testable place, though.

Okay. I don't really care what it's called. It's probably closest to the reducer.js files we have.

talldan · 2018-08-15T05:02:42Z

packages/block-library/src/table/edit.js

+		];
+	}
+
+	renderSection( { type, rows } ) {


I think this could just be a separate function component above the class called 'Section'

edit - I see it access this. a bit, but those things could become props.

Since it contains a RichText that needs to update attributes, I think it make sense to have a context. Otherwise we can pass attributes and setAttributes as wel. I don't mind either way...

That's fair enough. I mostly mention it because I feel like this is an unusual pattern that I've not seen before:

const Section = this.renderSection;

I also think that it would be a good idea to extract this method to its own file and promote it to an independent component. It will decrease the file size of the current edit implementation and will help to better understand which props are used by those Section components.

talldan · 2018-08-15T05:03:33Z

packages/block-library/src/table/edit.js

+	deleteColumn,
+} from './state';
+
+export default class extends Component {


Would be good if the class was called TableEdit

Just for my own information, what's the benefit of naming it?

React's warnings and errors mention the component name (based on the class or function name), so it can be really helpful.

talldan · 2018-08-15T05:15:40Z

packages/block-library/src/table/edit.js

+				icon: 'table-row-before',
+				title: __( 'Add Row Before' ),
+				isDisabled: ! selectedCell,
+				onClick: selectedCell && this.createOnInsertRow( selectedCell ),


Could also use lodash's partial or partialRight to create these partially applied functions, which would mean you could name them onInsertRow.

As an alternative, might be nice to also look at doing the partial application in the constructor to avoid having to re-apply the partial every render (and it would avoid using lodash).

this.onInsertRowBefore = this.onInsertRow.bind( this, 0 ); this.onInsertRowAfter = this.onInsertRow.bind( this, 1 );

Not sure if that leads to too much misdirection.

Interesting!

You'd still have to create the function though to pass the cell location.

Something like this could be a trade-off which solves both the binding and misdirection issues. It means binding more methods in the constructor, but I think it's easier to read:

insertRow( delta ) { if ( ! this.state.selectedCell ) { return; } const { section, rowIndex } = this.state.selectedCell; const { attributes, setAttributes } = this.props; const newRowIndex = rowIndex + delta; setAttributes( insertRow( attributes, { section, rowIndex: newRowIndex } ) ); this.setState( { selectedCell: null } ); } onInsertRowBefore() { this.insertRow(0); } onInsertRowAfter() { this.insertRow(1); } getTableControls() { return [ { icon: 'table-row-before', title: __( 'Add Row Before' ), isDisabled: ! selectedCell, onClick: this.onInsertRowBefore, }, //... ]; }

Anyway, that's just a stylistic thing. I think the bigger issue is the use of a closure to access selectedCell, which can be avoided given this.state.selectedCell can be accessed directly in those functions. That could be the cause of the bug mentioned by @noisysocks.

plus 💯 to what @talldan shared. In particular, having methods like onInsertRowBefore and onInsertRowAfter improves readability of the code by replacing indexes with the description of their functionality.

talldan · 2018-08-15T05:37:48Z

packages/block-library/src/table/edit.js

+			<Tag>
+				{ rows.map( ( { cells }, rowIndex ) =>
+					<tr key={ rowIndex }>
+						{ cells.map( ( { content, tag: CellTag }, columnIndex ) => {


It might be easiest if CellTag was derived from the type, then it reduces the need to store it in attributes. I think the only rule is that it should be a th in the head, but a td elsewhere.

You can have th in tbody too.

Cheers - I didn't know that.

youknowriad · 2018-08-15T15:15:20Z

I moved it to 3.7 because it seems there's still some work to do here before shipping. Please bring back to 3.6 if it can make the cut.

ellatrix · 2018-08-22T11:31:02Z

Updated with docs and rebased.

noisysocks

Looks great, and works well in my testing 👍:shipit:

gziolo · 2018-08-23T06:14:30Z

packages/block-library/src/table/edit.js

+ * Browser dependencies
+ */
+
+const { parseInt } = window;


I don't think this is a browser feature, it is part of the language:

gziolo · 2018-08-23T06:16:00Z

packages/block-library/src/table/edit.js

+	/**
+	 * Updates the initial row count used for table creation.
+	 *
+	 * @param {[type]} initialRowCount New initial row count.


This should be {number} type :)

gziolo · 2018-08-23T06:27:19Z

packages/block-library/src/table/index.js

@@ -1,30 +1,24 @@
 /**
 * External dependencies
 */
+


I don't think we add spaces after dependencies section comment in other places. I don't think we have a rule for that, but sharing as an observation. Personally, I would let prettier to take care of formatting 😄

gziolo · 2018-08-23T06:34:47Z

packages/block-library/src/table/test/state.js

+	deleteColumn,
+} from '../state';
+
+const table = {


Can we wrap table and tableWithContent with deepFreeze call to ensure there is no mutation?

gziolo · 2018-08-23T07:16:55Z

@iseulde - I addressed my own feedback.

There is one thing I noticed. When no cell is selected, I can see all actions in the dropdown menu, they are active but don't work - which is expected, however, we should update UI to reflect it.

gziolo · 2018-08-23T07:41:55Z

I did some debugging. <DropdownMenu controls={ controls } /> - it turns out that each control takes only 3 props and isDisabled isn't one of them.

gziolo · 2018-08-23T07:55:11Z

I think I addressed my previous comment 19b7cb3. It allows to greatly simplify event callbacks, I'm not sure if you like this or not. We can revert part of the changes if you feel like double safety is expected.

…able creation

gziolo · 2018-08-23T08:44:40Z

I added one more commit b9c92ed. It fixes the following use case:

create a new table with 2 columns
remove a column
remove a column

Before the patch, they block view was empty.
After the patch, we render the view to create a table again.

gziolo

This is looking great! I really like the new UX introduced with this PR. Awesome work @iseulde 👏

I applied a few commits, so feel free to review, update, rework them if you don't agree with all my changes.

ellatrix · 2018-08-23T11:31:42Z

packages/block-library/src/table/edit.js

 		const { attributes, setAttributes } = this.props;
-		const { section, rowIndex } = selectedCell;
+		const { section, rowIndex } = this.state.selectedCell;


Hm, but selectedCell can still be null?

We check it when providing isDisabled for menu items, then they are disabled. In addition, I added return clause in the event callback.

ellatrix · 2018-08-23T11:33:20Z

packages/block-library/src/table/edit.js

@@ -1,13 +1,11 @@
 /**
 * External dependencies
 */
-


I added these lines because that was @aduth's preference some time ago. I don't really mind, but it is not a doc block... So maybe it's better with the line, or just one asterisk at the start.

If we want to change it, let's update in one batch all of them to match one style.

gziolo · 2018-08-23T13:39:08Z

ca4af7c - yeah, looks good 👍

mcsf · 2018-09-01T12:02:05Z

I like playing with this block a lot. One thing I'm noticing is the lack of alignment between thead and tbody if fixed width is off:

Should I open an issue for this?

tofumatt · 2018-09-01T12:54:38Z

Looks like a bug to me!

designsimply · 2018-09-11T02:06:48Z

I filed an issue for the thead misalignment issue (ref) at #9779.

ellatrix added the [Feature] Blocks Overall functionality of blocks label Aug 9, 2018

ellatrix requested review from youknowriad, jasmussen, aduth and a team August 9, 2018 11:15

ellatrix commented Aug 9, 2018

View reviewed changes

ellatrix mentioned this pull request Aug 9, 2018

RichText state structure for value manipulation #7890

Merged

4 tasks

earnjam mentioned this pull request Aug 9, 2018

Fix colspan bug in table block for tables with <thead> tags #7899

Merged

4 tasks

noisysocks mentioned this pull request Aug 10, 2018

Table block: flesh out editor features #6923

Open

ZebulanStanphill mentioned this pull request Aug 10, 2018

Table: "Edit as HTML" minifies the code #8798

Closed

ellatrix force-pushed the try/rewrite-table branch from 979736e to abb3228 Compare August 11, 2018 14:02

ellatrix added this to the 3.6 milestone Aug 11, 2018

ellatrix self-assigned this Aug 11, 2018

ellatrix added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable and removed [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Aug 11, 2018

gziolo added this to In Progress in API freeze via automation Aug 14, 2018

noisysocks reviewed Aug 15, 2018

View reviewed changes

talldan previously requested changes Aug 15, 2018

View reviewed changes

youknowriad modified the milestones: 3.6, 3.7 Aug 15, 2018

ellatrix force-pushed the try/rewrite-table branch from abb3228 to 35bca40 Compare August 15, 2018 15:17

ellatrix force-pushed the try/rewrite-table branch from 5ec8ca9 to 66ecf75 Compare August 22, 2018 11:29

ellatrix requested review from gziolo, a team and noisysocks August 22, 2018 11:31

noisysocks approved these changes Aug 23, 2018

View reviewed changes

gziolo reviewed Aug 23, 2018

View reviewed changes

Table: Address my own feedback from review

7b59b4b

Componnet: Add isDisabled support for DropdownMenu controls

19b7cb3

Table block: Fix an issue when removing all columns does not prompt t…

b9c92ed

…able creation

gziolo approved these changes Aug 23, 2018

View reviewed changes

ellatrix commented Aug 23, 2018

View reviewed changes

Revert part of 19b7cb3

ca4af7c

ellatrix merged commit 49c65b9 into master Aug 23, 2018

API freeze automation moved this from In Progress to Done Aug 23, 2018

ellatrix deleted the try/rewrite-table branch August 23, 2018 13:43

earnjam mentioned this pull request Aug 24, 2018

Fix table regressions. #9306

Merged

stefanamport mentioned this pull request Aug 27, 2018

Cannot Type In Table-Cells: "Admin > Block > Table". #7207

Closed

designsimply mentioned this pull request Sep 11, 2018

Table Block: table cells in thead are misaligned when "Fixed width table cells" is toggled off #9779

Closed

talldan mentioned this pull request Dec 5, 2018

Add formatting options to the Table block inspector sidebar #7035

Closed

4 tasks

dmsnell mentioned this pull request Mar 6, 2023

feature: add TypeScript types to the blocks package #48604

Open

Rewrite table block to use a simpler RichText value #8767

Rewrite table block to use a simpler RichText value #8767

Conversation

ellatrix commented Aug 9, 2018 • edited Loading

Description

How has this been tested?

Types of changes

Checklist:

This comment was marked as outdated.

Choose a reason for hiding this comment

jasmussen commented Aug 9, 2018

jasmussen commented Aug 9, 2018

ellatrix commented Aug 9, 2018

ellatrix commented Aug 9, 2018

jasmussen commented Aug 9, 2018

ellatrix commented Aug 9, 2018

noisysocks commented Aug 15, 2018 • edited Loading

noisysocks commented Aug 15, 2018 • edited Loading

noisysocks left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

noisysocks Aug 15, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Aug 15, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Aug 15, 2018

ellatrix commented Aug 22, 2018

noisysocks left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Aug 23, 2018

gziolo commented Aug 23, 2018

gziolo commented Aug 23, 2018

gziolo commented Aug 23, 2018 • edited Loading

gziolo left a comment

Choose a reason for hiding this comment

ellatrix commented Aug 9, 2018 •

edited

Loading

noisysocks commented Aug 15, 2018 •

edited

Loading

noisysocks commented Aug 15, 2018 •

edited

Loading

noisysocks Aug 15, 2018 •

edited

Loading

talldan left a comment •

edited

Loading

talldan Aug 15, 2018 •

edited

Loading

gziolo commented Aug 23, 2018 •

edited

Loading

gziolo Aug 23, 2018 •

edited

Loading