[Thủ Thuật WP] Gutenberg là gì? Tạo Custom Block Gutenberg trong WordPress

Gutenberg Block là gì?

Gutenberg là một Ứng dụng Trang đơn (SPA) dựa trên React cho phép người dùng WordPress tạo, chỉnh sửa và xóa nội dung trong WordPress.

Gutenberg là một trình soạn thảo hoàn toàn mới cho nền tảng WordPress 5.0+ được ra mắt vào ngày 6/12/2018. Nó làm thay đổi hoàn toàn cách bạn tạo bài đăng, trang, sản phẩm và mọi thứ khác trên trang web WordPress như trước đây.

Trong Gutenberg, nội dung được chia thành các block (khối), là những khối này có thể sử dụng để tạo các bài đăng và trang hoặc toàn bộ trang web của họ. 

Bạn có thể cần: Chuyển giao diện soạn thảo về Classic Editor cổ điển của WordPress

Vậy Block được hiểu như thế nào?

Khối (hay Block) là thuật ngữ trừu tượng được sử dụng để mô tả các đơn vị đánh dấu, được kết hợp với nhau, tạo thành nội dung hoặc bố cục của một trang web. Ý tưởng này được kết hợp từ nhiều khái niệm khác trong WordPress trước dây như các shortcodes, custom HTML ... và nhúng chúng thông qua API trong WordPress.

Ví dụ như các block Titles, paragraphs, columns, images, galleries ... bên trong khung số 1 là một trong những block được tạo sẵn trong thanh điều khiển tạo từ các components React.

Image

Vùng 1:  Block Inserter - Nơi chứa các khối loại block

Vùng 2: Block editor content area - Nơi editor/ soạn thảo nội dung chứa block

Vùng 3: Settings Sidebar - Vùng cấu hình cho nội dung, block, ...

Nội dung tạo bởi Gutenberg  trong WordPress sẽ được lưu như thế nào?

Mặc dù trình soạn thảo mới Gutenberg có nhiều khác biệt với người dùng nhưng nội dung và cách thức lưu trữ cũng không có gì khác so với trình soạn thảo cũ của WordPress.

Nguyên nhân bởi Gutenberg đơn giản chỉ là một ứng dụng bên trong WordPress không làm thay đổi core hay cách hoạt động cốt lõi của WordPress. Do đó dữ liệu post vẫn lưu dữ trong bảng wp_posts nhưng Class Editor như trước đây.

Một sự khác biệt duy nhất giữa Gutenberg và Class Editor do WordPress tạo nên có lẽ là nội dung của Gutenberg sẽ có một chút thông tin khác như thế này:

Image

Và trong database sẽ có dấu phân cách và định dạng hơi chút khác biệt để giúp WordPress nhận diện giữa 2 loại trình soạn thảo.

Image

Trên đây là đoạn chia sẽ để giúp bạn hiểu rõ hơn giữa Gutenberg block so với Class Editor trong WordPress.

Hướng dẫn tạo Custom Block Gutenberg bằng React

Để tạo được một Custom Block Gutenberg bạn cần có kiến thức cơ bản về JSX, React. Nhưng để mọi thứ đơn giản, bài viết chỉ sử dụng những công cụ được hỗ trợ sẵn:

1. Cài đặt Node.js và npm
2. Cài đặt môi trường development
3. Tạo một block plugin

Bước 1: Cài đặt Node.js và npm

Kiểm tra node đã cài đặt chưa bằng cách dùng lệnh sau trong terminal:

node -v

Nếu kết quả là "Command not found" bạn lên ngay trang chủ tại đây Node Installer để download và cài đặt tương ứng với hệ điều hành của bạn.

Bạn cũng có thể chạy lệnh npm -v để xem đã cài đặt npm chưa.

Sau khi cài đặt, bạn sẽ được trang bị các công cụ sau:

• npm - trình quản lý package dùng đẻ cài đặt và quản lý các packages.
• npx - là trình giúp chạy npm mà không cần cài đặt trước.

Bước 2: Cài đặt môi trường development

1. Cách 1: là sử dụng các tool như MAMP hay XAMPP
2. Cách 2: là sử dụng wp-env

Cách 1 khá đơn giản chỉ cần lên và download về rồi cài đặt.

Dưới đây là hướng dẫn cách 2

Bước 2.1: Cài đặt Docker và Node.js

Yêu cầu khi sử dụng cách 2 là bạn cần phải cài đặt docker và node.js trên máy tính. Bởi vì wp-env tạo một trang WordPress trên Docker instance, với bất cứ thay đổi code nào thì ngay lập tức hiển thị trên WordPress này.

Bước 2.2: Cài đặt @wordpress/env

Để cài đặt một wordpress bạn sử dụng lệnh

npm install -g @wordpress/env

• npm install cài đặt gói.

• -g được thêm vào lệnh cài đặt gói được chỉ định trên toàn cầu.

• @ wordpress / env là gói bạn sẽ cài đặt.

Sau đó kiểm tra cài đặt thành công chưa bằng lệnh:

wp-env --version

Để khởi tạo một website WordPress  bằng wp-env ta dùng lệnh:

wp-env start

Địa chỉ website WordPress là http://localhost:8888/ với thông tin tài khoản đăng nhập mặc định là admin và pass là password

Bước 3: Khởi tạo một Block Plugin

Cũng sẽ có 2 cách khởi tạo nhanh một Block Plugin được hỗ trợ như sau

Cách 1 : Sử dụng @wordpress/create-block

@wordpress/create-block là công cụ tạo khối Gutenberg nhanh chóng từ số 0.

Từ Command Line tool chuyển đến thư mục  /wp-content/plugins/ và chạy lệnh sau để tạo nhanh một block plugin

npx @wordpress/create-block my-first-block

Sau khi hoàn thành bạn vào trong Cài đặt Plugin sẽ thấy xuất hiện một plugin mới khởi tạo 

Image

Sau khi active Plugin này bạn sẽ thấy xuất hiện một block trong Gutenberg Block 

Image

Bây giờ đến thư mục my-first-block bằng lệnh 

cd my-first-block

Sau đó chạy lệnh

npm start

Như vậy Block Plugin đã được chạy trên môi trường dev, để tạo thành sản phẩm bạn chạy lệnh build sau

npm run build

Cách 2 : Sử dụng create-guten-block

create-guten-block là một toolkit cho lập trình viên tạo nhanh một Block Plugin mà không cần cấu hình React, Webpack,...

Tương tự cách trên cd vào thư mục /wp-content/plugins và chạy lệnh 

npx create-guten-block my-first-block

Sau khi active plugin mới tạo, để chạy được bạn dùng lệnh 

cd my-first-block
npm start

Để build plugin bạn dùng

npm run build

Như vậy là bạn đã tạo thành công một plugin block cho Gutenberg. Trong bài viết tiếp theo sẽ hướng dẫn chi tiết tạo một plugin đầu tiên.