Add table block header and footer toggles

[talldan]

Related issues: #15283, #6923

Description

Adds some toggle switches to allow a user to add and remove header and footer sections to the table block.

How has this been tested?

1. Add a table block
2. Specify the initial columns and rows
3. Use the toggle switches in the sidebar to display and hide header and footer rows

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[talldan]

This could definitely do with a design review. One area in particular would be making the table header and footer rows look nice. Especially with the striped style variation. Here's what it looks like with no styling:

Something like this might be an improvement:

(cc: @jasmussen - I remember you worked on stripes initially, let me know if you have any ideas on this 😄)

[talldan]

Related issue: #15283

Authors using the visual editor can create a table, however the table
which results is only a series of rows and columns with no column-header
information, which may cause assistive technologies to assume these are
layout tables rather than data tables.

Perhaps given this information, the header section should be toggled on by default when creating a table?

[jasmussen]

This is what I'm seeing:

This isn't bad, actually!

The double borders beetween normal content and header or footer would be nice to not have. Not sure why they're present, but I can take a look if you need help.

I don't think we need to, or even should, do anything at all to style the table or footer sections. These are primarily there for semantics, and we should allow their default styles to shine through. I.e. bold headers, and the footers just look the same.

One question though is around flipping those switches. It's definitely boolean as it is now, which begs the question: is it ever okay to have two headers in a row? Or two footers in a row? O)r could you have a tablehead in the middle of a table? Because if that's semantically allowed, we'll need a different approach entirely :/

Inversely, if a tablehead can only semantically be at the top, and a table footer can only semantically be at the bottom, then the toggles are fine. Then the question just becomes whether we add those, or just convert the topmost table row to a table head.

[talldan]

Wow, thanks for that fast reply @jasmussen!

The double borders beetween normal content and header or footer would be nice to not have. Not sure why they're present, but I can take a look if you need help.

I added them thinking it improved things visually 😊 Pretty easy to remove them 😄

I don't think we need to, or even should, do anything at all to style the table or footer sections.

It's worth checking out the striped variation. At the moment the stripes don't quite line up when a header is added. Not sure how we could make that work with pure css.

One question though is around flipping those switches. It's definitely boolean as it is now, which begs the question: is it ever okay to have two headers in a row?

It is possible at the moment to add additional header/footer rows using the insert row option. I do have a concern that if the header/footer isn't presented differently it might be hard for the user to understand where they're inserting rows.

Or could you have a tablehead in the middle of a table?

At the moment I definitely feel it's sensible to keep it simple. The table block should still support other complicated tables if they're pasted, but until there are more advanced selection tools it might be best not to add too much functionality around modifying individual cells.

[jasmussen]

Yep, definitely good thoughts, and I share your desire both to keep things simple, and to ship improvements like this feature which is missing.

My question is purely one of valid HTML semantics, and perhaps in a way even accessibility: is the following markup okay?

<table>
    <thead>
...
    </thead>
    <tbody>
...
    </tbody>
    <thead>
...
    </thead>
    <tbody>
...
    </tbody>
</table>
```

If the above is not semantic/valid, it makes it a fair bit easier for us because those toggles can be completely fine for us even longterm. 

My concern is that if that markup is valid, a boolean choice is insufficient, and I'm worried about us moving too far down one path if we know at some point in the future we want to support something else. 

[talldan]

@jasmussen I think we're ok. According to MDN:

The <thead> must appear after any <caption> or <colgroup> element, even implicitly defined, but before any <tbody>, <tfoot> and <tr>element.

(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)

And for tfoot:

The <tfoot> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr>element. Note that this is the requirement as of HTML5.
HTML 4 The <tfoot> element cannot be placed after any <tbody> and <tr> element. Note that this directly contradicts the above normative requirement from HTML5.

(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot)

[jasmussen]

That sounds very promising indeed! And it suggests this could be a fruitful path forward. 👍👍

[talldan]

I've removed the borders for the header/footer rows for now.

[jasmussen]

This is what I see now:

Honestly, I think given the semantics of the footer and header, this is a pretty elegant and good solution. It solves a problem, and as such, I'm just about ready to approve this.

But we need to think about how to deal with the striped variation:

Here's a design I think could work:

The difference there:

• No borders around the th elements
• no backgrounds behind the header or the footer

Remove those, and this is good to go!

[talldan]

@jasmussen Thanks for all the feedback. That's a nice and simple solution, I like it!

I've made those adjustments. Here's how it looks now with the Gutenberg Starter Theme:

[jasmussen]

I think that looks solid, especially given we mean to provide a baseline that themes can style further.

I checked this branch out intending to test it, but for whatever obscure reason I can no longer see the toggles in the sidebar. I am convinced that it is an error on my part, and ascribing it to me being up at 4:30am today with a screaming baby.

SO, judging purely by the screenshot, 👍 👍 from me. Would still love a sanity check from @kjellr, and a code review, but otherwise, good to go!

[kjellr]

Would still love a sanity check from @kjellr, and a code review, but otherwise, good to go!

Yep, that's working pretty well. I think we're good from a purely visual perspective. 👍

I do have one minor UX thing to note: If you enter text in a header or footer row and then toggle it off, your text disappears forever. I wonder if we should add a warning/confirmation in this case?

[talldan]

I do have one minor UX thing to note: If you enter text in a header or footer row and then toggle it off, your text disappears forever. I wonder if we should add a warning/confirmation in this case?

Hey @kjellr 👋, thanks for the feedback. That's a good concern. Undo works in this case, but I don't think it's always apparent to a user in the moment that they can use undo.

I'll explore a few options around improving this.

[talldan]

Thanks everyone for the help! E2E tests have been added, will merge once everything passes.

[patrikhuber]

Hi, awesome to see this! When will this make it into official WordPress?

[patrikhuber]

This comment here #1470 (comment) mentions

Also table headers + footers can be made position: sticky; which is also awesome for long tables.

I was wondering whether this could be added?

[talldan]

@patrikhuber apologies for the lack of response! I'll respond now though I realise it's a month later 😊

Hi, awesome to see this! When will this make it into official WordPress?

You might have already spotted it, but it should be in available in WP5.3.

I was wondering whether this could be added?

If there's no open issue on github for this, the best thing to do would be to create one. Let me know if you're happy to do that.

If you're after this functionality in the meantime, I think it should be possible using a custom class name for the table block and adding an associated css rule in the customizer's custom css panel.

[davidallenlewis]

Nice. Enabling a section is great. But ideally a user could select any cell and set it as a cell. Sometimes your cells are vertical. Maybe that's plugin territory / too complex.

[patrikhuber]

@talldan Thanks for the reply!
Great, I just tried it out in WP5.4, the Table block is indeed slowly getting useful in Gutenberg.

If there's no open issue on github for this, the best thing to do would be to create one. Let me know if you're happy to do that.

Well as you mention, it's quite easy to add via a line of custom CSS, I'm not too big on it, it would be more of a "nice to have" in the GUI. If you or @strarsis (who raised this originally in #1470 (comment)) feel that it's important enough then by all means open an issue for it and I'll give my upvote!