Cách tạo custom Gutenberg block WordPress

Mục lục

• Mở bài
• Lợi ích khi tạo custom block
• Điều kiện tiên quyết
• Cách tạo custom Gutenberg block
• Kiểm tra và rollback
• Lỗi thường gặp
• FAQ

Mở bài

Gutenberg là một trình chỉnh sửa mạnh mẽ trong WordPress, cho phép người dùng dễ dàng tạo và tùy chỉnh nội dung. Tuy nhiên, đôi khi bạn cần những khối tùy chỉnh (custom blocks) để đáp ứng nhu cầu cụ thể của mình. Việc tạo custom Gutenberg block không chỉ giúp bạn nâng cao trải nghiệm người dùng mà còn tối ưu hóa việc quản lý nội dung trên trang web.

Lợi ích khi tạo custom block

• Tối ưu hóa việc quản lý nội dung, giúp tạo ra các khối tùy chỉnh theo yêu cầu.
• Cải thiện giao diện và trải nghiệm người dùng trên trang web của bạn.
• Đem lại sự nhất quán trong thiết kế và nội dung giữa các trang.

Điều kiện tiên quyết

• Phiên bản WordPress: Bạn cần sử dụng WordPress 5.0 trở lên để có thể sử dụng Gutenberg.
• Quyền truy cập: Đảm bảo bạn có quyền quản trị để thực hiện các thay đổi trong mã nguồn.

Cách tạo custom Gutenberg block

Dưới đây là hướng dẫn từng bước để tạo một custom Gutenberg block đơn giản.

Bước 1: Tạo thư mục cho plugin

Truy cập vào thư mục wp-content/plugins và tạo một thư mục mới có tên custom-gutenberg-block.

Bước 2: Tạo file chính cho plugin

Trong thư mục vừa tạo, tạo file custom-gutenberg-block.php và thêm mã sau:

<?php
/*
Plugin Name: Custom Gutenberg Block
Description: Tạo custom block cho Gutenberg
Version: 1.0
Author: Tên của bạn
*/

// Đăng ký block
add_action('init', 'register_custom_block');
function register_custom_block() {
    // Kiểm tra xem Gutenberg có được bật hay không
    if (!function_exists('register_block_type')) {
        return;
    }

    // Đăng ký block
    register_block_type('custom/block', array(
        'editor_script' => 'custom-block-editor-script',
    ));
}
?>

Bước 3: Tạo script cho editor

Tạo thư mục build trong thư mục plugin và tạo file index.js bên trong với mã sau:

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType('custom/block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'layout',
    edit: (props) => {
        return (
            <div>
                <RichText
                    tagName="h2"
                    value={props.attributes.content}
                    onChange={(content) => props.setAttributes({ content })}
                    placeholder="Nhập nội dung..."
                />
            </div>
        );
    },
    save: (props) => {
        return <RichText.Content tagName="h2" value={props.attributes.content} />;
    },
});

Bước 4: Tải script vào WordPress

Quay lại file custom-gutenberg-block.php và thêm đoạn mã sau để tải script:

add_action('enqueue_block_editor_assets', 'enqueue_custom_block_editor_assets');
function enqueue_custom_block_editor_assets() {
    wp_enqueue_script(
        'custom-block-editor-script',
        plugins_url('build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        true
    );
}

Bước 5: Kích hoạt plugin

Truy cập vào trang quản trị WordPress, vào mục Plugins và kích hoạt plugin Custom Gutenberg Block.

Kiểm tra và rollback

Sau khi kích hoạt, bạn có thể kiểm tra custom block trong trình chỉnh sửa Gutenberg. Nếu có vấn đề xảy ra, bạn có thể dễ dàng vô hiệu hóa plugin từ trang quản trị.

Lỗi thường gặp

• Block không hiển thị: Đảm bảo rằng bạn đã kích hoạt plugin và không có lỗi trong mã.
• Lỗi tải script: Kiểm tra đường dẫn đến file JavaScript trong mã tải script.
• Không lưu được nội dung: Đảm bảo rằng bạn đã sử dụng đúng thuộc tính setAttributes trong mã.

FAQ

1. Tại sao tôi cần tạo custom Gutenberg block?
Custom Gutenberg block giúp bạn tạo nội dung đặc biệt theo yêu cầu, tối ưu hóa trải nghiệm người dùng và nâng cao tính linh hoạt trong việc quản lý nội dung.

2. Tôi có thể tạo bao nhiêu custom block?
Bạn có thể tạo nhiều custom block khác nhau tùy thuộc vào nhu cầu của bạn.

3. Có cần kiến thức lập trình để tạo custom block không?
Có, bạn cần có kiến thức cơ bản về HTML, CSS và JavaScript để thực hiện việc này.