Logo Zephyrnet

Bắt đầu với phát triển khối WordPress

Ngày:

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.

Trình chỉnh sửa Gutenberg: (1) Trình chèn khối, (2) vùng nội dung và (3) thanh bên cài đặt
Tín dụng: Sổ tay biên tập khối WordPress

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.

Sản phẩm Khối trích dẫn được bao gồm trong WordPress Core

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:


It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.

The Encyclopedia of world peas

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à:

  1. 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ự.
  2. 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.
  3. 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.

Sơ đồ phác thảo các trạng thái của trình chỉnh sửa bài đăng và cách dữ liệu được lưu vào cơ sở dữ liệu và được phân tích cú pháp để hiển thị.

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 npmnpx 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ột README.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ột composer.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.

Đầu ra đầu cuối sau khi chạy lệnh cài đặt. 1,296 gói đã được cài đặt.

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ạy npm install.
  • src/: Thư mục này chứa mã nguồn của plugin được biên dịch và gửi tới build 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ạn node_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ùng npm 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à nametitle. 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ào css-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ồm text, media, design, widgets, themeembed, 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ụng format-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 EditSave 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 EditSave 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 editsave 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 editsave 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 EditSave 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:

Trình chỉnh sửa khối WordPress với bảng chèn khối mở và khối pullquote được chèn vào khu vực nội dung. Nó đọc lời chào từ phía sau.

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:

Khối pullquote được hiển thị ở mặt trước của trang web. Nó nói xin chào từ phía 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 editsave 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 EditSave các thành phần có chứa đánh dấu của khối.

Đánh dấu mặt sau (src/edit.js)

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.

Khối pullquote ở mặt sau, được chọn và có công cụ phát triển mở bên cạnh hiển thị đánh dấu.

Đánh dấu giao diện người dùng (src/save.js)

Đ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 pullquote ở giao diện người dùng, được chọn và có công cụ phát triển mở bên cạnh hiển thị đánh dấu.

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 or style.scss or style.sass, được nhập vào mã JavaScript, được biên dịch thành style-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 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:

Khối pullquote trong WordPress Block Editor với nền màu cà chua được áp dụng. đằng sau dòng chữ màu đen.
Khối pullquote ở mặt trước có nền màu tím rebecca được áp dụng phía sau văn bản màu đen.

Tham khảo phong cách trong block.json

Chúng tôi đã nhập các tệp tạo kiểu trong edit.jsindex.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.cssstyle-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 — editsave — 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:

tại chỗ_img

Tin tức mới nhất

tại chỗ_img