🙌 Tôi thực sự vui mừng khi phát hành một trong những gói phần mềm mã nguồn mở tốt nhất của tôi được gọi là gói phần mềm create-guten-blockmà bạn có thể bắt đầu tạo khối cho trình chỉnh sửa WordPress mới (dự kiến ​​phát hành trong WordPress 5.0).

Lỗi chất lỏng: nội bộ

create-guten-blocklà một bộ công cụ JavaScript zero-config dành riêng cho bạn mà bạn không cần phải định cấu hình bất cứ thứ gì liên quan đến React, webpack, ESLint, v.v.

Vì vậy, nó bắt đầu …

📦create-guten-block

create-guten-blocklà bộ công cụ dành cho nhà phát triển cấu hình không (# 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 Reacthình Webpack,,, v.v.ES6/7/8/NextESLintBabel

Create Guten Block không giống như các bộ dụng cụ khởi động hoặc bộ sản phẩm đun nóng khác . Đó là hộp công cụ của nhà phát triển được cập nhật liên tục. Vì nó có cấu hình bằng không, bạn luôn có thể cập nhật nó mà không có bất kỳ thay đổi nào trong mã của bạn.

Hãy tưởng tượng chỉ có một phụ thuộc trong các dự án của bạn thay vì 50.

create-guten-blockLà:

• 🥞 Phiên bản ✓
• 🤠 Có thể cập nhật ✓
• 🗃 Bộ mặc định lành mạnh ✓
• 🐎 MỘT cgb-scriptsphụ thuộc duy nhất ✓

BẮT ĐẦU!

Nó thực sự dễ dàng để bắt đầu create-guten-block. Chỉ cần cài đặt nó như một mô-đun chung và chạy nó để tạo plugin khối Gutenberg thế hệ tiếp theo của bạn cho WordPress.

Hãy bắt đầu!

BƯỚC # 0 – Nếu bạn chưa cài đặt Node.js+ npmthì hãy đọc phần này. (BẤM ĐỂ MỞ RỘNG!)

Trong trường hợp bạn là người mới bắt đầu hoàn toàn về thế giới Node.jsJavaScript và npmcác gói – tất cả những gì bạn cần làm là truy cập trang web của Node tải xuống + cài đặt Node trên hệ thống của bạn. Điều này sẽ cài đặt cả Node.jsvà npm, tức là, trình quản lý gói nút – giao diện dòng lệnh của Node.js.

Bạn có thể xác minh cài đặt bằng cách mở ứng dụng đầu cuối và nhập …

node -v
# Results into v9.1.0 — make sure you have Node >= 8 installed.

npm -v
# Results into 5.6.0 — make sure you have npm >= 5.2 installed.

→ BƯỚC # 1

Cài đặt create-guten-blockthông qua npxvà tạo plugin khối của bạn với nó.

Bạn sẽ cần có Node> = 8 và npm> = 5.3 trên máy phát triển cục bộ của mình (nhưng không bắt buộc trên máy chủ). Bạn có thể sử dụng nvm (macOS / Linux) hoặc nvm-windows để dễ dàng chuyển đổi các phiên bản Node giữa các dự án khác nhau.

Bây giờ tất cả những gì bạn phải làm là tạo một khối Gutenberg và bắt đầu xây dựng. Nó được thực hiện bằng cách chạy create-guten-blocklệnh và cung cấp cho nó một tên duy nhất cho một plugin WordPress sẽ được tạo.

⚠️ Đảm bảo chạy lệnh này trong thư mục plugin của cài đặt WordPress cục bộ của bạn, tức là /local_dev_site.tld/wp-content/plugins/thư mục – vì lệnh này sẽ tạo ra một plugin WordPress mà bạn có thể truy cập WP-Admin▶ ︎ Pluginsđể kích hoạt.

npx create-guten-block my-block

( npx đi kèm với npm 5.2+ trở lên, xem hướng dẫn cho các phiên bản npm cũ hơn )

GIF

Nó sẽ tạo một thư mục được gọi my-blockbên trong thư mục hiện tại.
Bên trong thư mục đó, nó sẽ tạo cấu trúc dự án ban đầu và cài đặt các phụ thuộc bắc cầu:

INSIDE: /local_dev_site.tld/wp-content/plugins/my-block

├── plugin.php
├── package.json
├── README.md
|
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   ├── block
   |  ├── block.js
   |  ├── editor.scss
   |  └── style.scss
   |
   ├── blocks.js
   ├── common.scss
   └── init.php

Không cần cấu hình hoặc cấu trúc thư mục phức tạp, chỉ cần các tệp bạn cần để xây dựng ứng dụng của mình.

→ BƯỚC # 3

Sau khi cài đặt xong, bạn có thể mở thư mục dự án của mình và chạy tập lệnh bắt đầu.

Hãy làm điều đó.

cd my-block
npm start

Bạn cũng có thể sử dụng yarn startnếu đó là mứt của bạn

GIF

Điều này chạy plugin ở chế độ phát triển. Để sản xuất chạy mã sản xuất npm run build.
Bạn sẽ thấy thông báo bản dựng, lỗi và cảnh báo xơ vải trong bảng điều khiển.

Và giống như vậy, bạn đang xây dựng plugin WordPress tiếp theo của mình với Gutenberg, React.js, ES 6/7/8 / Next, được chuyển đổi bằng Babel, cũng có các cấu hình ESLint để trình soạn thảo mã của bạn tự động nhận và sử dụng.

Quy trình làm việc!

Chỉ có ba tập lệnh mà bạn có thể sử dụng trong create-guten-blockquy trình làm việc của mình. Với ba tập lệnh này, bạn có thể phát triển, xây dựng và loại bỏ plugin của mình.

👉 npm start

• Sử dụng để biên dịch và chạy khối ở chế độ phát triển.
• Theo dõi mọi thay đổi và báo cáo lại bất kỳ lỗi nào trong mã của bạn.

👉 npm run build

• Sử dụng để xây dựng mã sản xuất cho khối bên trong distthư mục của bạn.
• Chạy một lần và báo cáo lại kích thước tệp gzip của mã được tạo.

👉 npm run eject

• Sử dụng để loại bỏ plugin của bạn ra khỏi create-guten-block.
• Cung cấp tất cả các cấu hình để bạn có thể tùy chỉnh dự án theo ý muốn.
• Đó là đường một chiều, ejectvà bạn phải tự mình bảo dưỡng mọi thứ.
• Bạn thường không phải tham gia ejectmột dự án bởi vì bằng cách loại bỏ, bạn sẽ mất kết nối với create-guten-blockvà từ đó trở đi, bạn phải tự cập nhật và duy trì tất cả các phụ thuộc.

Đó là về nó.

Bao gồm những gì?

Môi trường của bạn sẽ có mọi thứ bạn cần để xây dựng một plugin WordPress Gutenberg thế hệ tiếp theo hiện đại:

• Hỗ trợ cú pháp React, JSX và ES6.
• Quy trình xây dựng nhà phát triển / sản xuất webpack đằng sau hiện trường.
• Ngôn ngữ bổ sung ngoài ES6 như toán tử trải rộng đối tượng.
• CSS có tiền tố tự động, vì vậy bạn không cần -webkithoặ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 phụ thuộc duy nhất cgb-scripts.

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.

Triết học

• Một phụ thuộc: Chỉ có một phụ thuộc xây dựng. Nó sử dụng Webpack, Babel, ESLint và các dự án tuyệt vời khác, nhưng cung cấp trải nghiệm được sắp xếp gắn kết trên chúng.
• Không cần cấu hình: Bạn không cần phải cấu hình bất cứ thứ gì. Một cấu hình hợp lý tốt cho cả bản dựng phát triển và sản xuất đều được xử lý cho bạn để bạn có thể tập trung vào việc viết mã.
• Không có khóa: Bạn có thể ejectthiết lập tùy chỉnh bất kỳ lúc nào. Chạy một lệnh duy nhất và tất cả các cấu hình và cấu hình phụ thuộc sẽ được chuyển trực tiếp vào dự án của bạn, vì vậy bạn có thể tiếp tục ngay tại nơi bạn đã dừng lại.

Tại sao create-guten-block?

Chà, thật sự rất khó để định cấu hình những thứ như Webpack, React, ES 6/7/8 / Next, ESLint, Babel, v.v. trước khi bạn bắt đầu viết một khối gutenberg Hello World. Sau đó, có một thực tế là bạn phải duy trì và liên tục cập nhật cấu hình của mình với tất cả các công cụ mới và sự phát triển trong cộng đồng JavaScript.

create-guten-blockẩn tất cả cấu hình này trong một gói được tối ưu hóa mà chúng tôi gọi là cgb-scripts. Gói này là phần phụ thuộc duy nhất trong các dự án của bạn. Chúng tôi luôn cgb-scriptscập nhật trong khi bạn tiếp tục và tạo các chủ đề và plugin WordPress tốt nhất tiếp theo.

TL; DR

Lâu quá, không đọc? Đây là một phiên bản ngắn hơn.

Mở ứng dụng đầu cuối và chạy các lệnh sau.

• ✅ Cài đặt / Cập nhật :npm install create-guten-block --global
• 🔰 Tạo : create-guten-block my-block– Chạy bên trong thư mục cài đặt WP cục bộ Eg /wp.local/wp-content/plugins/.
• 📂 Duyệt : cd my-block– Mở thư mục plugin mới tạo.
• ♻️ Chạy : npm start– Để phát triển.
• 📦 Chạy : npm run build– Để xây dựng sản xuất.
• ⏏ Chạy : npm run eject– Để tự mình tùy chỉnh, cập nhật và bảo trì tất cả.

Create-Guten-Block đã được thử nghiệm để hoạt động trên macOS, nhưng cũng phải hoạt động trên Windows và Linux.
Nếu có điều gì đó không hoạt động, vui lòng gửi sự cố →

Cập nhật bản phát hành mới

Create Guten Block được chia thành hai gói:

1. create-guten-blocklà một tiện ích dòng lệnh mà bạn sử dụng để tạo các plugin WP Gutenberg mới – chỉ cần chạy npx create-guten-block your-block-namevà bạn sẽ luôn sử dụng bộ công cụ tạo-guten-block mới nhất.
2. cgb-scriptslà sự phụ thuộc phát triển trong các dự án plugin được tạo.

Bạn hầu như không bao giờ cần phải cập nhật create-guten-blockchính nó: nó ủy quyền tất cả các thiết lập cho cgb-scripts.

Khi bạn chạy create-guten-block, nó luôn tạo dự án với phiên bản mới nhất cgb-scripts, do đó bạn sẽ tự động nhận được tất cả các tính năng và cải tiến mới trong các plugin mới được tạo.

Để cập nhật dự án hiện có lên phiên bản mới cgb-scripts, hãy mở bảng thay đổi , tìm phiên bản bạn hiện đang sử dụng (kiểm tra package.json trong thư mục plugin của bạn nếu bạn không chắc chắn) và áp dụng hướng dẫn di chuyển cho các phiên bản mới hơn.

Trong hầu hết các trường hợp, bạn chỉ cần tải cgb-scriptsphiên bản trong package.json và chạy npm installtrong thư mục này là đủ, nhưng tốt hơn hết là bạn nên tham khảo bảng thay đổi để biết các thay đổi có thể xảy ra.

Chúng tôi cam kết giữ các thay đổi vi phạm ở mức tối thiểu để bạn có thể nâng cấp dễ dàng cgb-scripts.

Changelog

Đọc những gì 📦 mới, cải tiến, 🐛 đã sửa và nếu 📖 tài liệu được cập nhật.

👉 Đọc toàn bộ bảng thay đổi tại liên kết này – CGB Changelog →

Không có gì là không bao giờ hoàn thành, vì vậy hãy chịu đựng chúng tôi trong khi chúng tôi tiếp tục lặp lại để hướng tới một tương lai tốt đẹp hơn.

'Coz every night I lie in bed
The brightest colors fill my head
A million dreams are keeping me awake
I think of what the world could be
A vision of the one I see
A million dreams is all it's gonna take
A million dreams for the world we're gonna make ...

… nghe → Một triệu giấc mơ!

Xin chào, chúng tôi là Cặp đôi WordPress !

Tôi ( Ahmad Awais ) là Nhà phát triển Web Full Stack và là cộng tác viên cốt lõi thường xuyên tại WordPress. Người quan trọng khác của tôi ( Maedah Batool ) là Quản lý dự án kỹ thuật và cô ấy cũng là Cộng tác viên cốt lõi của WordPress. Cùng với nhóm của chúng tôi , chúng tôi điều hành WPCouple.com .

Nếu bạn muốn hiểu sâu hơn về tình yêu của chúng tôi đối với phần mềm nguồn mở, phát triển toàn diện chuyên nghiệp, cộng đồng WordPress, sự phát triển của JavaScript hoặc phát triển một gia đình, xây dựng và khởi động một doanh nghiệp, thì hãy đăng ký bản tin cao cấp của chúng tôi có tên là ↣ The WordPress Takeaway !

Hỗ trợ các dự án nguồn mở của chúng tôi! 🎩

Nếu bạn muốn chúng tôi tiếp tục sản xuất phần mềm nguồn mở và miễn phí chuyên nghiệp (FOSS). Cân nhắc trả tiền cho một giờ dành cho nhà phát triển của tôi . Chúng tôi sẽ dành hai giờ cho nguồn mở cho mỗi đóng góp. Vâng, đúng vậy, bạn trả tiền trong một giờ và khiến cả hai chúng tôi dành một giờ như một lời cảm ơn.

Người ủng hộ dự án & Đối tác WPCouple ⚡️

Dự án FOSS (phần mềm nguồn mở và miễn phí) này được cập nhật và duy trì với sự trợ giúp của các doanh nghiệp tuyệt vời được liệt kê dưới đây. Nếu không có sự hỗ trợ từ các công ty / cá nhân tuyệt vời này, dự án này sẽ không thể thực hiện được.

– Cái gì / Làm thế nào? Đọc thêm về nó →

Giấy phép & Ghi công

MIT © Ahmad Awais .

Dự án này được lấy cảm hứng từ công việc của nhiều người hơn tôi có thể đề cập ở đây. Nhưng cảm ơn bạn, Dan Abramov về Tạo ứng dụng React, Andrew Clark và Christopher Chedeau , Sophie Alpert từ nhóm React.js, Wes Bos về các khóa học tuyệt vời dành cho người mới bắt đầu React , ES6 và Node . Kent C. Dodds vì truyền bá nguồn mở của mình, Cộng tác viên cốt lõi của WordPress, Gary để giữ cho mọi người lành mạnh, các nhà phát triển Gutenberg Matias , Riad , Andrew , Ella , Joen ,Tammie , Greg và những người đóng góp, và các thành viên cộng đồng WordPress khác như Zac cho khóa học của anh ấy trên Gutenberg , và cả bạn tôi Morten vì tất cả # Guten-động lực, Icons8 cho các biểu tượng tuyệt vời, Maedah để quản lý dự án này và cho tất cả những người tôi đã quên.

CẬP NHẬT

• 🚀 create-guten-block đã lan truyền ~ 500 stargazers trên GitHub
• 🙌 Woot! Chà! Dự án đang thịnh hành trên các repos JavaScript GitHub ngày hôm nay
• 😇 Humbled được liệt kê là nhà phát triển thịnh hành trên GitHub ngày hôm nay – điều này thật điên rồ!
• 🔥 Holly Molly –  create-guten-block hiện đang thịnh hành ở tất cả các ngôn ngữ trên GitHub!
• 📣 create-guten-block lọt vào top 5 trên trang chủ của ProductHunt – điều này thật tuyệt vời
• 😇 Gary từ a8c đã cố gắng đánh giá cao bộ công cụ tạo-guten-block bằng cách viết tweet  này có ý nghĩa rất lớn
• 🍩 Wes Bos  vâng, người đó, đã tweet về cách anh ấy dự định dùng thử tạo-guten-block và Trình chỉnh sửa WordPress Gutenberg mới
• 😲 Matt Cromwell đã liệt kê tôi cùng với cả Bản thảo và dự án Gutenberg trong danh sách theo dõi năm 2018 của anh ấycreate-guten-block
• ✅ Tôi đã viết một bài đăng trên blog về điều này: Giới thiệu Tạo khối Guten