แหล่งข้อมูลเพื่อฝึกฝนเทคโนโลยีเบื้องหลัง Gutenberg สำหรับ WordPress

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

คุณอาจคิดว่านี่ไม่ใช่กรณีและ PHP ยังมีการเดินทางที่ยาวนานใน WordPress ฉันไม่โทษคุณเพราะการเปลี่ยนแปลงมักจะยอมรับได้ยาก อย่างไรก็ตาม ฉันคิดว่าคุณคิดผิด JavaScript ไม่ใช่อนาคตของ WordPress อีกต่อไป แต่เป็นปัจจุบัน และถ้าคุณต้องการรักษาตำแหน่งของคุณไว้ คุณจะต้องรีบดำเนินการทันที

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

เรียนจาวาสคริปต์

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

หากคุณไม่เคยทำอะไรกับ JavaScript มาก่อน ต่อไปนี้คือบทช่วยสอนในรูปแบบต่างๆ ที่จะช่วยคุณในการเริ่มต้น:

• พื้นฐานภาษา JavaScript: หลักสูตรฟรีโดย Zac Gordon ในรูปแบบวิดีโอ
• JavaScript 30: เรียนรู้ด้วยการทำสิ่งที่ท้าทายทุกวันเป็นเวลา 30 วันกับ Wes Bos ในหลักสูตรฟรีนี้
• การแนะนำ JavaScript อีกครั้ง: แนะนำสั้น ๆ เกี่ยวกับ JavaScript โดยพวกที่ Mozilla
• JavaScript For Cats: อีกบทนำสู่ JavaScript พร้อมสัมผัสอารมณ์ขันของแมว
• Exercism.io: เว็บฟรีที่คุณสามารถทำแบบฝึกหัดใน JavaScript และอัปโหลดโซลูชันของคุณสำหรับที่ปรึกษาเพื่อประเมิน
• JSBooks: หากคุณเป็นคนหนึ่งที่ชอบเรียนรู้เกี่ยวกับหนังสือ คุณมีหนังสือมากมายให้เล่นฟรีที่นี่

ในทางกลับกัน หากคุณมีประสบการณ์ในการใช้ JavaScript อยู่แล้ว ให้ขยายความรู้โดยศึกษาแนวคิดขั้นสูงเกี่ยวกับฟังก์ชัน การดำเนินการแบบอะซิงโครนัสกับคำสัญญา และ async / await และในระยะสั้น ทุกอย่างที่เกี่ยวข้องกับ ESNext

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

เรียนรู้ React และ Redux

นอกเหนือจาก JavaScript ในการพัฒนาตัวแก้ไขบล็อก WordPress คุณจะต้องมีแนวคิดเกี่ยวกับ React และ Redux

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

ตอบสนองและเหนือสิ่งอื่นใด JSX

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

ลองนึกภาพว่าคุณต้องการกำหนดอินเทอร์เฟซสำหรับส่วนประกอบ Product และ ShoppingList แล้วใช้ในบล็อก Gutenberg ด้วยสัญกรณ์มาตรฐาน คุณจะต้องใช้วิธีต่อไปนี้ โดยใช้ wp.element.createElement() ที่ Gutenberg ให้มา:

ในทางกลับกัน หากคุณใช้ JSX ภายในเมธอด render() ซึ่งไม่มีอะไรมากไปกว่าสัญกรณ์ที่คล้ายกับ HTML สิ่งที่คุณมีมีดังนี้:

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

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

Redux เพื่อรักษาสถานะการสมัครของคุณ

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

หากคุณต้องการสร้างที่เก็บข้อมูลของคุณเอง คุณจะไม่ทำกับ Redux แต่คุณจะใช้แพ็คเกจ @wordpress/data ที่รวมอยู่ใน Gutenberg แพ็คเกจนี้ใช้ Redux ภายใน แต่นั่นไม่สำคัญ นอกจากนี้ เรากำลังพูดถึงกรณีการใช้งานที่ซับซ้อนซึ่งคุณอาจไม่ต้องการ อย่างน้อยก็ในระยะเริ่มต้น ดังนั้นสำหรับตอนนี้ลืมเกี่ยวกับมัน

NPM, WebPack, Babel, PostCSS และ ESLint

นอกจาก JavaScript และแนวคิดพื้นฐานของ React และ JSX แล้ว สำหรับยุคใหม่ที่มีอยู่แล้วใน WordPress คุณจะต้องรู้เทคโนโลยีต่อไปนี้ เพื่อให้งานนักพัฒนาของคุณง่ายขึ้นและเป็นอัตโนมัติอย่างมาก:

• NPM: ตัวจัดการการพึ่งพา JavaScript เพียงกำหนดการอ้างอิงที่คุณต้องการและติดตั้งโดยทำ npm install
• WebPack: ชุดรวม JavaScript การกำหนดค่าเริ่มต้นนั้นไม่ใช่เรื่องง่าย แต่เมื่อคุณมี มันอำนวยความสะดวกในการจัดการไฟล์ JavaScript: transpilation, minification...
• Babel: คอมไพเลอร์ JavaScript เพื่อให้สามารถใช้ไวยากรณ์ของภาษานี้ในเวอร์ชันถัดไปได้ในปัจจุบัน
• PostCSS: เหมือนกับ Babel แต่สำหรับสไตล์ชีต CSS ของคุณ
• ESLint: ตรวจจับการใช้งาน JavaScript และข้อผิดพลาดของรูปแบบ ดังนั้นคุณจึงสามารถหลีกเลี่ยงได้ในขณะที่คุณกำลังเขียนโค้ด

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

วิธีสร้างบล็อกใหม่สำหรับ Gutenberg

ตอนนี้ ไปที่ส่วนที่สำคัญที่สุด: สิ่งที่เราจำเป็นต้องเริ่มสร้างบล็อกใหม่สำหรับตัวแก้ไข WordPress

สิ่งแรกที่คุณต้องเริ่มสร้างบล็อกของคุณเองคือการควบคุมฟังก์ชัน wp.blocks.registerBlockType() คุณจะพบเอกสารที่สมบูรณ์ที่สุดเกี่ยวกับฟังก์ชันนี้ในคู่มือ Gutenberg อย่างเป็นทางการ

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

หากดูซับซ้อนเกินไป คุณสามารถเริ่มใช้ชุดเครื่องมือ Ahmad Awais ที่ชื่อว่า create-guten-block สิ่งนี้จะสร้างโครงสร้างโฟลเดอร์พร้อมการพึ่งพาที่จำเป็นทั้งหมดเพื่อสร้างบล็อกแรกของคุณ คุณสามารถดูบทแนะนำการใช้งานได้ในวิดีโอต่อไปนี้:

สุดท้าย หากสิ่งนี้ยังดูซับซ้อนเกินไป คุณมีตัวเลือกสุดท้ายที่สามารถใช้ได้ แน่นอนว่าคุณรู้จักปลั๊กอิน Advanced Custom Fields (เรียกสั้นๆ ว่า ACF) ปลั๊กอินนี้จะช่วยให้คุณสร้างบล็อกสำหรับ Gutenberg โดยไม่ต้องใช้ JavaScript

แต่ฉันจะไม่อธิบายให้คุณฟัง ฉันจะให้เมาริซิโอ เกลเวสทำ ไปตรวจสอบการนำเสนอของเขาในหัวข้อนี้ใน WordCamp Zaragoza 2019 ที่คุณมีอยู่แล้วใน WordPress.tv (เป็นภาษาสเปน):

วิธีขยายตัวแก้ไขบล็อกใน WordPress

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

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

ฉันแนะนำให้คุณดูเอกสารอย่างเป็นทางการที่คุณมีในคู่มือ Gutenberg สำหรับนักพัฒนาและนักออกแบบที่คุณจะพบได้ที่นี่ ใจเย็นๆ เพราะมีข้อมูลมากมาย และนี่เป็นหนึ่งในแหล่งข้อมูลที่ดีที่สุดที่คุณมี

ภาพ เด่น โดย Christian Fregnan ใน Unsplash