G2 Components การจำลองใหม่ของ WordPress Components

อัพเดทของ กัน หน่อย

นั่นคือเป้าหมายที่ Jon Quach หัวหน้านักออกแบบของ Automattic ได้วางไว้ในแผนงานสำหรับการรวมโปรเจ็กต์ G2 Components เข้ากับ Gutenberg และในที่สุดก็เป็นแกนหลักของ WordPress โปรเจ็กต์นี้เป็นการคิดใหม่เกี่ยวกับชิ้นส่วนต่างๆ ที่ทำให้ตัวแก้ไขบล็อก เป็นการยกเครื่อง "ตั้งแต่เริ่มต้น" ของระบบส่วนประกอบ การอัปเดต ทุกสิ่ง หรือแม้แต่ หลายสิ่ง พร้อมกันอาจเสี่ยงต่อการทำลายทุกสิ่ง

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

นั่นคือแผนการรวม G2 Components เข้ากับ Gutenberg

"G2 Components เป็นโครงการที่รวบรวมแนวคิดในการทำให้อินเทอร์เฟซผู้ใช้และประสบการณ์ผู้ใช้ดีขึ้นสำหรับผู้อื่น" Quach กล่าว “ในขณะนี้ มันได้กลายเป็นระบบส่วนประกอบที่ออกแบบมาเพื่อทำงานภายในบริบทและสภาพแวดล้อมของ Gutenberg และ WordPress”

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

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

Quach เชื่อว่าแพลตฟอร์มได้รับประโยชน์จากการมีแนวทางที่คล้ายคลึงกัน เขากล่าวถึงการออกแบบวัสดุโดย Google ว่าเป็นการยกระดับแพลตฟอร์ม Android และนำความสามัคคีมาสู่ผลิตภัณฑ์ของบริษัท

ทีมงาน Gutenberg ได้เริ่มรวม G2 Components เข้ากับโครงการแล้ว การผสานรวมนี้จะแทนที่ส่วนประกอบของ WordPress (@wordpress/components) ในลักษณะที่มีการควบคุม ซึ่งไม่ควรทำให้การใช้งานที่มีอยู่ภายในตัวแก้ไขหลักหรือโครงการของบุคคลที่สามเสียหาย ส่วนประกอบใหม่จะถูกเปลี่ยนเมื่อพร้อม “เหมือนกับการพลิกสวิตช์” Quach กล่าว

วิดีโอต่อไปนี้เป็นคำแนะนำแบบยาวหนึ่งชั่วโมงของส่วนประกอบ G2 ที่ Quach โพสต์บน YouTube:

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

ส่วนประกอบคืออะไร?

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

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

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

Quach กล่าวว่าวิธีที่ง่ายที่สุดวิธีหนึ่งในการดูสิ่งนี้คือจากมุมมองของชุดรูปแบบแบ็กเอนด์ - ระบบส่วนประกอบยังมีระบบย่อยของชุดรูปแบบ “แทนที่จะใช้วิธีเขียน CSS แบบเดิมๆ เป็น 'สกิน' ไปจนถึงเลเยอร์ด้านบน ความงามของ UI สามารถปรับได้โดยใช้ค่าคอนฟิกูเรชัน คล้ายกับที่ WordPress สามารถกำหนดค่าด้วยคำจำกัดความใน wp-config.php ” เขากล่าว “ความแตกต่างนี้มีความสำคัญเนื่องจากค่าเหล่านี้เชื่อมโยงเข้ากับระบบสไตล์โดยตรง ทำให้โหลดสไตล์ได้อย่างถูกต้องในสถานที่และเวลาที่เหมาะสม ทั้งหมดนี้ไม่ส่งผลต่อสไตล์ของสภาพแวดล้อมปัจจุบัน และที่สำคัญกว่านั้นคือไม่ได้รับผลกระทบจากสไตล์ของสภาพแวดล้อมปัจจุบัน”

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

“ทำไมต้องคิดใหม่ สร้างใหม่ และปรับปรุงอินพุต ปุ่ม โมดอล ดรอปดาวน์ และอื่นๆ” ตอบโต้ Quach ในการตอบสนอง “เพื่อที่คุณจะได้ไม่ต้องเป็นผู้พัฒนา”

สิ่งนี้หมายความว่าอย่างไรสำหรับนักพัฒนา

การเคารพความเข้ากันได้แบบย้อนหลังเป็นสิ่งที่ Quach กล่าวว่าเขาจริงจังอย่างไม่น่าเชื่อเมื่อออกแบบสถาปัตยกรรมของโครงการ G2 Components เขายังกล่าวอีกว่าเป็นส่วนหนึ่งของกลยุทธ์การรวมกลุ่มที่เขาเสนอ

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

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

“ระบบส่วนประกอบใหม่จะช่วยในแผนก UI ได้อย่างแน่นอน” Quach กล่าว “สิ่งหนึ่งที่ฉันตื่นเต้นเป็นพิเศษคือพื้นที่ที่มีการพัฒนา/สร้างต้นแบบอย่างรวดเร็ว เนื่องจากส่วนประกอบเหล่านี้เป็นหน่วยที่มีในตัวเอง จึงสามารถนำเข้าไปยังแพลตฟอร์มอย่าง CodeSandbox และพวกเขา...ก็แค่...ทำงาน คุณสามารถเริ่มต้นใช้งานและสร้างและแบ่งปันต้นแบบได้อย่างรวดเร็ว (ตั้งแต่เล็กแต่ทรงพลังไปจนถึงใหญ่และรับผิดชอบ)”

เขากล่าวว่าเขาประสบความสำเร็จในการทดสอบการออกแบบส่วนประกอบและแสดงแนวคิดสำหรับการตอบรับอย่างรวดเร็ว เขายังทำงานจากทิศทางตรงกันข้าม โดยสร้างส่วนประกอบที่ซับซ้อนใน CodeSandbox และนำกลับเข้าไปในระบบส่วนประกอบ

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