การสร้างบล็อก Gutenberg แบบกำหนดเอง: บทแนะนำการพัฒนาบล็อกขั้นสุดท้าย

หลายคนบ่นเกี่ยวกับอุปสรรคในการเริ่มต้นสร้างบล็อกและแอปของ Gutenberg เส้นโค้งการเรียนรู้นั้นสูงชัน สาเหตุหลักมาจากความยากในการติดตั้งและกำหนดค่าสภาพแวดล้อมการพัฒนา นอกจากนี้ ความรู้ที่มั่นคงเกี่ยวกับ JavaScript, Node.js, React และ Redux เป็นส่วนผสมที่ต้องมีสำหรับสูตรที่ค่อนข้างซับซ้อนนี้

คู่มือ WordPress Block Editor อย่างเป็นทางการให้ข้อมูลแก่นักพัฒนามากมาย แต่คุณอาจพบว่าตัวเองหลงทางในรายละเอียดนั้น

และควรพูดถึงสิ่งที่ Matias Ventura หัวหน้าสถาปนิกของโครงการ Gutenberg รายงานในการให้สัมภาษณ์กับ WP Tavern:

แม้ว่าจะมีคนที่เรียนรู้ได้อย่างรวดเร็ว แต่ก็ยังเป็นอุปสรรคใหญ่สำหรับผู้คน ฉันคิดว่ามีหลายชั้นในเรื่องนี้ เอกสารอาจเป็นลำดับความสำคัญที่ดีกว่าทั้งในองค์กรและการนำเสนอ ฉันหวังว่าเราจะสามารถทำอะไรได้อีกมากที่นั่น

ด้วยเหตุนี้ เราจึงตัดสินใจจัดทำบทแนะนำแบบทีละขั้นตอนเพื่อช่วยให้ผู้อ่านของเราเริ่มต้นการพัฒนาบล็อกของ Gutenberg

ฟังดูน่าสนใจ? มาดำน้ำกันเถอะ!

ข้อกำหนดเบื้องต้นในการพัฒนา Gutenberg Block

สำหรับบทช่วยสอนนี้ ทักษะที่จำเป็นเพียงอย่างเดียวคือความรู้ที่ดีเกี่ยวกับการพัฒนาปลั๊กอิน WordPress และอย่างน้อยต้องมีความเข้าใจพื้นฐานของ HTML, CSS, JavaScript และ React

นี่จะเป็นโครงการที่มีความทะเยอทะยานหรือไม่? คุณเดิมพันมันจะเป็น!

มันไม่ง่ายเลยที่จะค้นหาการประนีประนอมที่เหมาะสมระหว่างความสมบูรณ์และความเรียบง่าย หรือตัดสินใจว่าจะรวมหัวข้อใดและหัวข้อใดควรละทิ้ง

หวังว่าผู้อ่านระดับกลางและระดับสูงจะยกโทษให้เราที่ไม่ได้เจาะลึกแนวคิดบางอย่างเช่นสถานะ React, ที่เก็บ Redux, ส่วนประกอบที่มีลำดับสูงและอื่น ๆ หัวข้อเหล่านี้ต้องการพื้นที่เพิ่มเติมและความสนใจ และอาจสูงเกินไปสำหรับการพัฒนาบล็อกเริ่มต้น (เว้นแต่คุณจะเป็นนักพัฒนา React)

ด้วยเหตุผลเดียวกัน เราจะไม่ครอบคลุมหัวข้อขั้นสูงบางหัวข้อที่เกี่ยวข้องกับการพัฒนาบล็อกของ Gutenberg เช่น การบล็อกแบบไดนามิกและเมตาบ็อกซ์

ด้วยความรู้ที่คุณจะได้รับเมื่อสิ้นสุดบทความนี้ คุณจะสามารถเริ่มสนุกและทำงานได้อย่างมีประสิทธิภาพในทันที

เมื่อคุณเริ่มสร้างบล็อกแล้ว คุณจะพร้อมที่จะพัฒนาทักษะของคุณต่อไป และสร้างบล็อก Gutenberg ที่ล้ำหน้ายิ่งขึ้นด้วยตัวคุณเอง

Gutenberg Block คืออะไร?

นับตั้งแต่เปิดตัวครั้งแรกในเดือนธันวาคม 2018 ตัวแก้ไขบล็อกได้รับการปรับปรุงอย่างมากในทุกด้าน: API ที่ทรงพลังยิ่งขึ้น, ส่วนต่อประสานผู้ใช้ขั้นสูงยิ่งขึ้น, การใช้งานที่ปรับปรุง, บล็อกใหม่มากมาย, การใช้งานการแก้ไขเว็บไซต์เต็มรูปแบบครั้งแรก และอื่นๆ อีกมากมาย .

กล่าวโดยย่อ แม้ว่า Gutenberg จะยังอยู่ภายใต้การพัฒนาอย่างหนัก แต่ก็มาไกลแล้ว และวันนี้เครื่องมือแก้ไขบล็อกก็เป็นตัวเลือกที่เต็มเปี่ยมในฐานะผู้สร้างเพจและเว็บไซต์ที่ใช้งานได้จริงและเชื่อถือได้

จากมุมมองของนักพัฒนา Gutenberg เป็นแอปพลิเคชั่นหน้าเดียวแบบใช้ปฏิกิริยา (SPA) ที่อนุญาตให้ผู้ใช้ WordPress สร้าง แก้ไข และลบเนื้อหาใน WordPress อย่างไรก็ตาม สิ่งนี้ไม่ควรทำให้คุณนึกถึงเวอร์ชันปรับปรุงของตัวแก้ไขเนื้อหาดั้งเดิม

เราต้องการทำให้สิ่งนี้ชัดเจน:

ใน Gutenberg เนื้อหาจะถูกแบ่งออกเป็นบล็อค ซึ่งก็คือ “อิฐ” ที่ผู้ใช้สามารถใช้เพื่อสร้างโพสต์และเพจหรือทั้งเว็บไซต์

แต่ในทางเทคนิคแล้วบล็อกคืออะไร?

เราชอบคำจำกัดความของ WordPress:

“บล็อก” เป็นคำนามธรรมที่ใช้อธิบายหน่วยของมาร์กอัปที่ประกอบเข้าด้วยกันเป็นเนื้อหาหรือเลย์เอาต์ของหน้าเว็บ แนวคิดนี้รวมแนวคิดของสิ่งที่ใน WordPress ทำได้ในวันนี้ด้วยรหัสย่อ HTML ที่กำหนดเอง และการค้นพบที่ฝังไว้ใน API เดียวและประสบการณ์ผู้ใช้ที่สอดคล้องกัน

ชื่อเรื่อง ย่อหน้า คอลัมน์ รูปภาพ แกลเลอรี และองค์ประกอบทั้งหมดที่ประกอบเป็นอินเทอร์เฟซของตัวแก้ไข ตั้งแต่แผงด้านข้างไปจนถึงบล็อกการควบคุมแถบเครื่องมือ เป็นส่วนประกอบ React

แล้วส่วนประกอบ React คืออะไร? W3Schools ให้คำจำกัดความต่อไปนี้:

ส่วนประกอบเป็นบิตโค้ดอิสระและนำกลับมาใช้ใหม่ได้ มีจุดประสงค์เดียวกับฟังก์ชัน JavaScript แต่ทำงานแยกกันและส่งกลับ HTML ผ่านฟังก์ชัน render()

ในขณะที่ประสบการณ์การแก้ไขโดย Gutenberg นั้นใหม่เมื่อเทียบกับตัวแก้ไข WordPress แบบคลาสสิก แต่วิธีที่ WordPress จัดเก็บเนื้อหาของคุณในฐานข้อมูลนั้นไม่เปลี่ยนแปลงเลย นั่นเป็นเพราะ Gutenberg เป็นแอปพลิเคชั่นที่ทำงานใน WordPress แต่ไม่ได้เปลี่ยนวิธีการทำงานของ CMS ที่เป็นแกนหลัก

โพสต์ (ซึ่งรวมถึงโพสต์ หน้า และประเภทโพสต์ที่กำหนดเอง) ที่สร้างด้วย Gutenberg จะยังคงจัดเก็บไว้ในตาราง wp_posts เหมือนกับในเครื่องมือแก้ไขแบบคลาสสิก

แต่ในโพสต์ที่สร้างด้วย Gutenberg คุณจะพบข้อมูลเพิ่มเติมในตารางที่แสดงถึงความแตกต่างพื้นฐานระหว่างโพสต์ที่สร้างผ่าน Classic Editor กับ Gutenberg

ข้อมูลเหล่านี้ดูเหมือนความคิดเห็น HTML และมีฟังก์ชันเฉพาะ: การแบ่งเขต:

ตัวคั่นบล็อก บอก WordPress ว่าบล็อกใดที่จะแสดงบนหน้าจอ พวกเขายังระบุค่าสำหรับคุณสมบัติบล็อกในวัตถุ JSON อุปกรณ์ประกอบฉากเหล่านั้นกำหนดวิธีที่บล็อกควรแสดงผลบนหน้าจอ:

การตั้งค่าสภาพแวดล้อมการพัฒนา WordPress ของคุณ

การตั้งค่าสภาพแวดล้อมการพัฒนา JavaScript ที่ทันสมัยนั้นต้องการความรู้ที่มั่นคงเกี่ยวกับเทคโนโลยีขั้นสูง เช่น Webpack, React และ JSX, Babel, ESLint เป็นต้น

ข่มขู่? อย่าเป็น! ชุมชน WordPress ได้เข้ามาช่วยเหลือแล้วด้วยการจัดหาเครื่องมืออันทรงพลังที่ช่วยให้คุณหลีกเลี่ยงกระบวนการกำหนดค่าด้วยตนเองที่ยุ่งเหยิง

เพื่อให้ง่ายขึ้น เราจะไม่ครอบคลุมถึง transpiling ในบทความนี้ (ซึ่งเราแนะนำให้ทำความคุ้นเคยเมื่อคุณได้เรียนรู้พื้นฐานของการพัฒนาบล็อกแล้ว) แต่เราจะแนะนำเครื่องมือทางเลือกสองอย่างที่คุณสามารถใช้เพื่อตั้งค่าสภาพแวดล้อมการพัฒนา JavaScript ที่ทันสมัยได้อย่างรวดเร็วและง่ายดายภายในไม่กี่นาที ขึ้นอยู่กับคุณว่าจะเลือกแบบที่คุณสะดวกที่สุดสำหรับโครงการของคุณ

การตั้งค่าสภาพแวดล้อมการพัฒนา JavaScript เพื่อสร้างบล็อก Gutenberg เป็นกระบวนการสามขั้นตอน:

1. ติดตั้ง Node.js และ npm
2. ตั้งค่าสภาพแวดล้อมการพัฒนา
3. ตั้งค่าบล็อกปลั๊กอิน

มาเริ่มกันเลย.

1. ติดตั้ง Node.js และ npm

ก่อนติดตั้งสภาพแวดล้อมการพัฒนาและลงทะเบียนบล็อกแรก คุณจะต้องติดตั้ง Node.js และ Node package manager (npm)

คุณสามารถติดตั้ง Node.js และ npm ได้หลายวิธี แต่ก่อนอื่น คุณอาจต้องการตรวจสอบว่าซอฟต์แวร์ได้รับการติดตั้งในเครื่องของคุณแล้วหรือไม่

ในการดำเนินการนี้ ให้เปิดเทอร์มินัลแล้วเรียกใช้คำสั่งต่อไปนี้:

 node -v

หากผลลัพธ์คือ command not found แสดงว่าไม่มีการติดตั้ง Node.js บนคอมพิวเตอร์ของคุณ และคุณสามารถดำเนินการติดตั้งต่อได้

สำหรับบทความนี้ เราได้เลือกตัวเลือกการติดตั้งที่ง่ายที่สุด ซึ่งก็คือ Node Installer สิ่งที่คุณต้องทำคือดาวน์โหลดเวอร์ชันที่สอดคล้องกับระบบปฏิบัติการของคุณและเปิดวิซาร์ดการติดตั้ง:

เมื่อคุณติดตั้ง Node.js แล้ว ให้รันคำสั่ง node -v ในเทอร์มินัลของคุณอีกครั้ง คุณยังสามารถรันคำสั่ง npm -v เพื่อยืนยันว่าคุณมีแพ็คเกจ npm ที่พร้อมใช้งาน

ตอนนี้คุณมีเครื่องมือดังต่อไปนี้:

• ตัวรันแพ็คเกจ npx Node.js (ดูเอกสาร) สิ่งนี้ทำให้คุณสามารถรันคำสั่ง npm โดยไม่ต้องติดตั้งก่อน
• ตัวจัดการแพ็คเกจ npm Node.js (ดูเอกสาร) ใช้เพื่อติดตั้งการพึ่งพาและเรียกใช้สคริปต์

ขั้นตอนต่อไปคือการติดตั้งสภาพแวดล้อมการพัฒนา

2. ตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

เมื่อคุณมี Node.js และ npm เวอร์ชันล่าสุดในเครื่องของคุณแล้ว คุณจะต้องมีสภาพแวดล้อมการพัฒนาสำหรับ WordPress

คุณสามารถใช้สภาพแวดล้อมการพัฒนาในพื้นที่เช่น DevKinsta หรือใช้เครื่องมือ WordPress อย่างเป็นทางการ ลองมาดูที่ทั้งสองตัวเลือก

ตัวเลือกที่ 1: สภาพแวดล้อมการพัฒนาท้องถิ่น (DevKinsta)

ด้วยการคลิกเพียงไม่กี่ครั้ง คุณก็สามารถติดตั้ง WordPress ในเครื่องได้โดยใช้ DevKinsta ซึ่งเป็นเครื่องมือพัฒนา WordPress ในพื้นที่ที่ทันสมัยของเรา หรือคุณอาจเลือกใช้เครื่องมือพัฒนาท้องถิ่นอื่น เช่น MAMP หรือ XAMPP:

ตัวเลือกที่ 2: wp-env

คุณยังสามารถเลือกใช้เครื่องมือ wp-env อย่างเป็นทางการซึ่งมีสภาพแวดล้อม WordPress dev ในพื้นที่ซึ่งคุณสามารถเปิดใช้งานได้โดยตรงจากบรรทัดคำสั่ง Noah Alen กำหนดไว้ดังนี้:

สภาพแวดล้อม WordPress ในพื้นที่ทำได้ง่ายเพียงแค่เรียกใช้คำสั่งเดียว wp-env เป็นเครื่องมือกำหนดค่าเป็นศูนย์สำหรับสภาพแวดล้อม WordPress ในพื้นที่ที่ไม่เจ็บปวด มีการตัดสินใจเกี่ยวกับตัวเลือกต่างๆ เพื่อให้ผู้ใช้สามารถหมุน WordPress ได้อย่างรวดเร็วโดยไม่ต้องเสียเวลา อันที่จริง เป้าหมายคือการทำให้ทุกคนเข้าถึงสภาพแวดล้อมเหล่านี้ได้อย่างง่ายดาย ไม่ว่าคุณจะเป็นนักพัฒนา นักออกแบบ ผู้จัดการ หรือใครก็ตาม

หากคุณตัดสินใจที่จะลองใช้งาน การติดตั้ง wp-env นั้นต้องใช้ความพยายามเพียงเล็กน้อย เพียงทำตามขั้นตอนเหล่านี้:

ขั้นตอนที่ 1: ยืนยันการติดตั้ง Docker และ Node.js

เพื่อให้เป็นไปตามข้อกำหนดทางเทคนิค คุณต้องติดตั้งทั้ง Docker และ Node.js บนคอมพิวเตอร์ของคุณก่อน นั่นเป็นเพราะ wp-env สร้างอินสแตนซ์ Docker ที่รันเว็บไซต์ WordPress การเปลี่ยนแปลงใดๆ ที่เกิดขึ้นกับโค้ดจะมีผลทันทีในอินสแตนซ์ WordPress

ขั้นตอนที่ 2: ติดตั้ง @wordpress/env จาก Command Line

ด้วย Docker และ Node.js ที่ทำงานบนคอมพิวเตอร์ของคุณ คุณสามารถดำเนินการและติดตั้งสภาพแวดล้อมการพัฒนา WordPress ได้

คุณสามารถติดตั้ง wp-env ได้ทั้งแบบโกลบอลและแบบโลคัล ในการดำเนินการทั่วโลก คุณจะต้องเรียกใช้คำสั่งต่อไปนี้จากภายในไดเร็กทอรีปลั๊กอิน (เพิ่มเติมเกี่ยวกับสิ่งนี้ในกล่องประกาศ "สำคัญ" ด้านล่าง):

 npm install -g @wordpress/env

มาทำลายมันกันเถอะ:

• npm install ตั้งแพ็คเกจ
• -g ต่อท้ายคำสั่งติดตั้งแพ็คเกจที่ระบุทั่วโลก
• @wordpress/env คือแพ็คเกจที่คุณจะติดตั้ง

เพื่อยืนยันว่า wp-env ติดตั้งสำเร็จแล้ว ให้รันคำสั่งต่อไปนี้:

 wp-env --version

คุณควรเห็นเวอร์ชันปัจจุบันของ wp-env ซึ่งหมายความว่าคุณสามารถเปิดสภาพแวดล้อมโดยใช้คำสั่งต่อไปนี้จากโฟลเดอร์ปลั๊กอินของคุณ:

 wp-env start

คุณสามารถเข้าถึงแดชบอร์ด WordPress โดยใช้ที่อยู่ต่อไปนี้:

• http://localhost:8888/wp-admin/

ข้อมูลประจำตัวเริ่มต้นมีดังนี้:

• ชื่อผู้ใช้: admin
• รหัสผ่าน: password

ตั้งค่าปลั๊กอินบล็อกของคุณ

ตอนนี้คุณต้องมีปลั๊กอินบล็อกเริ่มต้นเพื่อสร้าง แต่แทนที่จะสร้างปลั๊กอินบล็อกการพัฒนาด้วยตนเองพร้อมไฟล์และโฟลเดอร์ที่จำเป็นทั้งหมด คุณสามารถเรียกใช้เครื่องมือ dev-tool ที่ให้ไฟล์และการกำหนดค่าทั้งหมดที่คุณต้องการเพื่อเริ่มต้นการพัฒนาบล็อก

อีกครั้ง คุณมีตัวเลือกสองทางให้เลือก มาดูกันทีละอย่าง

ตัวเลือกที่ 1: การตั้งค่าบล็อกปลั๊กอินด้วย @wordpress/create-block

@wordpress/create-block เป็นเครื่องมือกำหนดค่าศูนย์อย่างเป็นทางการสำหรับการสร้างบล็อก Gutenberg:

Create Block เป็นวิธีที่ได้รับการสนับสนุนอย่างเป็นทางการในการสร้างบล็อกสำหรับการลงทะเบียนบล็อกสำหรับปลั๊กอิน WordPress มีการติดตั้งบิลด์ที่ทันสมัยโดยไม่มีการกำหนดค่า มันสร้างโค้ด PHP, JS, CSS และทุกอย่างที่คุณต้องการเพื่อเริ่มโครงการ

ส่วนใหญ่ได้รับแรงบันดาลใจจาก create-react-app ขอชื่นชม @gaearon ทีมงาน Facebook ทั้งหมด และชุมชน React

เมื่อสภาพแวดล้อมในพื้นที่ของคุณเริ่มทำงานแล้ว คุณสามารถตั้งค่าบล็อกเริ่มต้นโดยเพียงแค่เรียกใช้คำสั่ง npx @wordpress/create-block และจะมีไฟล์และโฟลเดอร์ทั้งหมดที่คุณต้องการเพื่อสร้างปลั๊กอินนั่งร้านและลงทะเบียนบล็อกใหม่ .

ลองทำการทดสอบเพื่อดูว่ามันทำงานอย่างไร

จากเครื่องมือบรรทัดคำสั่ง ให้ไปที่ไดเร็กทอรี /wp-content/plugins/ และรันคำสั่งต่อไปนี้:

 npx @wordpress/create-block my-first-block

เมื่อระบบขอให้ยืนยัน ให้ป้อน y เพื่อดำเนินการต่อ:

กระบวนการนี้ใช้เวลาสักครู่ เมื่อเสร็จแล้ว คุณควรได้รับคำตอบต่อไปนี้:

และนั่นแหล่ะ!

ตอนนี้เปิดสภาพแวดล้อมการพัฒนา WordPress ของคุณและไปที่หน้าจอ ปลั๊กอิน ในแดชบอร์ด WordPress ปลั๊กอินใหม่ชื่อ “My First Block” ควรถูกเพิ่มในรายการปลั๊กอินของคุณ:

เปิดใช้งานปลั๊กอินหากจำเป็น สร้างบล็อกโพสต์ใหม่ เลื่อนตัวแทรกบล็อกไปที่ส่วน วิดเจ็ต และเลือกบล็อกใหม่ของคุณ:

กลับไปที่เทอร์มินัลแล้วเปลี่ยนไดเร็กทอรีปัจจุบันเป็น my-first-block :

 cd my-first-block

จากนั้นรันคำสั่งต่อไปนี้:

 npm start

สิ่งนี้ทำให้คุณสามารถเรียกใช้ปลั๊กอินในโหมดการพัฒนาได้ ในการสร้างรหัสการผลิต คุณควรใช้คำสั่งต่อไปนี้:

 npm run build

ตัวเลือกที่ 2: การตั้งค่าบล็อกปลั๊กอินด้วย create-guten-block

create-guten-block เป็นเครื่องมือพัฒนาบุคคลที่สามสำหรับการสร้างบล็อก Gutenberg:

create-guten-block เป็นศูนย์การกำหนดค่า dev-toolkit (#0CJS) เพื่อพัฒนาบล็อก WordPress Gutenberg ในเวลาไม่กี่นาทีโดยไม่ต้องกำหนดค่า React, webpack, ES6/7/8/Next, ESLint, Babel เป็นต้น

เหมือนกับเครื่องมือสร้างบล็อกอย่างเป็นทางการ create-block create-guten-block นั้นใช้แอพ create-react-app และสามารถช่วยคุณสร้างปลั๊กอินบล็อกแรกของคุณโดยไม่ยุ่งยาก

ชุดเครื่องมือนี้มีทุกสิ่งที่คุณต้องการเพื่อสร้างปลั๊กอิน WordPress ที่ทันสมัย ​​รวมถึงสิ่งต่อไปนี้:

• รองรับไวยากรณ์ React, JSX และ ES6
• เบื้องหลังกระบวนการสร้าง webpack dev/production
• ความพิเศษของภาษาที่เกิน ES6 เช่นตัวดำเนินการกระจายอ็อบเจ็กต์
• CSS ที่นำหน้าอัตโนมัติ คุณจึงไม่ต้องการ -webkit หรือคำนำหน้าอื่นๆ
• บิลด์สคริปต์เพื่อรวม JS, CSS และอิมเมจสำหรับการผลิตด้วยซอร์สแมป
• การอัปเดตที่ไม่ยุ่งยากสำหรับเครื่องมือด้านบนด้วย cgb-scripts การพึ่งพาเดียว

สังเกตคำเตือนต่อไปนี้:

ข้อเสียคือเครื่องมือเหล่านี้ได้รับการกำหนดค่าล่วงหน้าให้ทำงานในลักษณะเฉพาะ หากโปรเจ็กต์ของคุณต้องการการปรับแต่งเพิ่มเติม คุณสามารถ "นำออก" และปรับแต่งได้ แต่คุณจะต้องคงการกำหนดค่านี้ไว้

เมื่อคุณมีเว็บไซต์ WordPress ในพื้นที่แล้ว ให้เปิดเครื่องมือ Command Line ไปที่โฟลเดอร์ /wp-content/plugins ของการติดตั้ง และเรียกใช้คำสั่งต่อไปนี้:

 npx create-guten-block my-first-block

คุณจะต้องรอหนึ่งหรือสองนาทีในขณะที่สร้างโครงสร้างโปรเจ็กต์และดาวน์โหลดการพึ่งพา:

เมื่อกระบวนการเสร็จสมบูรณ์ คุณควรเห็นหน้าจอต่อไปนี้:

รูปภาพถัดไปนี้แสดงโครงสร้างโปรเจ็กต์ที่มีเทอร์มินัลทำงานใน Visual Studio Code:

กลับไปที่แดชบอร์ด WordPress ของคุณ รายการใหม่ควรปรากฏในหน้าจอปลั๊กอิน - นี่คือปลั๊กอิน บล็อกแรกของฉัน :

เปิดใช้งานปลั๊กอินและกลับไปที่เทอร์มินัล เปลี่ยนไดเร็กทอรีปัจจุบันเป็น my-first-block จากนั้นรัน npm start :

 cd my-first-block npm start

คุณควรได้รับคำตอบต่อไปนี้:

อีกครั้ง สิ่งนี้ทำให้คุณสามารถเรียกใช้ปลั๊กอินในโหมดการพัฒนาได้ ในการสร้างรหัสการผลิต คุณควรใช้:

 npm run build

เปิดใช้งานปลั๊กอินและสร้างโพสต์หรือหน้าใหม่ จากนั้นเรียกดูบล็อกของคุณและเลือกบล็อก Gutenberg ใหม่ล่าสุดของคุณ:

สำหรับภาพรวมเชิงลึกเพิ่มเติมหรือในกรณีที่เกิดข้อผิดพลาด โปรดดูเอกสารที่ Ahmad Awais ให้ไว้

บทสรุปของ Starter Block นั่งร้าน

ไม่ว่าคุณจะเลือกใช้เครื่องมือ dev สองตัว — create-block หรือ create-guten-block — ตอนนี้คุณมีบล็อกนั่งร้านซึ่งคุณสามารถใช้เป็นจุดเริ่มต้นในการสร้างปลั๊กอินบล็อก

แต่อะไรคือบล็อกนั่งร้าน?

Block scaffolding เป็นคำชวเลขที่อธิบายโครงสร้างไดเร็กทอรีสนับสนุนที่คุณต้องการเพื่อให้ WordPress รู้จักบล็อก โดยทั่วไปแล้วไดเร็กทอรีนั้นจะรวมไฟล์ต่างๆ เช่น index.php , index.js , style.css และอื่นๆ ซึ่งจะทำให้มีการโทรเช่น register_block_type

เราเลือกใช้เครื่องมือ สร้างบล็อก อย่างเป็นทางการ เนื่องจากใช้ในคู่มือตัวแก้ไขบล็อก แต่แม้ว่าคุณจะตัดสินใจใช้เครื่องมือของบุคคลที่สามเช่น create-guten-block ประสบการณ์ของคุณก็จะไม่แตกต่างกันมากนัก

จากที่กล่าวมา มาดำดิ่งลึกลงไปในเครื่องมือ create-block กัน

มองใกล้ขึ้นที่ Create Block Dev-Tool

ดังที่เราได้กล่าวไว้ข้างต้น Create Block เป็นเครื่องมือบรรทัดคำสั่งอย่างเป็นทางการในการสร้างบล็อกของ Gutenberg การรัน @wordpress/create-block ในเทอร์มินัลของคุณจะสร้างไฟล์ PHP, JS และ SCSS และโค้ดที่จำเป็นในการลงทะเบียนบล็อกประเภทใหม่:

 npx @wordpress/create-block [options] [slug]

• [slug] (เป็นทางเลือก) — ใช้เพื่อกำหนด block slug และติดตั้ง plugin
• [options] (ตัวเลือก) — ตัวเลือกที่ใช้ได้

ตามค่าเริ่มต้น แม่แบบ ESNext ถูกกำหนด ซึ่งหมายความว่าคุณจะได้รับ JavaScript เวอร์ชันถัดไป พร้อมด้วยไวยากรณ์ JSX เพิ่มเติม

หากคุณละเว้นชื่อบล็อก คำสั่งจะทำงานในโหมดโต้ตอบ ทำให้คุณสามารถปรับแต่งตัวเลือกต่างๆ ก่อนสร้างไฟล์:

 npx @wordpress/create-block

ภาพด้านล่างแสดงโครงสร้างไฟล์ของปลั๊กอินบล็อกที่สร้างด้วยเครื่องมือสร้างบล็อกอย่างเป็นทางการ:

จากที่กล่าวมา มาดูไฟล์หลักและโฟลเดอร์ของปลั๊กอินบล็อกใหม่ของเรากัน

ไฟล์ปลั๊กอิน

ด้วยไฟล์ปลั๊กอินหลัก คุณลงทะเบียนบล็อกบนเซิร์ฟเวอร์:

 /** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * 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: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

ฟังก์ชัน register_block_type จะลงทะเบียนประเภทบล็อกบนเซิร์ฟเวอร์โดยใช้ข้อมูลเมตาที่จัดเก็บไว้ในไฟล์ block.json

ฟังก์ชันใช้พารามิเตอร์สองตัว:

• ชื่อประเภทบล็อกรวมถึงเนมสเปซหรือเส้นทางไปยังโฟลเดอร์ที่มีไฟล์ block.json หรือวัตถุ WP_Block_Type ที่สมบูรณ์
• อาร์เรย์ของอาร์กิวเมนต์ประเภทบล็อก

ในโค้ดด้านบน อาร์กิวเมนต์ประเภทบล็อกมีให้โดยค่าคงที่เวทย์มนตร์ __DIR__ นั่นหมายความว่าไฟล์ block.json อยู่ในโฟลเดอร์เดียวกับไฟล์ของปลั๊กอิน

ไฟล์ package.json

ไฟล์ package.json กำหนดคุณสมบัติ JavaScript และสคริปต์สำหรับโปรเจ็กต์ของคุณ นี่คือที่ที่คุณสามารถติดตั้งการพึ่งพาโปรเจ็กต์ของคุณได้

เพื่อให้เข้าใจถึงความหมายของไฟล์ได้ดียิ่งขึ้น ให้เปิดไฟล์ด้วยโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ:

 { "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "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", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

คุณสมบัติ scripts คือพจนานุกรมที่ประกอบด้วยคำสั่งที่รันหลายครั้งในวงจรชีวิตของแพ็คเกจโดยใช้ npm run [cmd]

ในบทความนี้ เราจะใช้คำสั่งต่อไปนี้:

• npm run build — สร้าง (บีบอัด) การผลิต build
• npm run start — สร้าง build การพัฒนา (ไม่บีบอัด)

dependencies และ devDependencies เป็นสองอ็อบเจ็กต์ที่แมปชื่อแพ็คเกจกับเวอร์ชัน จำเป็นต้องมี dependencies ในการผลิตในขณะที่ devDependences จำเป็นสำหรับการพัฒนาในพื้นที่เท่านั้น (อ่านเพิ่มเติม)

การพึ่งพานักพัฒนาเริ่มต้นเพียงอย่างเดียวคือแพ็คเกจ @wordpress/scripts ซึ่งถูกกำหนดให้เป็น "ชุดของสคริปต์ที่ใช้ซ้ำได้ซึ่งเหมาะสำหรับการพัฒนา WordPress"

ไฟล์ block.json

เริ่มต้นด้วย WordPress 5.8 ไฟล์ข้อมูลเมตา block.json เป็นวิธีที่เป็นที่ยอมรับในการลงทะเบียนประเภทบล็อก

การมีไฟล์ block.json มีประโยชน์หลายประการ รวมถึงประสิทธิภาพที่ดีขึ้นและการมองเห็นที่ดีขึ้นในไดเรกทอรีปลั๊กอินของ WordPress:

จากมุมมองด้านประสิทธิภาพ เมื่อธีมรองรับเนื้อหาการโหลดแบบ Lazy Loading บล็อกที่ลงทะเบียนกับ block.json จะมีการจัดคิวเนื้อหาให้เหมาะสมที่สุด เนื้อหา CSS และ JavaScript ส่วนหน้าที่แสดงในคุณสมบัติของ style หรือ script จะถูกจัดคิวเมื่อมีการบล็อกบนหน้าเท่านั้น ส่งผลให้ขนาดหน้าลดลง

การรันคำสั่ง @wordpress/create-block จะสร้างไฟล์ block.json ต่อไปนี้:

 { "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

นี่คือรายการคุณสมบัติเริ่มต้นทั้งหมด:

• apiVersion — เวอร์ชันของ API ที่ใช้โดยบล็อก (เวอร์ชันปัจจุบันคือ 2)
• name — ตัวระบุเฉพาะสำหรับบล็อกรวมถึงเนมสเปซ
• version — รุ่นปัจจุบันของบล็อก
• title — ชื่อที่แสดงสำหรับบล็อก
• category — หมวดหมู่บล็อก
• icon — ทาก Dashicon หรือไอคอน SVG ที่กำหนดเอง
• description — คำอธิบายสั้น ๆ ที่มองเห็นได้ในตัวตรวจสอบบล็อก
• supports — ชุดตัวเลือกเพื่อควบคุมคุณสมบัติที่ใช้ในตัวแก้ไข
• textdomain — ปลั๊กอิน text-domain
• editorScript — คำจำกัดความของสคริปต์ตัวแก้ไข
• editorStyle — นิยามสไตล์ตัวแก้ไข
• style — ให้รูปแบบทางเลือกสำหรับบล็อก

นอกเหนือจากคุณสมบัติที่ระบุไว้ข้างต้น คุณสามารถ (และอาจจะ) กำหนดอ็อบเจ็กต์ attributes ที่ให้ข้อมูลเกี่ยวกับข้อมูลที่จัดเก็บโดยบล็อกของคุณ ใน block.json คุณสามารถตั้งค่าแอตทริบิวต์จำนวนเท่าใดก็ได้ในคู่ คีย์/ค่า โดยที่คีย์คือชื่อแอตทริบิวต์ และค่าคือคำจำกัดความแอตทริบิวต์

ดูตัวอย่างต่อไปนี้ของการกำหนดแอตทริบิวต์:

 "attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

เราจะเจาะลึกลงไปในไฟล์ block.json ในบทความนี้ แต่คุณอาจต้องการตรวจสอบคู่มือ Block Editor สำหรับข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับข้อมูลเมตาและแอตทริบิวต์ของ block.json

โฟลเดอร์ src

โฟลเดอร์ src คือตำแหน่งที่เกิดการพัฒนา ในโฟลเดอร์นั้น คุณจะพบไฟล์ต่อไปนี้:

• index.js
• edit.js
• บันทึก.js
• editor.scss
• style.scss

index.js

ไฟล์ index.js คือจุดเริ่มต้นของคุณ ที่นี่คุณจะนำเข้าการพึ่งพาและลงทะเบียนประเภทบล็อกบนไคลเอนต์:

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

คำสั่งแรกนำเข้าฟังก์ชัน registerBlockType จากแพ็คเกจ @wordpress/blocks คำสั่งนำเข้าต่อไปนี้จะนำเข้าสไตล์ชีตพร้อมกับฟังก์ชัน Edit และ save

ฟังก์ชัน registerBlockType ลงทะเบียนส่วนประกอบบนไคลเอ็นต์ ฟังก์ชันนี้ใช้พารามิเตอร์สองตัว: ชื่อบล็อก namespace/block-name (เหมือนกับที่ลงทะเบียนบนเซิร์ฟเวอร์) และวัตถุการกำหนดค่าบล็อก

ฟังก์ชัน Edit จัดเตรียมอินเทอร์เฟซของบล็อกตามที่แสดงในเครื่องมือแก้ไขบล็อก ในขณะที่ฟังก์ชัน save มีโครงสร้างที่จะถูกทำให้เป็นอนุกรมและบันทึกลงในฐานข้อมูล (อ่านเพิ่มเติม)

edit.js

edit.js เป็นที่ที่คุณจะสร้างส่วนต่อประสานผู้ดูแลระบบบล็อก:

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

ขั้นแรก จะนำเข้าฟังก์ชัน __ จากแพ็กเกจ @wordpress/i18n (แพ็กเกจนี้มีฟังก์ชันการแปลเวอร์ชัน JavaScript) ตะขอ useBlockProps React และไฟล์ editor.scss

หลังจากนั้นจะส่งออกส่วนประกอบ React (อ่านเพิ่มเติมเกี่ยวกับคำสั่งนำเข้าและส่งออก)

บันทึก.js

ไฟล์ save.js คือที่ที่เราสร้างโครงสร้างบล็อกที่จะบันทึกลงในฐานข้อมูล:

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scss และ style.scss

นอกเหนือจากสคริปต์แล้ว ไฟล์ SASS สองไฟล์ยังอยู่ในโฟลเดอร์ src ไฟล์ editor.scss มีสไตล์ที่ใช้กับบล็อกในบริบทของเอดิเตอร์ ในขณะที่ไฟล์ style.scss มีสไตล์ของบล็อกสำหรับแสดงในฟรอนต์เอนด์ เราจะเจาะลึกเข้าไปในไฟล์เหล่านี้ในส่วนที่สองของคู่มือนี้

node_modules และสร้าง Folders

โฟลเดอร์ node_modules ประกอบด้วยโมดูลโหนดและการขึ้นต่อกัน เราจะไม่เจาะลึกเข้าไปในแพ็คเกจโหนดเนื่องจากอยู่นอกเหนือขอบเขตของบทความนี้ แต่คุณสามารถอ่านเพิ่มเติมในบทความนี้เกี่ยวกับตำแหน่งที่ npm ติดตั้งแพ็คเกจ

โฟลเดอร์บิลด์ประกอบด้วยไฟล์ JS และ CSS ที่ build จากกระบวนการบิลด์ คุณสามารถเจาะลึกลงไปในกระบวนการสร้างได้ใน ESNext ไวยากรณ์และคู่มือการตั้งค่า JavaScript Build

โครงการ: สร้าง Gutenberg Block แรกของคุณ

ถึงเวลาที่จะทำให้มือของเราสกปรก ส่วนนี้จะสอนวิธีสร้างปลั๊กอินที่มีบล็อก CTA ชื่อ Affiliate Block

บล็อกจะประกอบด้วยสองคอลัมน์ โดยมีรูปภาพอยู่ด้านซ้ายและย่อหน้าข้อความอยู่ด้านขวา ปุ่มที่มีลิงก์ที่ปรับแต่งได้จะอยู่ใต้ข้อความ:

นี่เป็นเพียงตัวอย่างง่ายๆ แต่ช่วยให้เราครอบคลุมพื้นฐานของการพัฒนาบล็อกของ Gutenberg เมื่อคุณเข้าใจพื้นฐานที่ชัดเจนแล้ว คุณสามารถสร้างบล็อก Gutenberg ที่ซับซ้อนมากขึ้นเรื่อยๆ ด้วยความช่วยเหลือของ Block Editor Handbook และทรัพยากรอื่นๆ ที่มีอยู่มากมาย

สมมติว่าคุณมี WordPress เวอร์ชันล่าสุดที่ทำงานในสภาพแวดล้อมการพัฒนาในพื้นที่ของคุณ นี่คือสิ่งที่คุณจะได้เรียนรู้จากที่นี่:

• วิธีการตั้งค่าปลั๊กอินบล็อกเริ่มต้น
• block.json ในที่ทำงาน
• การใช้คอมโพเนนต์ในตัว: คอมโพเนนต์ RichText
• การเพิ่มการควบคุมให้กับแถบเครื่องมือที่ถูกบล็อก
• การปรับแต่งแถบด้านข้างการตั้งค่าบล็อก
• การเพิ่มและปรับแต่งลิงค์ภายนอก
• การเพิ่มสไตล์บล็อกหลายแบบ
• การทำรังบล็อกด้วยส่วนประกอบ InnerBlocks
• การปรับปรุงเพิ่มเติม

พร้อม… ตั้ง… ไป!

วิธีการตั้งค่าปลั๊กอินบล็อกเริ่มต้น

เปิดเครื่องมือบรรทัดคำสั่งของคุณและไปที่โฟลเดอร์ /wp-content/plugins :

ตอนนี้ให้รันคำสั่งต่อไปนี้:

 npx @wordpress/create-block

คำสั่งนี้จะสร้างไฟล์ PHP, SCSS และ JS สำหรับการลงทะเบียนบล็อกในโหมดโต้ตอบ ทำให้คุณสามารถเพิ่มข้อมูลที่จำเป็นสำหรับบล็อกของคุณได้อย่างง่ายดาย สำหรับตัวอย่างของเรา เราจะใช้รายละเอียดต่อไปนี้:

• บล็อกกระสุน : my-affiliate-block
• เนมสเปซภายใน : my-affiliate-plugin
• ชื่อที่แสดงบล็อก : Affiliate block
• คำอธิบายบล็อกแบบสั้น : ตัวอย่างบล็อกสำหรับผู้อ่าน Kinsta
• Dashicon : เงิน
• Category name : ดีไซน์
• ผู้เขียนปลั๊กอิน : ชื่อของคุณ
• ใบอนุญาต : –
• ลิงค์ไปยังข้อความใบอนุญาต : –
• ปลั๊กอินเวอร์ชันปัจจุบัน : 0.1.0

การติดตั้งปลั๊กอินและการพึ่งพาทั้งหมดจะใช้เวลาสองสามนาที เมื่อกระบวนการเสร็จสมบูรณ์ คุณจะเห็นการตอบสนองต่อไปนี้:

ตอนนี้ รันคำสั่งต่อไปนี้จากโฟลเดอร์ /wp-content/plugins :

 cd my-affiliate-block

สุดท้าย จากภายในโฟลเดอร์ปลั๊กอินของคุณ ( my-affiliate-block ในตัวอย่างของเรา) คุณสามารถเริ่มการพัฒนาด้วย:

 npm start

ตอนนี้เปิดหน้าจอปลั๊กอินเพื่อค้นหาและเปิดใช้งานปลั๊กอิน Affiliate Block :

สร้างโพสต์ใหม่ เปิดตัวแทรกบล็อก แล้วเลื่อนลงไปที่หมวด การออกแบบ คลิกเพื่อเพิ่มบล็อกพันธมิตร:

block.json ในที่ทำงาน

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ การลงทะเบียนบล็อกฝั่งเซิร์ฟเวอร์เกิดขึ้นในไฟล์ .php หลัก อย่างไรก็ตาม เราจะไม่กำหนดการตั้งค่าในไฟล์ .php เราจะใช้ไฟล์ block.json แทน

ดังนั้น เปิด block.json อีกครั้งและพิจารณาการตั้งค่าเริ่มต้นอย่างละเอียด:

 { "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

สคริปต์และรูปแบบ

editorScript , editorStyle และคุณสมบัติ style จัดเตรียมพาธสัมพันธ์ไปยังสคริปต์และสไตล์ส่วนหน้าและส่วนหลัง

คุณไม่จำเป็นต้องลงทะเบียนสคริปต์และรูปแบบที่กำหนดไว้ที่นี่ เนื่องจาก WordPress ลงทะเบียนและจัดคิวโดยอัตโนมัติ เพื่อพิสูจน์ว่า ให้เปิดตัวตรวจสอบเบราว์เซอร์และเปิดแท็บ เครือข่าย :

ดังที่คุณเห็นจากภาพด้านบน สคริปต์ index.js ของเราที่อยู่ในโฟลเดอร์ build ได้รับการจัดคิวอย่างสม่ำเสมอ โดยไม่ต้องเพิ่มโค้ด PHP ใดๆ

ป้าย UI

คุณสมบัติ title และ description มีป้ายกำกับที่จำเป็นในการระบุบล็อกในตัวแก้ไข:

คีย์เวิร์ด

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ คุณสามารถกำหนดการตั้งค่าบล็อกของคุณได้อย่างถูกต้องโดยใช้คุณสมบัติและแอตทริบิวต์ ตัวอย่างเช่น คุณสามารถเพิ่มคำหลักหนึ่ง keywords ขึ้นไปเพื่อช่วยให้ผู้ใช้ค้นหาการบล็อก:

 { "keywords": [ "kinsta", "affiliate", "money" ] }

If you now input “kinsta”, “affiliate” or “money” in the quick inserter, the editor will suggest you the Affiliate block:

รองรับหลายภาษา

If you are wondering how the localization of the strings in the JSON file happens, here is the answer:

In JavaScript, you can use now registerBlockTypeFromMetadata method from @wordpress/blocks package to register a block type using the metadata loaded from block.json file. All localized properties get automatically wrapped in _x (from @wordpress/i18n package) function calls similar to how it works in PHP with register_block_type_from_metadata . The only requirement is to set the textdomain property in the block.json file.

Here we are using the registerBlockType function instead of registerBlockTypeFromMetadata , as the latter has been deprecated since Gutenberg 10.7, but the mechanism is the same.

Using Built-In Components: The RichText Component

The elements that make up a Gutenberg block are React components, and you can access these components via the wp global variable. For example, try to type wp.editor into your browser's console. This will give you the full list of the components included in the wp.editor module.

Scroll through the list and guess what components are meant for by their names.

Similarly, you can check the list of components included in the wp.components module:

Now go back to the edit.js file and take a closer look at the script:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

รหัสนี้สร้างบล็อกแบบคงที่ด้วยข้อความธรรมดาที่ไม่สามารถแก้ไขได้ แต่เราสามารถเปลี่ยนสิ่งต่าง ๆ ได้อย่างง่ายดาย:

ในการทำให้ข้อความสามารถแก้ไขได้ คุณจะต้องแทนที่แท็ก <p> ปัจจุบันด้วยส่วนประกอบที่ทำให้เนื้อหาอินพุตสามารถแก้ไขได้ สำหรับสิ่งนั้น Gutenberg ได้จัดเตรียมองค์ประกอบ RichText ในตัว

การเพิ่มองค์ประกอบในตัวให้กับบล็อกของคุณเป็นกระบวนการ 5 ขั้นตอน:

1. นำเข้าส่วนประกอบที่จำเป็นจากแพ็คเกจ WordPress
2. รวมองค์ประกอบที่เกี่ยวข้องลงในโค้ด JSX ของคุณ
3. กำหนดแอตทริบิวต์ที่จำเป็นในไฟล์ block.json
4. กำหนดตัวจัดการเหตุการณ์
5. บันทึกข้อมูล

ขั้นตอนที่ 1: นำเข้าส่วนประกอบที่จำเป็นจากแพ็คเกจ WordPress

ตอนนี้เปิดไฟล์ edit.js และเปลี่ยนคำสั่ง import ต่อไปนี้:

 import { useBlockProps } from '@wordpress/block-editor';

…ถึง:

 import { useBlockProps, RichText } from '@wordpress/block-editor';

ด้วยวิธีนี้ คุณจะนำเข้าฟังก์ชัน useBlockProps และองค์ประกอบ RichText จากแพ็คเกจ @wordpress/block-editor

ใช้BlockProps

ตะขอ useBlockProps React ทำเครื่องหมายองค์ประกอบ wrapper ของบล็อก:

เมื่อใช้ API เวอร์ชัน 2 คุณต้องใช้ useBlockProps hook ใหม่ในฟังก์ชัน edit ของบล็อกเพื่อทำเครื่องหมายองค์ประกอบ wrapper ของบล็อก เบ็ดจะแทรกแอตทริบิวต์และตัวจัดการเหตุการณ์ที่จำเป็นเพื่อเปิดใช้งานพฤติกรรมบล็อก แอตทริบิวต์ใด ๆ ที่คุณต้องการส่งผ่านไปยังองค์ประกอบบล็อกจะต้องส่งผ่าน useBlockProps และค่าที่ส่งคืนจะกระจายไปยังองค์ประกอบ

พูดง่ายๆ ก็คือ useBlockProps จะกำหนดแอตทริบิวต์และคลาสให้กับองค์ประกอบ wrapper โดยอัตโนมัติ (องค์ประกอบ p ในตัวอย่างของเรา):

หากคุณลบ useBlockProps ออกจากองค์ประกอบ wrapper คุณจะมีสตริงข้อความธรรมดาที่ไม่สามารถเข้าถึงฟังก์ชันและรูปแบบการบล็อกได้:

ตามที่เราจะอธิบายในภายหลัง คุณยังสามารถส่งผ่านไปยัง useBlockProps ซึ่งเป็นอ็อบเจ็กต์ของคุณสมบัติเพื่อปรับแต่งเอาต์พุตได้

RichText

คอมโพเนนต์ RichText จัดเตรียมอินพุตที่แก้ไขได้ ทำให้ผู้ใช้สามารถแก้ไขและจัดรูปแบบเนื้อหาได้

คุณจะพบส่วนประกอบที่บันทึกไว้ใน GitHub ที่ gutenberg/packages/block-editor/src/components/rich-text/README.md

ขั้นตอนที่ 2: รวมองค์ประกอบที่เกี่ยวข้องลงในรหัส JSX ของคุณ

 ... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

แสดงความคิดเห็นเกี่ยวกับโค้ดทีละบรรทัด:

• tagName — ชื่อแท็กขององค์ประกอบ HTML ที่แก้ไขได้
• onChange — เรียกฟังก์ชันเมื่อเนื้อหาขององค์ประกอบเปลี่ยนแปลง
• allowedFormats — อาร์เรย์ของรูปแบบที่อนุญาต โดยค่าเริ่มต้น อนุญาตให้ใช้รูปแบบทั้งหมดได้
• value — สตริง HTML เพื่อให้แก้ไขได้
• placeholder — ข้อความตัวยึดตำแหน่งที่จะแสดงเมื่อองค์ประกอบว่างเปล่า

ขั้นตอนที่ 3: กำหนดแอตทริบิวต์ที่จำเป็นใน block.json File

แอตทริบิวต์ให้ข้อมูลเกี่ยวกับข้อมูลที่จัดเก็บโดยบล็อก เช่น เนื้อหาที่หลากหลาย สีพื้นหลัง URL ฯลฯ

คุณสามารถกำหนดจำนวนแอตทริบิวต์ภายในออบเจ็ก attributes ได้ตามต้องการในคู่คีย์/ค่า โดยที่คีย์คือชื่อแอตทริบิวต์ และค่าคือนิยามแอตทริบิวต์

ตอนนี้เปิดไฟล์ block.json และเพิ่ม attributes ต่อไปนี้:

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

แอตทริบิวต์ content อนุญาตให้จัดเก็บข้อความที่พิมพ์โดยผู้ใช้ในฟิลด์ที่แก้ไขได้:

• type ระบุประเภทของข้อมูลที่จัดเก็บโดยแอตทริบิวต์ ต้องระบุประเภทเว้นแต่คุณจะกำหนดคุณสมบัติ enum
• source กำหนดวิธีการดึงค่าแอตทริบิวต์จากเนื้อหาโพสต์ ในตัวอย่างของเราคือเนื้อหา HTML โปรดทราบว่าถ้าคุณไม่ระบุคุณสมบัติต้นทาง ข้อมูลจะถูกเก็บไว้ในตัวคั่นบล็อก (อ่านเพิ่มเติม)
• selector คือแท็ก HTML หรือตัวเลือกอื่นๆ เช่น ชื่อคลาสหรือแอตทริบิวต์ id

เราจะส่งต่อฟังก์ชัน Edit เป็นอ็อบเจ็กต์ของคุณสมบัติ ดังนั้น กลับไปที่ไฟล์ edit.js และทำการเปลี่ยนแปลงต่อไปนี้:

 export default function Edit( { attributes, setAttributes } ) { ... }

ขั้นตอนที่ 4: กำหนดตัวจัดการเหตุการณ์

องค์ประกอบ RichText มีแอตทริบิวต์ onChange ซึ่งมีฟังก์ชันที่จะเรียกใช้เมื่อเนื้อหาขององค์ประกอบเปลี่ยนแปลง

มากำหนดฟังก์ชันนั้นและดูสคริปต์ edit.js ทั้งหมด:

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

ตอนนี้บันทึกไฟล์และเรียกใช้ npm run start ในหน้าต่างเทอร์มินัลของคุณ จากนั้นกลับไปที่แดชบอร์ด WordPress สร้างโพสต์หรือหน้าใหม่และเพิ่มบล็อก Affiliate ของคุณ:

เพิ่มข้อความและเปลี่ยนเป็นมุมมองโค้ด โค้ดของคุณควรมีลักษณะดังนี้:

 <!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

หากคุณบันทึกหน้าและตรวจสอบผลลัพธ์ส่วนหน้าแล้ว คุณอาจผิดหวังเล็กน้อยเนื่องจากการเปลี่ยนแปลงของคุณไม่ส่งผลต่อไซต์ นั่นเป็นเพราะคุณต้องแก้ไขไฟล์ save.js เพื่อเก็บอินพุตของผู้ใช้ในฐานข้อมูลเมื่อโพสต์ถูกบันทึก

ขั้นตอนที่ 5: บันทึกข้อมูล

ตอนนี้เปิดไฟล์ save.js และเปลี่ยนสคริปต์ดังนี้:

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

นั่นคือสิ่งที่เรากำลังทำที่นี่:

• นำเข้าส่วนประกอบ RichText จากแพ็คเกจ block-editor
• ส่งคุณสมบัติหลายอย่างผ่านอาร์กิวเมนต์ของวัตถุไปยังฟังก์ชัน save (ในตัวอย่างนี้ เราส่งผ่านคุณสมบัติ attributes เท่านั้น)
• ส่งคืนเนื้อหาของคอมโพเนนต์ RichText

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับองค์ประกอบ RichText ในคู่มือตัวแก้ไขบล็อก และค้นหารายการอุปกรณ์ประกอบฉากทั้งหมดบน Github

ตอนนี้ขอก้าวไปอีกขั้น ในส่วนถัดไป คุณจะได้เรียนรู้วิธีเพิ่มการควบคุมลงในแถบเครื่องมือบล็อก

การเพิ่มการควบคุมให้กับแถบเครื่องมือที่ถูกบล็อก

แถบเครื่องมือบล็อกประกอบด้วยชุดการควบคุมที่อนุญาตให้ผู้ใช้จัดการเนื้อหาบล็อกบางส่วน สำหรับการควบคุมแถบเครื่องมือแต่ละรายการ คุณจะพบส่วนประกอบ:

ตัวอย่างเช่น คุณสามารถเพิ่มตัวควบคุมการจัดแนวข้อความสำหรับบล็อกของคุณ สิ่งที่คุณต้องทำคือนำเข้าสององค์ประกอบจากแพ็คเกจ @wordpress/block-editor

เราจะดำเนินการตามขั้นตอนเดียวกันกับตัวอย่างก่อนหน้านี้:

1. นำเข้าส่วนประกอบที่จำเป็นจากแพ็คเกจ WordPress
2. รวมองค์ประกอบที่เกี่ยวข้องลงในรหัส JSX ของคุณ
3. กำหนดแอตทริบิวต์ที่จำเป็นใน block.json File
4. กำหนดตัวจัดการเหตุการณ์
5. บันทึกข้อมูล

ขั้นตอนที่ 1: นำเข้าส่วนประกอบ BlockControls และ AlignmentControl จาก @wordpress/block-editor

ในการเพิ่มการควบคุมการจัดตำแหน่งให้กับแถบเครื่องมือบล็อก คุณต้องมีส่วนประกอบสองส่วน:

• BlockControls แสดงแถบเครื่องมือไดนามิกของการควบคุม (ไม่มีเอกสาร)
• AlignmentControl แสดงเมนูแบบเลื่อนลงที่แสดงตัวเลือกการจัดตำแหน่งสำหรับบล็อกที่เลือก (อ่านเพิ่มเติม)

เปิดไฟล์ edit.js และแก้ไขคำสั่ง import ดังที่แสดงด้านล่าง:

 import { useBlockProps, RichText, AlignmentControl, BlockControls } from '@wordpress/block-editor';

ขั้นตอนที่ 2: เพิ่ม BlockControls และ AlignmentControl Elements

ไปที่ฟังก์ชัน Edit และแทรกองค์ประกอบ <BlockControls /> ที่ระดับเดียวกับ <RichText /> จากนั้นเพิ่มและ <AlignmentControl /> ภายใน <BlockControls /> :

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

ในโค้ดด้านบน <> และ </> เป็นไวยากรณ์สั้น ๆ สำหรับการประกาศ React Fragment ซึ่งเป็นวิธีที่เราส่งคืนองค์ประกอบหลายรายการใน React

ในตัวอย่างนี้ AlignmentControl มีสองแอตทริบิวต์:

• value ให้ค่าปัจจุบันสำหรับองค์ประกอบ
• onChange จัดเตรียมตัวจัดการเหตุการณ์ให้ทำงานเมื่อค่าเปลี่ยนแปลง

เราได้กำหนดแอตทริบิวต์เพิ่มเติมสำหรับองค์ประกอบ RichText (ตรวจสอบรายการแอตทริบิวต์ทั้งหมดพร้อมตัวอย่าง)

ขั้นตอนที่ 3: กำหนดแอตทริบิวต์การจัดตำแหน่งใน block.json

ตอนนี้ไปที่ไฟล์ block.json และเพิ่มแอตทริบิวต์ align :

 "align": { "type": "string", "default": "none" }

กลับไปที่เทอร์มินัล หยุดกระบวนการปัจจุบันด้วย ^C แล้วเริ่มสคริปต์อีกครั้งด้วย npm run start จากนั้นกลับไปที่ตัวแก้ไขบล็อก รีเฟรชหน้าและเลือกบล็อก คุณควรเห็นแถบเครื่องมือบล็อกพร้อมตัวควบคุมการจัดตำแหน่ง:

ตอนนี้ หากคุณพยายามจัดรูปแบบเนื้อหาบล็อกโดยใช้ตัวควบคุมการจัดแนวใหม่ คุณจะพบว่าไม่มีอะไรเกิดขึ้น นั่นเป็นเพราะเรายังไม่ได้กำหนดตัวจัดการเหตุการณ์เลย

ขั้นตอนที่ 4: กำหนดตัวจัดการเหตุการณ์

ตอนนี้กำหนด onChangeAlign :

 const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

หาก newAlign เป็น undefined เราก็ตั้งค่า newAlign เป็น none มิฉะนั้น เราใช้ newAlign

สคริปต์ edit.js ของเราน่าจะสมบูรณ์แล้ว (ในตอนนี้):

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

ตอนนี้คุณสามารถกลับไปที่โปรแกรมแก้ไขและจัดแนวเนื้อหาบล็อก

เราจำเป็นต้องแก้ไขฟังก์ชันบันทึกเพื่อจัดเก็บเนื้อหาบล็อกและแอตทริบิวต์ในฐานข้อมูล

ขั้นตอนที่ 5: บันทึกข้อมูล

เปิด save.js และเปลี่ยนฟังก์ชั่น save ดังนี้:

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

สุดท้าย ในการทำให้โค้ดอ่านง่ายขึ้น คุณสามารถแยกคุณสมบัติแต่ละรายการออกจากอ็อบเจ็กต์ attribute โดยใช้รูปแบบการกำหนดโครงสร้างที่ทำลายล้าง:

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

บันทึกไฟล์ เริ่มต้นกระบวนการใหม่ และกลับไปที่ตัวแก้ไขในโหมดตัวแก้ไขโค้ด รหัสควรมีลักษณะดังนี้:

 <!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

และนั่นแหล่ะ! คุณเพิ่งเพิ่มการควบคุมการจัดตำแหน่งให้กับแถบเครื่องมือบล็อก

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการควบคุมแถบเครื่องมือบล็อกได้ในคู่มือตัวแก้ไขบล็อก

การปรับแต่งแถบด้านข้างการตั้งค่าบล็อก

คุณยังสามารถเพิ่มการควบคุมให้กับแถบด้านข้างการตั้งค่าบล็อก (หรือแม้แต่สร้างแถบด้านข้างใหม่สำหรับแอปพลิเคชันของคุณ)

API จัดเตรียมองค์ประกอบ InspectorControls สำหรับสิ่งนั้น

คู่มือตัวแก้ไขบล็อกจะอธิบายวิธีใช้แถบด้านข้างการตั้งค่า:

แถบด้านข้างการตั้งค่าใช้เพื่อแสดงการตั้งค่าที่ไม่ค่อยได้ใช้หรือการตั้งค่าที่ต้องการพื้นที่หน้าจอมากขึ้น ควรใช้แถบด้านข้างการตั้งค่าสำหรับ การตั้งค่าระดับบล็อกเท่านั้น

หากคุณมีการตั้งค่าที่มีผลเฉพาะกับเนื้อหาที่เลือกภายในบล็อก (ตัวอย่าง: การตั้งค่า "ตัวหนา" สำหรับข้อความที่เลือกภายในย่อหน้า): อย่าวางไว้ในแถบด้านข้างการตั้งค่า แถบด้านข้างการตั้งค่าจะแสดงขึ้นแม้ในขณะแก้ไขบล็อกในโหมด HTML ดังนั้นจึงควรมีเฉพาะการตั้งค่าระดับบล็อกเท่านั้น

อีกครั้ง:

1. นำเข้าส่วนประกอบที่จำเป็นจากแพ็คเกจ WordPress
2. รวมองค์ประกอบที่เกี่ยวข้องลงในรหัส JSX ของคุณ
3. กำหนดแอตทริบิวต์ที่จำเป็นใน block.json File
4. กำหนดตัวจัดการเหตุการณ์
5. บันทึกข้อมูล

ขั้นตอนที่ 1 นำเข้าส่วนประกอบ InspectorControls และ PanelColorSettings จาก @wordpress/block-editor

คุณสามารถเพิ่มการควบคุมต่างๆ เพื่อให้ผู้ใช้ปรับแต่งลักษณะเฉพาะของบล็อกได้ ตัวอย่างเช่น คุณสามารถจัดเตรียมแผงควบคุมสี ในการดำเนินการดังกล่าว คุณจะต้องนำเข้าส่วนประกอบ InspectorControls และ PanelColorSettings จากโมดูลตัว block-editor :

 import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

ขั้นตอนที่ 2: รวมองค์ประกอบที่เกี่ยวข้องลงในโค้ด JSX ของคุณ

ตอนนี้คุณสามารถเพิ่มองค์ประกอบที่เกี่ยวข้องให้กับ JSX ที่ส่งคืนโดยฟังก์ชัน Edit :

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

โปรดทราบว่าเราได้อัปเดตแอตทริบิวต์ style ขององค์ประกอบ RichText แล้ว:

 <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

ขั้นตอนที่ 3: กำหนดแอตทริบิวต์ที่จำเป็นใน block.json

ตอนนี้กำหนดแอตทริบิวต์ backgroundColor และ textColor ในไฟล์ block.json :

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

ขั้นตอนที่ 4: กำหนดตัวจัดการเหตุการณ์

ตอนนี้ คุณต้องกำหนดสองฟังก์ชันเพื่ออัปเดต backgroundColor และ textColor ในการป้อนข้อมูลของผู้ใช้:

 const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

ขั้นตอนที่ 5: บันทึกข้อมูล

ขั้นตอนสุดท้าย: เปิดไฟล์ save.js และเปลี่ยนสคริปต์ดังนี้:

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

ตอนนี้หยุดกระบวนการ (^C) และรัน npm run start อีกครั้ง รีเฟรชหน้า ลบอินสแตนซ์ใดๆ ของบล็อกของคุณ และเพิ่มอีกครั้งในโพสต์ของคุณ:

ทำการเปลี่ยนแปลง บันทึกโพสต์ และดูในส่วนหน้า การเปลี่ยนแปลงที่คุณทำในเครื่องมือแก้ไขบล็อกควรมีผลกับเว็บไซต์ด้านหน้า

การเพิ่มและปรับแต่งลิงค์ภายนอก

ในส่วนนี้ คุณจะเพิ่มส่วนประกอบใหม่ให้กับประเภทบล็อกของคุณ:

• คอมโพเนนต์ ExternalLink ที่อนุญาตให้ผู้ใช้เพิ่มลิงก์ที่ปรับแต่งได้ไปยังบล็อก Affiliate
• การควบคุมแถบด้านข้างหลายอย่างทำให้ผู้ใช้สามารถปรับแต่งการตั้งค่าลิงก์ได้

ขั้นตอนที่ 1. นำเข้าส่วนประกอบจาก @wordpress/components

ตอนนี้ คุณต้องนำเข้าส่วนประกอบหลายอย่างจาก @wordpress/components เปิดไฟล์ edit.js และเพิ่มคำสั่ง import ต่อไปนี้:

 import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBody เพิ่มคอนเทนเนอร์ที่ยุบได้ลงในแถบด้านข้างการตั้งค่า
• PaneRow สร้างคอนเทนเนอร์ทั่วไปสำหรับการควบคุมแถบด้านข้าง
• TextControl ให้การควบคุมการป้อนข้อความ
• ToggleControl ให้การสลับที่ช่วยให้ผู้ใช้สามารถเปิด/ปิดตัวเลือกเฉพาะ
• ExternalLink เป็นส่วนประกอบง่ายๆ ในการเพิ่มลิงก์ภายนอก

ขั้นตอนที่ 2 รวมองค์ประกอบที่เกี่ยวข้องลงในรหัส JSX ของคุณ

ก่อนอื่น คุณจะต้องเพิ่มองค์ประกอบ ExternalLink ที่ระดับ RichText เดียวกันในคอนเทนเนอร์ div :

 <div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

คอมโพเนนต์ ExternalLink ไม่ได้รับการบันทึกไว้ ดังนั้นเราจึงอ้างอิงถึงคอมโพเนนต์เพื่อรับรายการแอตทริบิวต์ที่พร้อมใช้งาน ที่นี่เราใช้ href , className และ rel

โดยค่าเริ่มต้น ค่าแอตทริบิวต์ rel ถูกตั้งค่าเป็น noopener noreferrer โค้ดของเราจะเพิ่มคีย์เวิร์ด nofollow ให้กับแอตทริบิวต์ rel ของแท็ก a ผลลัพธ์เมื่อเปิดการควบคุม การ สลับ

ตอนนี้คุณสามารถเพิ่มการตั้งค่าลิงก์ไปยังแถบด้านข้างของบล็อกได้แล้ว

ขั้นแรก คุณจะต้องเพิ่มองค์ประกอบ PanelBody ภายใน InspectorControls ที่ระดับเดียวกับ PanelColorSettings :

 <InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

นี่คือสิ่งที่เราทำกับสิ่งนี้:

1. แอตทริบิวต์ title ระบุชื่อแผง
2. initialOpen ตั้งค่าว่าจะให้พาเนลเปิดในตอนแรกหรือไม่

ต่อไป เราจะเพิ่มองค์ประกอบ PanelRow สององค์ประกอบภายใน PanelBody และองค์ประกอบ TextControl ภายในแต่ละ PanelRow :

 <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

โค้ดด้านบนนี้ควรดูตรงไปตรงมาทีเดียว การควบคุมข้อความทั้งสองอนุญาตให้ผู้ใช้ตั้งค่าป้ายกำกับลิงก์และ URL

นอกจากนี้เรายังจะเพิ่ม PanelRow เพิ่มเติมด้วย ToggleControl เพื่อเปิด/ปิดตัวเลือกเฉพาะ เช่น จะรวมแอตทริบิวต์หรือไม่:

 <PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

ขั้นตอนที่ 3: กำหนดแอตทริบิวต์ที่จำเป็นใน block.json

ตอนนี้กำหนดแอตทริบิวต์ affiliateLink , linkLabel และ hasLinkNofollow ในไฟล์ block.json :

 "affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

ไม่มีอะไรจะเพิ่มเติมที่นี่! มาดูการกำหนดฟังก์ชันการจัดการเหตุการณ์กัน

ขั้นตอนที่ 4: กำหนดตัวจัดการเหตุการณ์

กลับไปที่ไฟล์ edit.js และเพิ่มฟังก์ชันต่อไปนี้:

 const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

ฟังก์ชันเหล่านี้จะอัปเดตค่าแอตทริบิวต์ที่สอดคล้องกันในการป้อนข้อมูลของผู้ใช้

ขั้นตอนที่ 5: บันทึกข้อมูล

สุดท้าย เราต้องอัปเดตฟังก์ชัน save ใน save.js :

 export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

โปรดทราบว่าที่นี่เรา a องค์ประกอบปกติแทน ExternalLink :

ตอนนี้บันทึกข้อมูลและรีสตาร์ทสภาพแวดล้อมของคุณ

การเพิ่มสไตล์บล็อกหลายแบบ

ในส่วนก่อนหน้านี้ คุณได้เรียนรู้วิธีเพิ่มการควบคุมแถบเครื่องมือบล็อกที่อนุญาตให้ผู้ใช้จัดแนวการป้อนข้อมูลของผู้ใช้ เราสามารถเพิ่มการควบคุมสไตล์ให้กับแถบเครื่องมือบล็อกได้ แต่เรายังสามารถจัดเตรียมชุดของสไตล์บล็อกที่กำหนดไว้ล่วงหน้าซึ่งผู้ใช้สามารถเลือกได้ด้วยการคลิกเพียงครั้งเดียว

เพื่อจุดประสงค์นี้ เราจะใช้คุณลักษณะที่มีประโยชน์ของ Block API: Block Styles

สิ่งที่คุณต้องทำคือกำหนดคุณสมบัติ styles block.json และประกาศสไตล์ที่สอดคล้องกันในสไตล์ชีตของคุณ

ตัวอย่างเช่น คุณสามารถเพิ่มอาร์เรย์ของสไตล์ต่อไปนี้:

 "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

ด้วยสิ่งนี้ คุณเพิ่งเพิ่มสไตล์เริ่มต้นและสไตล์เพิ่มเติมที่เรียกว่า border กลับไปที่ตัวแก้ไขบล็อก:

ผู้ใช้จะสามารถใช้สไตล์นี้ได้โดยคลิกที่ตัวสลับบล็อก จากนั้นมองหา แผงสไตล์ ใน แถบด้านข้างการตั้งค่าบล็อก

เลือกสไตล์และตรวจสอบคลาสที่ใช้กับองค์ประกอบ p คลิกขวาที่บล็อกและ ตรวจสอบ เพิ่มคลาสใหม่ด้วยชื่อที่มีโครงสร้างดังนี้:

 is-style-{style-name}

หากคุณตรวจสอบสไตล์ "เส้นขอบ" แล้วคลาส is-style-border จะถูกเพิ่มลงในองค์ประกอบ p หากคุณเลือกสไตล์ "เริ่มต้น" คลาส is-style-default จะถูกเพิ่มเข้ามาแทน

ตอนนี้คุณต้องประกาศคุณสมบัติ CSS เท่านั้น เปิดไฟล์ editor.scss และแทนที่สไตล์ปัจจุบันด้วยสิ่งต่อไปนี้:

 .wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

ตอนนี้คุณสามารถทำเช่นเดียวกันกับ style.scss :

 .wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

หยุดกระบวนการ (^C) และรัน npm run start อีกครั้ง

และนั่นแหล่ะ! รีเฟรชหน้าและสนุกกับรูปแบบบล็อกใหม่ของคุณ:

การทำรัง Gutenberg Blocks ด้วยส่วนประกอบ InnerBlocks

แม้ว่าจะทำงานได้อย่างสมบูรณ์ แต่ Affiliate Block ของเราก็ยังไม่ค่อยน่าดึงดูดนัก เพื่อให้ผู้ชมมีส่วนร่วมมากขึ้น เราสามารถเพิ่มรูปภาพได้

ซึ่งอาจเพิ่มชั้นความซับซ้อนให้กับบล็อกของเรา แต่โชคดีที่คุณไม่จำเป็นต้องสร้างวงล้อใหม่เพราะ Gutenberg มีส่วนประกอบเฉพาะที่คุณสามารถใช้เพื่อสร้างโครงสร้างของบล็อกที่ซ้อนกัน

คอมโพเนนต์ InnerBlocks ถูกกำหนดดังนี้:

InnerBlocks ส่งออกส่วนประกอบคู่หนึ่งซึ่งสามารถใช้ในการใช้งานบล็อกเพื่อเปิดใช้งานเนื้อหาบล็อกที่ซ้อนกัน

ขั้นแรก คุณจะต้องสร้างไฟล์ . js ใหม่ในโฟลเดอร์ src ในตัวอย่างของเรา เราจะเรียกไฟล์นี้ว่า container.js

ตอนนี้ คุณจะต้องนำเข้าทรัพยากรใหม่ไปยังไฟล์ index.js :

 import './container';

กลับไปที่ container.js และนำเข้าส่วนประกอบที่จำเป็น:

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

ขั้นตอนต่อไปคือการกำหนดเทมเพลตที่มีโครงสร้างภายในที่จะวางบล็อก ในตัวอย่างต่อไปนี้ เรากำหนดเทมเพลตที่ประกอบด้วยสองคอลัมน์ที่มีบล็อกรูปภาพหลักและบล็อก Affiliate แบบกำหนดเองของเรา:

 const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

เทมเพลตมีโครงสร้างเป็นอาร์เรย์ของ blockTypes (ชื่อบล็อกและแอตทริบิวต์ที่ไม่บังคับ)

ในโค้ดด้านบน เราใช้แอตทริบิวต์หลายอย่างเพื่อกำหนดค่าบล็อกคอลัมน์และคอลัมน์ โดยเฉพาะอย่างยิ่ง templateLock: 'all' ล็อกบล็อกคอลัมน์เพื่อไม่ให้ผู้ใช้เพิ่ม เรียงลำดับใหม่ หรือลบบล็อกที่มีอยู่ templateLock สามารถรับค่าใดค่าหนึ่งต่อไปนี้:

• all — InnerBlocks ถูกล็อค และไม่สามารถเพิ่ม จัดเรียงใหม่ หรือลบบล็อคได้
• insert — สามารถจัดลำดับหรือลบบล็อกใหม่ได้เท่านั้น
• false — เทมเพลตไม่ถูกล็อค

จากนั้นเทมเพลตจะถูกกำหนดให้กับองค์ประกอบ InnerBlocks :

 <InnerBlocks template={ TEMPLATE } templateLock="all" />

เพื่อป้องกันปัญหาความเข้ากันได้ เรายังได้เพิ่มแอตทริบิวต์ templateLock ให้กับส่วนประกอบ InnerBlocks (ดูปัญหา #17262 และดึง #26128)

นี่คือไฟล์ container.js สุดท้ายของเรา:

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

การปรับปรุงเพิ่มเติม

บล็อกของเราทำงานได้อย่างสมบูรณ์ แต่เราสามารถปรับปรุงได้เล็กน้อยด้วยการเปลี่ยนแปลงเล็กน้อย

เรากำหนดแอตทริบิวต์ backgroundColor ให้กับย่อหน้าที่สร้างโดยองค์ประกอบ RichText อย่างไรก็ตาม เราอาจต้องการกำหนดสีพื้นหลังให้กับคอนเทนเนอร์ div :

ดังนั้น เปลี่ยนไฟล์ edit.js และ save.js div s ดังนี้:

 <div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

ซึ่งจะทำให้ผู้ใช้สามารถเปลี่ยนพื้นหลังของบล็อกทั้งหมดได้

ในทางกลับกัน การเปลี่ยนแปลงที่เกี่ยวข้องมากขึ้นเกี่ยวข้องกับเมธอด useBlockProps ในโค้ดดั้งเดิม เรากำหนด blockProps คงที่ดังนี้:

 const blockProps = useBlockProps();

แต่เราสามารถใช้ useBlockProps ผ่านชุดคุณสมบัติได้อย่างมีประสิทธิภาพมากขึ้น ตัวอย่างเช่น เราสามารถนำเข้าชื่อคลาสจากโมดูล classnames และตั้งชื่อ classnames wrapper ตามนั้น

ในตัวอย่างต่อไปนี้ เรากำหนดชื่อคลาสตามค่าของแอตทริบิวต์ align ( edit.js ):

 import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

เราจะทำการเปลี่ยนแปลงเดียวกันในไฟล์ save.js :

 import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

และนั่นคือห่อ! ตอนนี้คุณสามารถรันบิลด์สำหรับการผลิตได้

สรุป

และแล้วเราก็มาถึงจุดสิ้นสุดของการเดินทางอันน่าทึ่งนี้แล้ว! เราเริ่มต้นด้วยการกำหนดค่าของสภาพแวดล้อมการพัฒนาและจบลงด้วยการสร้างประเภทบล็อกที่สมบูรณ์

ดังที่เราได้กล่าวไว้ในบทนำ ความรู้ที่มั่นคงเกี่ยวกับ Node.js, Webpack, Babel และ React เป็นสิ่งจำเป็นสำหรับการสร้างบล็อก Gutenberg ขั้นสูงและวางตำแหน่งตัวเองในตลาดในฐานะนักพัฒนา Gutenberg มืออาชีพ

แต่คุณไม่จำเป็นต้องสร้างประสบการณ์ React เพื่อเริ่มสนุกกับการพัฒนาบล็อก การพัฒนาบล็อกสามารถให้แรงจูงใจและเป้าหมายแก่คุณเพื่อให้ได้รับทักษะที่กว้างขึ้นในเทคโนโลยีที่อยู่เบื้องหลังกลุ่ม Gutenberg

คู่มือนี้จึงยังไม่สมบูรณ์ เป็นเพียงการแนะนำหัวข้อต่างๆ มากมายที่จะช่วยให้คุณเริ่มต้นสร้างบล็อก Gutenberg แรกๆ ของคุณ

ด้วยเหตุผลนี้ เราขอแนะนำให้คุณเพิ่มพูนความรู้ของคุณโดยการอ่านเอกสารและคำแนะนำออนไลน์อย่างละเอียด ในบรรดาแหล่งข้อมูลที่มีอยู่มากมาย เราขอแนะนำสิ่งต่อไปนี้:

• สร้างบล็อกการสอนอย่างเป็นทางการสำหรับผู้เริ่มต้น
• บล็อกการสอนอย่างเป็นทางการสำหรับนักพัฒนาระดับกลาง
• บล็อกไดนามิก
• Meta Boxes
• การสร้างแถบด้านข้างสำหรับปลั๊กอินของคุณ

หากคุณเพิ่งเริ่มต้นกับการพัฒนา WordPress คุณอาจต้องการทำความเข้าใจแนวคิดพื้นฐานของการพัฒนาส่วนหน้า ต่อไปนี้คือรายการทรัพยากรที่อาจช่วยคุณในการเริ่มต้นอย่างรวดเร็ว:

• วิธีการติดตั้ง WordPress ในเครื่อง (ebook ฟรี)
• มูลค่าที่แท้จริงของโฮสติ้ง WordPress ที่มีการจัดการ (ebook ฟรี)
• JavaScript คืออะไร?
• HTML เทียบกับ HTML5
• วิธีแก้ไข CSS ใน WordPress
• PHP คืออะไร?
• Bootcamp ของ WordPress Hooks: วิธีใช้การกระทำ ตัวกรอง และ Hooks ที่กำหนดเอง

และจำไว้ว่าโค้ดทั้งหมดของตัวอย่างคู่มือนี้มีอยู่ใน Gist

ถึงคราวของคุณแล้ว: คุณได้พัฒนาบล็อกของ Gutenberg แล้วหรือยัง? อะไรคือปัญหาหลักที่คุณเคยเจอมา? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น!