I was working with some friends on a club website and “all of a sudden” we were getting strange results when we needed to add a row to a WordPress table using the block editor.
Our table looked like this:
| Great Club Calendar | |||
| Date | Event | Location | Time |
| 2023-05-15 | Special Event | Tucson, AZ | 6:00pm – 8:30pm |
| 2023-06-23 | Great Event | Tucson, AZ | 7:00pm |
The Problem
When we needed to add a row, this is what we got after using the block editor and choosing “Insert row after” the last row.
| Great Club Calendar | |||
| Date | Event | Location | Time |
| 2023-05-15 | Special Event | Tucson, AZ | 6:00pm – 8:30pm |
| 2023-06-23 | Great Event | Tucson, AZ | 7:00pm |
The apparent cause
When trying to edit the HTML of a table, there many changes that cause the “This block contains unexpected or invalid content” message. (for example, adding style to a <tr> tag, i.e. <tr style=”display:none”></tr>).
This makes working with tables in the base block editor somewhat limiting. Apparently we “got away” with modifying our table with the first row consisting of a single <td> tag that spans four columns. And we didn’t get the “unexpected or invalid content” error. Yea!
<tr><td class="has-text-align-center" data-align="center" colspan="4"><strong>Great Club Calendar</strong></td><tr>'But… the apparent side effect seems to be that “inserting a row” will only insert a single column row!
Solutions
Here are three solutions we used, with the first solution being the easiest to implement. Most Google searches returned suggested solutions that used a plugin to solve various table formatting problems. We wanted to limit the use of plugins so we were looking for ways to go forward without another plugin.
Solution 1 – Add a four column header row and a one line HTML script after the table
If you modify the table to have a four column empty row at the beginning of the table, then “insert row” will work correctly. Add this HTML to the table for the first two rows:
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td class="has-text-align-center" data-align="center" colspan="4"><strong>Great Club Calendar</strong></td></tr>| Great Club Calendar | |||
| Date | Event | Location | Time |
| 2023-05-15 | Special Event | Tucson, AZ | 6:00pm – 8:30pm |
| 2023-06-23 | Great Event | Tucson, AZ | 7:00pm |
| Yea | insert | row | works! |
After the table add this custom HTML block:
<script>jQuery("tr:nth-child(1)").hide();</script>| Great Club Calendar | |||
| Date | Event | Location | Time |
| 2023-05-15 | Special Event | Tucson, AZ | 6:00pm – 8:30pm |
| 2023-06-23 | Great Event | Tucson, AZ | 7:00pm |
| Yea | insert | row | works! |
Success! Now you can edit the table visually and add rows as expected!
Ugly Solutions
For completeness here are other ways we solved the problem. Neither of these methods are recommended, and we won’t drag you through the details.
Solution 2 – Delete the first row, insert row(s) and then add back the first row. Ugly!
Solution 3 – Copy the table html to a table friendly editor. Add necessary lines. Copy and paste the modified HTML into the WP table. Ugly!! Ugly!!
Environment
This problem was relevant to:
Date: 2023-06
WordPress 6.2.2
ChromeBlog 1.0.0
