New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrite table block to use a simpler RichText value #8767

Merged
merged 13 commits into from Aug 23, 2018

Conversation

@iseulde
Member

iseulde commented Aug 9, 2018

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.

@iseulde iseulde added the Blocks label Aug 9, 2018

@iseulde iseulde requested review from youknowriad, jasmussen, aduth and WordPress/gutenberg-core Aug 9, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 9, 2018

Contributor

I'm seeing these two things:

screen shot 2018-08-09 at 13 50 09

and

screen shot 2018-08-09 at 13 50 42

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:

screen shot 2018-08-09 at 13 51 23

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:

screen shot 2018-08-09 at 13 53 54

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.

Contributor

jasmussen commented Aug 9, 2018

I'm seeing these two things:

screen shot 2018-08-09 at 13 50 09

and

screen shot 2018-08-09 at 13 50 42

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:

screen shot 2018-08-09 at 13 51 23

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:

screen shot 2018-08-09 at 13 53 54

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

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 9, 2018

Contributor

Regression with fixed width noted in #7899.

Contributor

jasmussen commented Aug 9, 2018

Regression with fixed width noted in #7899.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 9, 2018

Member

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.

Member

iseulde commented Aug 9, 2018

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.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 9, 2018

Member

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.

Member

iseulde commented Aug 9, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 9, 2018

Contributor

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.

Contributor

jasmussen commented Aug 9, 2018

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.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 9, 2018

Member

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.

Member

iseulde commented Aug 9, 2018

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.

@iseulde iseulde referenced this pull request Aug 9, 2018

Open

RichText state structure for value manipulation #7890

4 of 4 tasks complete

@earnjam earnjam referenced this pull request Aug 9, 2018

Merged

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

4 of 4 tasks complete

@iseulde iseulde added this to the 3.6 milestone Aug 11, 2018

@iseulde iseulde self-assigned this Aug 11, 2018

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

@noisysocks

This comment has been minimized.

Show comment
Hide comment
@noisysocks

noisysocks Aug 15, 2018

Member

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
Member

noisysocks commented Aug 15, 2018

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

This comment has been minimized.

Show comment
Hide comment
@noisysocks

noisysocks Aug 15, 2018

Member

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.

table-1

  • 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.

table-2

  • 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.

table-3

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

noisysocks commented Aug 15, 2018

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.

table-1

  • 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.

table-2

  • 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.

table-3

  • 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.

Show outdated Hide outdated packages/block-library/src/table/edit.js
}
const classes = classnames( className, {
'has-fixed-layout': hasFixedLayout,

This comment has been minimized.

@noisysocks

noisysocks Aug 15, 2018

Member

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

@noisysocks

noisysocks Aug 15, 2018

Member

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

This comment has been minimized.

@iseulde

iseulde Aug 16, 2018

Member

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

@iseulde

iseulde Aug 16, 2018

Member

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

This comment has been minimized.

@noisysocks

noisysocks Aug 17, 2018

Member

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

@noisysocks

noisysocks Aug 17, 2018

Member

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

Show outdated Hide outdated packages/block-library/src/table/edit.js
Show outdated Hide outdated packages/block-library/src/table/edit.js
Show outdated Hide outdated packages/block-library/src/table/edit.js
return (
<CellTag key={ columnIndex } className={ classes }>
<RichText

This comment has been minimized.

@noisysocks

noisysocks Aug 15, 2018

Member

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?

@noisysocks

noisysocks Aug 15, 2018

Member

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?

This comment has been minimized.

@iseulde

iseulde Aug 15, 2018

Member

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

@iseulde

iseulde Aug 15, 2018

Member

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

Show outdated Hide outdated packages/block-library/src/table/edit.js
Show outdated Hide outdated core-blocks/table/state.js
@@ -115,6 +115,11 @@ export function matcherFromSource( sourceConfig ) {
case 'query':
const subMatchers = mapValues( sourceConfig.query, matcherFromSource );
return query( sourceConfig.selector, subMatchers );
case 'tag':

This comment has been minimized.

@noisysocks

noisysocks Aug 15, 2018

Member

Can we add unit tests for this new attribute source?

@noisysocks

noisysocks Aug 15, 2018

Member

Can we add unit tests for this new attribute source?

This comment has been minimized.

@iseulde

iseulde Aug 16, 2018

Member

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

@iseulde

iseulde Aug 16, 2018

Member

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

This comment has been minimized.

@noisysocks

noisysocks Aug 17, 2018

Member

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

noisysocks Aug 17, 2018

Member

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! 👌

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

This comment has been minimized.

@noisysocks

noisysocks Aug 15, 2018

Member

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

@noisysocks

noisysocks Aug 15, 2018

Member

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

This comment has been minimized.

@iseulde

iseulde Aug 15, 2018

Member

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

@iseulde

iseulde Aug 15, 2018

Member

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

This comment has been minimized.

@iseulde

iseulde Aug 16, 2018

Member

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

@iseulde

iseulde Aug 16, 2018

Member

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

This comment has been minimized.

@noisysocks

noisysocks Aug 17, 2018

Member

Works for me! 👍

@noisysocks

noisysocks Aug 17, 2018

Member

Works for me! 👍

This comment has been minimized.

@gziolo

gziolo Aug 20, 2018

Member

This is cool given that is backward compatible 👍

@gziolo

gziolo Aug 20, 2018

Member

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.

Show outdated Hide outdated packages/block-library/src/table/edit.js
Show outdated Hide outdated core-blocks/table/state.js
Show outdated Hide outdated packages/block-library/src/table/edit.js
Show outdated Hide outdated packages/block-library/src/table/edit.js
Show outdated Hide outdated packages/block-library/src/table/edit.js
<Tag>
{ rows.map( ( { cells }, rowIndex ) =>
<tr key={ rowIndex }>
{ cells.map( ( { content, tag: CellTag }, columnIndex ) => {

This comment has been minimized.

@talldan

talldan Aug 15, 2018

Contributor

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.

@talldan

talldan Aug 15, 2018

Contributor

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.

This comment has been minimized.

@iseulde

iseulde Aug 15, 2018

Member

You can have th in tbody too.

@iseulde

iseulde Aug 15, 2018

Member

You can have th in tbody too.

This comment has been minimized.

@talldan

talldan Aug 17, 2018

Contributor

Cheers - I didn't know that.

@talldan

talldan Aug 17, 2018

Contributor

Cheers - I didn't know that.

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

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Aug 15, 2018

Contributor

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.

Contributor

youknowriad commented Aug 15, 2018

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.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 15, 2018

Member

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.

Same in master. Let's not fix all issues here.

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.

I'll ditch it so it's the same as master.

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.

Yes, that's a limitation atm, maybe worth fixing writing flow in a separate PR. It's not impossible to navigate, so I wouldn't mind fixing it later.

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

While you could in master, it wouldn't actually save anything, so I'd rather remove it and implement it properly separately.

Member

iseulde commented Aug 15, 2018

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.

Same in master. Let's not fix all issues here.

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.

I'll ditch it so it's the same as master.

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.

Yes, that's a limitation atm, maybe worth fixing writing flow in a separate PR. It's not impossible to navigate, so I wouldn't mind fixing it later.

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

While you could in master, it wouldn't actually save anything, so I'd rather remove it and implement it properly separately.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 16, 2018

Member

Made some adjustments and comments. Would it be possible to have another look at this?

Member

iseulde commented Aug 16, 2018

Made some adjustments and comments. Would it be possible to have another look at this?

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 22, 2018

Member

Updated with docs and rebased.

Member

iseulde commented Aug 22, 2018

Updated with docs and rebased.

@iseulde iseulde requested review from gziolo, WordPress/gutenberg-core and noisysocks Aug 22, 2018

@noisysocks

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

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Aug 23, 2018

Member

@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.

Member

gziolo commented Aug 23, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Aug 23, 2018

Member

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

Member

gziolo commented Aug 23, 2018

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

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Aug 23, 2018

Member

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.

Member

gziolo commented Aug 23, 2018

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.

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Aug 23, 2018

Member

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.

Member

gziolo commented Aug 23, 2018

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

gziolo approved these changes Aug 23, 2018

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.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 23, 2018

Member

Nice! Thanks!

Member

iseulde commented on packages/block-library/src/table/state.js in b9c92ed Aug 23, 2018

Nice! Thanks!

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Aug 23, 2018

Member

ca4af7c - yeah, looks good 👍

Member

gziolo commented Aug 23, 2018

ca4af7c - yeah, looks good 👍

@iseulde iseulde merged commit 49c65b9 into master Aug 23, 2018

2 checks passed

codecov/project 50.68% (-0.24%) compared to e36801f
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

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

@iseulde iseulde deleted the try/rewrite-table branch Aug 23, 2018

@earnjam earnjam referenced this pull request Aug 24, 2018

Merged

Fix table regressions. #9306

@mcsf

This comment has been minimized.

Show comment
Hide comment
@mcsf

mcsf Sep 1, 2018

Contributor

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:

gutenberg-table-sections-alignment

Should I open an issue for this?

Contributor

mcsf commented Sep 1, 2018

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:

gutenberg-table-sections-alignment

Should I open an issue for this?

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Sep 1, 2018

Member
Member

tofumatt commented Sep 1, 2018

@designsimply

This comment has been minimized.

Show comment
Hide comment
@designsimply

designsimply Sep 11, 2018

Contributor

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

Contributor

designsimply commented Sep 11, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment