About this plugin
TMS Block Kit enhances the WordPress block editor by extending supported core blocks with advanced responsive controls, layout options, and scroll animations, while also introducing custom blocks for building flexible and modern layouts.
It is designed to reduce the need for custom CSS and external page builders by bringing essential design tools directly into Gutenberg.
Custom Blocks
Container Block ( tbkkt/container )
* Advanced layout container with inner blocks support
* Flexible layout modes (including flex-based structures)
* Independent control of block width and inner content width
* Enhanced backgrounds (color, image, video)
* Decorative shape separators (top/bottom) with multiple presets
Icon Block ( tbkkt/icon )
* Vector icons from the built-in Tabler Icons library (6000+ SVGs), or custom images
* Size, rotation, and alignment controls
* Optional link support
* Accessibility-friendly
* Hover styles (color and background)
Floating Overlays
* Build reusable modals, slide-in panels, and floating elements
* Open on demand from anywhere on your site
* Open and close animations for a polished user experience
Core Block Extensions
TMS Block Kit extends supported core text blocks (and selected custom blocks) by adding advanced design controls directly in the block inspector.
Responsive Spacing
* Margin and padding per device (desktop / tablet / mobile)
* Presets and custom values
Responsive Font Size
* Typography scaling per device
* Presets or custom sizes
Responsive Visibility
* Show or hide blocks depending on device (desktop, tablet, mobile)
Position Controls
* CSS position (static, relative, absolute, fixed, sticky)
* Z-index, overflow, and inset/offset controls
Scroll Animation
)
* Direction, distance, duration, delay, easing
* Optional repeat on scroll
Advanced Features
Modular System
* Enable or disable extensions and blocks individually from the plugin settings page
* Keep your installation lightweight and optimized
Editor Toolbar — Device Preview Selector
* When enabled, restores the device preview selector in the block editor toolbar
* Works when editing patterns and template parts in the Site Editor
Custom Breakpoints
* Define your own mobile and tablet breakpoints
* Automatically regenerate plugin CSS to match your theme or project
Icon library
io/icons
How It Works
All features are seamlessly integrated into the Gutenberg editor interface.
* Controls are added to the block inspector for supported blocks
* Front-end rendering is handled via the render_block filter
* Dynamic classes and attributes are generated automatically
Source Code
JavaScript and CSS shipped in this plugin are compiled from human-readable source files.
- Public repository: https://github.com/entumas/tms-block-kit
- Source authoring: _src/ at the repository root (JavaScript modules and SCSS)
- Build tool: Prepros using prepros.config at the repository root
- Compiled output in this plugin: assets/js/, assets/css/, and block editor bundles under includes/blocks/
- PHP: included as readable source under includes/
To build from source: clone the repository, open the project root in Prepros, then compile the configured _src/ entry files. The installable plugin directory is tms-block-kit/.