Hãy thừa nhận rằng việc phát triển WordPress hiện nay thật kỳ lạ. Cho dù bạn là người mới sử dụng WordPress hay đã làm việc với nó trong nhiều năm thì việc giới thiệu các tính năng “Chỉnh sửa Toàn bộ Trang web” (FSE), bao gồm cả Trình chỉnh sửa khối (WordPress 5.0) và Trình chỉnh sửa trang web (WordPress 5.9), đã cải tiến cách truyền thống mà chúng tôi xây dựng các chủ đề và plugin WordPress.
Mặc dù đã 5 năm kể từ lần đầu tiên chúng tôi gặp Block Editor, việc phát triển nó vẫn gặp khó khăn vì tài liệu thiếu hoặc lỗi thời. Đó giống như một tuyên bố về tốc độ di chuyển của các tính năng FSE, một cái gì đó Geoff than thở trong một bài viết gần đây.
Trường hợp điển hình: Năm 2018, một loạt bài giới thiệu về việc tham gia phát triển Gutenberg đã được xuất bản ngay tại đây trên CSS-tricks. Thời thế đã thay đổi kể từ đó, và mặc dù phong cách phát triển đó vẫn còn hiệu quả, nhưng nó không khuyến khích nữa (ngoài ra, create-guten-block
dự án mà nó dựa trên cũng không còn được duy trì).
Trong bài viết này, tôi dự định giúp bạn bắt đầu phát triển khối WordPress theo phương pháp hiện tại. Vì vậy, vâng, mọi thứ rất có thể sẽ thay đổi sau khi cuốn sách này được xuất bản. Nhưng tôi sẽ cố gắng tập trung vào nó theo cách hy vọng nắm bắt được bản chất của việc phát triển khối, bởi vì mặc dù các công cụ có thể phát triển theo thời gian nhưng những ý tưởng cốt lõi có thể vẫn giữ nguyên.
Chính xác thì các khối WordPress là gì?
Hãy bắt đầu bằng cách giải quyết một số nhầm lẫn với ý nghĩa của các thuật ngữ như khối. Tất cả sự phát triển dành cho các tính năng này dẫn đến WordPress 5.0 đều có tên mã là “Gutenberg”- bạn biết đấy, người phát minh ra báo in.
Kể từ đó, “Gutenberg” đã được sử dụng để mô tả mọi thứ liên quan đến các khối, bao gồm Block Editor và Site Editor, do đó, nó trở nên phức tạp đến mức một số người hạ thấp tên. Trên hết, có một Plugin Gutenberg nơi các tính năng thử nghiệm được kiểm tra để có thể đưa vào. Và nếu bạn nghĩ việc gọi tất cả điều này là “Chỉnh sửa toàn trang” sẽ giải quyết được vấn đề, cũng có những lo ngại về điều đó.
Vì vậy, khi chúng tôi đề cập đến “khối” trong bài viết này, ý chúng tôi là các thành phần để tạo nội dung trong WordPress Block Editor. Các khối được chèn vào một trang hoặc bài đăng và cung cấp cấu trúc cho một loại nội dung cụ thể. WordPress cung cấp một số khối “cốt lõi” cho các loại nội dung phổ biến, như Đoạn văn, Danh sách, Hình ảnh, Video và Âm thanh, đến tên một vài.
Ngoài các khối cốt lõi này, chúng ta cũng có thể tạo các khối tùy chỉnh. Đó chính là nội dung của quá trình phát triển khối WordPress (cũng có tính năng lọc các khối cốt lõi để sửa đổi chức năng của chúng, nhưng có thể bạn chưa cần điều đó).
Khối làm gì
Trước khi đi sâu vào việc tạo các khối, trước tiên chúng ta phải hiểu được cách các khối hoạt động nội bộ. Điều đó chắc chắn sẽ giúp chúng ta tránh được rất nhiều thất vọng sau này.
Cách tôi muốn nghĩ về một khối khá trừu tượng: đối với tôi, khối là một thực thể, với một số thuộc tính (được gọi là thuộc tính), đại diện cho một số nội dung. Tôi biết điều này nghe có vẻ khá mơ hồ, nhưng hãy ở lại với tôi. Về cơ bản, một khối được thể hiện theo hai cách: dưới dạng giao diện đồ họa trong trình chỉnh sửa khối hoặc dưới dạng một đoạn dữ liệu trong cơ sở dữ liệu.
Khi bạn mở WordPress Block Editor và chèn một khối, chẳng hạn như khối Pullquote, bạn sẽ có một giao diện đẹp. Bạn có thể click vào giao diện đó và chỉnh sửa đoạn văn bản được trích dẫn. Bảng Cài đặt ở phía bên phải của Giao diện người dùng Block Editor cung cấp các tùy chọn để điều chỉnh văn bản và thiết lập giao diện của khối.
Khi bạn hoàn tất việc tạo đoạn trích dẫn ưa thích của mình và nhấn Xuất bản, toàn bộ bài đăng sẽ được lưu trữ trong cơ sở dữ liệu ở thư mục wp_posts
bàn. Đây không phải là điều gì mới mẻ vì Gutenberg. Đó là cách mọi thứ luôn hoạt động — WordPress lưu trữ nội dung đăng trong một bảng được chỉ định trong cơ sở dữ liệu. Nhưng điều mới là một đại diện của khối Pullquote là một phần nội dung được lưu trữ trong post_content
lĩnh vực wp_posts
bảng.
Biểu diễn này trông như thế nào? Hãy xem:
Trông giống như HTML đơn giản phải không?! Theo thuật ngữ kỹ thuật, đây là khối “được tuần tự hóa”. Lưu ý dữ liệu JSON trong nhận xét HTML, "textAlign": "right"
. Đó là một thuộc tính - một thuộc tính được liên kết với khối.
Giả sử bạn đóng Block Editor, rồi một lúc sau, mở lại. Nội dung từ các tài liệu liên quan post_content
trường được truy xuất bởi Block Editor. Sau đó, trình chỉnh sửa sẽ phân tích nội dung được truy xuất và bất cứ nơi nào nó gặp phải điều này:
...
…nó tự nói to:
Được rồi, đối với tôi nó giống như một khối Pullquote. Hmm.. nó cũng có một thuộc tính… Tôi có một tệp JavaScript cho tôi biết cách xây dựng giao diện đồ họa cho khối Pullquote trong trình chỉnh sửa từ các thuộc tính của nó. Tôi nên làm điều đó ngay bây giờ để hiển thị khối này một cách trọn vẹn nhất.
Là nhà phát triển khối, công việc của bạn là:
- Nói với WordPress rằng bạn muốn đăng ký một loại khối cụ thể, với các chi tiết tương tự.
- Cung cấp tệp JavaScript cho Block Editor để giúp nó hiển thị khối trong trình chỉnh sửa đồng thời “tuần tự hóa” khối đó để lưu vào cơ sở dữ liệu.
- Cung cấp bất kỳ tài nguyên bổ sung nào mà khối cần để có chức năng phù hợp, ví dụ như kiểu và phông chữ.
Một điều cần lưu ý là tất cả quá trình chuyển đổi này từ dữ liệu được tuần tự hóa sang giao diện đồ họa — và ngược lại — chỉ diễn ra trong Block Editor. Ở mặt trước, nội dung được hiển thị chính xác như cách nó được lưu trữ. Do đó, theo một nghĩa nào đó, các khối là một cách thú vị để đưa dữ liệu vào cơ sở dữ liệu.
Hy vọng rằng điều này sẽ giúp bạn hiểu rõ hơn về cách hoạt động của một khối.
Khối chỉ là plugin
Khối chỉ là plugin. Vâng, về mặt kỹ thuật, bạn có thể đặt các khối vào chủ đề và bạn có thể đặt nhiều khối trong một plugin. Tuy nhiên, thường xuyên hơn không, nếu bạn muốn tạo một khối, bạn sẽ phải tạo một plugin. Vì vậy, nếu bạn đã từng tạo một plugin WordPress thì bạn đã đi được một phần chặng đường trong việc xử lý việc tạo một khối WordPress.
Nhưng hãy giả sử trong giây lát rằng bạn chưa bao giờ thiết lập plugin WordPress chứ đừng nói đến việc chặn. Bạn thậm chí bắt đầu từ đâu?
Thiết lập một khối
Chúng tôi đã đề cập đến khối là gì. Hãy bắt đầu thiết lập mọi thứ để tạo thành một cái.
Đảm bảo bạn đã cài đặt Node
Điều này sẽ cung cấp cho bạn quyền truy cập vào npm
và npx
lệnh ở đâu npm
cài đặt các phần phụ thuộc của khối của bạn và giúp biên dịch nội dung, trong khi npx
chạy lệnh trên các gói mà không cần cài đặt chúng. Nếu bạn đang dùng macOS thì có thể bạn đã có Node và có thể sử dụng nvm
để cập nhật các phiên bản. Nếu bạn đang dùng Windows, bạn sẽ cần phải tải xuống và cài đặt nút.
Tạo một thư mục dự án
Bây giờ, bạn có thể xem các hướng dẫn khác đi thẳng vào dòng lệnh và hướng dẫn bạn cài đặt một gói có tên @wordpress/create-block
. Gói này rất tuyệt vì nó tạo ra một thư mục dự án được hình thành đầy đủ với tất cả các phần phụ thuộc và công cụ bạn cần để bắt đầu phát triển.
Cá nhân tôi đi theo con đường này khi thiết lập các khối của riêng mình, nhưng hãy hài hước với tôi một chút vì tôi muốn bỏ qua những nội dung gây tranh cãi mà nó giới thiệu và chỉ tập trung vào những phần cần thiết để hiểu được môi trường phát triển cơ bản.
Đây là những tập tin tôi muốn gọi cụ thể:
readme.txt
: Phần này giống như mặt trước của thư mục plugin, thường được sử dụng để mô tả plugin và cung cấp thêm chi tiết về cách sử dụng và cài đặt. Nếu bạn gửi khối của mình tới WordPress Plugin Directory, tệp này giúp điền vào trang plugin. Nếu bạn dự định tạo kho lưu trữ GitHub cho plugin khối của mình thì bạn cũng có thể xem xét mộtREADME.md
tập tin có cùng thông tin để nó hiển thị độc đáo ở đó.package.json
: Phần này xác định các gói Node cần thiết để phát triển. Chúng tôi sẽ bẻ khóa nó khi chúng tôi cài đặt. Trong quá trình phát triển plugin WordPress cổ điển, bạn có thể quen với việc làm việc với Composer và mộtcomposer.json
tập tin thay thế. Điều này tương đương với điều đó.plugin.php
: Đây là tệp plugin chính và vâng, đó là PHP cổ điển! Chúng tôi sẽ đặt tiêu đề và siêu dữ liệu của plugin vào đây và sử dụng nó để đăng ký plugin.
Ngoài những tập tin này, còn có src
thư mục được cho là chứa mã nguồn của khối của chúng tôi.
Có những tập tin này và src
thư mục là tất cả những gì bạn cần để bắt đầu. Ra khỏi nhóm đó, hãy chú ý rằng về mặt kỹ thuật chúng tôi chỉ cần một tập tin (plugin.php
) để tạo plugin. Phần còn lại cung cấp thông tin hoặc được sử dụng để quản lý môi trường phát triển.
Đã nói ở trên @wordpress/create-block
gói tạo ra các tệp này (và hơn thế nữa) cho chúng tôi. Bạn có thể coi nó như một công cụ tự động hóa thay vì cần thiết. Bất chấp điều đó, nó làm cho công việc trở nên dễ dàng hơn, vì vậy bạn có thể tự do tạo một khối bằng nó bằng cách chạy:
npx @wordpress/create-block
Cài đặt khối phụ thuộc
Giả sử bạn đã có sẵn ba tệp được đề cập trong phần trước, đã đến lúc cài đặt các phần phụ thuộc. Đầu tiên, chúng ta cần chỉ định các phần phụ thuộc mà chúng ta sẽ cần. Chúng tôi làm điều đó bằng cách chỉnh sửa package.json
. Trong khi sử dụng @wordpress/create-block
tiện ích sau đây được tạo cho chúng tôi (đã thêm nhận xét; JSON không hỗ trợ nhận xét, vì vậy hãy xóa nhận xét nếu bạn đang sao chép mã):
{
// Defines the name of the project
"name": "block-example",
// Sets the project version number using semantic versioning
"version": "0.1.0",
// A brief description of the project
"description": "Example block scaffolded with Create Block tool.",
// You could replace this with yourself
"author": "The WordPress Contributors",
// Standard licensing information
"license": "GPL-2.0-or-later",
// Defines the main JavaScript file
"main": "build/index.js",
// Everything we need for building and compiling the plugin during development
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
// Defines which version of the scripts packages are used (24.1.0 at time of writing)
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}
Xem không có bình luận
{
"name": "block-example",
"version": "0.1.0",
"description": "Example block scaffolded with Create Block tool.",
"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",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}
Sản phẩm @wordpress/scripts
gói là sự phụ thuộc chính ở đây. Như bạn có thể thấy, đó là một devDependency
nghĩa là nó hỗ trợ cho sự phát triển. Làm sao vậy? Nó phơi bày wp-scripts
nhị phân mà chúng ta có thể sử dụng để biên dịch mã của mình, từ src
thư mục đến build
thư mục, trong số những thứ khác.
Có một số gói khác mà WordPress duy trì cho nhiều mục đích khác nhau. Ví dụ, @wordpress/components
gói cung cấp một số nhà tiền chế UI các thành phần cho Trình chỉnh sửa khối WordPress có thể được sử dụng để tạo trải nghiệm người dùng nhất quán cho khối của bạn phù hợp với tiêu chuẩn thiết kế WordPress.
Bạn không thực sự nhu cầu để cài đặt các gói này, ngay cả khi bạn muốn sử dụng chúng. Điều này là do những @wordpress
phần phụ thuộc không đi kèm với mã khối của bạn. Thay vào đó, bất kỳ import
các câu lệnh tham chiếu mã từ các gói tiện ích - như @wordpress/components
— được sử dụng để xây dựng một tệp “nội dung” trong quá trình biên dịch. Hơn nữa, các câu lệnh nhập này được chuyển đổi thành các câu lệnh ánh xạ việc nhập vào các thuộc tính của một đối tượng chung. Ví dụ, import { __ } from "@wordpress/i18n"
được chuyển đổi thành phiên bản rút gọn của const __ = window.wp.i18n.__
. (window.wp.i18n
là một đối tượng được đảm bảo có sẵn trong phạm vi toàn cầu, một khi tương ứng i18n
tập tin gói được liệt kê).
Trong quá trình đăng ký khối trong tệp plugin, tệp “tài sản” được ngầm sử dụng để cho WordPress biết các gói phụ thuộc cho khối. Những sự phụ thuộc này được tự động đưa vào hàng đợi. Tất cả những điều này đều được thực hiện ở hậu trường, miễn là bạn đang sử dụng scripts
bưu kiện. Như đã nói, bạn vẫn có thể chọn cài đặt cục bộ các phần phụ thuộc để hoàn thành mã và thông tin tham số trong package.json
tập tin:
// etc.
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
},
"dependencies": {
"@wordpress/components": "^19.17.0"
}
Bây giờ package.json
được thiết lập, chúng ta sẽ có thể cài đặt tất cả các phần phụ thuộc đó bằng cách điều hướng đến thư mục dự án trong dòng lệnh và chạy npm install
.
Thêm tiêu đề plugin
Nếu bạn đến từ quá trình phát triển plugin WordPress cổ điển thì có thể bạn biết rằng tất cả các plugin đều có một khối thông tin trong tệp plugin chính giúp WordPress nhận ra plugin và hiển thị thông tin về nó trên màn hình Plugin của quản trị viên WordPress.
Đây là những gì @wordpress/create-block
được tạo cho tôi trong một plugin có tên “Xin chào thế giới” một cách sáng tạo:
<?php
/**
* Plugin Name: Block Example
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 5.9
* 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: css-tricks
*
* @package create-block
*/
Nó nằm trong tệp plugin chính mà bạn có thể gọi bất cứ tên nào bạn muốn. Bạn có thể gọi nó là cái gì đó chung chung như index.php
or plugin.php
. Các create-block
gói tự động gọi nó là bất kỳ tên nào bạn cung cấp làm tên dự án khi cài đặt nó. Vì tôi gọi ví dụ này là “Ví dụ khối”, nên gói này đã cho chúng tôi một block-example.php
tập tin với tất cả những thứ này.
Bạn sẽ muốn thay đổi một số chi tiết, chẳng hạn như tự nhận mình là tác giả và những thứ tương tự. Và không phải tất cả những điều đó là cần thiết. Nếu tôi thực hiện điều này từ "đầu", thì nó có thể trông giống như thế này:
<?php
/**
* Plugin Name: Block Example
* Plugin URI: https://css-tricks.com
* Description: An example plugin for learning WordPress block development.
* Version: 1.0.0
* Author: Arjun Singh
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*/
Tôi sẽ không đi sâu vào mục đích chính xác của từng dòng vì đó đã là một mẫu được thiết lập tốt trong Cẩm nang Plugin WordPress.
Cấu trúc tập tin
Chúng tôi đã xem xét các tệp cần thiết cho khối của chúng tôi. Nhưng nếu bạn đang sử dụng @wordpress/create-block
, bạn sẽ thấy một loạt tệp khác trong thư mục dự án.
Đây là những gì có trong đó vào lúc này:
block-example/
├── build
├── node_modules
├── src/
│ ├── block.json
│ ├── edit.js
│ ├── editor.scss
│ ├── index.js
│ ├── save.js
│ └── style.scss
├── .editorconfig
├── .gitignore
├── block-example.php
├── package-lock.json
├── package.json
└── readme.txt
Phù, nhiều lắm đó! Hãy gọi ra những thứ mới:
build/
: Thư mục này đã nhận được nội dung đã biên dịch khi xử lý tệp để sử dụng trong sản xuất.node_modules
: Cái này chứa tất cả các phần phụ thuộc phát triển mà chúng tôi đã cài đặt khi chạynpm install
.src/
: Thư mục này chứa mã nguồn của plugin được biên dịch và gửi tớibuild
danh mục. Chúng ta sẽ xem xét từng tập tin ở đây một chút..editorconfig
: Phần này chứa các cấu hình để điều chỉnh trình soạn thảo mã của bạn để đảm bảo tính nhất quán của mã..gitignore
: Đây là tệp repo tiêu chuẩn xác định các tệp cục bộ cần được loại trừ khỏi theo dõi kiểm soát phiên bản. Của bạnnode_modules
chắc chắn nên được đưa vào đây.package-lock.json
: Đây là tệp được tạo tự động để theo dõi các bản cập nhật cho các gói bắt buộc mà chúng tôi đã cài đặt cùngnpm install
.
Chặn siêu dữ liệu
Tôi muốn đi sâu vào src
thư mục với bạn nhưng trước tiên sẽ tập trung vào chỉ một tệp trong đó: block.json
. Nếu bạn đã sử dụng create-block
, nó đã có sẵn cho bạn rồi; nếu không, hãy tiếp tục và tạo nó. WordPress đang nỗ lực biến điều này thành cách tiêu chuẩn, chuẩn mực để đăng ký một khối bằng cách cung cấp siêu dữ liệu cung cấp ngữ cảnh WordPress để vừa nhận dạng khối vừa hiển thị nó trong Block Editor.
Đây là những gì @wordpress/create-block
tạo ra cho tôi:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "create-block/block example",
"version": "0.1.0",
"title": "Block Example",
"category": "widgets",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"supports": {
"html": false
},
"textdomain": "css-tricks",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}
Thực sự có một nhiều thông tin khác nhau chúng ta có thể đưa vào đây, nhưng tất cả những gì thực sự cần thiết là name
và title
. Một phiên bản siêu tối giản có thể trông như thế này:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "css-tricks/block-example",
"version": "1.0.0",
"title": "Block Example",
"category": "text",
"icon": "format-quote",
"editorScript": "file:./index.js",
}
$schema
xác định định dạng lược đồ được sử dụng để xác thực nội dung trong tệp. Nghe có vẻ như là một điều bắt buộc nhưng nó hoàn toàn không bắt buộc vì nó cho phép các trình soạn thảo mã hỗ trợ xác thực cú pháp và cung cấp các khả năng bổ sung khác, như gợi ý chú giải công cụ và tự động hoàn thành.apiVersion
đề cập đến phiên bản nào của Chặn API plugin sử dụng. Ngày nay, Phiên bản 2 là phiên bản mới nhất.name
là một chuỗi duy nhất bắt buộc giúp xác định plugin. Lưu ý rằng tôi đã thêm tiền tố này vàocss-tricks/
mà tôi đang sử dụng làm không gian tên để giúp tránh xung đột với các plugin khác có thể có cùng tên. Thay vào đó, bạn có thể chọn sử dụng tên viết tắt của mình (ví dụ:as/block-example
).version
là một cái gì đó WordPress gợi ý sử dụng như một cơ chế xóa bộ nhớ đệm khi các phiên bản mới được phát hành.title
là trường bắt buộc khác và nó đặt tên được sử dụng ở bất kỳ nơi nào plugin được hiển thị.category
nhóm khối này với các khối khác và hiển thị chúng cùng nhau trong Block Editor. Các danh mục hiện có bao gồmtext
,media
,design
,widgets
,theme
vàembed
, và bạn thậm chí có thể tạo danh mục tùy chỉnh.icon
cho phép bạn chọn một cái gì đó từ Thư viện Dashicon để thể hiện trực quan khối của bạn trong Trình chỉnh sửa khối. Tôi đang sử dụngformat-quote
icon](https://developer.wordpress.org/resource/dashicons/#format-quote) vì chúng tôi đang tạo ra loại pullquote của riêng mình trong ví dụ này. Thật tuyệt khi chúng ta có thể tận dụng các biểu tượng hiện có thay vì phải tạo biểu tượng của riêng mình, mặc dù điều đó chắc chắn là có thể.editorScript
là nơi chứa tệp JavaScript chính,index.js
, sống.
Đăng ký khối
Điều cuối cùng trước khi chúng ta sử dụng mã thực tế đó là đăng ký plugin. Chúng tôi vừa thiết lập tất cả siêu dữ liệu đó và chúng tôi cần một cách để WordPress sử dụng nó. Bằng cách đó, WordPress biết nơi tìm tất cả nội dung plugin để chúng có thể được xếp vào hàng đợi để sử dụng trong Block Editor.
Đăng ký khối là một quá trình gồm hai phần. Chúng ta cần đăng ký nó bằng cả PHP và JavaScript. Đối với phía PHP, hãy mở tệp plugin chính (block-example.php
trong trường hợp này) và thêm dòng sau ngay sau tiêu đề plugin:
function create_block_block_example_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_block_example_block_init' );
Đây là những gì create-block
tiện ích được tạo ra cho tôi, đó là lý do tại sao hàm này được đặt tên như vậy. Chúng ta có thể sử dụng một tên khác. Một lần nữa, điều quan trọng là tránh xung đột với các plugin khác, vì vậy, bạn nên sử dụng không gian tên của mình ở đây để làm cho nó trở nên độc đáo nhất có thể:
function css_tricks_block_example_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'css_tricks_block_example_block_init' );
Tại sao chúng tôi lại chỉ vào build
thư mục nếu block.json
với tất cả siêu dữ liệu khối đều có trong src
? Đó là vì mã của chúng ta vẫn cần được biên dịch. Các scripts
gói xử lý mã từ các tập tin trong src
thư mục và đặt các tập tin đã biên dịch được sử dụng trong sản xuất vào build
thư mục, đồng thời sao chép block.json
hồ sơ trong quá trình.
Được rồi, hãy chuyển sang phần JavaScript của việc đăng ký khối. Mở ra src/index.js
và chắc chắn rằng nó trông như thế này:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Chúng ta đang tiến vào vùng đất React và JSX! Điều này nói với WordPress:
- Nhập
registerBlockType
mô-đun từ@wordpress/blocks
Gói. - Nhập siêu dữ liệu từ
block.json
. - Nhập
Edit
vàSave
các thành phần từ các tập tin tương ứng của chúng. Chúng tôi sẽ đưa mã vào các tệp đó sau. - Đăng ký khối và sử dụng
Edit
vàSave
các thành phần để hiển thị khối và lưu nội dung của nó vào cơ sở dữ liệu.
Có chuyện gì với edit
và save
chức năng? Một trong những sắc thái của quá trình phát triển khối WordPress là phân biệt “back end” với “front end” và các chức năng này được sử dụng để hiển thị nội dung của khối trong các ngữ cảnh đó, trong đó edit
xử lý kết xuất back-end và save
ghi nội dung từ Block Editor vào cơ sở dữ liệu để hiển thị nội dung ở giao diện người dùng của trang web.
Một bài kiểm tra nhanh
Chúng ta có thể thực hiện một số thao tác nhanh để xem khối của mình hoạt động trong Block Editor và được hiển thị ở giao diện người dùng. Hãy mở ra index.js
một lần nữa và sử dụng edit
và save
hàm trả về một số nội dung cơ bản minh họa cách chúng hoạt động:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
const { name } = metadata;
registerBlockType(name, {
edit: () => {
return (
"Hello from the Block Editor"
);
},
save: () => {
return (
"Hello from the front end"
);
}
});
Về cơ bản, đây là phiên bản rút gọn của cùng mã mà chúng tôi đã có trước đây, chỉ có điều chúng tôi đang trỏ trực tiếp đến siêu dữ liệu trong block.json
để lấy tên khối và bỏ đi Edit
và Save
các thành phần vì chúng tôi đang chạy các chức năng trực tiếp từ đây.
Chúng ta có thể biên dịch cái này bằng cách chạy npm run build
trong dòng lệnh. Sau đó, chúng ta có quyền truy cập vào một khối có tên là “Block Ví dụ” trong Block Editor:
Nếu chúng ta thả khối vào vùng nội dung, chúng ta sẽ nhận được thông báo trả về từ edit
chức năng:
Nếu chúng tôi lưu và xuất bản bài đăng, chúng tôi sẽ nhận được thông báo mà chúng tôi trả về từ save
chức năng khi xem nó ở mặt trước:
Tạo một khối
Có vẻ như mọi thứ đã được kết nối! Chúng ta có thể quay trở lại những gì chúng ta đã có index.js
trước khi thử nghiệm, chúng tôi đã xác nhận rằng mọi thứ đang hoạt động:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Chú ý rằng edit
và save
các chức năng được gắn với hai tệp hiện có trong src
thư mục đó @wordpress/create-block
được tạo cho chúng tôi và bao gồm tất cả các mục nhập bổ sung mà chúng tôi cần trong mỗi tệp. Tuy nhiên, quan trọng hơn là những tập tin đó thiết lập Edit
và Save
các thành phần có chứa đánh dấu của khối.
src/edit.js
)
Đánh dấu mặt sau (import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Edit() {
return (
{__("Hello from the Block Editor", "block-example")}
);
}
Hãy xem chúng tôi đã làm gì ở đó? Chúng tôi đang nhập đạo cụ từ @wordpress/block-editor
gói cho phép chúng ta tạo các lớp mà chúng ta có thể sử dụng sau này để tạo kiểu. Chúng tôi cũng đang nhập khẩu __
chức năng quốc tế hóa, để xử lý các bản dịch.
src/save.js
)
Đánh dấu giao diện người dùng (Điều này tạo ra một Save
thành phần và chúng ta sẽ sử dụng khá nhiều thứ tương tự như src/edit.js
với văn bản hơi khác một chút:
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Save() {
return (
{__("Hello from the front end", "block-example")}
);
}
Một lần nữa, chúng ta có được một lớp đẹp mà chúng ta có thể sử dụng trong CSS của mình:
Khối tạo kiểu
Chúng ta vừa trình bày cách sử dụng block props để tạo các lớp. Bạn đang đọc bài viết này trên một trang web nói về CSS, vì vậy tôi cảm thấy như mình đã bỏ lỡ điều gì đó nếu chúng ta không đề cập cụ thể đến cách viết kiểu khối.
Phân biệt phong cách mặt trước và mặt sau
Nếu bạn nhìn vào block.json
trong src
thư mục bạn sẽ tìm thấy hai trường liên quan đến kiểu:
editorStyle
cung cấp đường dẫn đến các kiểu được áp dụng cho phần sau.style
là đường dẫn cho các kiểu chia sẻ được áp dụng cho cả mặt trước và mặt sau.
Kev Quirk có bài viết chi tiết điều đó cho thấy cách tiếp cận của anh ấy trong việc làm cho trình soạn thảo back-end trông giống như giao diện người dùng front-end.
Nhớ lại rằng @wordpress/scripts
gói sao chép block.json
tập tin khi nó xử lý mã trong /src
thư mục và đặt các tài sản được biên dịch trong /build
danh mục. Nó là build/block.json
tập tin được sử dụng để đăng ký khối. Điều đó có nghĩa là bất kỳ đường dẫn nào chúng tôi cung cấp trong src/block.json
nên được viết liên quan đến build/block.json
.
Sử dụng Sass
Chúng ta có thể thả một vài tệp CSS vào build
thư mục, hãy tham khảo các đường dẫn trong src/block.json
, chạy bản dựng và kết thúc một ngày. Nhưng điều đó không phát huy hết sức mạnh của @wordpress/scripts
quá trình biên dịch, có khả năng biên dịch Sass thành CSS. Thay vào đó, chúng tôi đặt các tệp kiểu của mình vào src
thư mục và nhập chúng vào JavaScript.
Trong khi làm điều đó, chúng ta cần lưu ý đến cách @wordpress/scripts
phong cách xử lý:
- Một tệp có tên
style.css
orstyle.scss
orstyle.sass
, được nhập vào mã JavaScript, được biên dịch thànhstyle-index.css
. - Tất cả các tệp kiểu khác được biên dịch và đóng gói thành
index.css
.
Sản phẩm @wordpress/scripts
sử dụng gói gói web để đóng gói và @wordpress/scripts
sử dụng Plugin PostCSS để làm việc cho các phong cách xử lý. PostCSS có thể được mở rộng bằng các plugin bổ sung. Các scripts
gói sử dụng các gói dành cho Sass, SCSS và Autoprefixer, tất cả đều có sẵn để sử dụng mà không cần cài đặt các gói bổ sung.
Trên thực tế, khi bạn quay khối ban đầu của mình bằng @wordpress/create-block
, bạn sẽ có một khởi đầu thuận lợi với các tệp SCSS mà bạn có thể sử dụng để bắt đầu hoạt động:
editor.scss
chứa tất cả các kiểu được áp dụng cho trình chỉnh sửa back-end.style.scss
chứa tất cả các kiểu được chia sẻ bởi cả mặt trước và mặt sau.
Bây giờ chúng ta hãy xem cách tiếp cận này thực tế bằng cách viết một ít Sass mà chúng ta sẽ biên dịch thành CSS cho khối của chúng ta. Mặc dù các ví dụ sẽ không quá phức tạp nhưng tôi vẫn ghi chúng vào các tệp SCSS để minh họa quá trình biên dịch.
Mặt trận và phong cách phía sau
Được rồi, hãy bắt đầu với các kiểu được áp dụng cho cả mặt trước và mặt sau. Đầu tiên chúng ta cần tạo src/style.scss
(nó đã có sẵn nếu bạn đang sử dụng @wordpress/create-block
) và đảm bảo rằng chúng tôi nhập nó, điều mà chúng tôi có thể thực hiện trong index.js
:
import "./style.scss";
Mở ra src/style.scss
và bỏ một vài kiểu cơ bản vào đó bằng cách sử dụng lớp được tạo cho chúng ta từ đạo cụ khối:
.wp-block-css-tricks-block-example {
background-color: rebeccapurple;
border-radius: 4px;
color: white;
font-size: 24px;
}
Bây giờ chỉ vậy thôi! Khi chúng tôi chạy bản dựng, bản dựng này sẽ được biên dịch thành build/style.css
và được tham chiếu bởi cả Block Editor và giao diện người dùng.
Phong cách back-end
Bạn có thể cần phải viết các kiểu dành riêng cho Block Editor. Để làm được điều đó, hãy tạo src/editor.scss
(lần nữa, @wordpress/create-block
thực hiện điều này cho bạn) và thả một số kiểu vào đó:
.wp-block-css-tricks-block-example {
background-color: tomato;
color: black;
}
Sau đó nhập nó vào edit.js
, đây là tập tin chứa Edit
thành phần (chúng ta có thể nhập nó ở bất cứ đâu chúng ta muốn, nhưng vì các kiểu này dành cho trình chỉnh sửa nên việc nhập thành phần ở đây sẽ hợp lý hơn):
import "./editor.scss";
Bây giờ khi chúng ta chạy npm run build
, các kiểu được áp dụng cho khối trong cả hai ngữ cảnh:
block.json
Tham khảo phong cách trong Chúng tôi đã nhập các tệp tạo kiểu trong edit.js
và index.js
, nhưng hãy nhớ rằng bước biên dịch sẽ tạo ra hai tệp CSS cho chúng ta trong build
danh mục: index.css
và style-index.css
tương ứng. Chúng ta cần tham chiếu các tệp được tạo này trong siêu dữ liệu khối.
Hãy thêm một vài tuyên bố vào block.json
metadata:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "css-tricks/block-example",
"version": "1.0.0",
"title": "Block Example",
"category": "text",
"icon": "format-quote",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}
chạy npm run build
một lần nữa, hãy cài đặt và kích hoạt plugin trên trang WordPress của bạn và bạn đã sẵn sàng sử dụng nó!
Bạn có thể sử dụng npm run start
để chạy bản dựng của bạn ở chế độ đồng hồ, tự động biên dịch mã mỗi khi bạn thực hiện thay đổi trong mã và lưu.
Chúng tôi đang làm trầy xước bề mặt
Các khối thực tế sử dụng thanh bên Cài đặt của Block Editor và các tính năng khác mà WordPress cung cấp để tạo ra trải nghiệm phong phú cho người dùng. Hơn nữa, thực tế là về cơ bản có hai phiên bản khối của chúng tôi — edit
và save
— bạn cũng cần suy nghĩ về cách sắp xếp mã của mình để tránh trùng lặp mã.
Nhưng hy vọng điều này sẽ giúp làm sáng tỏ quy trình chung để tạo khối WordPress. Đây thực sự là một kỷ nguyên mới trong phát triển WordPress. Thật khó để học những cách làm mới, nhưng tôi rất mong được xem nó phát triển như thế nào. Công cụ như @wordpress/create-block
giúp đỡ, nhưng dù vậy cũng thật tuyệt khi biết chính xác nó đang làm gì và tại sao.
Những điều chúng ta đề cập ở đây có thay đổi không? Rất có thể! Nhưng ít nhất bạn có cơ sở để làm việc khi chúng tôi tiếp tục theo dõi các khối WordPress trưởng thành, bao gồm các phương pháp hay nhất để tạo chúng.
dự án
Một lần nữa, mục tiêu của tôi ở đây là vạch ra một con đường hiệu quả để bắt đầu phát triển khối trong mùa này, nơi mọi thứ đang phát triển nhanh chóng và tài liệu WordPress đang gặp một chút khó khăn để bắt kịp. Dưới đây là một số tài nguyên tôi đã sử dụng để kết hợp điều này lại với nhau: