[WIP] Enable table cell merge and unmerge

[adamsilverstein]

Closes #15821

Description

The following features encompass table cell merging and unmerging.

• Click drag to select a range.
• Click then shift-click to select a range.
• Merge cells menu: merges cells by adding colspan/rowspan to the root cell, and removing remaining sell, combing their content into the first cell.
• Merging should trigger undo level and dirty post.
• Merged areas should be tracked or calculable
• When saving, colspan and rowspan should be included.
• "Unmerge" command should be available when selection includes any merged area.
• Unmerging re-divides and selected merged areas. content remains in the root cell

How has this been tested?

Screenshots

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.
• I've included developer documentation if appropriate.

[talldan]

Hey @adamsilverstein, it's great that you're taking a look at this.

I have a couple of PRs lined up for the table block that have some crossover, and it'd be great to think about how they could work together. See:

• Table column and row selection #16493 - implements row/column/table buttons for making multi-cell selections.
• Add table block keyboard navigation #16957 - implements keyboard navigation, but this is now being reworked in WIP: Try vertical arrow key navigation in WritingFlow #17084 to be more generic. This is laying the groundwork for selecting ranges using the keyboard.

One of the things I was heading towards is having a single type of selection object (#16493 implements this, but needs some tidy-up):

selection: {
  type: 'cell'|'column'|'row'|'table',
  // ... selectionData
};

I think this could be applied in your code, the selectionData for a 'range' could look like this:

selection: {
  type: 'range',
  cells: [],

Or

selection: {
  type: 'range',
  start: { // ... },
  end: { // ... }
}

#16493 also implements CSS rules for showing borders around multi-cell selections which might be useful for this PR.

[mapk]

Looks like this has gotten stale. Any chance it can be picked up again, @talldan @adamsilverstein ?

[adamsilverstein]

I would love to @mapk, thanks for the ping! I'll put this on my list.

[adamsilverstein]

👋 Hey @talldan - I'm picking this back up and think I should probably start with the styles and structures you laid out in #16493 - are you hoping to revisit that PR any time soon?

[talldan]

@adamsilverstein I probably won't be able to revisit #16493 any time soon.

With the table block, I'm wondering whether the time is right to start focusing more on looking at solutions that involve inner blocks, like described in #18768. What do you think?

My concern is that if we add more features like cell merging, the transition to using inner blocks becomes more difficult as those features then have to be adapted to also work with inner blocks.

[strarsis]

So this PR would first transition to using inner blocks as table cells and then (re)implement the merging?

[jeffpaul]

@adamsilverstein any thoughts on switching up the approach on this to use inner blocks as @talldan referenced is a potential option discussed in #18768?

[adamsilverstein]

@adamsilverstein any thoughts on switching up the approach on this to use inner blocks as @talldan referenced is a potential option discussed in #18768?

@jeffpaul Probably makes sense although I haven't looked at the way inner blocks work carefully enough to be sure. My effort here stalled and I have been focused elsewhere, so I welcome any contributions/help./

[jdaviescoates]

I'd love to see this actually merged. What's the current status/ plan? Thanks!

[ajotka]

@adamsilverstein I'm working on your proposal by my own (I don't want to promise anything yet!), but I found a bug.
When you add header and/or footer, selecting don't work. If you select cell with index [0 0] it will also select header and footer with index [0 0].
I'm just reporting for keeping it in mind.