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

อยูกับ Gutenberg กันมาสักพักแล้ว ใครยังไม่เคยสร้าง plugin ที่เป็น Block น่าจะต้องเริ่มหัดแล้วนะครับ เพราะอนาคตยังไงก็ต้องใช้ พอขึ้นต้นได้แล้ว ง่ายพอสมควรเลย

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

ที่เครื่องของเราต้องมี 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 ตามสบาย

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