นำส่วนประกอบ React กลับมาใช้ใหม่จาก Gutenberg ในปลั๊กอิน WordPress ของคุณ

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

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

เนื่องจากโปรแกรมเมอร์ไม่ควรสร้างวงล้อขึ้นมาใหม่ และในโลกของการพัฒนาซอฟต์แวร์นั้น ย่อมมีมากกว่านั้นเสมอ วันนี้เราจะมาดูวิธีนำส่วนประกอบ React ที่มีอยู่กลับมาใช้ใหม่ใน WordPress

ส่วนประกอบ React ที่รวมอยู่ใน WordPress

WordPress มีส่วนประกอบ React มากกว่า 80 รายการที่คุณสามารถใช้ซ้ำในการพัฒนาของคุณผ่านแพ็คเกจ @wordpress/components ของ Gutenberg:

ในแต่ละโฟลเดอร์คอมโพเนนต์ที่คุณจะพบที่นี่ใน Github ของโปรเจ็กต์ Gutenberg คุณจะมีซอร์สโค้ด JavaScript ของแต่ละองค์ประกอบ ตลอดจนสไตล์ CSS และเอกสารประกอบเพื่อให้ทราบว่าจะใช้งานอย่างไรและเมื่อใด

ในบรรดาองค์ประกอบที่เราที่ Nelio ใช้สำหรับอินเทอร์เฟซ React ใหม่ของเรา การเน้น Button และ ButtonGroup เพื่อกำหนดปุ่มนั้นคุ้มค่า ตัวควบคุมทั้งหมดสำหรับฟิลด์และตัวเลือกต่างๆ เช่น CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl หรือ TextControl หรือแม้แต่ TabPanel สำหรับอินเทอร์เฟซแบบแท็บ หรือ Popover และ Modal สำหรับกล่องโต้ตอบแบบลอย และยังมีอีกมากมาย...

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

วิธีการใช้ WordPress React Components ซ้ำ

ลองนึกภาพว่าคุณต้องการใช้ปุ่มในอินเทอร์เฟซที่พัฒนาขึ้นใน React ขอบคุณส่วนประกอบที่มีอยู่ใน Gutenberg คุณสามารถใช้องค์ประกอบ Button ได้โดยตรงดังที่คุณเห็นในตัวอย่างต่อไปนี้:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

คุณอาจสงสัยว่าสำหรับปุ่มใดปุ่มหนึ่ง คุณไม่จำเป็นต้องใช้คอมโพเนนต์ Gutenberg และใช้แท็ก <button> โดยตรงแทน และคุณจะพูดถูก

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

หากต้องการนำส่วนประกอบ Gutenberg ที่มีอยู่กลับมาใช้ใหม่ คุณเพียงแค่ต้องตรวจสอบว่ามีส่วนประกอบนี้อยู่หรือไม่ และนำเข้าไปยังโค้ดของคุณผ่านแพ็คเกจ @wordpress/components ดังที่คุณเห็นในข้อมูลโค้ดด้านบน เราได้นำเข้าส่วนประกอบ Button จากแพ็คเกจนี้ และเพื่อให้มีแพ็คเกจพร้อมใช้งานภายในโปรเจ็กต์ของคุณ คุณต้องติดตั้งโดยใช้คำสั่ง npm install @wordpress/components ในเทอร์มินัล แต่ David ได้อธิบายเรื่องนี้ไปแล้วในโพสต์ของเขา ดังนั้นฉันจะไม่พูดถึงเรื่องนี้อีก

สิ่งที่คุณต้องจำไว้ก็คือเพื่อให้ส่วนประกอบเหล่านี้ใช้สไตล์ WordPress คุณต้องตั้งค่า wp-components เป็นการพึ่งพาไฟล์สไตล์ CSS ของคุณเมื่อคุณเข้าคิวใน WordPress ด้วยฟังก์ชัน PHP wp_enqueue_style

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

หนังสือนิทานส่วนประกอบปฏิกิริยาของ Gutenberg

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

ในบรรดาตัวเลือกต่างๆ ที่รวมอยู่ใน Gutenberg Storybook เรามีความเป็นไปได้ที่จะลองใช้ตัวแก้ไขบล็อกผ่านเมนู สนามเด็กเล่น แต่ตัวเลือกที่น่าสนใจที่สุดคือสามารถดูเอกสารประกอบของส่วนประกอบ Gutenberg ได้อย่างเป็นกันเอง

คุณเพียงแค่ต้องเปิดเมนู ส่วนประกอบ และคุณจะพบรายการส่วนประกอบที่ WordPress จัดเตรียมไว้ให้ผ่านแพ็คเกจ @wordpress/components คุณสามารถสำรวจแต่ละองค์ประกอบ React และดูตัวอย่างการใช้งานด้วยโค้ด JavaScript แบบเต็ม

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

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

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

ไม่ใช่ทุกองค์ประกอบในแพ็คเกจ @wordpress/components ที่มีเอกสารประกอบที่สมบูรณ์ใน Storybook ดังนั้นคุณจะต้องไปที่ส่วนแพ็คเกจส่วนประกอบบน Github เพื่อดูสถานะเวอร์ชันล่าสุดของส่วนประกอบ React ใน Gutenberg

อย่างไรก็ตาม เมื่อเอกสาร Gutenberg Storybook เสร็จสมบูรณ์ นักพัฒนาก็จะมีความน่าสนใจมากขึ้นเรื่อยๆ การมีเอกสารประเภทนี้ใน WordPress ถือเป็นเรื่องหรูหรา ประโยชน์ของมันอยู่เหนือการสนทนา

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

ภาพเด่นโดย Morning Brew บน Unsplash