Gutenberg Controls

The jankx/gutenberg-controls package provides elite-level design controls for the WordPress Block Editor. It allows developers to add complex styling options to any block with zero additional React code per block.

How it works (Operating Mechanism)

The system works by intercepting the block editor's lifecycle using Higher-Order Components (HOC) and WordPress Filters.

1. Attribute Injection

A global attribute jankxControls is injected into supported blocks. This acts as a centralized storage for all design settings.

2. Sidebar Expansion

A bridge component wraps the block's editor view and automatically renders panels (Style, Layout, Effects) into the Gutenberg Inspector Sidebar.

3. Live Preview (The Magic)

Changes are converted to **CSS Variables** and applied directly to the block's DOM element in real-time using React's useEffect, providing an instant visual feedback loop without saving or reloading.

Available Controls

Control	Description
`jankx/color`	Advanced color picker with Solid, Gradient, Duotone, and Theme color support.
`jankx/typography`	Complete font control with Google Fonts integration, fluid sizing, and responsive values.
`jankx/visual-spacing`	Visual drag-and-drop handles for padding and margin control.
`jankx/icon-picker`	A sophisticated picker supporting multiple icon repositories (FontAwesome, Dashicons, etc.).

Integration Guide

Enabling enhanced controls for an existing block is as simple as adding a filter in PHP.

// Enable controls for a custom block
add_action('after_setup_theme', function () {
    jankx_enable_block_controls('jankx/my-custom-block', [
        'mainColor' => [
            'type' => 'jankx/color',
            'label' => __('Accent Color', 'jankx'),
            'allowGradient' => true,
        ],
        'baseFont' => [
            'type' => 'jankx/typography',
            'label' => __('Base Typography', 'jankx'),
        ],
    ]);
}, 20);

Developed with ❤️ by Jankx Team.