Table block - Wrap table

Question

Table block - Wrap table

Fabien

2021年9月9日 17:50

I am using Gutenberg to create tables. Gutenberg tables have the following front-end structure :

figure class=wp-block-table
   table
      ...
   /table
/figure

I'd like to add a drop-shadow to my table but it doesn't work due to overflow-x : auto on the parent element figure.

One fix would be to wrap the table like this :

figure class=wp-block-table
   div class=table-wrapper
      table
         ...
      /table
   /div
/figure

Is there a way to easily wrap the table ? I've seen a way to wrap a whole gutenberg block (using render_block filter) but no only a child element.

Topic block-editor table Wordpress

Category Web

Phil · Accepted Answer · 2021年9月9日 17:50

You can search for the <table> strings and replace them with the wrapper element:

function pb_table_render_block($block_content, $block) {
    if ($block['blockName'] == 'core/table') {
        $block_content = str_replace('<table', '<div class="table-wrapper"><table', $block_content);
        $block_content = str_replace('</table>', '</table></div>', $block_content);
    }

    return $block_content;
}
add_filter('render_block', 'pb_table_render_block', 10, 2);

Table block - Wrap table

About