ขอแนะนำ React-Gutenberg Bridge: Headless Block Support เพื่อประสบการณ์การแก้ไขที่ดียิ่งขึ้น

คุณรู้สึกตื่นเต้นกับโอกาสที่ WordPress เสนอให้ แต่ทีมการตลาดของลูกค้าของคุณเชื่อมโยงกับตัวแก้ไข WYSIWYG Gutenberg

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

ลำโพง:

• Teresa Gobble วิศวกรซอฟต์แวร์ของ WP Engine
• Blake Wilson วิศวกรซอฟต์แวร์อาวุโสของ WP Engine

สไลด์เซสชัน:

ถอดเสียง:

TERESA GOBBLE: สวัสดีทุกคน ฉันชื่อ เทเรซา กอบเบิล ฉันเป็นวิศวกรซอฟต์แวร์กับ WP Engine ซึ่งทำงานในทีม Faust

และฉันมาที่นี่พร้อมกับ Blake Wilson วิศวกรซอฟต์แวร์อาวุโส เพื่อแนะนำคุณเกี่ยวกับ React-Gutenberg Bridge ซึ่งเป็นการสนับสนุนบล็อกแบบไร้หัวสำหรับประสบการณ์การแก้ไขที่ดียิ่งขึ้น ยินดีต้อนรับ. มาเริ่มกันเลย.

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

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

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

แล้วสไตล์ล่ะ? แล้วการนำกลับมาใช้ใหม่ ไดนามิกบล็อก InnerBlocks ล่ะ นี่คือที่มาของสะพาน React-Gutenberg มันเป็นวิธีแก้ปัญหาในสองส่วน ส่วนแรกคือวิธีการเปิดเผยบล็อก Gutenberg โดยทางโปรแกรมเพื่อให้สามารถแยกวิเคราะห์และอ่านได้ที่ส่วนหน้าที่ไม่มีส่วนหัว ส่วนนี้เรียกว่า WPGraphQL Content Blocks

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

แบ็คเอนด์ที่ใช้ React ของเว็บไซต์ของคุณมี Gutenberg Blocks ซึ่งถูกเปิดเผยโดยปลั๊กอิน WPGraphQL Content Blocks มันเปิดเผยเนื้อหา block.json เป็น WPGraphQL ให้ปลั๊กอินที่เรียกว่า WPGraphQL

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

เป็นวิธีแก้ปัญหาแบบ end-to-end ซึ่งช่วยลดความซับซ้อนและความคลุมเครือ ช่วยประหยัดเวลาในการพัฒนาโดยปฏิบัติตามข้อตกลงเฉพาะ อนุญาตให้ใช้บล็อกและรูปแบบบล็อกร่วมกันได้ และสามารถนำกลับมาใช้ซ้ำได้เรื่อยๆ ตอนนี้คุณคงทราบแล้วว่า React-Gutenberg Bridge ทำงานอย่างไร ไปที่ Blake เพื่อดูตัวอย่างการใช้งานจริง

เบลค วิลสัน: ขอบคุณ เทเรซา สวัสดีทุกคน. ฉันชื่อเบลค วิลสัน ฉันเป็นวิศวกรซอฟต์แวร์อาวุโสที่ WP Engine

และฉันอยู่ในทีม Faust JS ที่สร้าง Faust ฉันมีตัวอย่างที่ยอดเยี่ยมสำหรับคุณในวันนี้ โดยแสดงส่วนประกอบทั้งสองที่เราสร้างขึ้นเพื่อช่วยประสานสะพาน React-Gutenberg นี้ เรามาเริ่มกันเลยดีกว่า

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

ฉันได้ติดตั้งปลั๊กอินบางตัวแล้ว ดังนั้นฉันจึงมีปลั๊กอิน Faust สิ่งนี้ช่วยอำนวยความสะดวกในการแสดงตัวอย่างและสิ่งที่ดีทั้งหมดบนไซต์ Faust JS ของคุณ ฉันมี WPGraphQL ซึ่งจำเป็นสำหรับการแปลงไซต์ WordPress ของคุณให้เป็นปลายทาง GraphQL

จากนั้นฉันก็มี WPGraphQL Content Blocks นี่เป็นหนึ่งในปลั๊กอินที่เราสร้างขึ้นเพื่อช่วยอำนวยความสะดวกให้กับสะพาน React-Gutenberg โซลูชันนี้แบ่งออกเป็นสองส่วนหลัก

ดังนั้นเราจึงมีชิ้นส่วนหนึ่งที่จะเปิดเผยข้อมูล Gutenberg Block โดยทางโปรแกรมผ่าน WPGraphQL และอีกส่วนหนึ่งจะใช้ข้อมูลนั้นในส่วนหน้า Faust JS ของคุณ เริ่มต้นด้วยการดู WPGraphQL Content Blocks และวิธีการทำงาน

ดังนั้นเราจะเข้าสู่ IDE แบบกราฟิกของเรา และฉันได้ตั้งค่าการสืบค้นที่นี่เพื่อดึงข้อมูลของเพจ ในกรณีนี้ เราเพิ่งได้ชื่อหน้ามา

ดังนั้น สิ่งที่ GraphQL Content Blocks ทำคือเปิดเผยประเภทบล็อกเนื้อหาในสคีมา GraphQL ของคุณ ดังนั้นหากเราพิมพ์บล็อกเนื้อหา คุณจะเห็นที่นี่ เราได้รับข้อมูลสำหรับหน้าที่ระบุนี้และการบล็อกทั้งหมดในหน้านี้ ข้ามไปแก้ไขหน้านี้และเพิ่มเนื้อหาบางส่วน

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

และเราจะทำคอลัมน์ 50/50 ลองเพิ่มย่อหน้าในครึ่งนี้ แล้วเพิ่มรูปภาพในครึ่งนี้ ดังนั้นฉันจึงมีภาพที่นี่ในไลบรารีสื่อของฉัน ไปข้างหน้าและวางในนี้

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

คุณจะเห็นว่าตอนนี้เรามีบล็อกเนื้อหาสองช่วง อันแรกนี่คือคอลัมน์หลัก คอลัมน์หลัก จากนั้นเราก็แสดงผล HTML ภายในนั้น

สิ่งที่ยอดเยี่ยมเกี่ยวกับ WPGraphQL Content Blocks คือเรากำลังจัดการ InnerBlocks ด้วยเช่นกัน คุณสามารถดูได้ที่นี่หากเราเพิ่มพารามิเตอร์ให้กับบล็อกเนื้อหาที่เรียกว่า flat true คุณจะเห็นว่าตอนนี้เราได้รับบล็อกทั้งหมดที่อยู่ในคอลัมน์เหล่านั้นจริงๆ ดังนั้นเราจึงจัดการกรณีนั้นให้คุณเช่นกัน

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

สมมติว่าเราต้องการแอตทริบิวต์บางอย่างในนั้น เราสามารถใช้สิ่งนั้นโดยใช้ยูเนี่ยนใน GraphQL ดังนั้นเราจะทำกับภาพหลัก รับแอตทริบิวต์ และสมมติว่าเราต้องการคำอธิบายภาพ เช่น

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

และถ้าเรารีเฟรชข้อความค้นหานี้ เราจะเห็นว่าตอนนี้เราได้คำอธิบายภาพของฉันเป็นแอตทริบิวต์ที่เหมาะสมใน WPGraphQL Content Blocks นี่คือส่วนที่ 1 ของการแก้ปัญหา ตอนนี้เราสามารถรับข้อมูล Gutenberg Block ทั้งหมดของเราและใช้ข้อมูลนี้เพื่อใช้งานในส่วนหน้าของเรา

มาดู VS Code กัน แล้วเราจะมาดูกันว่าเราจะจัดการกับส่วนนั้นอย่างไร นี่คือโครงการตัวอย่าง Faust JS ที่ฉันรวบรวมไว้ มันง่ายมาก มันขึ้นอยู่กับ Faust Scaffold Blueprint แต่มีการกำหนดค่าเพิ่มเติมสำหรับการจัดการบล็อกเหล่านี้

ดังนั้นหากเราดูที่แพ็คเกจ JSON คุณจะเห็นว่าเรามีการอ้างอิงบางอย่างที่นี่ แพ็คเกจ Faust ปกติบางอย่าง เช่น core และ CLI นอกจากนี้เรายังมี Faust VP Blocks นี่เป็นหนึ่งในแพ็คเกจที่มีฟังก์ชั่นตัวช่วยทั้งหมดของเรา

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

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

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

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

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

เอาล่ะ แค่ตั้งค่าก็เพียงพอแล้ว ลองหมุนดูและดูว่าการทำงานเป็นอย่างไร ดังนั้นฉันจะเรียกใช้ NPM run dev ซึ่งจะตั้งค่าสภาพแวดล้อม dev บน localhost 3000 และหน้าที่เราทำก่อนหน้านี้คือหน้าตัวอย่าง slash ดังนั้นฉันจะไปที่หน้าตัวอย่าง slash ของ localhost 3000 เพื่อดู Gutenberg เหล่านั้น บล็อกที่เราตั้งค่าไว้ก่อนหน้านี้

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

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

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

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

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

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

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

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

นั่นเป็นเพราะหากยังไม่ได้กำหนดบล็อกในโครงการ Faust JS ของคุณ เราจะทำทางเลือกสำรองอย่างชาญฉลาดให้กับ HTML ที่แสดงผล ด้วยวิธีนี้ คุณจะไม่เห็นเนื้อหาที่ไม่ได้กำหนด เป็นโมฆะ หรือไม่มีเนื้อหาเลย อย่างน้อยที่สุด คุณจะได้รับ HTML ที่แสดงผลดั้งเดิมกลับคืนมา

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

คุณจะเห็นว่านี่เป็นเพียงส่วนประกอบ React แบบดั้งเดิมเท่านั้น เราเรียกมันว่าภาพหลัก และยอมรับอุปกรณ์ประกอบฉาก เช่นเดียวกับส่วนประกอบ React อื่นๆ

มีสองชิ้นต่อหนึ่งบล็อกตรงนี้ ดังนั้นเราจึงมีส่วนประกอบ React จริง ซึ่งเป็นเลเยอร์การนำเสนอ จากนั้นเราจะได้รับ block.fragments ซึ่งเป็นข้อมูลที่จำเป็นสำหรับการดำเนินการบล็อกนี้

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

จากนั้น สิ่งที่เราทำได้คือนำแอตทริบิวต์เหล่านั้นไปใช้กับตรรกะ React จริงของเรา ดังนั้นฟิลด์ทั้งหมดที่ร้องขอที่นี่จึงพร้อมใช้งานในอุปกรณ์ประกอบฉาก คุณจึงเห็น props.attributes ออกมา ซึ่งเป็นแอตทริบิวต์ที่เราขอไว้ที่นี่ คือ attributes.alt, attributes.source และอื่นๆ นี่เป็นวิธีที่ยอดเยี่ยมในการจัดวางข้อกำหนดข้อมูลทั้งหมดสำหรับบล็อกของคุณไว้ในไฟล์เดียวกัน

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

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

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

TERESA GOBBLE: ขอบคุณสำหรับการสาธิตนั้น เบลค มันเยี่ยมมาก เรามาดูรายละเอียดทางเทคนิคกันตอนนี้ และพูดคุยเกี่ยวกับวิธีการทำงาน สิ่งแรกที่ฉันมีให้คุณคือ ข้อกำหนดในการใช้ WPGraphQL Content Blocks คืออะไร

เบลค วิลสัน: ใช่ ใช่ เป็นคำถามที่ดีมาก เทเรซ่า ดังนั้นข้อกำหนดเดียวในการใช้ปลั๊กอินคือต้องติดตั้ง WPGraphQL ด้วย แน่นอน หากคุณต้องการให้ไซต์ของคุณเชื่อมต่อกับ Faust JS คุณสามารถติดตั้งแพ็คเกจบล็อก Faust JS ซึ่งจะช่วยอำนวยความสะดวกในการแสดงผลและสิ่งดีๆ ทั้งหมดบนส่วนหน้าที่ไม่มีส่วนหัว แต่หากต้องการเปิดเผยข้อมูลบล็อกจริงๆ สิ่งที่คุณต้องมีคือ WPGraphQL และปลั๊กอิน WP GraphQL Content Blocks

TERESA GOBBLE: ยอดเยี่ยม ข้อมูลบล็อกถูกรวบรวมอย่างไร?

BLAKE WILSON: ใช่ ดังนั้นข้อมูลบล็อกทั้งหมดจะถูกรวบรวมโดยบล็อกใดๆ ใน WordPress ที่ใช้ฟังก์ชันประเภทบล็อกลงทะเบียน บล็อกใดก็ตามที่คุณใช้อินเทอร์เฟซกับฟังก์ชันนั้นจะปรากฏในบล็อกเนื้อหา และสิ่งที่ยอดเยี่ยมเกี่ยวกับเรื่องนั้นก็คือ มันถ่ายทอดด้วยไฟล์ block.json และอธิบายตนเองโดยอัตโนมัติและจัดทำเอกสารด้วยตนเองในฟิลด์เหล่านั้นทั้งหมด คุณจึงมีเอกสารครบในที่เดียว

TERESA GOBBLE: โอ้ สุดยอดเลย สิ่งที่ประหยัดเวลา อีกสิ่งหนึ่งที่ฉันอยากจะให้คุณพูดถึงเพิ่มเติมอีกเล็กน้อยก็คือ จะเกิดอะไรขึ้นกับการบล็อกที่ไม่รองรับ จะเกิดอะไรขึ้นเมื่อมีการสอบถามการบล็อกที่ไม่รองรับ

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

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

TERESA GOBBLE: โอ้ สุดยอดเลย และนี่นำฉันไปสู่คำถามต่อไป คุณสามารถใช้ปลั๊กอินของบุคคลที่สามโดยใช้ปลั๊กอินบล็อกเนื้อหา WPGraphQL ได้หรือไม่ เท่าที่ปลั๊กอินของบุคคลที่สามในเว็บไซต์แยกส่วนหัวที่ไม่มีส่วนหัว ทั้งหมดนี้ทำงานร่วมกันได้อย่างไร?

เบลค วิลสัน: ใช่ ใช่ ดังนั้นสำหรับปลั๊กอินของบุคคลที่สาม ให้ย้อนกลับไปที่คำถามแรกหรือคำถามที่สอง ตราบใดที่พวกเขาเชื่อมต่อกับฟังก์ชันประเภทบล็อกที่ลงทะเบียนใน WordPress บล็อกนั้นจะถูกเปิดเผยโดยอัตโนมัติใน WPGraphQL Content Blocks ตราบใดที่ข้อมูลนั้นถูกแสดงผล คุณสามารถสร้างบล็อกในส่วนหน้า Faust JS ของคุณได้ และสิ่งที่ยอดเยี่ยมก็คือ สมมติว่าคุณมีบล็อกของบุคคลที่สามสำหรับม้าหมุน เมื่อคุณสร้างสิ่งนั้นในฟรอนท์เอนด์ Faust JS ของคุณแล้ว คุณจะสามารถนำสิ่งนั้นกลับมาใช้ในโครงการอื่นๆ ต่อไปได้

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

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

คุณจะจัดการกับบล็อกภายในบล็อกได้อย่างไร นั่นอาจเป็นเรื่องยุ่งยากจริงๆ คุณช่วยเล่าให้เราฟังหน่อยได้ไหมว่าหน้าตาจะเป็นอย่างไร

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

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

TERESA GOBBLE: ยอดเยี่ยม ที่จริงแล้ว มีตัวเลือกในการดึงบล็อกเนื้อหาที่คุณสามารถระบุให้ส่งคืนรายการบล็อกแบบแบนภายใน ID หลักย่อยที่เหมาะสม

BLAKE WILSON: ใช่ ใช่ แน่นอน

TERESA GOBBLE: เยี่ยมมาก นอกจากนี้ เรายังมีบทช่วยสอนอีกชิ้นหนึ่งที่นี่ในการแชทอีกครั้ง เพื่อให้ WPGraphQL Content Blocks ดูที่ฟังก์ชันเฉพาะนั้นด้วย ดังนั้นฉันจึงอยากถามคุณอีกคำถามหนึ่งเกี่ยวกับสไตล์ชีต – ดังนั้นการจัดแต่งทรงผมด้วยสไตล์ชีตส่วนกลาง แบบอินไลน์ แนวทางนั้นคืออะไร สไตล์ถูกจัดการอย่างไร?

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

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

TERESA GOBBLE: ยอดเยี่ยม ขอบคุณที่แนะนำเราผ่านสิ่งนั้น ฉันรู้ว่าหลายคนตื่นเต้นกับเรื่องนี้มาก แล้วเราจะจำกัดผู้เผยแพร่โฆษณาไม่ให้ใช้บล็อกที่ไม่รองรับได้อย่างไร

เบลค วิลสัน: ใช่ ใช่ มีปลั๊กอินอยู่ที่นั่น มันขึ้นอยู่กับ. หากคุณกำลังใช้การบล็อกของบุคคลที่สาม บางส่วนเหล่านี้มีคุณสมบัตินี้อยู่แล้ว

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

TERESA GOBBLE: โอ้ สุดยอดเลย เพื่อให้การเปิดเผยบล็อกปลั๊กอินสามารถสลับ ซ่อน แสดงบล็อกเฉพาะได้

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

TERESA GOBBLE: โอ้ ฟังดูเหมือนการส่งมอบที่สะอาดกว่าแน่นอน โอเคดี. คำถามสุดท้ายสำหรับคุณ บล็อกส่วนหน้าเหล่านี้สอดคล้องกับบรรณาธิการของผู้จัดพิมพ์หรือไม่

BLAKE WILSON: ใช่ คำบรรยายเยี่ยมมาก ยังไม่ได้ นั่นคือสิ่งที่เรากำลังจะทำในอนาคต แต่สำหรับตอนนี้ บล็อกเหล่านี้ได้รับการสนับสนุนสำหรับส่วนหน้าที่ไม่มีส่วนหัว

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

TERESA GOBBLE: โอ้ สุดยอดเลย ตกลง. ขอบคุณที่พูดคุยผ่านประเด็นเหล่านั้นกับเรา เบลค นั่นมีประโยชน์จริงๆ และการสาธิตก็เช่นกัน

ไปข้างหน้าและเปลี่ยนเกียร์และพูดคุยเกี่ยวกับแผนงานโครงการนั้นอีกเล็กน้อย จริงๆ แล้วเรามี 5 เฟส ซึ่งมี 2 เฟสที่เสร็จสมบูรณ์แล้ว ได้แก่ เฟส 1 และเฟส 2 เฟส 1 เราได้เห็นการนำวิธีการแยกโครงสร้างและสร้างบล็อกใหม่อย่างมีประสิทธิภาพ

หลังจากนั้น เราย้ายไปที่เฟส 2 ซึ่งมุ่งเน้นไปที่การผสานรวม Faust กับ Gutenberg Blocks ที่แน่นแฟ้นยิ่งขึ้น เพื่อให้แน่ใจว่าทุกคนสามารถเข้าถึงยูทิลิตี้และฟังก์ชันตัวช่วยต่างๆ ที่อยู่ในนั้น เฟสต่อไปที่เรากำลังดำเนินการอยู่ตอนนี้คือเฟส 3 เรากำลังมุ่งเน้นไปที่การรองรับธีม.json และบล็อกไลบรารีที่ใช้ซ้ำได้ ดังที่ Blake กล่าวถึงในระหว่างการอภิปรายทางเทคนิคของเรา

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

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

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

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