Giới Thiệu Về Gutenberg và Custom Block Trong WordPress

Gutenberg là trình chỉnh sửa mặc định của WordPress với cơ chế “block-based”, cho phép người dùng xây dựng bố cục nội dung trực quan bằng các khối (blocks). Nhờ đó, bạn có thể tạo ra bài viết hoặc trang đẹp mắt mà không cần biết lập trình. Tuy nhiên, trong nhiều trường hợp, các block mặc định là chưa đủ. Đây là lúc Custom Block phát huy sức mạnh — cho phép bạn tạo khối theo đúng nhu cầu và phong cách của riêng bạn.

Các Bước Chuẩn Bị Trước Khi Tạo Custom Block

Để bắt đầu phát triển block mới, bạn cần chuẩn bị một số công cụ và môi trường:

• Trình soạn thảo mã như Visual Studio Code hoặc Sublime Text.
• Máy tính đã cài đặt Node.js và npm (bắt buộc đối với block dùng build script).
• Truy cập vào hệ thống file của website WordPress.
• Quyền tạo thư mục trong wp-content/plugins.

Hướng Dẫn Tạo Custom Block Trong Gutenberg

Dưới đây là quy trình chi tiết để tạo một custom block đơn giản từ đầu:

1. Tạo thư mục chứa plugin block

   Trong thư mục wp-content/plugins, tạo thư mục mới tên là my-custom-block. Đây sẽ là nơi chứa toàn bộ mã nguồn plugin block.

2. Tạo file plugin chính

   Bên trong thư mục vừa tạo, thêm file my-custom-block.php với nội dung:

   <?php
   /**
    * Plugin Name: My Custom Block
    * Description: A simple custom Gutenberg block.
    * Version: 1.0
    * Author: Your Name
    */
   
   if ( ! defined( 'ABSPATH' ) ) {
       exit;
   }
   
   // Enqueue block editor assets
   function my_custom_block_editor_assets() {
       wp_enqueue_script(
           'my-custom-block-js',
           plugins_url( 'block.js', __FILE__ ),
           array( 'wp-blocks', 'wp-element', 'wp-editor' )
       );
   }
   add_action( 'enqueue_block_editor_assets', 'my_custom_block_editor_assets' );
   

3. Tạo file JavaScript cho Custom Block

   Tạo file block.js trong cùng thư mục plugin và copy đoạn mã sau:

   const { registerBlockType } = wp.blocks;
   const { RichText } = wp.editor;
   
   registerBlockType( 'my-plugin/my-custom-block', {
       title: 'My Custom Block',
       icon: 'smiley',
       category: 'layout',
   
       attributes: {
           content: {
               type: 'string',
               source: 'html',
               selector: 'p',
           },
       },
   
       edit( { attributes, setAttributes } ) {
           return (
               <div>
                   <RichText
                       tagName="p"
                       onChange={ ( content ) => setAttributes( { content } ) }
                       value={ attributes.content }
                       placeholder="Type your text here..."
                   />
               </div>
           );
       },
   
       save( { attributes } ) {
           return <RichText.Content tagName="p" value={ attributes.content } />;
       },
   } );
   

4. Kích hoạt plugin

   Quay lại WordPress Admin → Plugins. Tìm plugin My Custom Block và nhấn Activate.

5. Thêm block vào bài viết

   Mở trình chỉnh sửa Gutenberg → nhấn nút + → tìm My Custom Block để sử dụng block tùy chỉnh bạn vừa tạo.

Mở Rộng Custom Block – Tùy Chỉnh Màu Sắc, Kiểu Chữ Và Nhiều Hơn

Bạn có thể mở rộng block bằng cách thêm thuộc tính mới, chẳng hạn như màu sắc. Dưới đây là ví dụ:

1. Thêm thuộc tính màu sắc

attributes: {
    content: {
        type: 'string',
        source: 'html',
        selector: 'p',
    },
    color: {
        type: 'string',
        default: '#000000',
    },
},

2. Thêm Color Picker trong phần Edit

import { ColorPalette } from '@wordpress/components';

return (
    <div>
        <RichText
            tagName="p"
            style={ { color: attributes.color } }
            onChange={ ( content ) => setAttributes( { content } ) }
            value={ attributes.content }
        />

        <ColorPalette
            colors={[
                { name: 'Black', color: '#000000' },
                { name: 'Red', color: '#FF0000' },
            ]}
            value={ attributes.color }
            onChange={ ( color ) => setAttributes( { color } ) }
        />
    </div>
);

Kết Luận

Việc tạo custom block trong Gutenberg mở ra rất nhiều khả năng tùy biến mạnh mẽ cho WordPress. Dù bạn là người mới hay lập trình viên chuyên nghiệp, custom block luôn là phương pháp hiệu quả để xây dựng giao diện độc đáo, tối ưu quy trình và tăng trải nghiệm người dùng.

Khi bạn nắm vững quy trình tạo block, bạn có thể mở rộng thêm nhiều tính năng như background, border, spacing, icon, animation hoặc tạo block động với PHP. Đây chính là nền tảng quan trọng để phát triển theme và plugin chuyên nghiệp trong WordPress.