ก้าวกระโดด: สร้างปลั๊กอินบล็อก WordPress ตัวแรกของฉัน

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

สำหรับวันหยุดนี้ เราได้ดู Star Trek: Lower Decks ซีซั่น 1 อีกครั้ง และฉันได้เรียนรู้วิธีสร้างปลั๊กอินบล็อก

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

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

ด้วยเวลาที่จะฆ่าเมื่อบ่ายวานนี้ ฉันก็เข้ามาทันที หลังจากอ่านเอกสารสองสามชั่วโมง ศึกษาโค้ดของนักพัฒนาคนอื่นๆ และทำลายสิ่งต่างๆ ฉันมีบล็อกการทำงานสำหรับรายการเบรดครัมบ์

ปลั๊กอิน Copyright Block ของ Marcus Kazmierczak ช่วยให้ฉันก้าวข้ามขีดจำกัดเริ่มต้นได้ การได้เห็นโค้ดที่ไม่ใช่ตัวอย่างในโลกแห่งความเป็นจริงที่เขียนด้วย JavaScript วานิลลาจะเป็นประโยชน์อย่างยิ่ง เพื่อดูรายละเอียดของวิธีการทำงานของระบบ

ความคิดโดยรวมของฉันเกี่ยวกับการสร้างประเภทบล็อกที่กำหนดเอง?

มันง่ายกว่าที่ฉันคิด ในเวลาเดียวกัน เอกสารมีทั้งอย่างท่วมท้นและจำกัด เป็นการยากที่จะหาคำตอบที่ถูกต้องหากคุณไม่รู้ด้วยซ้ำว่ากำลังมองหาอะไร อุปสรรคในการเข้าร่วมนั้นสูงกว่าตอนที่ฉันสร้างปลั๊กอินตัวแรกในปี 2550 มาก Block Type API ทำให้บางสิ่งเรียบง่ายอย่างโง่เขลา แต่ทำให้อย่างอื่นซับซ้อน

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

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

เส้นโค้งการเรียนรู้

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

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

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

WordPress มีสคริปต์ของตัวเองสำหรับตัดความซับซ้อนส่วนใหญ่ แต่ฉันแนะนำ Laravel Mix ง่ายพอสำหรับแม้แต่โปรแกรมเมอร์ JavaScript ที่ไม่ค่อยเข้าใจและมีเอกสารประกอบอย่างละเอียด เป็นสคริปต์ที่สร้างขึ้นสำหรับผู้ที่ต้องการกังวลน้อยลงเกี่ยวกับเครื่องมือและเพิ่มเติมเกี่ยวกับการเขียนโค้ดจริงๆ

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

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

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

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

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

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

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