Gutenberg Controls

Package jankx/gutenberg-controls cung cấp các bộ điều khiển thiết kế đẳng cấp cho WordPress Block Editor. Nó cho phép các nhà phát triển thêm các tùy chọn phong cách phức tạp vào bất kỳ block nào mà không cần viết thêm mã React cho từng block.

Cơ chế vận hành (How it works)

Hệ thống hoạt động bằng cách can thiệp vào vòng đời của block editor sử dụng Higher-Order Components (HOC) và WordPress Filters.

1. Tiêm thuộc tính (Attribute Injection)

Một thuộc tính toàn cục jankxControls được tiêm vào các block được hỗ trợ. Đây đóng vai trò là nơi lưu trữ tập trung cho tất cả các thiết kế.

2. Mở rộng Sidebar

Một thành phần bridge bao bọc view editor của block và tự động render các panel (Style, Layout, Effects) vào thanh Sidebar của Gutenberg.

3. Live Preview ("Phép thuật")

Các thay đổi được chuyển đổi thành các **Biến CSS (CSS Variables)** và áp dụng trực tiếp vào DOM element của block theo thời gian thực sử dụng useEffect của React, mang lại trải nghiệm xem trước tức thì mà không cần lưu hay load lại trang.

Các bộ điều khiển khả dụng

Bộ điều khiển	Mô tả
`jankx/color`	Bộ chọn màu nâng cao hỗ trợ Solid, Gradient, Duotone và theme colors.
`jankx/typography`	Điều khiển phông chữ hoàn chỉnh với tích hợp Google Fonts, fluid sizing và responsive.
`jankx/visual-spacing`	Điều khiển khoảng cách (padding/margin) trực quan bằng cách kéo thả.
`jankx/icon-picker`	Bộ chọn icon tinh tế hỗ trợ nhiều nguồn (FontAwesome, Dashicons, v.v.).

Hướng dẫn tích hợp

Bật các bộ điều khiển nâng cao cho một block hiện có rất đơn giản bằng cách thêm filter trong PHP.

// Bật controls cho một block tùy chỉnh
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);

Phát triển với ❤️ bởi đội ngũ Jankx.