การสร้างห้องสมุดรูปแบบของ Gutenberg บล็อก

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

พื้นหลัง

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

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

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

เป้าหมายของพวกเรา

ในฐานะผู้สร้างเว็บไซต์ WordPress ที่เชี่ยวชาญเป็นพิเศษ Gutenberg ได้ให้โอกาสที่ดีแก่เราในการสร้างไลบรารีรูปแบบที่รวมเป็นหนึ่งเดียว ชุดบล็อกที่ปรับแต่งได้สำหรับใช้กับงานสร้างเว็บไซต์แบบกำหนดเองของเรา

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

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

ความท้าทาย

ความยืดหยุ่นในการออกแบบ

เราต้องการระบบการออกแบบอเนกประสงค์ที่มีรูปแบบต่างๆ มากมาย ซึ่งจะทำให้เรามีความยืดหยุ่นในการสร้างธีมตามความต้องการที่หลากหลาย

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

การเปลี่ยนแปลงในการพัฒนาธีม

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

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

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

Gutenberg ไม่ได้ยืดหยุ่นขนาดนั้น

นอกกรอบ Gutenberg มีบล็อกหลักมากกว่า 30 บล็อก ทุกอย่างตั้งแต่องค์ประกอบเนื้อหาพื้นฐาน เช่น องค์ประกอบย่อหน้า หัวเรื่อง และรายการ ไปจนถึงวิดเจ็ตและการฝังที่ซับซ้อนยิ่งขึ้น

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

ปัญหาอีกประการหนึ่งที่เราพบใน Gutenberg ในไม่ช้าก็คือการสร้างเลย์เอาต์ที่ซับซ้อนมากขึ้นโดยใช้บล็อกหลักไม่ใช่เรื่องง่ายหรือใช้งานง่าย

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

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

โซลูชั่นของเรา

ระบบการออกแบบที่หลากหลาย

ก่อนการเปิดตัว Gutenberg เราได้ทุ่มเทเวลาอย่างมากในการวิจัยและสร้างภาพรูปแบบสำหรับไลบรารีรูปแบบของเรา

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

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

เมื่อเราแบ่งรูปแบบออกเป็นบล็อค เราก็พร้อมที่จะเริ่มสร้าง

การสร้างบล็อคด้วย Advanced Custom Fields

นักพัฒนาธีมทุกคนแทบจะเคยเจอ Advanced Custom Fields (ACF) มาก่อน ด้วยอินเทอร์เฟซที่ใช้งานง่าย สามารถสร้างฟิลด์ประเภทต่างๆ ได้มากมาย อะไรก็ได้ตั้งแต่ฟิลด์ข้อความพื้นฐานและเครื่องมือแก้ไขเนื้อหา ไปจนถึงเครื่องมือเลือกวันที่ การฝังแผนที่ และฟิลด์แกลเลอรี สิ่งเหล่านี้สามารถกำหนดให้กับพื้นที่ต่างๆ ของไซต์ได้อย่างง่ายดาย เช่น ประเภทโพสต์ เทมเพลตหน้า หมวดหมู่ และหน้าผู้ใช้

เวอร์ชันล่าสุดของ ACF, บล็อก ACF ขยายฟังก์ชันการทำงานที่คุ้นเคยทั้งหมดนี้ไปยัง Gutenberg สามารถสร้างและกำหนดกลุ่มของฟิลด์ให้กับบล็อคที่ใช้ ACF ที่แตกต่างกันได้ในลักษณะเดียวกับพื้นที่อื่นๆ ของไซต์

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

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

ปลั๊กอินไลบรารีรูปแบบ

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

ปลั๊กอินแบบบล็อกนี้ช่วยให้ปรับใช้รูปแบบที่กำหนดเองได้อย่างรวดเร็วสำหรับการสร้างเว็บไซต์ใหม่ สิ่งเหล่านี้จะถูกปรับแต่งเพิ่มเติมในระดับธีม

ปลั๊กอิน Pattern Library ของเรามีคุณสมบัติที่มีประโยชน์บางอย่าง:

1. ไฟล์เทมเพลตบล็อกพื้นฐานเพื่อให้เราเพิ่มบล็อกใหม่ได้อย่างรวดเร็ว
2. ฟังก์ชันที่อนุญาตให้มีการเริ่มต้นบล็อกหลักและบล็อกที่กำหนดเองและรวมไว้ในหมวดหมู่ที่กำหนดเอง
3. หน้าจอการตั้งค่าผู้ดูแลระบบที่สามารถเปิดหรือปิดแต่ละบล็อกได้
4. ความสามารถในการแทนที่เลย์เอาต์และโครงสร้างของบล็อกภายในธีม
5. ความสามารถในการแทนที่สไตล์บล็อกที่ระดับธีม
6. กำลังโหลดสไตล์ชีตระดับธีมภายใน Gutenberg เพื่อให้การแสดงตัวอย่างบล็อกของผู้ดูแลระบบดูเหมือนกับบล็อกส่วนหน้า การใช้กริด CSS ช่วยให้เรามีความยืดหยุ่นสูงสุดในด้านสุนทรียศาสตร์และเลย์เอาต์ ในขณะที่ลดการเปลี่ยนแปลงโครงสร้าง
7. บล็อกเฉพาะสามารถจำกัดให้โพสต์บางประเภทเพื่อรักษาความสอดคล้อง

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

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

สรุป

เรารู้สึกตื่นเต้นมากเกี่ยวกับโอกาสที่ Gutenberg และ Pattern Library ของเราได้เปิดขึ้น

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

เป็นเวลาเกือบ 2 เดือนแล้วที่เราเริ่มใช้ Pattern Library ของบล็อก Gutenberg ซึ่งตอนนี้เราใช้ในการสร้างเว็บไซต์ใหม่มากมาย ลูกค้ากระตือรือร้นที่จะใช้ Gutenberg และความคิดเห็นของลูกค้าก็เป็นไปในเชิงบวกอย่างมากจนถึงตอนนี้

“Matt และ Pammy นำเสนอบทช่วยสอนเกี่ยวกับองค์ประกอบของไซต์ที่คุณสร้างขึ้นและน่าทึ่งมาก!! ความยืดหยุ่นและความเป็นมืออาชีพนั้นยอดเยี่ยมมาก และผมรู้สึกขอบคุณมากสำหรับการทำงานที่น่าทึ่งของคุณจนถึงตอนนี้ .. รู้สึกตื่นเต้นกับเว็บไซต์มาก ขอขอบคุณ"

– ราเชล สมิธ, YMCA น็อตติงแฮม

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

หากคุณต้องการความช่วยเหลือเกี่ยวกับการพัฒนา WordPress อย่าลังเลที่จะติดต่อเรา