Description

Tabelio Price Table lets you create a pricing table (simple, comparison, or monthly/yearly
toggle) once, then display it anywhere: the block editor (Gutenberg), Elementor, or the
[tblio_table id=”123″] shortcode for any other theme or page builder.

Key features:
* Layouts: simple, comparison, monthly/yearly toggle
* “Popular” badge, custom CTA button, checkmark/cross feature list
* Customizable color presets and border radius
* One shared rendering engine for every integration (always consistent output)
* Internal REST API for managing table data
* Edit design and columns/features directly inside the Gutenberg block panel or the
Elementor widget — no need to leave the editor
* Elementor widget supports two modes: a shared “Saved Table” (reusable across the site)
or “Custom Here” (content stored directly in that widget instance)
* Duplicate, export (.json), and import pricing tables from the admin page
* Searchable, paginated admin table list
* Drag-and-drop column reordering
* Optional WooCommerce integration — link a plan to a product and its price stays in sync
* Extensive Elementor Style tab: typography, colors, borders, box-shadow, and spacing
for the card, title, price, description, feature list, CTA button (normal/hover), and badge

Screenshots

The "Tabelio Price Table" admin page — list of saved pricing tables. — The “Tabelio Price Table” admin page — list of saved pricing tables.

The form builder — configure plans, pricing, features, and design presets. — The “Tabelio Price Table” admin page — list of saved pricing tables.

Installation

Upload the tabelio-price-table folder to /wp-content/plugins/.
Activate the plugin from the ‘Plugins’ menu in WordPress.
Open the ‘Tabelio Price Table’ menu in the admin sidebar to create your first table.
Add the “Tabelio Price Table” block in Gutenberg, or the “Tabelio Price Table” widget in Elementor.

FAQ

Does this plugin require Elementor to be installed?: No. Elementor support is optional. The Elementor widget only appears if Elementor
Page Builder is active on your site. Without Elementor, you can still use the
Gutenberg block or the [tblio_table id="123"] shortcode in any theme
or page builder.
How do I display a pricing table outside of Gutenberg/Elementor (e.g. in a theme file)?: Use the shortcode [tblio_table id="123"], or call it directly from PHP:
Do I need Node.js or a build step to use this plugin?: No. The Gutenberg block is written as plain JavaScript (no JSX/build step required),
so the plugin works immediately once activated.
What’s the difference between “Saved Table” and “Custom Here” mode?: Available in both the Gutenberg block and the Elementor widget. “Saved Table” uses
one table that can be reused across many pages/blocks/widgets at once (edit once,
updates everywhere). “Custom Here” stores the table content directly inside that
specific block/widget instance, for a single placement only.
Is the table data deleted if I deactivate the plugin?: No. Table data (stored as a tblio_table custom post type) remains in the database
when the plugin is deactivated temporarily. Data is only removed if you delete a
table manually from the admin page.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Tabelio Price Table – Pricing Tables for Block Editor & Page Builders” is open source software. The following people have contributed to this plugin.

armanbasir

Translate “Tabelio Price Table – Pricing Tables for Block Editor & Page Builders” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.4.5

Fixed (WordPress.org Plugin Check): the CSS used for editor-preview
contexts (Gutenberg ServerSideRender, Elementor editor/preview AJAX) is
no longer built as a hand-written <style> tag string. It’s now
registered and attached via wp_register_style() / wp_add_inline_style()
/ wp_enqueue_style() and printed with wp_print_styles() — the actual
markup is generated entirely by WordPress’s own APIs. Normal front-end
page views were already unaffected, since they use a plain enqueued
stylesheet (added in 1.4.2).
Fixed (WordPress.org Plugin Check): the shortcode was named
[tabelio_table], which didn’t match the plugin’s “tblio” prefix used
everywhere else. Renamed to [tblio_table] for consistency.

1.4.4

Updated the display name (plugin header “Plugin Name” and the readme.txt
title) to “Tabelio Price Table – Pricing Tables for Block Editor & Page
Builders” — a descriptive tagline without naming specific third-party
products/trademarks in the title itself (compatibility with Gutenberg,
Elementor, and WooCommerce is still mentioned in the description, where
that’s standard practice). The slug, text domain, shortcode, and all
internal identifiers are unchanged from 1.4.3.

1.4.3

Renamed the plugin from “Priceloom” to “Tabelio Price Table” (slug changed
from priceloom to tabelio-price-table). All internal function, class,
constant, and CSS prefixes were updated from “ploom”/”PLOOM_” to
“tblio”/”TBLIO_” to match. The shortcode changed from [priceloom_table]
to [tblio_table]. No functional changes — existing saved tables and
settings are unaffected.

1.4.2

Fixed (WordPress.org Plugin Check): the pricing table CSS is now enqueued
through the standard wp_enqueue_style() API on normal front-end page
views, instead of always being output as a raw inline <style> tag.
The inline <style> output is now reserved specifically for the two
contexts that have no <head> to enqueue into — the Gutenberg block
editor’s ServerSideRender request and Elementor’s editor/preview AJAX
rendering — where it remains necessary.
Fixed (WordPress.org Plugin Check): REST API endpoints for reading,
updating, and deleting a specific pricing table now check the
object-specific edit_post/delete_post capability for that table’s ID,
and creating/duplicating/importing a table now checks publish_posts,
instead of all endpoints sharing one broad edit_posts check.

1.4.1

Renamed the plugin from “Modern Price Table” to “Tabelio Price Table” (slug changed
from modern-price-table to tabelio-price-table), per a WordPress.org naming-review
request asking for a more distinctive name/slug not easily confused with
the many similarly-named “[word] Pricing Table” plugins already in the
directory. All internal function, class, constant, and CSS prefixes were
updated from “mptbl”/”MPTBL_” to “tblio”/”TBLIO_” to match. The shortcode
changed from [mdrn_price_table] to [tblio_table]. No functional
changes — existing saved tables and settings are unaffected.

1.4.0

Added 5 more design presets (all existing presets unchanged):
- “Luxury” — black background with gold accents and serif typography
- “Sunset” — warm full-card gradient (orange to pink)
- “Editorial” — newspaper/print-style with a serif heading and thin rules
- “Ocean” — deep teal/blue gradient card
- “Frame” — ultra-minimal thin outline with generous whitespace

1.3.0

Added: “Custom Here” mode is back in the Gutenberg block, matching what
Elementor already had — build a table’s design and columns directly in
the block’s own attributes, without needing a shared saved table. This
mode was removed early on due to stability issues; it’s been rebuilt on
top of the fixes made since (deep-clone-safe column mutation, the
collapse-safe Columns & Features panel, drag-and-drop reordering,
WooCommerce product linking, currency quick-pick, and the always-inline
CSS fix), so it should be considerably more reliable this time.
Fixed: a couple of leftover non-English default values (currency symbol,
period, and CTA text for newly added columns in Gutenberg) were missed
during the earlier full English translation pass.

1.2.0

Added 5 new design presets (all existing presets unchanged):
- “Retro” — vintage warm palette with a bold offset border
- “Corporate” — clean, professional look for B2B/SaaS
- “Pastel” — soft candy colors with extra-rounded corners
- “Monochrome” — pure black & white, sharp square corners
- “Material” — Google Material-style elevation shadow with hover lift

1.1.1

Fixed a serious bug: pricing tables would sometimes render with no
styling at all (plain unstyled HTML) on the live site. The CSS was only
being inlined once per request as an optimization to avoid duplicates
when multiple tables share a page — but Elementor (and some SEO/related
content plugins) can render a widget’s content more than once within a
single request for internal purposes, and a discarded earlier render
pass was consuming that “print once” opportunity before the real,
visible render happened. The CSS is now always printed with each table,
which reliably fixes the issue at the cost of a few extra KB when
several tables appear on the same page.

1.1.0

Added: “Duplicate” action on the admin table list — creates a full copy
of an existing table (“{Title} (Copy)”).
Added: “Export” (downloads a table as a .json file) and “Import”
(uploads a previously exported .json file to create a new table) on
the admin page.
Added: search box and pagination on the admin table list — the list no
longer loads every table at once, and can now be filtered by name.
Added: drag-and-drop column reordering (drag the ⠿/✥ handle) in both
the admin form builder and the Gutenberg Columns & Features panel.
Added: a currency quick-pick (datalist suggestions: $, €, £, ¥, ₹, Rp,
and more) on the Currency field, still fully free-text.
Added: WooCommerce product linking. In the admin panel and Gutenberg,
a searchable picker fills in a plan’s title/price from a WooCommerce
product (one-time fill). In Elementor’s “Custom” mode, a “Link
WooCommerce Product” dropdown pulls the title/price live from the
product on every page load, so price changes in WooCommerce stay in
sync automatically. Only shown/active when WooCommerce is installed.
Added: “Font Color”, “Font Color (Popular Column)”, and “Space Between
Columns” controls in the Elementor widget (both “Saved Table” and
“Custom” modes), matching what was already available in Gutenberg.

1.0.11

Fixed a security issue: the REST “delete table” endpoint did not verify
that the given ID was actually a pricing table before deleting it,
meaning a crafted request could delete an unrelated post/page. It now
checks the post type first, matching the other endpoints.
Fixed: the Monthly/Yearly toggle buttons lost their aria-pressed state
when the switch was redesigned into a pill control, making the current
selection unclear to screen readers. Restored and kept in sync via JS.
Added: a standard uninstall.php (data is intentionally preserved,
documented inline — this plugin doesn’t use the WordPress Options API).

1.0.10

Polish: “Reset to default” color buttons redesigned as small pill buttons
with a hover state, instead of plain text links.
Polish: more spacing around the “Add Plan/Column” button and the
“Save Now” button in the Gutenberg Columns & Features panel, and the
panel content no longer sits flush against the sidebar edges.

1.0.9

Added: “Font Color (Popular Column)” — a separate font color override that
only applies to the column marked “Popular”/featured, in both Gutenberg’s
Design panel and the admin form builder. Falls back to the general “Font
Color” setting (or the preset default) when left unset.

1.0.8

Removed: the “Ribbon” design preset (per request).
Fixed: “Space Between Columns” had no effect — the “Ribbon” preset
hardcoded its own gap value that always overrode the setting, and
separately the “Toggle” layout’s card wrapper had its own hardcoded
24px gap unrelated to the setting. Both are now fixed to use the
configurable spacing value.

1.0.7

Added: “Font Color” and “Space Between Columns” controls in the Gutenberg
block’s Design panel and the admin form builder (Elementor’s own Style tab
already covers typography per-element in more detail). Font color defaults
to “use default” (no override) so existing tables are unaffected.

1.0.6

Changed: the “Monthly/Yearly Toggle” layout switch is now a clickable
pill-style segmented control (click “Monthly” or “Annual” directly) instead
of a small round on/off switch. Applies to all design presets; the “Earthy”
preset gets a matching cream-toned pill background.

1.0.5

Added: an 11th design preset, “Earthy” — warm serif typography for the title
and price, a sage-green featured card background, circular checkmark icons
for included features, and an arrow () appended to CTA buttons.

1.0.4

Added: a 10th design preset, “Ribbon” — a vertical side price ribbon that
overlaps the card, with the plan title, badge-excluded color, and CTA button
all tinted to match. Colors automatically alternate (red / navy / green) per
column, cycling every 3 columns.

1.0.3

Added: a “Settings” link next to Activate/Deactivate on the Plugins list page,
linking directly to the “Tabelio Price Table” admin page.

1.0.2

Fixed: newly added design presets (Glass, Neon, Soft, Outline) were not showing
up in the Gutenberg block’s Design panel because the plugin version number
(used as a cache-busting query string on the block’s JS file) hadn’t changed,
so browsers kept serving a stale cached copy of index.js. The version bump
forces a fresh fetch.
Also translated all remaining internal code comments (PHP/JS/CSS docblocks)
to English, for WordPress.org submission.

1.0.1

Renamed plugin to “Tabelio Price Table” and updated all internal function/class/CSS
prefixes from “wppt”/”WPPT_” (4 characters — too short per WordPress.org guidelines)
to “tblio”/”TBLIO_” (5+ characters) to avoid prefix collisions with other plugins.
Added: “Saved Table” vs “Custom Here” mode in the Elementor widget. Design
(layout/preset/color/radius) and content (columns/features) can now be edited
directly in the editor, without switching to the admin page.
Added: a “+ Add New Table” button directly in the Elementor widget (Saved Table
mode), matching the capability already available in the Gutenberg block — create
a new table without ever leaving the editor.
Added: expanded Elementor Style tab — Typography, color, border, box-shadow, and
spacing controls for the card, title, price, description, feature list, CTA button
(Normal/Hover), and badge. The “Add New Table” button was also redesigned with an
icon and gradient.
Fixed: the “Columns & Features” panel in Gutenberg would sometimes appear empty
after being reopened (the native PanelBody unmounts its contents on collapse) —
fixed with a callback ref, then replaced entirely with a custom collapsible panel
so the columns editor container is never lost on show/hide.
Fixed: “Saved Table” mode in Gutenberg now auto-saves (debounced ~900ms) whenever
a column/feature is edited — previously changes were only persisted after manually
clicking a save button, which could leave a published page showing an empty table
if that click was missed.
Fixed a major bug: the “Monthly/Yearly Toggle” layout was loading the wrong template
file (the file name didn’t match the layout name), silently falling back without
any error and making the table appear empty. Replaced with an explicit file mapping.
Added: a “Verify Saved” button in Gutenberg — checks directly against the server
whether the table data has actually been persisted, instead of assuming based on
the editor’s current state.
Fixed a serious bug: the “Custom Here” mode mutated the columns array directly from
the block attribute (which can share a reference with the block’s default object),
risking data corruption/loss and triggering an “invalid content” warning in
Gutenberg. Replaced with a deep-clone before editing.
Fixed: added error handling and a loading indicator while fetching table details in
the Gutenberg panel, so a failed request no longer silently hides the Design panel.
The “Add Feature”/”Add Column”/”Remove” buttons in Gutenberg now use the native
components-button classes for visual consistency with the WordPress editor.
Simplified: “Custom Here” mode was removed from the Gutenberg block (it was the main
source of instability) — Gutenberg now only has “Saved Table” mode, with design and
content still editable directly in the panel without visiting the admin page.
Elementor is unaffected; both modes remain available there.
Fixed: the “Monthly/Yearly Toggle” layout rendered incorrectly (the switch and the
cards were side by side instead of stacked) because it inherited display: flex
from the parent wrapper without a column direction. Fixed with flex-direction: column.
Fixed: the “Comparison” layout wasn’t responsive on narrow/mobile screens — columns
were forced to shrink until unreadable. It now scrolls horizontally with a sensible
minimum width, and font size/padding adjust automatically on mobile.
Fixed a CSS bug: the 2-column grid in the “Columns & Features” editor form in
Gutenberg overflowed the sidebar (long values/placeholders caused grid columns to
expand uncontrollably) — changed to a single column with a min-width: 0 safeguard.

1.0.0

Initial release (scaffold): table data custom post type, rendering engine, shortcode,
Gutenberg block (dynamic, plain JS with no build step), Elementor widget, basic REST
API, and an admin page with a full form builder (columns, features, design presets).