การใช้ระบบการออกแบบกับ WordPress Block Editor Pt 2: Block Types and Styles

ในตอนที่ 1 ของซีรีส์บล็อกสองตอนของเรา เราได้กล่าวถึงวิธีกำหนดค่าระบบการออกแบบใน theme.json จากสิ่งนี้ ตอนนี้เราสามารถใช้การควบคุมเพิ่มเติมผ่านโค้ดเพื่อลบบล็อกและสไตล์เริ่มต้นที่ไม่ต้องการ

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

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

การลบประเภทบล็อก

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

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

2. ถัดไป ค้นหาชื่อบล็อกที่เกี่ยวข้องในคู่มืออ้างอิงบล็อกหลักของ Gutenberg สำหรับบล็อก "ความคิดเห็นล่าสุด" นี่คือแกนหลัก/ความคิดเห็นล่าสุด:

3. การใช้ชื่อหลัก/ความคิดเห็นล่าสุด เราสามารถลบออกจากตัวแก้ไขได้

ใน JavaScript ใช้ wp.blocks.unregisterBlockType:

 wp.domReady( function() { wp.blocks.unregisterBlockType( 'core/latest-comments' ); } );

JavaScript สำหรับตัวแก้ไขบล็อกควรอยู่ในคิวโดยใช้ hook enqueue_block_editor_assets ใน PHP:

 function wpvip_enqueue_block_js() { wp_enqueue_script( 'wpvip-block-js', plugin_dir_url( __FILE__ ) . 'js/block.js', array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ), '0.0.1', ); } add_action( 'enqueue_block_editor_assets', 'wpvip_enqueue_block_js' );

สามารถใช้การตั้งค่าที่ซับซ้อนมากขึ้นเพื่อสร้างและจัดการการอ้างอิงบล็อกโดยอัตโนมัติด้วยแพ็คเกจ @wordpress/scripts

หมายเหตุ: แม้ว่าโพสต์นี้จะเน้นที่การโต้ตอบกับบล็อกผ่าน JavaScript API เป็นหลัก แต่แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ PHP ฝั่งเซิร์ฟเวอร์กับ JavaScript ของไคลเอนต์สำหรับบล็อกจะเปลี่ยนไปตามการใช้งานของคุณ:

• เมื่อแก้ไขบล็อกในตัว ให้ใช้ JavaScript API
• เมื่อแก้ไขการบล็อกของบุคคลที่สาม ให้ใช้ JavaScript API
• เมื่อสร้างบล็อกแบบกำหนดเอง ให้ใช้ register_block_type กับ block.json ใน PHP การดำเนินการนี้จะทำให้ทั้งโค้ดฝั่งเซิร์ฟเวอร์และไคลเอ็นต์สามารถโต้ตอบกับบล็อกของคุณได้

เราแนะนำให้ใช้ JavaScript ในการโต้ตอบกับบล็อก เนื่องจากสิ่งนี้อนุญาตให้แก้ไขบล็อกที่ลงทะเบียนทั้งฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์ นอกจากนี้ API ของบล็อกบางตัวมีให้ใช้งานใน JavaScript เท่านั้น

นอกจากนี้ยังสามารถยกเลิกการลงทะเบียนบล็อกหลักได้โดยใช้ใน PHP ด้วยตัวกรอง allow_block_types_all:

 add_filter( 'allowed_block_types_all', 'wpvip_unregister_blocks' ); function wpvip_unregister_blocks( $allowed_block_types ) { return array_filter( $allowed_block_types, function( $block_type ) { // Remove 'core/latest-comments' from allowed blocks return $block_type !== 'core/latest-comments'; } ); }

โปรดทราบว่าตัวกรอง allow_block_types_all ใน PHP ยังสามารถใช้เพื่อจัดเตรียมรายการบล็อกที่อนุญาตอย่างชัดเจน ยกเว้นสิ่งอื่นๆ ทั้งหมดไม่ให้ใช้ในเอดิเตอร์:

 add_filter( 'allowed_block_types_all', 'wpvip_unregister_blocks' ); function wpvip_unregister_blocks( $allowed_block_types ) { return [ 'core/paragraph', 'core/heading', 'core/group', /* ... other blocks to allow */ ]; }

หมายเหตุ: โปรดใช้ความระมัดระวังในแนวทางนี้ เนื่องจากรายการนี้จะต้องได้รับการบำรุงรักษาและอัปเดตด้วยแกนหลักที่ต้องการหรือบล็อกแบบกำหนดเอง ดังที่กล่าวไว้ข้างต้น วิธีการนี้สามารถใช้เพื่อจำกัดบล็อกที่ลงทะเบียนฝั่งเซิร์ฟเวอร์เท่านั้น (เช่น การใช้ block.json) บล็อกแบบกำหนดเองที่เป็นฝั่งไคลเอ็นต์จะต้องได้รับการจัดการใน JavaScript โดยใช้ wp.blocks.unregisterBlockType เท่านั้น

แทนที่สไตล์บล็อกในตัว

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

ใน JavaScript ให้ใช้ wp.blocks.unregisterBlockStyle กับ wp.blocks.registerBlockStyle เพื่อแทนที่สไตล์เริ่มต้น:

 wp.domReady( function() { wp.blocks.unregisterBlockStyle( 'core/button', 'fill' ); wp.blocks.unregisterBlockStyle( 'core/button', 'outline' ); wp.blocks.registerBlockStyle( 'core/button', { name: 'primary', label: 'Primary', isDefault: true, } ); wp.blocks.registerBlockStyle( 'core/button', { name: 'secondary', label: 'Secondary', } ); } );

โค้ดด้านบนจะลบสไตล์ปุ่ม "เติม" และ "เค้าร่าง" ในตัว และเพิ่มสไตล์ "หลัก" ใหม่ (ค่าเริ่มต้น) และสไตล์ "รอง":

ปุ่มใหม่จะกำหนดรูปแบบ "หลัก" โดยอัตโนมัติ สไตล์ "หลัก" ใช้คลาส ".is-style-primary" กับที่เก็บปุ่ม และ "รอง" ใช้ ".is-style-secondary" สไตล์เหล่านี้สามารถนำไปใช้ใน CSS ได้ บทความนี้จาก WordPress มีข้อมูลเพิ่มเติมเกี่ยวกับการสร้างสไตล์บล็อก

มีฟังก์ชัน PHP สำหรับยกเลิกการลงทะเบียนรูปแบบบล็อกใน unregister_block_style แต่เราไม่แนะนำ สไตล์บล็อกจำนวนมาก รวมถึงคอร์บล็อก ถูกลงทะเบียนใน JavaScript ฝั่งไคลเอ็นต์ ดังนั้นจึงเป็นไปไม่ได้ที่จะลบสไตล์เหล่านี้โดยใช้ PHP ตามที่กล่าวไว้ข้างต้นใน “การลบประเภทบล็อก” เราต้องการให้ JavaScript ฝั่งไคลเอ็นต์จัดการบล็อกที่มีอยู่เพื่อความสอดคล้องกัน

การลบรูปแบบบล็อก

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

อาจเป็นการดีที่จะลบค่าที่ตั้งไว้ล่วงหน้าของรูปแบบต่างๆ สำหรับตัวอย่างนี้ เราจะลบรูปแบบ “25 / 50 / 25” ใน JavaScript สามารถลบรูปแบบต่างๆ ออกได้ผ่าน wp.blocks.unregisterBlockVariation:

 wp.domReady( function() { wp.blocks.unregisterBlockVariation( 'core/columns', 'three-columns-wider-center' ); } );

“สามคอลัมน์-กว้าง-กลาง” คือชื่อรูปแบบที่สอดคล้องกับรูปแบบ “25 / 50 / 25” สามารถพบได้โดยมองหาไฟล์ variety.js ของบล็อกหลักและคุณสมบัติ “ชื่อ” ที่สอดคล้องกับรูปแบบที่ไม่ต้องการ ซึ่งจะส่งผลให้มีการจำกัดรูปแบบบล็อกที่มีอยู่:

สรุปแล้ว

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

ดูโพสต์ที่เกี่ยวข้องของเราเกี่ยวกับวิธีที่เราจัดการระบบการออกแบบที่ WordPress VIP:

• ตอนที่ 1: การจัดระบบการออกแบบด้วย Gutenberg – theme.json
• การส่งออกโทเค็นระบบการออกแบบจาก Figma ไปยัง WordPress

ผู้เขียน

Alec Geatches นักพัฒนาซอฟต์แวร์อาวุโสของ Automattic

ผู้พัฒนาและออกแบบระบบ WordPress สำหรับองค์กร ผู้ที่ชื่นชอบระบบอาศัยอยู่ในไทเป ไต้หวัน

Gopal Krishnan นักพัฒนาซอฟต์แวร์อาวุโสของ Automattic

Gopal ทำงานบน WordPress VIP ที่แยกส่วนออกจากข้อเสนอ WordPress โดยมีความสนใจในระบบการออกแบบและ Gutenberg เขาอาศัยอยู่ที่ซิดนีย์ ประเทศออสเตรเลีย และเพิ่งย้ายมาจากแคนาดา