Xây dựng khối Gutenberg tùy chỉnh: Hướng dẫn phát triển khối cuối cùng

Nhiều người phàn nàn về những trở ngại khi bắt đầu xây dựng các khối và ứng dụng Gutenberg. Đường cong học tập rất dốc, chủ yếu là do khó cài đặt và cấu hình môi trường phát triển. Ngoài ra, kiến thức vững chắc về JavaScript, Node.js, React và Redux là những thành phần bắt buộc phải có cho công thức khá phức tạp này.

Sổ tay biên tập viên khối WordPress chính thức cung cấp cho các nhà phát triển một lượng lớn thông tin, nhưng bạn có thể thấy mình bị lạc trong biển thông tin chi tiết đó.

Và điều đáng nói là Matías Ventura, kiến trúc sư chính của dự án Gutenberg, đã báo cáo trong cuộc phỏng vấn với WP Tavern:

Mặc dù có những người có thể học nó một cách nhanh chóng, nhưng đó vẫn là một rào cản lớn đối với mọi người. Tôi nghĩ rằng có một số lớp cho điều này; tài liệu có thể là một thứ tự lớn hơn trong cả tổ chức và trình bày. Tôi hy vọng chúng tôi có thể làm được nhiều hơn nữa ở đó.

Với ý nghĩ đó, chúng tôi đã quyết định cung cấp một hướng dẫn từng bước nhằm giúp người đọc của chúng tôi bắt đầu phát triển khối Gutenberg.

Nghe có vẻ thú vị? Hãy đi sâu vào!

Điều kiện tiên quyết để phát triển khối Gutenberg

Đối với hướng dẫn này, các kỹ năng bắt buộc duy nhất là kiến thức tốt về phát triển plugin WordPress và ít nhất là hiểu biết cơ bản về HTML, CSS, JavaScript và React.

Đây sẽ là một dự án đầy tham vọng? Bạn đặt cược nó sẽ được!

Thật không dễ dàng để tìm ra sự thỏa hiệp phù hợp giữa tính hoàn chỉnh và tính đơn giản hoặc quyết định chủ đề nào nên đưa vào và chủ đề nào nên loại bỏ.

Hy vọng rằng các độc giả trung cấp và cao cấp sẽ bỏ qua cho chúng tôi vì đã không đi sâu vào một số khái niệm như trạng thái React, cửa hàng Redux, các thành phần bậc cao, v.v. Các chủ đề này yêu cầu thêm không gian và sự chú ý và có thể quá nâng cao để bắt đầu phát triển khối (trừ khi bạn là nhà phát triển React).

Vì lý do tương tự, chúng tôi sẽ không đề cập đến một số chủ đề nâng cao hơn liên quan đến phát triển khối Gutenberg, chẳng hạn như khối động và hộp meta.

Với kiến thức bạn sẽ có được ở cuối bài viết này, bạn sẽ có thể bắt đầu vui vẻ và làm việc hiệu quả ngay lập tức.

Khi bạn bắt đầu xây dựng khối, bạn sẽ sẵn sàng cải thiện kỹ năng của mình hơn nữa và tự mình xây dựng các khối Gutenberg nâng cao hơn nữa.

 

Khối Gutenberg là gì?

Kể từ khi được phát hành lần đầu tiên vào tháng 12 năm 2018, trình chỉnh sửa khối đã được cải thiện rất nhiều về mọi mặt: API mạnh mẽ hơn, giao diện người dùng nâng cao hơn, khả năng sử dụng được cải thiện, rất nhiều khối mới, triển khai đầu tiên của Chỉnh sửa trang web đầy đủ và hơn thế nữa .

Nói tóm lại, ngay cả khi Gutenberg vẫn đang trong quá trình phát triển nặng, nó đã đi một chặng đường dài – và ngày nay, trình chỉnh sửa khối là một ứng cử viên chính thức với tư cách là một trình tạo trang và trang chức năng, đáng tin cậy.

Theo quan điểm của nhà phát triển, 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. Tuy nhiên, điều này không khiến bạn nghĩ đến phiên bản nâng cao của trình chỉnh sửa nội dung truyền thống.

Chúng tôi muốn làm rõ điều này:

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

Nhưng về mặt kỹ thuật thì một khối là gì?

Chúng tôi thích định nghĩa của WordPress:

“Khối” 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 nên nội dung hoặc bố cục của một trang web. Ý tưởng kết hợp các khái niệm về những gì trong WordPress ngày nay mà chúng ta đạt được với các mã ngắn, HTML tùy chỉnh và khám phá nhúng vào một API và trải nghiệm người dùng nhất quán duy nhất.

Tiêu đề, đoạn văn, cột, hình ảnh, thư viện và tất cả các phần tử tạo nên giao diện của trình soạn thảo, từ bảng điều khiển thanh bên đến các điều khiển thanh công cụ, đều là các thành phần của React.

Vậy, các thành phần React là gì? W3Schools cung cấp định nghĩa sau:

Các thành phần là các bit mã độc lập và có thể tái sử dụng. Chúng phục vụ cùng mục đích như các hàm JavaScript, nhưng hoạt động riêng lẻ và trả về HTML thông qua một hàm render() .

Mặc dù trải nghiệm chỉnh sửa do Gutenberg cung cấp là mới so với trình chỉnh sửa WordPress cổ điển, nhưng cách WordPress lưu trữ các phần nội dung của bạn trong cơ sở dữ liệu không thay đổi chút nào. Đó là bởi vì Gutenberg là một ứng dụng hoạt động trong WordPress nhưng không thay đổi cách thức hoạt động cốt lõi của CMS.

Các bài đăng (và điều này bao gồm các bài đăng, trang và các loại bài đăng tùy chỉnh) được tạo bằng Gutenberg vẫn được lưu trữ trong bảng wp_posts , chính xác như với trình chỉnh sửa cổ điển.

Nhưng trong một bài đăng được tạo bằng Gutenberg, bạn sẽ tìm thấy các bit thông tin bổ sung trong bảng thể hiện sự khác biệt cơ bản giữa các bài đăng được tạo qua Trình chỉnh sửa cổ điển và Gutenberg.

Những phần thông tin này trông giống như các nhận xét HTML và chúng có một chức năng cụ thể: phân định các khối:

Dấu phân cách khối cho WordPress biết khối nào sẽ được hiển thị trên màn hình. Chúng cũng cung cấp các giá trị cho các thuộc tính khối trong một đối tượng JSON. Các đạo cụ đó quy định cách khối sẽ được hiển thị trên màn hình:

Thiết lập môi trường phát triển WordPress của bạn

Thiết lập một môi trường phát triển JavaScript hiện đại đòi hỏi kiến thức vững chắc về các công nghệ tiên tiến như Webpack, React và JSX, Babel, ESLint, v.v.

Đe dọa? Đừng! Cộng đồng WordPress đã ra tay giải cứu bằng cách cung cấp các công cụ mạnh mẽ cho phép bạn tránh quá trình cấu hình thủ công lộn xộn.

Để giữ cho mọi thứ đơn giản, chúng tôi sẽ không đề cập đến chuyển ngữ trong bài viết này (tuy nhiên chúng tôi khuyên bạn nên tự làm quen khi bạn đã học được những kiến thức cơ bản về phát triển khối). Thay vào đó, chúng tôi sẽ giới thiệu hai công cụ thay thế mà bạn có thể sử dụng để thiết lập nhanh chóng và dễ dàng môi trường phát triển JavaScript hiện đại trong vài phút. Tùy thuộc vào bạn để chọn một trong những bạn thấy thuận tiện nhất cho dự án của bạn.

Thiết lập môi trường phát triển JavaScript để xây dựng các khối Gutenberg là một quy trình gồm ba bước:

1. Cài đặt Node.js và npm
2. Thiết lập môi trường phát triển
3. Thiết lập plugin khối

Bắt đầu nào.

1. Cài đặt Node.js và npm

Trước khi cài đặt môi trường phát triển và đăng ký khối đầu tiên, bạn cần cài đặt Node.js và trình quản lý gói Node (npm).

Bạn có thể cài đặt Node.js và npm theo nhiều cách khác nhau. Nhưng trước tiên, bạn có thể muốn kiểm tra xem phần mềm đã được cài đặt trên máy của mình chưa.

Để thực hiện việc này, hãy khởi chạy thiết bị đầu cuối và chạy lệnh sau:

node -v

Nếu kết quả là command not found , thì Node.js chưa được cài đặt trên máy tính của bạn và bạn có thể tiến hành cài đặt.

Đối với bài viết này, chúng tôi đã chọn tùy chọn cài đặt dễ dàng nhất, đó là Node Installer. Tất cả những gì bạn cần làm là tải xuống phiên bản tương ứng với hệ điều hành của bạn và khởi chạy trình hướng dẫn cài đặt:

Sau khi bạn đã cài đặt Node.js, hãy chạy lại node -v trong thiết bị đầu cuối của bạn. Bạn cũng có thể chạy lệnh npm -v để xác nhận rằng bạn có sẵn gói npm.

Bạn hiện được trang bị các công cụ sau:

• Trình chạy gói Node.js npx (xem tài liệu). Điều này cho phép bạn chạy lệnh npm mà không cần cài đặt trước.
• Trình quản lý gói npm Node.js (xem tài liệu). Điều này được sử dụng để cài đặt các phụ thuộc và chạy các tập lệnh.

Bước tiếp theo là cài đặt môi trường phát triển.

2. Thiết lập môi trường phát triển của bạn

Khi bạn có phiên bản mới nhất của Node.js và npm trên máy cục bộ của mình, bạn sẽ cần một môi trường phát triển cho WordPress.

Bạn có thể sử dụng môi trường phát triển cục bộ như DevKinsta hoặc sử dụng công cụ WordPress chính thức. Chúng ta hãy xem xét cả hai tùy chọn.

Lựa chọn 1: Môi trường phát triển địa phương (DevKinsta)

Chỉ với một vài cú nhấp chuột, bạn có thể cài đặt WordPress cục bộ bằng DevKinsta, công cụ phát triển WordPress cục bộ hiện đại của chúng tôi. Hoặc bạn có thể chọn một công cụ phát triển cục bộ khác, chẳng hạn như MAMP hoặc XAMPP:

Tùy chọn 2: wp-env

Bạn cũng có thể chọn sử dụng công cụ wp-env chính thức, công cụ này cung cấp môi trường dành cho nhà phát triển WordPress cục bộ mà bạn có thể khởi chạy trực tiếp từ dòng lệnh. Noah Alen định nghĩa nó như sau:

Môi trường WordPress cục bộ giờ đây đơn giản như chạy một lệnh duy nhất. wp-env là một công cụ cấu hình bằng không cho các môi trường WordPress cục bộ dễ dàng. Nó cung cấp các quyết định về các tùy chọn để người dùng có thể nhanh chóng tạo ra WordPress mà không mất thời gian. Thật vậy, mục tiêu là làm cho tất cả mọi người đều có thể dễ dàng truy cập những môi trường này – cho dù bạn là nhà phát triển, nhà thiết kế, người quản lý hay bất kỳ ai khác.

Nếu bạn quyết định dùng thử, việc cài đặt wp-env chỉ cần nỗ lực tối thiểu. Chỉ cần làm theo các bước sau:

Bước 1: Xác nhận Cài đặt Docker và Node.js

Để đáp ứng các yêu cầu kỹ thuật, trước tiên bạn cần phải cài đặt cả Docker và Node.js trên máy tính của mình. Đó là bởi vì wp-env tạo một phiên bản Docker chạy một trang web WordPress. Bất kỳ thay đổi nào được thực hiện đối với mã đều được phản ánh ngay lập tức trong phiên bản WordPress.

Bước 2: Cài đặt @wordpress/env từ Dòng lệnh

Với Docker và Node.js đang chạy trên máy tính của bạn, bạn có thể tiếp tục và cài đặt môi trường phát triển WordPress.

Bạn có thể cài đặt wp-env trên toàn cầu hoặc cục bộ. Để làm điều đó trên toàn cầu, bạn sẽ cần chạy lệnh sau từ trong thư mục plugin (thông tin thêm về điều này trong hộp thông báo “Quan trọng” bên dưới):

npm install -g @wordpress/env

Hãy chia nhỏ điều đó:

• npm install đặ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.

Để xác nhận rằng wp-env đã được cài đặt thành công, hãy chạy lệnh sau:

wp-env --version

Bạn sẽ thấy phiên bản wp-env hiện tại, có nghĩa là bây giờ bạn có thể khởi chạy môi trường bằng cách sử dụng lệnh sau từ thư mục plugin của bạn:

wp-env start

Bạn có thể truy cập trang tổng quan WordPress bằng địa chỉ sau:

• http: // localhost: 8888 / wp-admin /

Thông tin đăng nhập mặc định như sau:

• Tên người dùng: admin
• Mật khẩu: password

Thiết lập plugin khối của bạn

Bây giờ bạn cần một plugin khối khởi động để xây dựng. Nhưng thay vì tạo thủ công một plugin khối phát triển với tất cả các tệp và thư mục cần thiết, bạn có thể chỉ cần chạy một công cụ dành cho nhà phát triển cung cấp tất cả các tệp và cấu hình bạn cần để bắt đầu phát triển khối.

Một lần nữa, bạn có một số tùy chọn để lựa chọn. Chúng ta hãy xem xét từng.

Tùy chọn 1: Thiết lập Plugin chặn với @ wordpress / create-block

@ wordpress / create-block là công cụ cấu hình 0 chính thức để tạo khối Gutenberg:

Tạo khối là một cách được hỗ trợ chính thức để tạo khối để đăng ký khối cho một plugin WordPress. Nó cung cấp một thiết lập xây dựng hiện đại mà không cần cấu hình. Nó tạo mã PHP, JS, CSS và mọi thứ khác mà bạn cần để bắt đầu dự án.

Nó phần lớn được lấy cảm hứng từ ứng dụng tạo. Những lời khen ngợi lớn đối với @gaearon, toàn bộ nhóm Facebook và cộng đồng React.

Sau khi môi trường cục bộ của bạn được thiết lập và chạy, bạn có thể thiết lập khối khởi động bằng cách chỉ cần chạy lệnh npx @wordpress/create-block và nó sẽ cung cấp tất cả các tệp và thư mục bạn cần để tạo giàn cắm plugin và đăng ký một khối mới .

Hãy chạy thử nghiệm để xem nó hoạt động như thế nào.

Từ công cụ Dòng lệnh của bạn, điều hướng đến thư mục / wp-content / plugins / và chạy lệnh sau:

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

Khi được yêu cầu xác nhận, hãy nhập y để tiếp tục:

Quá trình này diễn ra trong vài phút. Khi quá trình hoàn tất, bạn sẽ nhận được phản hồi sau:

Và đó là nó!

Bây giờ khởi chạy môi trường phát triển WordPress của bạn và chuyển đến màn hình Plugin trong bảng điều khiển WordPress. Một plugin mới có tên “Khối đầu tiên của tôi” đã được thêm vào danh sách plugin của bạn:

Kích hoạt plugin nếu cần, tạo một bài đăng blog mới, cuộn xuống trình chèn khối đến phần Tiện ích và chọn khối mới của bạn:

Bây giờ quay lại terminal và thay đổi thư mục hiện tại thành my-first-block :

cd my-first-block

Sau đó chạy lệnh sau:

npm start

Điều này cho phép bạn chạy plugin ở chế độ phát triển. Để tạo mã sản xuất, bạn nên sử dụng lệnh sau:

npm run build

Tùy chọn 2: Thiết lập một plugin khối với create-guten-block

create-guten-block là một công cụ phát triển của bên thứ ba để xây dựng các khối Gutenberg:

create-guten-block là bộ công cụ dành cho nhà phát triển không cấu hình (# 0CJS) để phát triển các khối WordPress Gutenberg chỉ trong vài phút mà không cần định cấu hình React, webpack, ES6 / 7/8 / Next, ESLint, Babel, v.v.

Cũng giống như công cụ tạo create-block chính thức, create-guten-block dựa trên create-react-app và có thể giúp bạn tạo plugin khối đầu tiên của mình mà không gặp rắc rối.

Bộ công cụ cung cấp mọi thứ bạn cần để tạo một plugin WordPress hiện đại, bao gồm những thứ sau:

• Hỗ trợ cú pháp React, JSX và ES6.
• quy trình xây dựng webpack dev / production đằng sau hậu trường.
• Ngôn ngữ bổ sung ngoài ES6 như toán tử lây lan đối tượng.
• CSS có tiền tố tự động, vì vậy bạn không cần -webkit hoặc các tiền tố khác.
• Một tập lệnh xây dựng để gói JS, CSS và hình ảnh để sản xuất với bản đồ nguồn.
• Cập nhật dễ dàng cho các công cụ trên với một cgb-scripts phụ thuộc duy nhất.

Lưu ý cảnh báo sau:

Sự cân bằng là những công cụ này được cấu hình sẵn để hoạt động theo một cách cụ thể. Nếu dự án của bạn cần nhiều tùy chỉnh hơn, bạn có thể “đẩy ra” và tùy chỉnh nó, nhưng sau đó bạn sẽ cần duy trì cấu hình này.

Khi bạn đã có một trang web WordPress cục bộ trong tay, hãy khởi chạy công cụ Dòng lệnh, điều hướng đến thư mục / wp-content / plugins trong cài đặt của bạn và chạy lệnh sau:

npx create-guten-block my-first-block

Bạn sẽ phải đợi một hoặc hai phút trong khi cấu trúc dự án được tạo và tải xuống các phần phụ thuộc:

Khi quá trình hoàn tất, bạn sẽ thấy màn hình sau:

Hình ảnh tiếp theo này cho thấy cấu trúc dự án với thiết bị đầu cuối đang chạy trong Visual Studio Code:

Bây giờ quay lại bảng điều khiển WordPress của bạn. Một mục mới sẽ được liệt kê trong màn hình Plugin – đó là plugin khối đầu tiên của tôi :

Kích hoạt plugin và quay lại thiết bị đầu cuối. Thay đổi thư mục hiện tại thành khối đầu tiên của tôi , sau đó chạy npm start :

cd my-first-block npm start

Bạn sẽ nhận được phản hồi sau:

Một lần nữa, điều này cho phép bạn chạy plugin ở chế độ phát triển. Để tạo mã sản xuất, bạn nên sử dụng:

npm run build

Kích hoạt plugin và tạo một bài đăng hoặc trang mới, sau đó duyệt qua các khối của bạn và chọn khối Gutenberg hoàn toàn mới của bạn:

Để có cái nhìn tổng quan sâu hơn hoặc trong trường hợp có sai sót, hãy tham khảo tài liệu do Ahmad Awais cung cấp.

Hướng dẫn về giàn giáo khối khởi động

Bất kể công cụ nào trong hai công cụ phát triển – create-block hoặc create-guten-block – bạn chọn, giờ đây bạn có một giàn giáo khối mà bạn có thể sử dụng làm điểm khởi đầu để xây dựng một plugin khối.

Nhưng chính xác thì giàn giáo khối là gì?

Khối giàn giáo là một thuật ngữ viết tắt mô tả cấu trúc thư mục hỗ trợ mà bạn cần để WordPress nhận ra một khối. Thông thường, thư mục đó bao gồm các tệp như index.php , index.js , style.css và các tệp khác – lần lượt chứa các cuộc gọi như register_block_type .

Chúng tôi đã chọn công cụ dành cho nhà phát triển Tạo Khối chính thức, vì nó được sử dụng trong Sổ tay Trình chỉnh sửa Khối. Nhưng ngay cả khi bạn quyết định sử dụng công cụ của bên thứ ba như create-guten-block , trải nghiệm của bạn sẽ không quá khác biệt.

Như đã nói, chúng ta hãy đi sâu hơn vào công cụ create-block .

Xem xét kỹ hơn về công cụ tạo khối

Như chúng tôi đã đề cập ở trên, Create Block là công cụ dòng lệnh chính thức để tạo các khối Gutenberg. Chạy @wordpress/create-block trong thiết bị đầu cuối của bạn sẽ tạo ra các tệp PHP, JS và SCSS và mã cần thiết để đăng ký một loại khối mới:

npx @wordpress/create-block [options] [slug]

• [slug] (tùy chọn) – được sử dụng để gán block slug và cài đặt plugin
• [options] (tùy chọn) – tùy chọn có sẵn

Theo mặc định, một mẫu ESNext được chỉ định. Điều này có nghĩa là bạn sẽ nhận được phiên bản JavaScript tiếp theo, với việc bổ sung cú pháp JSX.

Nếu bạn bỏ qua tên khối, lệnh sẽ chạy ở chế độ tương tác, cho phép bạn tùy chỉnh một số tùy chọn trước khi tạo tệp:

npx @wordpress/create-block

Hình ảnh bên dưới cho thấy cấu trúc tệp của plugin khối được tạo bằng công cụ Tạo khối chính thức:

Như đã nói, hãy xem qua các tệp và thư mục chính của plugin khối mới của chúng tôi.

Tệp plugin

Với tệp plugin chính, bạn đăng ký khối trên máy chủ:

/** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

Hàm register_block_type đăng ký một loại khối trên máy chủ bằng cách sử dụng siêu dữ liệu được lưu trữ trong tệp block.json .

Hàm nhận hai tham số:

• Tên loại khối bao gồm không gian tên hoặc đường dẫn đến thư mục chứa tệp block.json hoặc đối tượng WP_Block_Type hoàn chỉnh
• Một mảng các đối số kiểu khối

Trong đoạn mã trên, đối số kiểu khối được cung cấp bởi hằng số ma thuật __DIR__ . Điều đó có nghĩa là tệp block.json nằm trong cùng thư mục với tệp của plugin.

Tệp package.json

Tệp package.json xác định các thuộc tính và tập lệnh JavaScript cho dự án của bạn. Đây là nơi bạn có thể cài đặt các phụ thuộc dự án của mình.

Để hiểu rõ hơn về mục đích của tệp này, hãy mở tệp bằng trình chỉnh sửa mã yêu thích của bạn:

{ "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { "build": "wp-scripts build", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

Thuộc tính scripts là một từ điển chứa các lệnh được chạy tại nhiều thời điểm khác nhau trong vòng đời của một gói sử dụng npm run [cmd] .

Trong bài viết này, chúng tôi sẽ sử dụng các lệnh sau:

• npm run build – tạo một phiên bản sản xuất (nén)
• npm run start – tạo một bản phát triển (không nén)

dependencies và devDependencies là hai đối tượng ánh xạ tên gói với một phiên bản. dependencies là bắt buộc trong sản xuất, trong khi devDependences chỉ cần thiết để phát triển cục bộ (đọc thêm).

Phần phụ thuộc nhà phát triển mặc định duy nhất là gói @wordpress/scripts , được định nghĩa là “một bộ sưu tập các tập lệnh có thể tái sử dụng được điều chỉnh để phát triển WordPress”.

Tệp block.json

Bắt đầu với WordPress 5.8, tệp siêu dữ liệu block.json là cách chuẩn để đăng ký các loại khối.

Có tệp block.json cung cấp một số lợi ích, bao gồm cải thiện hiệu suất và khả năng hiển thị tốt hơn trên Thư mục plugin WordPress:

Từ góc độ hiệu suất, khi các chủ đề hỗ trợ nội dung tải lười biếng, các khối được đăng ký với block.json sẽ có nội dung xếp hàng được tối ưu hóa ngay lập tức. Các nội dung CSS và JavaScript của giao diện người dùng được liệt kê trong thuộc tính style hoặc script sẽ chỉ được xếp vào hàng đợi khi khối hiện diện trên trang, dẫn đến kích thước trang giảm.

Chạy lệnh @wordpress/create-block sẽ tạo ra tệp block.json sau:

{ "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

Đây là danh sách đầy đủ các thuộc tính mặc định:

• apiVersion – phiên bản của API được khối sử dụng (phiên bản hiện tại là 2)
• name – một định danh duy nhất cho một khối bao gồm một không gian tên
• version – phiên bản hiện tại của một khối
• title – tiêu đề hiển thị cho một khối
• category – một thể loại khối
• icon – một con sên Dashicon hoặc một biểu tượng SVG tùy chỉnh
• description – một mô tả ngắn có thể nhìn thấy trong trình kiểm tra khối
• supports – một tập hợp các tùy chọn để kiểm soát các tính năng được sử dụng trong trình chỉnh sửa
• textdomain – tên miền văn bản plugin
• editorScript – định nghĩa tập lệnh biên tập
• editorStyle – định nghĩa kiểu trình soạn thảo
• style – cung cấp các kiểu thay thế cho một khối

Ngoài các thuộc tính được liệt kê ở trên, bạn có thể (và có thể sẽ) xác định một đối tượng attributes cung cấp thông tin về dữ liệu được lưu trữ bởi khối của bạn. Trong block.json của bạn, bạn có thể đặt bất kỳ số lượng thuộc tính nào trong các cặp khóa / giá trị , trong đó khóa là tên thuộc tính và giá trị là định nghĩa thuộc tính.

Hãy xem ví dụ sau về các định nghĩa thuộc tính:

"attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

Chúng ta sẽ đi sâu hơn vào tệp block.json trong phần sau của bài viết, nhưng bạn cũng có thể muốn xem Sổ tay trình chỉnh sửa khối để biết thêm thông tin chi tiết về siêu dữ liệu và thuộc tính block.json .

Thư mục src

Thư mục src là nơi diễn ra quá trình phát triển. Trong thư mục đó, bạn sẽ tìm thấy các tệp sau:

• index.js
• edit.js
• save.js
• editor.scss
• style.scss

index.js

Tệp index.js là điểm bắt đầu của bạn. Tại đây, bạn sẽ nhập các phần phụ thuộc và đăng ký loại khối trên máy khách:

import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

Câu lệnh đầu tiên nhập hàm registerBlockType từ gói @wordpress/blocks . Các câu lệnh nhập sau đây nhập biểu định kiểu cùng với các chức năng Edit và save .

Hàm registerBlockType đăng ký thành phần trên máy khách. Hàm nhận hai tham số: namespace/block-name (giống như đã đăng ký trên máy chủ) và đối tượng cấu hình khối.

Chức năng Edit cung cấp giao diện khối như được hiển thị trong trình chỉnh sửa khối, trong khi chức năng save cung cấp cấu trúc sẽ được tuần tự hóa và lưu vào cơ sở dữ liệu (đọc thêm).

edit.js

edit.js là nơi bạn sẽ xây dựng giao diện quản trị khối:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

Đầu tiên, nó nhập hàm __ từ gói @wordpress/i18n (gói này chứa phiên bản JavaScript của các hàm dịch), useBlockProps React và tệp editor.scss .

Sau đó, nó xuất thành phần React (đọc thêm về các câu lệnh nhập và xuất).

save.js

Tệp save.js là nơi chúng tôi xây dựng cấu trúc khối để lưu vào cơ sở dữ liệu:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scss và style.scss

Ngoài các tập lệnh, hai tệp SASS nằm trong các thư mục src . Tệp editor.scss chứa các kiểu được áp dụng cho khối trong ngữ cảnh của trình soạn thảo, trong khi tệp style.scss chứa các kiểu của khối để hiển thị trong giao diện người dùng cũng như trong trình chỉnh sửa. Chúng tôi sẽ đi sâu hơn vào các tệp này trong phần thứ hai của hướng dẫn này.

Các mô-đun nút và xây dựng các Thư mục

Thư mục node_modules chứa các mô-đun nút và các phụ thuộc của chúng. Chúng tôi sẽ không đi sâu hơn vào các gói nút vì nó nằm ngoài phạm vi của bài viết này, nhưng bạn có thể đọc thêm trong bài viết này về nơi npm cài đặt các gói.

Thư mục build chứa các tệp JS và CSS tạo ra từ quá trình xây dựng. Bạn có thể đi sâu hơn vào quá trình xây dựng trong cú pháp ESNext và hướng dẫn Thiết lập bản dựng JavaScript.

Dự án: Xây dựng khối Gutenberg đầu tiên của bạn

Đã đến lúc chúng ta phải làm bẩn tay. Phần này sẽ hướng dẫn bạn cách tạo một plugin cung cấp khối CTA có tên Khối liên kết.

Khối sẽ bao gồm hai cột, với một hình ảnh ở bên trái và một đoạn văn bản ở bên phải. Một nút có liên kết có thể tùy chỉnh sẽ được đặt bên dưới văn bản:

Đây chỉ là một ví dụ đơn giản, nhưng nó cho phép chúng ta bao quát những điều cơ bản về phát triển khối Gutenberg. Khi bạn đã hiểu rõ những điều cơ bản, bạn có thể tiếp tục và tạo các khối Gutenberg ngày càng phức tạp hơn với sự trợ giúp của Sổ tay Trình chỉnh sửa Khối và bất kỳ tài nguyên rộng lớn nào khác có sẵn trên mạng.

Giả sử rằng bạn có phiên bản WordPress mới nhất đang chạy trên môi trường phát triển cục bộ của mình, đây là những gì bạn sẽ học được từ đây về sau:

• Cách thiết lập plugin khối khởi động
• block.json tại nơi làm việc
• Sử dụng các thành phần tích hợp: Thành phần RichText
• Thêm Điều khiển vào Thanh công cụ Chặn
• Tùy chỉnh Thanh bên cài đặt khối
• Thêm và tùy chỉnh một liên kết bên ngoài
• Thêm nhiều kiểu khối
• Lồng các khối với thành phần InnerBlocks
• Cải tiến bổ sung

Sẵn sàng… thiết lập… đi!

Cách thiết lập plugin khối khởi động

Khởi chạy công cụ dòng lệnh của bạn và điều hướng đến thư mục / wp-content / plugins :

Bây giờ, hãy chạy lệnh sau:

npx @wordpress/create-block

Lệnh này tạo các tệp PHP, SCSS và JS để đăng ký một khối ở chế độ tương tác, cho phép bạn thêm dữ liệu cần thiết cho khối của mình một cách dễ dàng. Đối với ví dụ của chúng tôi, chúng tôi sẽ sử dụng các chi tiết sau:

• Block slug : my-affiliate-block
• Không gian tên nội bộ : my-affiliate-plugin
• Khối hiển thị tiêu đề : Khối liên kết
• Mô tả khối ngắn : Một khối mẫu cho trình đọc Kinsta
• Dashicon : tiền
• Tên thể loại : thiết kế
• Tác giả plugin : tên của bạn
• Giấy phép : –
• Liên kết đến văn bản giấy phép : –
• Phiên bản plugin hiện tại : 0.1.0

Cài đặt plugin và tất cả các phụ thuộc mất vài phút. Khi quá trình hoàn tất, bạn sẽ thấy phản hồi sau:

Bây giờ, hãy chạy lệnh sau từ thư mục / wp-content / plugins :

cd my-affiliate-block

Cuối cùng, từ trong thư mục plugin của bạn ( my-affiliate-block trong ví dụ của chúng tôi), bạn có thể bắt đầu phát triển với:

npm start

Bây giờ, hãy mở màn hình Plugin để tìm và kích hoạt plugin Khối liên kết :

Tạo một bài đăng mới, mở trình chèn khối và cuộn xuống danh mục Thiết kế . Nhấp để thêm Khối liên kết:

block.json tại nơi làm việc

Như chúng tôi đã đề cập trước đó, đăng ký khối phía máy chủ diễn ra trong tệp .php chính. Tuy nhiên, chúng tôi sẽ không xác định cài đặt trong tệp .php . Thay vào đó, chúng tôi sẽ sử dụng tệp block.json .

Vì vậy, hãy mở lại block.json và xem kỹ cài đặt mặc định:

{ "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

Tập lệnh và kiểu

editorScript , editorStyle và style cung cấp các đường dẫn tương đối đến các tập lệnh và kiểu frontend và backend.

Bạn không cần phải đăng ký thủ công các tập lệnh và kiểu được xác định ở đây vì chúng được WordPress tự động đăng ký và xếp hàng. Để chứng minh điều đó, hãy khởi chạy trình kiểm tra trình duyệt và mở tab Mạng :

Như bạn có thể thấy từ hình trên, tập lệnh index.js của chúng tôi nằm trong thư mục xây dựng thường xuyên được xếp vào hàng mà không cần phải thêm bất kỳ mã PHP nào .

Nhãn giao diện người dùng

Thuộc tính title và description cung cấp các nhãn cần thiết để xác định khối trong trình chỉnh sửa:

Từ khóa

Như chúng tôi đã đề cập trước đó, bạn có thể định cấu hình chính xác cài đặt khối của mình bằng cách sử dụng thuộc tính và thuộc tính. Ví dụ: bạn có thể thêm một hoặc nhiều keywords để giúp người dùng khối tìm kiếm:

{ "keywords": [ "kinsta", "affiliate", "money" ] }

Nếu bây giờ bạn nhập “kinsta”, “affiliate” hoặc “money” vào trình chèn nhanh, trình chỉnh sửa sẽ đề xuất cho bạn khối Affiliate:

Bản địa hóa

Nếu bạn đang tự hỏi bản địa hóa các chuỗi trong tệp JSON diễn ra như thế nào, thì đây là câu trả lời:

Trong JavaScript, bây giờ bạn có thể sử dụng phương thức registerBlockTypeFromMetadata từ gói @wordpress/blocks để đăng ký một loại khối bằng cách sử dụng siêu dữ liệu được tải từ tệp block.json . Tất cả các thuộc tính bản địa hóa được tự động gói trong các lệnh gọi hàm _x (từ @wordpress/i18n ) tương tự như cách nó hoạt động trong PHP với register_block_type_from_metadata . Yêu cầu duy nhất là đặt thuộc tính miền văn bản trong tệp block.json textdomain

Ở đây chúng tôi đang sử dụng hàm registerBlockType thay vì registerBlockTypeFromMetadata , vì hàm này đã không được dùng nữa kể từ Gutenberg 10.7, nhưng cơ chế vẫn như cũ.

Sử dụng các thành phần tích hợp: Thành phần RichText

Các phần tử tạo nên khối Gutenberg là các thành phần React và bạn có thể truy cập các thành phần này thông qua biến toàn cục wp . Ví dụ: hãy thử nhập wp.editor vào bảng điều khiển của trình duyệt của bạn. Điều này sẽ cung cấp cho bạn danh sách đầy đủ các thành phần có trong mô-đun wp.editor .

Cuộn qua danh sách và đoán tên của chúng có nghĩa là gì.

Tương tự, bạn có thể kiểm tra danh sách các thành phần có trong mô-đun wp.components :

Bây giờ quay lại tệp edit.js và xem xét kỹ hơn tập lệnh:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

Mã này tạo một khối tĩnh với văn bản đơn giản, không thể chỉnh sửa. Nhưng chúng ta có thể thay đổi mọi thứ một cách dễ dàng:

Để làm cho văn bản có thể chỉnh sửa được, bạn sẽ phải thay thế <p> hiện tại bằng một thành phần làm cho nội dung đầu vào có thể chỉnh sửa được. Vì vậy, Gutenberg cung cấp thành phần RichText tích hợp sẵn.

Thêm một thành phần tích hợp vào khối của bạn là một quy trình gồm 5 bước:

1. Nhập các thành phần bắt buộc từ một gói WordPress
2. Bao gồm các phần tử tương ứng vào mã JSX của bạn
3. Xác định các thuộc tính cần thiết trong tệp block.json
4. Xác định trình xử lý sự kiện
5. Lưu dữ liệu

Bước 1: Nhập các thành phần bắt buộc từ gói WordPress

Bây giờ, hãy mở tệp edit.js và thay đổi câu lệnh import sau:

import { useBlockProps } from '@wordpress/block-editor';

…đến:

import { useBlockProps, RichText } from '@wordpress/block-editor';

Bằng cách này, bạn đang nhập hàm useBlockProps và thành phần RichText từ gói @wordpress/block-editor .

useBlockProps

useBlockProps React đánh dấu phần tử bao bọc của khối:

Khi sử dụng API phiên bản 2, bạn phải sử dụng hook useBlockProps mới trong chức năng edit của khối để đánh dấu phần tử bao bọc của khối. Hook sẽ chèn các thuộc tính và trình xử lý sự kiện cần thiết để kích hoạt hành vi khối. Bất kỳ thuộc tính nào bạn muốn chuyển cho phần tử khối phải được chuyển qua useBlockProps và giá trị trả về sẽ được lan truyền vào phần tử.

Nói một cách đơn giản, useBlockProps tự động gán các thuộc tính và lớp cho phần tử trình bao bọc (phần tử p trong ví dụ của chúng tôi):

Nếu bạn xóa useBlockProps khỏi phần tử trình bao bọc, bạn sẽ có một chuỗi văn bản đơn giản không có quyền truy cập vào chức năng và kiểu khối:

Như chúng tôi sẽ giải thích ở phần sau, bạn cũng có thể chuyển tới useBlockProps một đối tượng thuộc tính để tùy chỉnh đầu ra.

RichText

Thành phần RichText cung cấp đầu vào có thể chỉnh sửa nội dung, cho phép người dùng chỉnh sửa và định dạng nội dung.

Bạn sẽ tìm thấy thành phần được ghi lại trên GitHub tại gutenberg / pack / block-editor / src / components / rich-text / README.md.

Bước 2: Đưa các yếu tố tương ứng vào mã JSX của bạn

... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

Hãy bình luận từng dòng mã:

• tagName – tên thẻ của phần tử HTML có thể chỉnh sửa
• onChange – hàm được gọi khi nội dung của phần tử thay đổi
• allowedFormats – một mảng các định dạng được phép. Theo mặc định, tất cả các định dạng đều được phép
• value – chuỗi HTML để có thể chỉnh sửa
• placeholder – văn bản trình giữ chỗ để hiển thị khi phần tử trống

Bước 3: Xác định các thuộc tính cần thiết trong tệp block.json

Các thuộc tính cung cấp thông tin về dữ liệu được lưu trữ bởi một khối, chẳng hạn như nội dung phong phú, màu nền, URL, v.v.

Bạn có thể đặt một số thuộc tính tùy ý trong một đối tượng attributes trong các cặp khóa / giá trị, trong đó khóa là tên thuộc tính và giá trị là định nghĩa thuộc tính.

Bây giờ, hãy mở tệp block.json và thêm các attributes prop sau:

"attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

Thuộc tính content cho phép lưu trữ văn bản do người dùng nhập vào trường có thể chỉnh sửa:

• type cho biết loại dữ liệu được lưu trữ bởi thuộc tính. Kiểu này là bắt buộc trừ khi bạn xác định thuộc tính enum .
• source xác định cách giá trị thuộc tính được trích xuất từ nội dung bài đăng. Trong ví dụ của chúng tôi, đó là nội dung HTML. Lưu ý rằng nếu bạn không cung cấp thuộc tính nguồn, dữ liệu sẽ được lưu trữ trong dấu phân cách khối (đọc thêm).
• selector là thẻ HTML hoặc bất kỳ bộ chọn nào khác, chẳng hạn như tên lớp hoặc thuộc tính id.

Chúng ta sẽ chuyển cho hàm Edit một đối tượng của các thuộc tính. Vì vậy, hãy quay lại tệp edit.js và thực hiện thay đổi sau:

export default function Edit( { attributes, setAttributes } ) { ... }

Bước 4: Xác định trình xử lý sự kiện

Phần tử RichText có thuộc tính onChange , cung cấp một hàm để gọi khi nội dung của phần tử thay đổi.

Hãy xác định hàm đó và xem toàn bộ tập lệnh edit.js :

import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

Bây giờ hãy lưu tệp và chạy npm run start trong cửa sổ đầu cuối của bạn. Sau đó, quay lại bảng điều khiển WordPress của bạn, tạo một bài đăng hoặc trang mới và thêm khối Liên kết của bạn:

Thêm một số văn bản và chuyển sang Chế độ xem mã. Đây là mã của bạn sẽ trông như thế nào:

<!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block ?</p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

Nếu bây giờ bạn lưu trang và kiểm tra kết quả giao diện người dùng, bạn có thể hơi thất vọng vì những thay đổi của bạn không ảnh hưởng đến trang web. Đó là bởi vì bạn phải sửa đổi tệp save.js để lưu trữ thông tin đầu vào của người dùng trong cơ sở dữ liệu khi bài đăng được lưu.

Bước 5: Lưu dữ liệu

Bây giờ, hãy mở tệp save.js và thay đổi tập lệnh như sau:

import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

Đó là những gì chúng tôi đang làm ở đây:

• Nhập thành phần RichText từ gói trình chỉnh sửa block-editor .
• Chuyển một số thuộc tính thông qua một đối số đối tượng vào hàm save (trong ví dụ này, chúng tôi chỉ truyền attributes )
• Trả lại nội dung của thành phần RichText

Bạn có thể đọc thêm về thành phần RichText trong Sổ tay trình chỉnh sửa khối và tìm danh sách đầy đủ các đạo cụ trên Github.

Bây giờ chúng ta hãy tiến thêm một bước nữa. Trong phần tiếp theo, bạn sẽ tìm hiểu cách thêm các điều khiển vào thanh công cụ khối.

Thêm Điều khiển vào Thanh công cụ Chặn

Thanh công cụ khối chứa một tập hợp các điều khiển cho phép người dùng thao tác các phần của nội dung khối. Đối với mỗi điều khiển thanh công cụ, bạn sẽ tìm thấy một thành phần:

Ví dụ: bạn có thể thêm điều khiển căn chỉnh văn bản cho khối của mình. Tất cả những gì bạn cần làm là nhập hai thành phần từ gói @wordpress/block-editor .

Chúng ta sẽ thực hiện các bước tương tự như ví dụ trước:

1. Nhập các thành phần bắt buộc từ các gói WordPress
2. Bao gồm các yếu tố tương ứng vào mã JSX của bạn
3. Xác định các thuộc tính cần thiết trong tệp block.json
4. Xác định trình xử lý sự kiện
5. Lưu dữ liệu

Bước 1: Nhập các thành phần BlockControls và AlignmentControl từ @ wordpress / block-editor

Để thêm điều khiển căn chỉnh vào thanh công cụ khối, bạn cần hai thành phần:

• BlockControls hiển thị một thanh công cụ động gồm các điều khiển (không có tài liệu).
• AlignmentControl hiển thị menu thả xuống hiển thị các tùy chọn căn chỉnh cho khối đã chọn (đọc thêm)

Mở tệp edit.js và chỉnh sửa câu lệnh import như được hiển thị bên dưới:

import { useBlockProps, RichText, AlignmentControl, BlockControls } from '@wordpress/block-editor';

Bước 2: Thêm các phần tử BlockControls và AlignmentControl

Đi tới chức năng Edit và chèn phần tử <BlockControls /> ở cùng cấp với <RichText /> . Sau đó, thêm và <AlignmentControl /> trong <BlockControls /> :

export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

Trong đoạn mã trên, <> và </> là cú pháp ngắn gọn để khai báo các đoạn React, đây là cách chúng ta trả về nhiều phần tử trong React.

Trong ví dụ này, AlignmentControl có hai thuộc tính:

• value cung cấp giá trị hiện tại cho phần tử
• onChange cung cấp một trình xử lý sự kiện để chạy khi giá trị thay đổi

Chúng tôi cũng đã xác định các thuộc tính bổ sung cho phần tử RichText (kiểm tra danh sách đầy đủ các thuộc tính kèm theo các ví dụ)

Bước 3: Xác định thuộc tính căn chỉnh trong block.json

Bây giờ, hãy truy cập tệp block.json và thêm thuộc tính align :

"align": { "type": "string", "default": "none" }

Quay lại terminal, dừng quá trình hiện tại với ^C và bắt đầu lại tập lệnh với npm run start . Sau đó quay lại trình chỉnh sửa khối, làm mới trang và chọn khối. Bạn sẽ thấy thanh công cụ khối có điều khiển căn chỉnh:

Bây giờ, nếu bạn cố gắng định dạng nội dung khối bằng các điều khiển căn chỉnh mới, bạn sẽ thấy rằng không có gì xảy ra. Đó là bởi vì chúng tôi chưa xác định trình xử lý sự kiện.

Bước 4: Xác định Trình xử lý sự kiện

Bây giờ hãy xác định onChangeAlign :

const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

Nếu newAlign không được undefined , thì chúng tôi đặt newAlign thành none . Nếu không, chúng tôi sử dụng newAlign .

Tập lệnh edit.js của chúng tôi sẽ hoàn chỉnh (hiện tại):

export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

Bây giờ bạn có thể quay lại trình chỉnh sửa và căn chỉnh nội dung khối.

Chúng ta cần sửa đổi chức năng lưu để lưu trữ nội dung khối và các thuộc tính trong cơ sở dữ liệu.

Bước 5: Lưu dữ liệu

Mở save.js và thay đổi chức năng save như sau:

export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

Cuối cùng, để làm cho mã dễ đọc hơn, bạn có thể trích xuất các thuộc tính riêng lẻ từ đối tượng attribute bằng cách sử dụng cú pháp gán hủy cấu trúc:

export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

Lưu tệp, khởi động lại quá trình và quay lại trình chỉnh sửa ở chế độ Trình chỉnh sửa mã. Mã sẽ trông giống như sau:

<!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block" style="text-align:right">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> ?</p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

Và đó là nó! Bạn vừa thêm một điều khiển căn chỉnh vào thanh công cụ khối ?

Bạn có thể đọc thêm về các điều khiển thanh công cụ khối trong Sổ tay Trình chỉnh sửa Khối.

Tùy chỉnh Thanh bên cài đặt khối

Bạn cũng có thể thêm các điều khiển vào Thanh bên cài đặt khối (hoặc thậm chí tạo một thanh bên mới cho ứng dụng của bạn).

API cung cấp một thành phần InspectorControls cho điều đó.

Sổ tay Trình chỉnh sửa Khối giải thích cách sử dụng Thanh bên Cài đặt:

Thanh bên Cài đặt được sử dụng để hiển thị các cài đặt ít được sử dụng hơn hoặc các cài đặt yêu cầu nhiều không gian màn hình hơn. Thanh bên Cài đặt chỉ nên được sử dụng cho cài đặt cấp khối .

Nếu bạn có cài đặt chỉ ảnh hưởng đến nội dung đã chọn bên trong một khối (ví dụ: cài đặt “in đậm” cho văn bản đã chọn bên trong đoạn văn): không đặt nó bên trong Thanh bên cài đặt. Thanh bên Cài đặt được hiển thị ngay cả khi chỉnh sửa khối ở chế độ HTML, vì vậy, nó chỉ nên chứa các cài đặt cấp khối.

Lại:

1. Nhập các thành phần bắt buộc từ các gói WordPress
2. Bao gồm các yếu tố tương ứng vào mã JSX của bạn
3. Xác định các thuộc tính cần thiết trong tệp block.json
4. Xác định trình xử lý sự kiện
5. Lưu dữ liệu

Bước 1. Nhập các thành phần InspectorControls và PanelColorSettings từ @ wordpress / block-editor

Bạn có thể thêm một số điều khiển để cho phép người dùng tùy chỉnh các khía cạnh cụ thể của khối. Ví dụ: bạn có thể cung cấp một bảng điều khiển màu. Để làm như vậy, bạn sẽ cần nhập các thành phần InspectorControls và PanelColorSettings từ mô-đun trình chỉnh sửa block-editor :

import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

Bước 2: Đưa các yếu tố tương ứng vào mã JSX của bạn

Bây giờ bạn có thể thêm các phần tử tương ứng vào JSX được trả về bởi chức năng Edit :

export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

Lưu ý rằng chúng tôi cũng đã cập nhật thuộc tính style của phần tử RichText :

<RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

Bước 3: Xác định các thuộc tính cần thiết trong block.json

Bây giờ hãy xác định các thuộc tính backgroundColor và textColor trong tệp block.json :

"attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

Bước 4: Xác định Trình xử lý sự kiện

Bây giờ bạn cần xác định hai chức năng để cập nhật backgroundColor và textColor trên đầu vào của người dùng:

const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

Bước 5: Lưu dữ liệu

Một bước cuối cùng: Mở tệp save.js và thay đổi tập lệnh như sau:

export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

Bây giờ dừng quá trình (^ C) và chạy npm run start lại. Làm mới trang, xóa bất kỳ trường hợp nào trong khối của bạn và thêm lại vào bài đăng của bạn:

Thực hiện các thay đổi của bạn, lưu bài đăng và xem nó trong giao diện người dùng. Những thay đổi bạn đã thực hiện trong trình chỉnh sửa khối sẽ được phản ánh trên trang web chính.

Thêm và tùy chỉnh một liên kết bên ngoài

Trong phần này, bạn sẽ thêm các thành phần mới vào loại khối của mình:

• Thành phần ExternalLink cho phép người dùng thêm liên kết có thể tùy chỉnh vào khối Đơn vị liên kết
• Một số điều khiển thanh bên cho phép người dùng tùy chỉnh cài đặt liên kết

Bước 1. Nhập các thành phần từ @ wordpress / components

Bây giờ bạn cần nhập một số thành phần từ @wordpress/components . Mở tệp edit.js của bạn và thêm câu lệnh import sau:

import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBody thêm một vùng chứa có thể thu gọn vào Thanh bên cài đặt.
• PaneRow tạo một vùng chứa chung cho các điều khiển thanh bên.
• TextControl cung cấp một điều khiển nhập văn bản.
• ToggleControl cung cấp một nút chuyển đổi cho phép người dùng bật / tắt một tùy chọn cụ thể
• ExternalLink là một thành phần đơn giản để thêm một liên kết bên ngoài.

Bước 2. Đưa các yếu tố tương ứng vào mã JSX của bạn

Trước tiên, bạn sẽ thêm phần tử ExternalLink ở cùng cấp độ RichText trong vùng chứa div :

<div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

Thành phần ExternalLink không được ghi lại, vì vậy chúng tôi đã tham chiếu đến chính thành phần đó để lấy danh sách các thuộc tính có sẵn. Ở đây chúng tôi đang sử dụng các thuộc tính href , className và rel .

Theo mặc định, giá trị thuộc tính rel được đặt thành noopener noreferrer . Mã của chúng tôi sẽ thêm từ khóa nofollow vào thuộc tính rel của thẻ a quả khi điều khiển chuyển đổi được bật .

Bây giờ bạn có thể thêm cài đặt liên kết vào thanh bên khối.

Đầu tiên, bạn sẽ thêm một phần tử PanelBody vào bên trong InspectorControls ở cùng cấp với PanelColorSettings :

<InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

Đây là những gì chúng tôi đang làm với điều này:

1. Thuộc tính title cung cấp tiêu đề bảng điều khiển.
2. initialOpen đầu, mở đặt có hay không ban đầu mở bảng điều khiển.

Tiếp theo, chúng ta sẽ thêm hai phần tử PanelRow bên trong PanelBody và một phần tử TextControl bên trong mỗi PanelRow :

<PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

Đoạn mã trên bây giờ trông khá đơn giản. Hai điều khiển văn bản cho phép người dùng đặt nhãn liên kết và URL.

Chúng tôi cũng sẽ thêm một ToggleControl bổ sung với PanelRow để bật / tắt một tùy chọn cụ thể, chẳng hạn như có bao gồm một thuộc tính hay không:

<PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

Bước 3: Xác định các thuộc tính cần thiết trong block.json

Bây giờ hãy xác định các thuộc tính affiliateLink , linkLabel và hasLinkNofollow trong tệp block.json :

"affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

Không có gì thêm để thêm ở đây! Hãy chuyển sang định nghĩa các chức năng xử lý sự kiện.

Bước 4: Xác định Trình xử lý sự kiện

Quay lại tệp edit.js và thêm các chức năng sau:

const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

Các hàm này cập nhật các giá trị thuộc tính tương ứng trên đầu vào của người dùng.

Bước 5: Lưu dữ liệu

Cuối cùng, chúng ta phải cập nhật chức năng save trong save.js :

export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

Lưu ý rằng ở đây chúng tôi đã sử dụng a phần tử thông thường thay vì ExternalLink :

Bây giờ hãy lưu dữ liệu và khởi động lại môi trường của bạn.

Thêm nhiều kiểu khối

Trong phần trước, bạn đã học cách thêm điều khiển thanh công cụ khối cho phép người dùng căn chỉnh đầu vào của người dùng. Chúng tôi có thể thêm nhiều điều khiển kiểu hơn vào thanh công cụ khối, nhưng chúng tôi cũng có thể cung cấp một tập hợp các kiểu khối được xác định trước mà người dùng có thể chọn chỉ với một cú nhấp chuột.

Vì mục đích này, chúng tôi sẽ sử dụng một tính năng hữu ích của API khối: Kiểu khối.

Tất cả những gì bạn cần làm là xác định thuộc tính styles block.json và khai báo các style tương ứng trong các bảng định kiểu của bạn.

Ví dụ: bạn có thể thêm mảng kiểu sau:

"styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

Với điều này, bạn vừa thêm một kiểu mặc định và một kiểu bổ sung được gọi là border . Bây giờ quay lại trình chỉnh sửa khối:

Các kiểu sẽ có sẵn cho người dùng bằng cách nhấp vào trình chuyển đổi khối và sau đó tìm bảng Kiểu trong Thanh bên Cài đặt Khối .

Chọn một kiểu và kiểm tra các lớp được áp dụng cho phần tử p . Nhấp chuột phải vào khối và Kiểm tra . Một lớp mới đã được thêm vào với tên có cấu trúc như sau:

is-style-{style-name}

Nếu bạn đã chọn kiểu “Border”, thì một lớp is-style-border sẽ được thêm vào phần tử p . Nếu bạn đã chọn kiểu “Mặc định”, thì thay vào đó, một lớp is-style-default sẽ được thêm vào.

Bây giờ bạn chỉ phải khai báo các thuộc tính CSS. Mở tệp editor.scss và thay thế các kiểu hiện tại bằng kiểu sau:

.wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; }

Bây giờ bạn có thể làm tương tự với style.scss . Như chúng tôi đã đề cập ở trên, các kiểu được xác định trong style.scss được áp dụng cả trên giao diện người dùng và trong trình chỉnh sửa:

.wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

Và đó là nó! Làm mới trang và vui chơi với các kiểu khối mới của bạn:

Lồng các khối Gutenberg với thành phần InnerBlocks

Mặc dù có đầy đủ chức năng, Khối liên kết của chúng tôi vẫn không hấp dẫn lắm. Để làm cho nó hấp dẫn hơn đối với khán giả, chúng tôi có thể thêm một hình ảnh.

Điều này có thể thêm một lớp phức tạp vào khối của chúng ta, nhưng may mắn thay, bạn không cần phải phát minh lại bánh xe vì Gutenberg cung cấp một thành phần cụ thể mà bạn có thể sử dụng để tạo cấu trúc của các khối lồng nhau.

Thành phần InnerBlocks được định nghĩa như sau:

InnerBlocks xuất một cặp thành phần có thể được sử dụng trong triển khai khối để kích hoạt nội dung khối lồng nhau.

Đầu tiên, bạn sẽ cần tạo một tệp .js mới trong thư mục src . Trong ví dụ của chúng tôi, chúng tôi sẽ gọi tệp này là containerr.js .

Bây giờ bạn sẽ cần nhập tài nguyên mới vào tệp index.js :

import './container';

Quay lại containerner.js và nhập các thành phần cần thiết:

import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

Bước tiếp theo là xác định một khuôn mẫu cung cấp cấu trúc mà các khối sẽ được đặt bên trong. Trong ví dụ sau, chúng tôi xác định một mẫu bao gồm hai cột chứa khối Hình ảnh cốt lõi và khối Đơn vị liên kết tùy chỉnh của chúng tôi:

const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

Mẫu được cấu trúc như một mảng blockTypes (tên khối và các thuộc tính tùy chọn).

Trong đoạn mã trên, chúng tôi đã sử dụng một số thuộc tính để định cấu hình các khối Cột và Cột. Cụ thể, thuộc tính templateLock: 'all' khóa các khối Cột để người dùng không thêm, sắp xếp lại hoặc xóa các khối hiện có. templateLock có thể nhận một trong các giá trị sau:

• all – InnerBlocks bị khóa và không thể thêm, sắp xếp lại hoặc xóa khối.
• insert – Các khối chỉ có thể được sắp xếp lại hoặc loại bỏ.
• false – Mẫu không bị khóa.

Sau đó, mẫu được gán cho phần tử InnerBlocks :

<InnerBlocks template={ TEMPLATE } templateLock="all" />

Để ngăn chặn bất kỳ vấn đề tương thích nào, chúng tôi cũng đã thêm thuộc tính templateLock vào thành phần InnerBlocks (xem thêm vấn đề # 17262 và kéo # 26128).

Đây là tệp containerner.js cuối cùng của chúng tôi:

import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

Cải tiến bổ sung

Khối của chúng tôi có đầy đủ chức năng, nhưng chúng tôi có thể cải thiện nó một chút với một số thay đổi nhỏ.

Chúng tôi đã gán thuộc tính backgroundColor cho đoạn văn được tạo bởi thành phần RichText . Tuy nhiên, chúng tôi có thể muốn chỉ định màu nền cho div vùng chứa:

Vì vậy, hãy thay đổi tệp edit.js và div s save.js như sau:

<div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

Điều này sẽ cho phép người dùng thay đổi nền của toàn bộ khối.

Mặt khác, một thay đổi phù hợp hơn liên quan đến phương thức useBlockProps . Trong mã gốc, chúng tôi đã định nghĩa blockProps hằng số như sau:

const blockProps = useBlockProps();

Nhưng chúng ta có thể sử dụng useBlockProps hiệu quả hơn khi truyền một tập hợp các thuộc tính. Ví dụ, chúng ta có thể nhập tên classnames classnames đặt tên lớp trình bao bọc cho phù hợp.

Trong ví dụ sau, chúng tôi chỉ định một tên lớp dựa trên giá trị của thuộc tính align ( edit.js ):

import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

Chúng tôi sẽ thực hiện thay đổi tương tự trong tệp save.js :

import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

Và đó là một bọc! Bây giờ bạn có thể chạy bản dựng để sản xuất.

Bản tóm tắt

Và chúng ta đây, khi kết thúc cuộc hành trình đáng kinh ngạc này! Chúng tôi bắt đầu với cấu hình của môi trường phát triển và kết thúc việc tạo một loại khối hoàn chỉnh.

Như chúng tôi đã đề cập trong phần giới thiệu, kiến thức vững chắc về Node.js, Webpack, Babel và React là điều cần thiết để tạo các khối Gutenberg nâng cao và định vị bản thân trên thị trường với tư cách là nhà phát triển Gutenberg chuyên nghiệp.

Tuy nhiên, bạn không cần phải có kinh nghiệm về React để bắt đầu thú vị với việc phát triển khối. Phát triển khối có thể mang lại cho bạn động lực và mục tiêu để đạt được các kỹ năng ngày càng rộng về các công nghệ đằng sau các khối Gutenberg.

Do đó, hướng dẫn này còn lâu mới hoàn thành. Nó chỉ đơn thuần là phần giới thiệu về nhiều chủ đề sẽ giúp bạn bắt đầu xây dựng các khối Gutenberg đầu tiên của mình.

Vì lý do này, chúng tôi khuyên bạn nên đào sâu kiến thức của mình bằng cách đọc kỹ các tài liệu và hướng dẫn trực tuyến. Trong số nhiều tài nguyên hiện có, chúng tôi đề xuất những điều sau:

• Hướng dẫn tạo khối chính thức cho người mới bắt đầu
• Hướng dẫn chính thức về Block dành cho các nhà phát triển trung gian
• Khối động
• Hộp Meta
• Tạo thanh bên cho plugin của bạn

Nếu bạn mới bắt đầu phát triển WordPress, bạn có thể muốn hiểu các khái niệm cơ bản về phát triển giao diện người dùng. Dưới đây là danh sách nhanh các tài nguyên có thể giúp bạn bắt đầu:

• Cách cài đặt WordPress cục bộ (ebook miễn phí)
• Giá trị thực của Hosting WordPress được quản lý (ebook miễn phí)
• JavaScript là gì?
• HTML so với HTML5
• Cách chỉnh sửa CSS trong WordPress
• PHP là gì?
• The WordPress Hooks Bootcamp: Cách sử dụng Actions, Filters và Custom Hooks

Và hãy nhớ rằng mã hoàn chỉnh của các ví dụ của hướng dẫn này có sẵn trên Gist.

Bây giờ đến lượt bạn: Bạn đã phát triển bất kỳ khối Gutenberg nào chưa? Những khó khăn chính mà bạn đã trải qua cho đến nay là gì? Hãy cho chúng tôi biết về trải nghiệm của bạn trong phần bình luận!