การสร้างบล็อก Gutenberg แบบกำหนดเองสำหรับ WordPress

การสร้างบล็อก Gutenberg แบบกำหนดเองสำหรับ WordPress นั้นไม่ใช่เรื่องยาก อันที่จริง ด้วยโค้ดเพียงเล็กน้อย คุณสามารถสร้างบล็อกที่กำหนดเองได้โดยไม่ต้องใช้ปลั๊กอิน Gutenberg เป็นตัวแก้ไขใหม่สำหรับ WordPress ที่ให้คุณสร้างบล็อกที่กำหนดเองสำหรับเนื้อหาของคุณ บล็อกเป็นส่วนสำคัญของเนื้อหาของคุณใน Gutenberg สามารถใช้เพื่อเพิ่มข้อความ รูปภาพ วิดีโอ และอื่นๆ ในการสร้าง บล็อกที่กำหนดเอง คุณจะต้องใช้โปรแกรมแก้ไขข้อความ เช่น WordPress Code Editor หรือปลั๊กอิน เช่น Block Lab เมื่อคุณมีโปรแกรมแก้ไขข้อความแล้ว คุณสามารถสร้างไฟล์ใหม่ในไดเร็กทอรีธีมหรือปลั๊กอินของคุณ สิ่งแรกที่คุณต้องทำคือสร้างประเภทบล็อก ประเภทบล็อกคือชุดของการตั้งค่าที่กำหนดลักษณะการทำงานของบล็อก ในการดำเนินการนี้ คุณจะต้องใช้ฟังก์ชัน register_block_type เมื่อคุณมีประเภทบล็อกแล้ว คุณสามารถลงทะเบียนกับ WordPress ได้ ฟังก์ชันนี้จะรับอาร์กิวเมนต์สองอย่าง: ชื่อของประเภทบล็อกและอ็อบเจ็กต์ที่มีการตั้งค่าสำหรับบล็อกของคุณ หลังจากที่คุณได้ลงทะเบียนประเภทบล็อกของคุณแล้ว คุณสามารถเริ่มเพิ่มฟิลด์ได้ ฟิลด์คือการตั้งค่าที่ควบคุมลักษณะและการทำงานของบล็อกของคุณ ในการเพิ่มฟิลด์ให้กับประเภทบล็อกของคุณ คุณจะต้องใช้ฟังก์ชัน add_field เมื่อคุณได้เพิ่มฟิลด์ทั้งหมดที่คุณต้องการให้กับประเภทบล็อกของคุณแล้ว คุณสามารถลงทะเบียนกับ WordPress ได้ และนั่นแหล่ะ! ตอนนี้คุณได้สร้างบล็อก Gutenberg แบบกำหนดเองสำหรับ WordPress แล้ว

ตัวแก้ไขบล็อก Gutenberg เป็นหนึ่งในการปรับปรุง WordPress 5.0 ตัวแก้ไข Gutenberg แบ่งเนื้อหาออกเป็นส่วนๆ ซึ่งจัดส่วนใหม่ได้ง่าย นักพัฒนาส่วนใหญ่จะไม่สามารถสร้างบล็อคที่ออกแบบโดยกำเนิดได้เนื่องจากขาดทักษะในการตอบโต้ ชุมชนนักพัฒนา WordPress ได้ตอบสนองด้วยการพัฒนาเครื่องมือที่ตรงตามข้อกำหนด React/JavaScript บล็อกใน Block Lab สร้างขึ้นในสามขั้นตอน: เพิ่มภายในผู้ดูแลระบบ คัดลอกและวาง แล้วส่งออก นอกจากนี้ยังสามารถใช้ API เพื่อสร้างการควบคุมแบบกำหนดเองสำหรับบล็อกของคุณได้ นี้อาจดูไม่มาก แต่จะช่วยให้คุณทราบว่าคุณสามารถทำอะไรกับบล็อก Gutenberg ที่กำหนดเอง

ในการสร้างบล็อก เราจะต้องสร้างไฟล์ใหม่ชื่อ block-notification-bar.php ซึ่งมีชื่อ (แถบการแจ้งเตือน) และสามฟิลด์ ในการตอบสนองต่อไฟล์นี้ จะมีข้อความแจ้งเตือนปรากฏขึ้นเพื่อแนะนำให้เราวางเทมเพลตบล็อกแบบกำหนดเองในธีมของเรา ก่อนอัปโหลดไฟล์ ตรวจสอบให้แน่ใจว่าได้บันทึกและอัปโหลดไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณแล้ว บล็อกที่กำหนดเองได้ถูกสร้างขึ้นสำหรับเราแล้ว สิ่งที่สำคัญคือคุณบรรลุเป้าหมายนั้น เรามีตัวเลือกมากมายหากต้องการขยายสิ่งที่เราได้สร้างไว้แล้ว ไอคอน ปุ่ม และความสามารถในการลิงก์ไปยังโพสต์หรือเพจอื่นเป็นเพียงคุณสมบัติบางส่วนที่สามารถเพิ่มได้ ความสามารถทั้งหมดเหล่านี้สามารถทำได้ผ่าน Block Lab เช่นเดียวกับปลั๊กอินอื่น ๆ ที่กล่าวถึงข้างต้น

ปลั๊กอินบล็อกที่กำหนดเองของ WordPress

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

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

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

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

สร้าง Gutenberg Block React

มีสองสามวิธีในการสร้างบล็อก Gutenberg ใน React วิธีแรกคือการใช้เครื่องมือ create-guten-block CLI สิ่งนี้จะสร้างบล็อก Gutenberg ใหม่ให้คุณ ในการใช้วิธีนี้ คุณจะต้องติดตั้ง Node.js และ npm ในเครื่องของคุณ เมื่อคุณติดตั้งการพึ่งพาเหล่านั้นแล้ว คุณสามารถสร้างบล็อก Gutenberg ใหม่ได้โดยใช้คำสั่งต่อไปนี้: create-guten-block my-block สิ่งนี้จะสร้างไดเร็กทอรีใหม่ที่เรียกว่า my-block พร้อมไฟล์ที่จำเป็นทั้งหมดสำหรับบล็อก Gutenberg วิธีที่สองในการสร้างบล็อก Gutenberg ใน React คือการใช้แพ็คเกจ @wordpress/block-editor แพ็คเกจนี้มีฟังก์ชันตัวช่วยที่เรียกว่า createBlock ซึ่งสามารถใช้สร้างบล็อก Gutenberg ได้ หากต้องการใช้วิธีนี้ คุณจะต้องติดตั้งแพ็คเกจ @wordpress/block-editor ในโครงการของคุณ เมื่อคุณติดตั้งแพ็คเกจแล้ว คุณสามารถสร้างบล็อก Gutenberg ใหม่ได้โดยเรียกใช้รหัสต่อไปนี้: import { createBlock } from '@wordpress/block-editor'; createBlock( 'my-block/my-block', { title: 'My Block', หมวดหมู่: 'common', } ); สิ่งนี้จะสร้างบล็อกใหม่ที่เรียกว่าบล็อกของฉันในหมวดหมู่ทั่วไป วิธีที่สามในการสร้างบล็อก Gutenberg ใน React คือการใช้ ฟังก์ชัน wp.blocks.createBlock ฟังก์ชันนี้เป็นส่วนหนึ่งของ WordPress JavaScript API และสามารถใช้สร้างบล็อก Gutenberg ได้ หากต้องการใช้วิธีนี้ คุณจะต้องรวมแพ็คเกจ wp-api-request ไว้ในโปรเจ็กต์ของคุณ เมื่อคุณติดตั้งแพ็คเกจแล้ว คุณสามารถสร้างบล็อก Gutenberg ใหม่ได้โดยเรียกใช้รหัสต่อไปนี้: import { wp } from 'wp'; wp.blocks.createBlock ( 'my-block / my-block', { ชื่อ: 'My Block', หมวดหมู่: 'common', } ); สิ่งนี้จะสร้างบล็อกใหม่ที่เรียกว่าบล็อกของฉันในหมวดหมู่ทั่วไป

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

React ใช้งานง่ายในธีมที่กำหนดเอง

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

Gutenberg สร้างบล็อกปุ่มแบบกำหนดเอง

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

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างบล็อกแรกในแอปยอดนิยม แอป WordPress @create-block เป็นเครื่องมืออย่างเป็นทางการที่ช่วยให้เราสร้างโค้ด Javascript/PHP/CSS ได้อย่างรวดเร็ว ในโหมดโต้ตอบ คุณสามารถกำหนดค่าบล็อกของคุณเป็นชุดของขั้นตอน เมื่อคุณเพิ่งเรียนรู้เกี่ยวกับ Gutenberg สิ่งนี้มีประโยชน์อย่างยิ่ง หากคุณสร้างบล็อกเรียบร้อยแล้ว คุณสามารถเข้าถึงไดเร็กทอรีที่สร้างขึ้นใหม่ผ่านทางโปรแกรมแก้ไขโค้ด โครงสร้างปลั๊กอินบล็อกเป็นไปตามนี้ตามที่เป็นอยู่ (ในขณะที่เขียนบทช่วยสอนนี้) เราจะพูดถึงรายละเอียดของแต่ละไฟล์และการใช้งานในโมดูลนี้

แฟล็กบรรทัดคำสั่งเป็นวิธีทั่วไปในการระบุตัวเลือกสำหรับโปรแกรมบรรทัดคำสั่ง ก่อนใช้แฟล็ก ให้แทนที่ค่าในไดเร็กทอรีแฟล็กด้วยค่าที่คุณต้องการใช้ สไตล์ชีตที่จะถูกจัดคิวหรือนำไปใช้ในตัวแก้ไข รายละเอียดพื้นฐานของปลั๊กอินจะกล่าวถึงโดยละเอียด WordPress แสดงข้อมูลปลั๊กอินตามค่าเริ่มต้น เพื่อบอก Git ว่าไฟล์ใดที่ควรละเว้นเมื่อสร้างโปรเจ็กต์ที่ควบคุมเวอร์ชัน ไฟล์ Gitignore A. จะถูกรวมไว้ด้วย ที่เก็บข้อมูลประกอบด้วยข้อมูล Config ช่วยให้นักพัฒนารักษารูปแบบการเข้ารหัสที่สอดคล้องกันในหลายโครงการ

การพัฒนาปลั๊กอิน WordPress Gutenberg

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

คุณอาจเคยได้ยินเกี่ยวกับ Gutenberg (ตัวแก้ไขบล็อกของ WordPress) แต่คุณจะเริ่มต้นสร้างปลั๊กอินของคุณเองได้อย่างไร บล็อกถูกสร้างขึ้นด้วยสคริปต์ WordPress อย่างง่าย ประเภทของปลั๊กอิน WordPress ที่สร้างขึ้นที่นี่มักจะเป็นบล็อก แต่เป็นจุดเริ่มต้นที่ดีสำหรับผู้อื่นในกระบวนการนี้ สคริปต์สร้างบล็อก สามารถใช้เป็นเทมเพลตเพื่อสร้างปลั๊กอินของคุณเองได้ คุณสามารถดูบล็อกในส่วนหน้าของ WordPress ได้อย่างง่ายดาย แต่มีรูปลักษณ์ที่แตกต่างออกไปเพื่อช่วยให้คุณคุ้นเคยกับบล็อกในส่วนหลัง ไฟล์นี้ต้องสร้างในโหมดการพัฒนาหลังจากรวบรวมเนื้อหาแล้วเท่านั้น /node_modules – นี่คือโฟลเดอร์ที่เก็บพารามิเตอร์ที่ขึ้นอยู่กับ JavaScript ทั้งหมดของปลั๊กอินของคุณ

ไฟล์ที่ตั้งไว้ล่วงหน้าที่มีสภาพแวดล้อม Visual Studio Code (VDC) ที่เป็นประโยชน์สามารถพบได้ในไฟล์นี้ คุณต้องแน่ใจว่าคุณอยู่ในโฟลเดอร์ปลั๊กอินของ WordPress หากคุณต้องการสร้างปลั๊กอิน ด้วยเหตุนี้ คุณจะสามารถดูขั้นตอนการพัฒนาและการผลิตของปลั๊กอินได้ เปิด /src/save.js ในโปรแกรมแก้ไขของคุณเพื่อแทนที่ฟังก์ชันบันทึกด้วยสิ่งต่อไปนี้: BlockText สามารถส่งออกเป็นสตริงในลักษณะนี้ ต้องเพิ่มรหัสต่อไปนี้ในรูทของปลั๊กอินเพื่อแสดงบล็อกของคุณในหมวดหมู่บล็อกที่กำหนดเอง ฟังก์ชัน registerBlockType.js จะส่งคืนรายการหมวดหมู่บล็อกของคุณ ซึ่งสามารถคอมไพล์ใหม่ได้โดยใช้ฟังก์ชัน registerBlockType.js ของปลั๊กอิน

The Gutenberg Content Edito

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

WordPress Custom Block Editor

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

บทแนะนำนี้จะแนะนำคุณตลอดขั้นตอนการสร้างอินสแตนซ์ตัวแก้ไขบล็อกที่ทำงานได้อย่างสมบูรณ์และกำหนดเองภายใน WordPress ตัวแก้ไขนี้จะถูกสร้างขึ้นทั้งหมดภายในหน้าผู้ดูแลระบบ WP แบบกำหนดเองที่เรียกว่าตัวแก้ไขบล็อก (ในทางที่สร้างสรรค์ที่สุด) ใน WordPress Plug-A-Thon เราจะสร้างตัวแก้ไข ตอนนี้เราต้องสร้าง HTML บางส่วนในหน้ากำหนดเองของเราโดยใช้ส่วนประกอบ React ของตัวแก้ไขบล็อก เป็นอาร์กิวเมนต์ที่สาม เราใช้บรรทัดการพึ่งพาสคริปต์ ($script_asset['dependencies']) จะทำให้แน่ใจว่าสคริปต์ที่เกี่ยวข้องกับ WordPress จะไม่รวมอยู่ในบันเดิลที่สร้างขึ้น เราต้องลงทะเบียนสไตล์ CSS ที่กำหนดเองและไลบรารีการจัดรูปแบบเริ่มต้นของ WordPress เพื่อใช้งาน

ซึ่งช่วยให้เราใช้ JavaScript เพื่อสร้างตัวแก้ไขบล็อกใน HTML ของหน้าได้ ความมหัศจรรย์เกิดขึ้นเมื่อคอมโพเนนต์นี้เรียกว่า BlockEditor เป็นไปได้ที่จะแสดงตัวแก้ไขจาก PHP โดยไม่ต้องสร้าง JS global เลย์เอาต์ของบรรณาธิการสร้างขึ้นจากโครงนั่งร้าน ดังที่คุณเห็นที่นี่ นอกเหนือจากผู้ให้บริการบริบทเฉพาะสองสามราย Block EditorProvider เป็นส่วนประกอบที่สำคัญที่สุดของแพ็คเกจตัวแก้ไขบล็อกของ WordPress ดังที่เราได้อธิบายไปก่อนหน้านี้ สิ่งนี้ให้บริบทใหม่สำหรับตัว แก้ไขบล็อกใหม่ ล่าสุดในบริบทของการแก้ไขบล็อก ทำได้โดยสมัครรับรีจิสทรีที่จัดเตรียมไว้ (ผ่าน withRegistry Provider HOC) รับฟังเหตุการณ์การเปลี่ยนแปลงบล็อก พิจารณาว่าการเปลี่ยนแปลงบล็อกยังคงอยู่หรือไม่ และเรียกตัวจัดการอินพุต onChange เมื่อจำเป็น

องค์ประกอบที่น่าสนใจที่สุดคือองค์ประกอบ BlockList ซึ่งเพิ่มรายการบล็อกให้กับตัวแก้ไข ควรศึกษารายละเอียดส่วนประกอบเหล่านี้อย่างละเอียดเพราะเป็นส่วนที่ซับซ้อนและเกี่ยวข้องมากที่สุด หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบ EditorBlock ที่กำหนดเองของเรา โปรดดูบทความต่อไปนี้ Slot/fill ถูกใช้งานโดยใช้องค์ประกอบ Blockeditor ของเรา (ดูด้านบน) เพื่อแสดง Fill (Sidebar. InspectorFill) ภายในนั้น ซึ่งเรานำเข้าและแสดงผลในการใช้งานในภายหลัง ผลที่ได้คือ React ช่วยให้เราสามารถเก็บองค์ประกอบการตรวจสอบไว้ใน DOM ในขณะที่แสดงผลไปยังมาร์กอัปในตำแหน่งที่แยกจากกัน (เช่น ในแถบด้านข้าง) บล็อกยังสามารถพบได้ใน LocalStorage ภายใต้คีย์ getdavesbeBlocks

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