สร้าง Custom Block ใน WordPress ไว้ใช้เอง

สิ่งที่ต้องเตรียม

ที่เครื่องของเราต้องมี Node.js ครับ ถ้ายังไม่มี ต้องไปติดตั้งก่อน แล้วมาลุยกันได้เลย

แต่ถ้าใครอยากลอง WordPress ในเครื่องแบบ localhost ก็ลง wp-env ได้ แต่ผมไปลองที่ host เลยดีกว่า รู้แล้วรู้เรื่อง.. การสร้าง block ของโพสนี้จะไม่ได้ทำงานร่วมกับ wp-env นะครับ

เริ่มสร้าง Gutenberg Block

doc ของ WordPress อยู่หน้านี้ครับ
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/

อันดับแรกให้เราเตรียม folder เป้าหมายไว้ ว่าจะสร้าง block ไว้ที่ไหนที่สามารถทำงานง่ายๆ เช่น ผมต้องการจะสร้างไว้ที่ folder ชื่อ dev-plugins ก็ cd ไปที่ path ของ folder บนเครื่องเรา

cd /home/torr/wp-project/dev-plugins

พอ cd เข้าไปแล้ว จากนั้นก็เริ่มเลย ถ้าเราใช้คำสั่งด้วนๆ แบบด้านล่าง ระบบมันจะมี “command-line wizard” หรือ “CLI wizard” มาให้เรากรอก จะง่ายกว่า หรือถ้าใครชอบ config เองก็ config ต่อท้ายได้เลย

npx @wordpress/create-block@latest

พอจบขั้นตอนแล้ว เราจะได้แบบนี้มาครับ

// torr
You can run several commands inside:

  $ npm start
    Starts the build for development.

  $ npm run build
    Builds the code for production.

  $ npm run format
    Formats files.

  $ npm run lint:css
    Lints CSS files.

  $ npm run lint:js
    Lints JavaScript files.

  $ npm run plugin-zip
    Creates a zip file for a WordPress plugin.

  $ npm run packages-update
    Updates WordPress packages to the latest version.

เสร็จแล้วเราจะได้ได้ folder นี้มาครับ
ใช้คำสั่งเข้าไปใน folder ของ plugin ที่สร้างขึ้นมาครับ

To enter the directory type:

  $ cd todo-list

ถ้าเราเลือก --variant เป็นแบบ dynamic เราเข้าไป code ได้ที่ folder /src ครับ

block เดียว หรือ หลาย block

ถ้าเราต้องการแค่ block เดียว ก็ทำการ แก้/ปรับ จนเสร็จแล้ว เราต้อง build ก่อนด้วยคำสั่ง npm run build

แต่..ถ้าต้องการสร้างหลาย block ใน plugin เดียวกัน ยังไม่ต้อง build เลื่อนลงไปดูด้านล่าง

npm run build

แล้วก็ zip ออกมาใช้งาน

npm run plugin-zip

วิธีสร้างหลาย block (multi-block) ใน plugin เดียวกัน

ให้ cd เข้าไปที่ folder /src แล้วสร้าง block ใหม่เพิ่มใน /src ได้เลย แต่ต้องใส่ --no-plugin ต่อท้ายไปด้วย

npx @wordpress/create-block@latest --no-plugin

เสร็จแล้วถอยออกจาก folder /src ด้วยคำสั่ง cd .. แล้วค่อย build, zip ตามสบาย

ง่ายดีมั๊ยละ..