Tìm hiểu Lập trình Block Frontend JS trong WordPress

Tổng quan về Lập trình Block Frontend JS trong WordPress

Lập trình Block Frontend JS trong WordPress đã mở ra một kỷ nguyên mới cho việc phát triển giao diện người dùng và trải nghiệm người dùng. Với sự ra đời của Gutenberg, Block Editor đã trở thành một phần không thể thiếu trong WordPress. Việc phát triển và tùy chỉnh các block cho phép các nhà phát triển và người dùng tạo ra những trải nghiệm độc đáo và tùy biến hơn cho website của mình. Trong bài viết này, chúng ta sẽ tìm hiểu về các khái niệm cơ bản, cách thức hoạt động và hướng dẫn lập trình block cho Frontend JS trong WordPress.

Các khái niệm cơ bản

Trước khi đi sâu vào lập trình, chúng ta cần nắm một số khái niệm cơ bản liên quan đến Block Editor trong WordPress:

  • Block (Khối): Là đơn vị cơ bản trong Gutenberg, được sử dụng để tạo nội dung. Mỗi block có thể chứa văn bản, hình ảnh, video và nhiều loại nội dung khác.

  • Block Type (Loại block): Là định nghĩa loại nội dung mà block có thể hiện thị, ví dụ như paragraph, image, gallery, và nhiều loại khác.

  • Attributes (Thuộc tính): Các thông tin bổ sung có thể được gán cho mỗi block, cho phép tùy chỉnh hành vi và thiết kế của block.

  • Editor (Trình chỉnh sửa): Nơi người dùng có thể tạo và chỉnh sửa nội dung bằng cách sắp xếp, thêm và chỉnh sửa các block.

Cấu trúc cơ bản của một Block

Mỗi block cần có một cấu trúc nhất định để có thể hoạt động trong Block Editor. Cấu trúc này bao gồm một số phần chính:

  1. Định nghĩa Block: Sử dụng hàm `registerBlockType` để tạo block mới.

  2. Render Function (Hàm render): Xác định nội dung và giao diện mà block sẽ hiển thị trên trình chỉnh sửa và cả trên front-end.

  3. Attributes (Thuộc tính): Xác định các thuộc tính cho block, cho phép người dùng tùy chỉnh.

  4. Styles (Phong cách): Áp dụng CSS cho block để thay đổi giao diện.

Cách tạo một Block đơn giản

Để bắt đầu lập trình một block đơn giản, chúng ta cần thực hiện các bước sau:

  1. Bước 1: Kết nối với môi trường phát triển của bạn. Đảm bảo rằng bạn đã cài đặt WordPress và có quyền truy cập vào thư mục theme của bạn.

  2. Bước 2: Tạo một file JavaScript mới trong thư mục của theme, ví dụ: `my-custom-block.js`.

  3. Bước 3: Trong file JavaScript, bạn cần đăng ký block bằng cách sử dụng `registerBlockType`. Ví dụ:



wp.blocks.registerBlockType('myplugin/my-custom-block', {

    title: 'My Custom Block',

    icon: 'smiley',

    category: 'design',

    attributes: {

        content: { type: 'string' },

    },

    edit({ attributes, setAttributes }) {

        return wp.element.createElement('textarea', {

            value: attributes.content,

            onChange(event) {

                setAttributes({ content: event.target.value });

            },

        });

    },

    save({ attributes }) {

        return wp.element.createElement('div', null, attributes.content);

    },

});

  • Bước 4: Tải file JavaScript vào giao diện sản phẩm của bạn trong file `functions.php`:


    • 
function my_custom_block_assets() {
    
    wp_enqueue_script(
    
        'my-custom-block',
    
        get_template_directory_uri() . '/my-custom-block.js',
    
        array('wp-blocks', 'wp-element', 'wp-editor'),
    
        true
    
    );
    
}
    
add_action('enqueue_block_editor_assets', 'my_custom_block_assets');

  • Bước 5: Lưu các thay đổi và vào trang chỉnh sửa bài viết trong WordPress để kiểm tra bộ block mới của bạn.

    • Tùy chỉnh giao diện Block với CSS

    Khi đã tạo được block cơ bản, bạn có thể muốn tùy chỉnh giao diện cho block của mình. Điều này có thể được thực hiện bằng cách thêm CSS vào file của theme hoặc bằng cách đăng ký các stylesheet cho block:


    
function my_custom_block_styles() {
    
    wp_enqueue_style(
    
        'my-custom-block-styles',
    
        get_template_directory_uri() . '/my-custom-block.css',
    
        array(),
    
        '1.0'
    
    );
    
}
    
add_action('enqueue_block_assets', 'my_custom_block_styles');

    Khi đó, bạn có thể tạo file `my-custom-block.css` để thay đổi phong cách cho block của mình.

    Kết luận

    Lập trình Block Frontend JS trong WordPress không chỉ giúp nâng cao kỹ năng lập trình mà còn mở ra cơ hội cho việc phát triển giao diện người dùng đa dạng và phong phú. Qua bài viết này, bạn đã được làm quen với các khái niệm cơ bản, cấu trúc của một block và cách tạo một block đơn giản. Hy vọng rằng những thông tin trên sẽ hữu ích cho bạn trong việc phát triển và cải thiện trải nghiệm người dùng cho website của mình trong tương lai.