TMS Block Kit

外掛說明

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
* Entrance and motion effects (fade, slide, zoom, flip, etc.)
* 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

The kit includes 6092 ready-to-use SVG icons from Tabler Icons: https://tabler.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/.