Ability to add ordered and unordered lists to tables

[andrew-dixon]

Is your feature request related to a problem? Please describe.
It is currently not possible to add an ordered or unordered list to a table, even if you edit as HTML as once the list HTML has been added and to go back to block view, the output is incorrect.

Describe the solution you'd like
The option to add a list block inside a table cell.

Describe alternatives you've considered
Adding the list via the "Edit as HTML", but it doesn't work.

[andrew-dixon]

Sorry, to be clear, they display correctly when output on the frontend of the site, it is only while editing they do not appear correctly:

This code in HTML mode:

Renders like this in visual mode:

[0711master]

I would also be really interested to have this feature! In big tables it is really a lot of work to insert lists in the code...

[physx2494]

+1 for this

[ellemaker]

+1

[kisabelle]

+1

I have a couple of examples of this in use on an older WordPress site that doesn't use the Gutenberg editor here and here.

I'm currently building a new site using the Gutenberg editor that will have very similar content. I was very happy to find that there is a table block built in, but disappointed to see that we aren't able to add lists inside the table content.

[LukaszJaro]

Just ran into this as well, can't add lists to table cells.

[snappytots]

I am able to add lists to a table. I just recently was able to highlight them and had the option to change to a list, but that option is no longer there. Weird. I am able to do it by editing the HTML and it does show when editing my post and after it is published.

1. Select the table.
2. Click on the 3 vertical dots to bring up "more options".
3. Choose "edit as HTML"
4. Find the cell where you would like to place the list. After the for that cell add your list tags:
   or
   and then put
   around the first item in your list. Use those containers for each item on your list.
   2. When your list is finished, end with
   or

BEFORE the for that cell.

You can then switch back the view by clicking the 3 vertical dots at the top left edge of your table box for "more options", click "edit visually".
Note: sometimes the "more options" dots don't want to pop up (at least for me) when in HTML mode. Make sure you click on the table. If they still don't show up, click somewhere else, then click on your table and hover over the top left corner and they should appear.

You can see an example of

mine at: https://snappy-tots.com/calendar-of-events/

[aaronmeder]

+1

[arceoh]

+1

[scheinercc]

@javierarce do you know if there is any time estimate on this? I saw it is listed under "Bugs" in #32400 - but they don't have a obvious priority.

[javierarce]

@javierarce do you know if there is any time estimate on this? I saw it is listed under "Bugs" in #32400 - but they don't have a obvious priority.

@scheinercc I'm unsure about the time estimation, but I've just tried adding lists in HTML mode and they are correctly rendered. If that's the case, I think we could close this issue and open a feature request to allow adding tables visually.

What do you think?

[scheinercc]

I've just tried adding lists in HTML mode and they are correctly rendered. If that's the case, I think we could close this issue and open a feature request to allow adding tables visually.

Re-read the initial ticket description and agree. I landed here today as content editors brought this issue to my attention. I now filed #35764 for adding the visual list editing tools.

[scheinercc]

@javierarce testing it again, I find these issues:

I pasted the following code

<figure class="wp-block-table">
  <table>
    <tbody>
      <tr>
        <td><strong>Header 1</strong></td>
        <td><strong>Header 2</strong></td>
      </tr>
      <tr>
        <td>Product</td>
        <td>
          <ul>
            <li>product detail 1</li>
            <li>product detail 1</li>
            <li>product detail 1</li>
            <li>product detail 1</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

which resulted in these huge spaces (due to the inlined white-space: pre-wrap; ):

I then manually removed all the spaces used for code indentation

switching back to "visual editing" I got this

while switching yet back into "HTML mode", it still kept it

Tested in Firefox and Chrome with the same results. It seems to me that the HTML editing is quite touchy and not particular easy to use.

[javierarce]

@scheinercc I think the problem you describe will be handled by the enhancement request you created (thanks for that, by the way… I've added it to the tracking issue), whereas this issue was more about fixing the basic list rendering (but I'd love to read more opinions about it).

[scheinercc]

@javierarce maybe it is about time to close this ticket here, as the new one is already seen is a dup of it ;)