wpDataTables Enhanced Blocks Plugin

If you’ve ever used the wpDataTables default Gutenberg blocks, you know the frustration: instead of seeing your beautiful chart or table in the editor, you just get a shortcode placeholder… You’re essentially working blind, having to preview the page to see if you picked the right table or if your layout looks good.

That’s exactly why I built wpDataTables Enhanced Blocks, a drop-in block replacement that gives you live previews of your charts and tables directly in the block editor.

What Makes This Different?

The enhanced blocks show you exactly what your visitors will see, right in the editor. No more guessing, no more constant previewing. Pick a chart from the dropdown and watch it render in real-time. Select a table and see the actual data displayed with your chosen styling.

The best part? These blocks are completely safe and future-proof. They use an iframe-based approach that won’t break when wpDataTables updates their code. You’re still editing your charts and tables in the wpDataTables admin interface like normal. The enhanced blocks simply display a preview of that content in the editor.

On the frontend, everything works exactly like it always has, outputting the standard wpDataTables shortcodes your site already uses.

Key Features

Live Chart/Table Previews See your wpDataTables and wpDataCharts rendered in the editor with all your styling, data, and settings intact. No more shortcode placeholders.

Safe & Future-Proof Uses iframe isolation so wpDataTables updates won’t break your editor previews. The blocks operate completely independently from wpDataTables’ internal code – under the hood, it is just rendering their native shortcode!

Simple Selection Just pick from a dropdown of your existing charts and tables. The preview updates instantly.

Interactive Preview Mode Toggle between preview and interactive modes in the block settings. When interactive mode is enabled, you can actually interact with your tables (sort columns, search, paginate) or charts (hover for tooltips, click legend items) right in the editor.

Normal Frontend Output On the live site, the blocks outputs their standard shortcodes, so nothing changes for your visitors or your site’s performance.

Replaces Default Blocks By default, the original wpDataTables blocks are automatically replaced with these enhanced versions. If you need to keep the originals for some reason, there’s a filter for that.

How It Works

The plugin takes a smart approach to displaying your wpDataTables content:

1. When you select a chart or table from the dropdown, a small iframe loads in the editor
2. The iframe uses wpDataTables’ own shortcode to render the actual content
3. The iframe reports its content height back to the editor via postMessage so it adjusts its height to perfectly fit the content
4. On the frontend, everything outputs as standard wpDataTables shortcodes

This iframe-based method means the blocks don’t rely on any of wpDataTables’ internal script handles or CSS classes. When wpDataTables releases an update that changes their code structure, your editor previews keep working perfectly.

Using the Blocks

In the block editor, click the + button to add a new block, then search for:

• wpDataChart for chart previews
• wpDataTable for table previews

Select your chart or table from the dropdown, and watch it render live in the editor. The preview shows you exactly what your visitors will see, including all styling, data, and interactive elements.

Developer Notes

If you need to keep the original wpDataTables blocks alongside the enhanced versions, use this filter:

add_filter( 'wpdteb_unregister_original_blocks', '__return_false' );

add_filter( 'wpdteb_unregister_original_blocks', '__return_false' );

By default, the original blocks are unregistered and replaced with the enhanced versions to avoid confusion in the block inserter.

Get wpDataTables Enhanced Blocks

This plugin is available to SnippetNest members or as a one time purchase. Start seeing your wpDataTables content in the editor where it belongs. The days of shortcode placeholders are over. Get back to building pages visually, the way the block editor was meant to work.