การพัฒนา Gutenberg พร้อมตัวอย่าง: Google Maps (ตอนที่ 2)

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

วันนี้มาถึงส่วนที่สองของบทช่วยสอนเกี่ยวกับ วิธีสร้างบล็อกแผนที่ ในโพสต์นี้ เราจะมาดูวิธีการเพิ่มแผนที่ Google Maps ในตัวแก้ไข WordPress และวิธีการใช้อินเทอร์เฟซผู้ใช้ที่ช่วยให้เราสามารถจัดการพฤติกรรมของมันได้

ดูสถานะปัจจุบันของโครงการอย่างรวดเร็ว...

ในสถานะปัจจุบันของโปรเจ็กต์ เรามีบล็อก สาธิต อย่างง่ายที่กำหนดไว้ใน packages/blocks/demo/ บล็อกขนาดเล็กนี้เป็นบล็อกที่มาเป็นตัวอย่างในต้นแบบปลั๊กอินของ Nelio และมีลักษณะดังนี้:

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

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

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

ทำความเข้าใจกับบล็อก สาธิต ...

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

ในอีกด้านหนึ่ง มีไฟล์หลัก: index.js ไฟล์นี้ส่งออกตัวแปรสามตัว: ชื่อของบล็อก ( name ) คำจำกัดความของบล็อก ( settings ) และสไตล์ที่บล็อกรองรับ ( styles ) ตัวแปรทั้งสามนี้เป็นตัวแปรที่ใช้ใน packages/blocks/index.js เพื่อลงทะเบียนบล็อกใน Gutenberg (ด้วย registerBlockType ) และทำให้พร้อมใช้งานสำหรับผู้ใช้ขั้นสุดท้าย

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

• ไฟล์ attributes.js กำหนดคุณสมบัติทั้งหมดของบล็อกของเราที่เป็นไดนามิก ดังนั้นผู้ใช้ของเราควรปรับเปลี่ยนได้ ในกรณีของบล็อก สาธิต ของเรา คุณลักษณะเดียวที่มีอยู่คือข้อความที่ผู้ใช้เขียน แต่บล็อกแผนที่จะมีตัวเลือกอีกมากมาย: พิกัดของศูนย์กลางของแผนที่ ระดับการซูมเริ่มต้นที่แผนที่ควรใช้ อะไร ปุ่ม (ถ้ามี) ควรมองเห็นได้เพื่อโต้ตอบกับแผนที่ ฯลฯ
• ไฟล์ edit.js เป็นไฟล์ที่กำหนดวิธีการแสดงบล็อกในตัวแก้ไข WordPress และการตั้งค่าใดที่เสนอให้กับผู้ใช้ (ทั้งในแถบเครื่องมือและในแถบด้านข้างของการตั้งค่าบล็อก) ในการ สาธิต การ edit จะรวมองค์ประกอบ RichText ของ WordPress เพื่อเขียนเนื้อหา อย่างที่เราจะได้เห็นกัน การบล็อกแผนที่จะซับซ้อนมากขึ้นและจะรวมการตั้งค่าเพิ่มเติมด้วย
• สุดท้าย save.js กำหนดวิธีการที่จะแปลงบล็อกที่เราแก้ไขใน Gutenberg เป็น HTML ที่ต้องแสดงผลในส่วนหน้า อีกครั้ง ในการ สาธิต เราเห็นว่าฟังก์ชันนี้เพียงแค่บันทึกเนื้อหาของ RichText โดยใช้ RichText.Content แต่อาจเป็นอย่างอื่น (ดังที่เราจะเห็นในสัปดาห์หน้าในส่วนที่สามและส่วนสุดท้ายของบทช่วยสอนนี้)

การสร้างบล็อกแผนที่ตามบล็อก สาธิต ที่รวมอยู่ใน Boilerplate ของปลั๊กอิน

เมื่อเราเข้าใจอย่างถ่องแท้แล้วว่าบล็อก สาธิต ทำงานอย่างไร ก็ถึงเวลาถามตัวเองว่า: เราจะสร้างบล็อกของเราได้อย่างไร ง่ายมาก ดังที่ Toni บอกเราเมื่อสองสามวันก่อน เราเพียงแค่ต้องทำซ้ำไดเร็กทอรี packages/blocks/demo/ เป็น packages/blocks/nelio-maps/ และเริ่มแก้ไขทุกอย่างที่จำเป็น ฉันรู้ พูดง่ายกว่าทำ

เริ่มจากสิ่งง่ายๆ ก่อน: attributes.js ไฟล์นี้มีคุณสมบัติทั้งหมดที่ผู้ใช้ขั้นสุดท้ายควรแก้ไขได้ ในโพสต์ก่อนหน้านี้ เราได้ระบุข้อกำหนดที่ปลั๊กอินของเราควรปฏิบัติตาม ดังนั้นเราจึงสรุปว่าสิ่งใดควรปรับเปลี่ยนได้ เมื่อดูที่ attributes.js ที่ได้ คุณจะเห็นได้อย่างชัดเจนว่าสิ่งใดที่สามารถปรับแต่งได้จากบล็อกแผนที่ของเรา: ระดับการซูม, ศูนย์กลางแผนที่, การมองเห็นปุ่มต่างๆ... สิ่งที่ง่ายมาก!

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

สิ่งที่สำคัญที่สุดคือวิธีการ render นเดอร์ของบล็อก (บรรทัดที่ 33) ซึ่งเราดึงข้อมูลแอตทริบิวต์ที่เราเพิ่งกำหนดจากวัตถุที่ชื่อ this.props เราจะใช้คุณสมบัตินี้เพื่อแสดงบล็อกและการตั้งค่าของมันแน่นอน นี่คือสิ่งที่เรามี:

1. ToolbarControls แถบเครื่องมือ (บรรทัดที่ 66) ซึ่งเรากำหนดไว้ในไฟล์ภายนอกชื่อ toolbar.js (ไม่ต้องกังวล เราจะเห็นเนื้อหาภายในหนึ่งนาที)
2. การตั้งค่าบล็อกที่ปรากฏในแถบด้านข้างของตัวแก้ไข (บรรทัดที่ 68) ซึ่งเราพบในองค์ประกอบที่เรียกว่า Inspector ที่เรากำหนดใน inspector.js
3. เนื้อหาของตัวบล็อกเองซึ่งมีสองสถานะ:
   • ถ้าฉันไม่มีคีย์ Google Maps API เราจะแสดงประกาศสำหรับผู้ใช้ (บรรทัดที่ 122)
   • ถ้าเรามีคีย์นี้ เราจะแสดงแผนที่โดยใช้ MapBlock (บรรทัดที่ 83) แผนที่อาจมี Marker (บรรทัด 97) ซึ่งมองเห็นได้เฉพาะเมื่อเปิดใช้งานตัวเลือก และอาจมาพร้อมกับ div (บรรทัด 104) พร้อมข้อมูลเพิ่มเติมเกี่ยวกับแผนที่

Google Maps เป็นส่วนประกอบตอบสนอง

หากเราต้องการใส่ Google map ในตัวแก้ไขของเรา เราต้องใช้ส่วนประกอบที่ช่วยให้เราใช้ Maps API ของ Google Maps ได้ เมื่อพิจารณาว่า Gutenberg สร้างขึ้นจาก React สิ่งที่ควรทำคือค้นหาว่ามีองค์ประกอบ React ของ Google Maps หรือไม่ และแน่นอนว่ามีอย่างหนึ่ง!

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

 npm install react-google-maps --save-dev

ซึ่งเพิ่มรายการใหม่ใน package.json ของเราและดาวน์โหลดแพ็คเกจลงใน node_modules

วิธีสร้างส่วนประกอบ WordPress ที่ห่อหุ้มส่วนประกอบปฏิกิริยา

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

มาทำตามผู้นำของพวกเขาและสร้างส่วนประกอบที่เรียกว่า MapBlock ในไฟล์ map-block.js ของตัวเอง และนั่นแหล่ะ! ตอนนี้เรามีองค์ประกอบแผนที่พร้อมสำหรับใช้ในบล็อก Gutenberg ของเราแล้ว

วิธีเพิ่มการตั้งค่าบล็อกในตัวตรวจสอบของ WordPress Editor

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

หากคุณดูที่ไฟล์นี้ คุณจะเห็นว่ามันเป็นไปตามรูปแบบเดิมเช่นเคย: เรากำลังกำหนด Component ด้วยวิธีการ render เมธอดนี้จะดึงแอตทริบิวต์ที่เกี่ยวข้องใน this.props และส่งคืน JSX พร้อมการควบคุมทั้งหมด ในกรณีนี้ จะส่งกลับอินสแตนซ์ของ InspectorControls (ซึ่งบอก WordPress ว่าเนื้อหานี้ไปที่แถบด้านข้าง) พร้อมส่วนต่างๆ ของ PanelBody มาดูรายละเอียดแต่ละส่วนกัน

การตั้งค่าแผนที่พื้นฐาน

PanelBody แรกที่เราพบ (บรรทัดที่ 47) ไม่มี title ดังนั้นจึงปรากฏเป็นส่วนที่ไม่สามารถปิดได้เสมอ:

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

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

ในการดำเนินการนี้ เราเพียงแค่ใช้ส่วนประกอบเริ่มต้นของ WordPress CheckboxControl

วิธีเพิ่มส่วนรูปแบบที่กำหนดเองสำหรับบล็อกแผนที่ของเรา

อีกส่วนที่น่าสนใจของบล็อกของเราคือส่วนสไตล์ (บรรทัดที่ 68) คุณสามารถเห็นผลสุดท้ายในภาพหน้าจอต่อไปนี้:

เป็นส่วนพิเศษเนื่องจากองค์ประกอบที่เราใช้ ( MapStyles ) ไม่ใช่สิ่งที่มีอยู่ใน WordPress โดยค่าเริ่มต้น แต่เป็นสิ่งที่เราสร้างขึ้นสำหรับบล็อกนี้โดยเฉพาะ ดังที่คุณเห็นในลิงค์ที่แล้ว มันเป็นส่วนประกอบที่โหลดชุดของสไตล์ที่กำหนดไว้ล่วงหน้าในส่วนประกอบของประเภท ImagePicker (ซึ่งโดยปริยายไม่มีอยู่ใน WordPress คุณสามารถค้นหาได้ใน packages/components/image-picker/ ).

เมื่อผู้ใช้เลือกสไตล์ใดๆ ที่รวมอยู่ใน ImagePicker คอมโพเนนต์ MapStyles จะเรียกใช้ onChange ที่ได้รับ (ดูบรรทัดที่ 76 ของ inspector.js ) โดยส่งค่าสองค่า: ชื่อของสไตล์ที่เลือกและ JSON ที่เกี่ยวข้อง

สุดท้าย สังเกตว่าหนึ่งในตัวเลือกที่ MapStyles รวมไว้คือสไตล์แบบ กำหนดเอง :

เมื่อเลือกแล้ว คอมโพเนนต์จะแสดงกล่องข้อความเพิ่มเติม (บรรทัดที่ 45) เพื่อให้ผู้ใช้สามารถป้อนสไตล์ของตนเองในรูปแบบ JSON ในกรณีที่คุณไม่ทราบ แผนที่ของ Google Maps สามารถปรับแต่งได้มากมาย!

วิธีเพิ่มเครื่องหมายลงในแผนที่ของเรา

ส่วนต่อไปที่เรามีคือส่วนที่ควบคุมเครื่องหมายของเรา (บรรทัดที่ 81) ส่วนนี้ช่วยให้เราสามารถแสดงหรือซ่อนเครื่องหมาย (บรรทัดที่ 86) และเมื่อเปิดใช้งาน จะมีการตั้งค่าเพิ่มเติมบางอย่างแก่เรา:

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

อย่างไรก็ตาม โปรดทราบว่าองค์ประกอบ AddressSearch ขึ้นอยู่กับส่วนประกอบที่เรียกว่า StandaloneSearchBox ซึ่งเป็นส่วนหนึ่งของโครงการ React ด้วย เป็นเรื่องน่ายินดีอย่างยิ่งที่ได้นำผลงานของผู้อื่นมาใช้ซ้ำ!

วิธีกำหนดค่าแถบเครื่องมือของบล็อก

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

แถบเครื่องมือของปลั๊กอินแสดงโดยคอมโพเนนต์ ToolbarControls ที่กำหนดไว้ใน toolbar.js ที่นี่เราเพียงแค่เพิ่มส่วนประกอบเพื่อกำหนดการจัดตำแหน่งของบล็อก ( BlockAlignmentToolbar ในบรรทัดที่ 42) ดรอปดาวน์คู่หนึ่งเพื่อตั้งศูนย์กลางของแผนที่ (บรรทัดที่ 50) และเพื่อแก้ไขตำแหน่งของเครื่องหมาย (บรรทัด 79) และอีกสองสาม ปุ่มพิเศษเพื่อเปลี่ยนตำแหน่งของกล่องข้อความซึ่งเราสามารถใส่ข้อมูลเพิ่มเติมเกี่ยวกับเครื่องหมาย (บรรทัด 107 และ 120)

สรุป

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

เจอกันใหม่สัปดาห์หน้ากับส่วนสุดท้ายของบทช่วยสอนนี้ ซึ่งเราจะมาดูวิธีบันทึกแผนที่และวิธีดูแผนที่ใน ส่วนหน้า

ภาพ เด่น โดย rawpixel บน Unsplash