Gutenberg 12.9 เพิ่ม UI การล็อคการบล็อก การลงทะเบียนรูปแบบอัตโนมัติ และการส่งออกธีมแบบเต็ม

เผยแพร่แล้ว: 2022-03-31

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

ต่อไปนี้คือบางรายการที่เลือกไว้ซึ่งฉันไม่สามารถเจาะลึกลงไปได้ แต่ฉันยังคงสนับสนุนให้ผู้อ่านลองดู:

  • ชื่อของสีที่เลือกจะปรากฏในเครื่องมือเลือกสี
  • ขณะนี้ผู้ใช้สามารถเลือกจากรายการรูปแบบวันที่ที่แนะนำหรือเพิ่มรูปแบบที่กำหนดเองสำหรับบล็อกวันที่โพสต์ สิ่งเหล่านี้ถูกทำให้เป็นสากล ดังนั้นคำแนะนำจะเจาะจงเฉพาะสถานที่
  • ธีมสามารถเพิ่มบล็อกให้กับบล็อกคอนเทนเนอร์ No Results เมื่อ Query ไม่ส่งคืนโพสต์
  • ขณะนี้บล็อก Tag Cloud มีการควบคุมขนาดต่ำสุดและสูงสุด
  • บล็อกตัวคั่นรองรับการควบคุมสีที่ใหม่กว่า ทำให้ผู้ใช้สามารถเลือกสีโปร่งใสได้

บล็อกการล็อค UI

ตัวแก้ไขไซต์ WordPress ป๊อปโอเวอร์ Block Lock เปิดขึ้นพร้อมตัวเลือกที่เลือกไว้เพื่อปิดการเคลื่อนไหวและป้องกันการลบบล็อก
การปรับแต่งบล็อกที่ถูกล็อค

Gutenberg 12.9 แนะนำ UI ใหม่สำหรับการล็อคบล็อก ภายใต้เมนูดรอปดาวน์ "ตัวเลือกเพิ่มเติม" ในแถบเครื่องมือ ผู้ใช้สามารถเลือกตัวเลือกการล็อก ซึ่งจะแสดงหน้าจอที่มีสองตัวเลือก:

  • ปิดใช้งานการเคลื่อนไหว: ไม่อนุญาตให้ย้ายบล็อกเอง อย่างไรก็ตาม บล็อกพี่น้องสามารถเคลื่อนย้ายไปมาได้
  • ป้องกันการลบ: ป้องกันไม่ให้บล็อกถูกลบ

Andrei Draganescu ตั้งข้อสังเกตต่อไปนี้ในโพสต์ประกาศ 12.9:

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

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

จากมุมมองของผู้พัฒนาธีม การล็อกระดับบล็อกต้องการขั้นตอนเพิ่มเติมจากผู้ใช้ในการย้ายและ/หรือลบบล็อก ไม่ใช่การล็อกแบบ "บังคับ" หรือ "ถาวร" มันเป็นคุณสมบัติต้อนรับ แต่ธีมควรเข้าใจข้อจำกัดของมัน และ UI ใหม่นี้ให้พลังแก่ผู้ใช้มากกว่า ไม่น้อย

อัปเดต: มีตะขอสำหรับผู้สร้างไซต์ที่จะเขียนทับสิ่งนี้ ดูเพิ่มเติมในความคิดเห็น

Block Gap รองรับแกลเลอรี… เรียงจาก

โปรแกรมแก้ไขโพสต์ WordPress พร้อมชุดรูปภาพห้ากลุ่มในบล็อกแกลเลอรี
บล็อกระยะห่างสำหรับบล็อกแกลเลอรี

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

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

 Warning: preg_match() expects parameter 2 to be string, array given in ...wp-content/plugins/gutenberg/build/block-library/blocks/gallery.php on line 51

ฉันแน่ใจว่าสิ่งนี้จะได้รับการแก้ไขใน 12.9.1 ก่อนหน้านั้น ฉันขอแนะนำว่าอย่าใช้ตัวควบคุม "Block Spacing"

คำเตือนผู้สร้างธีม: นี่เป็นการเปลี่ยนแปลงที่ทำลายล้างสำหรับธีมที่กำหนดเป้าหมาย --gallery-block--gutter-size เพื่อควบคุมช่องว่างเริ่มต้นสำหรับแกลเลอรี คุณสมบัติ CSS แบบกำหนดเองที่น่าเชื่อถือก่อนหน้านี้ไม่มีอยู่ในโค้ดแล้ว ไม่ชัดเจนว่าทำไมตัวแปรนี้จึงถูกลบออกไปทั้งหมด และไม่มีการกล่าวถึงตัวแปรนี้ในตั๋ว

ดูเหมือนว่าตัวแปร --wp--style--unstable-gallery-gap ใหม่จะทำงานคล้ายกัน อย่างไรก็ตาม ตามชื่อที่ unstable มันอาจจะไม่ได้อยู่ใกล้ๆ เสมอไป มันยังถูกกำหนดในคลาส . .wp-container-* แทนที่จะเป็นตัวแกลลอรี่เอง ฉันยังต้องทำการทดสอบ CSS มากพอที่จะหาวิธีเขียนทับสำหรับช่องว่างเริ่มต้น หากใครมีวิธีแก้ปัญหาโปรดโพสต์ในความคิดเห็นสำหรับผู้อื่น

เด็ก ๆ ยุบตามค่าเริ่มต้นในมุมมองรายการ

ตัวแก้ไขบล็อก WordPress โดยเปิดแผงมุมมองรายการทางด้านซ้าย บล็อกของมันถูกยุบโดยค่าเริ่มต้น
การเปิดชุดบล็อกที่ซ้อนกันในมุมมองรายการ

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

อย่างไรก็ตาม Gutenberg รุ่นล่าสุดอาจเปลี่ยนการใช้งานของฉัน เวอร์ชัน 12.9 ยุบบล็อกย่อยทั้งหมดตามค่าเริ่มต้น

การลงทะเบียนรูปแบบอัตโนมัติสำหรับธีม

ผู้เขียนธีมสามารถให้ Gutenberg จัดการการลงทะเบียนรูปแบบให้กับพวกเขาได้แล้ว พวกเขาต้องทำตามกฎสองสามข้อเท่านั้น:

  • เพิ่มรูปแบบบล็อกภายในไฟล์ PHP ในโฟลเดอร์ /patterns
  • เพิ่มข้อมูลรูปแบบไปยังส่วนหัวของไฟล์
  • เพิ่มเนื้อหารูปแบบแน่นอน

ไฟล์รูปแบบแต่ละรายการควรมีลักษณะดังนี้:

 <?php /** * Title: A Pattern Title * Slug: namespace/slug * Description: A human-friendly description. * Viewport Width: 1024 * Categories: comma, separated, values * Keywords: comma, separated, values * Block Types: comma, separated, values * Inserter: yes|no */ ?> <!-- some-block-content /-->

ต้องระบุเฉพาะฟิลด์ส่วนหัวของ Title และ Slug แต่ละตัวเลือกตรงกับอาร์กิวเมนต์ของฟังก์ชัน register_block_pattern()

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

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

  • /parts – บล็อกส่วนเทมเพลต
  • /patterns – รูปแบบบล็อก
  • /styles – รูปแบบสไตล์สากล
  • /templates – บล็อกเทมเพลต
  • theme.json – การตั้งค่าและสไตล์โดยรวม

นอกเหนือจากรูปแบบบล็อกที่กำหนดเองและรูปแบบต่างๆ (เพื่อไม่ให้สับสนกับรูปแบบรูปแบบสากล) เกือบทุกอย่างจะครอบคลุม ชุดที่กลมกล่อมนี้ช่วยลดอุปสรรคในการเข้ามาสำหรับผู้แต่งธีมในอนาคต แม้แต่นักพัฒนาที่ช่ำชองก็ควรชื่นชมความเรียบง่ายของสิ่งที่จะตั้งชื่อและตำแหน่งที่จะใส่ เป็นเรื่องที่น่ากังวลไม่น้อย นอกจากนี้ยังจะทำให้ระบบตรวจสอบธีมของ WordPress.org ง่ายขึ้นอีกด้วย

การส่งออกธีมและการสร้างเทมเพลต

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

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

ตัวแก้ไขไซต์ Gutenberg พร้อมตัวเลือกเปิดแบบเลื่อนลง เลือกปุ่มส่งออกแล้ว
การส่งออกธีมที่ใช้งานอยู่ด้วยการปรับแต่ง

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

ยังมีบางสิ่งที่ยังไม่สามารถทำได้จากตัวแก้ไข และสิ่งเหล่านี้จะต้องได้รับการปรับปรุงด้วยตนเองก่อนที่จะเผยแพร่สู่สาธารณะ ชื่อธีมและข้อมูลอื่นๆ ใน style.css จะยังคงเหมือนเดิมกับธีมดั้งเดิม นอกจากนี้ยังไม่มีวิธีใดในการจับภาพหน้าจอของเวอร์ชันที่กำหนดเองและรวมไว้ใน ZIP

นี่เป็นการก้าวกระโดดสำหรับการออกแบบที่เป็นประชาธิปไตย แต่จะต้องพิจารณาขั้นตอนอื่นๆ ผู้ใช้ควรจะสามารถส่งออกเป็นธีมย่อยได้ด้วยการปรับแต่งเองเท่านั้น หรือแม้แต่เป็นไฟล์ *.json (รูปแบบสากลที่แปรผัน)

แต่มีกรณีการใช้งานที่ทันท่วงทีและใช้งานได้จริงมากกว่า ผู้ใช้สามารถดาวน์โหลดธีมที่กำหนดเองและอัปโหลดไปยังไซต์อื่นได้

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

  • ผู้เขียน
  • หมวดหมู่
  • วันที่
  • แท็ก
  • อนุกรมวิธาน
เปิดแผงเทมเพลต Gutenberg เมนูแบบเลื่อนลง "เพิ่มใหม่" จะเปิดขึ้นโดยเน้นที่เทมเพลตผู้แต่ง
การเพิ่มเทมเพลตผู้แต่งใหม่

เทมเพลตใหม่เป็นส่วนเสริมที่น่ายินดี แต่ฟีเจอร์การสร้างเทมเพลตยังคงมีข้อจำกัด ไม่มีทางที่จะสร้างรูปแบบต่างๆ บนเทมเพลตเหล่านั้นผ่านทาง UI เช่น category-wordpress , taxonomy-genre หรือความเป็นไปได้อื่น ๆ อีกนับสิบ อย่างไรก็ตาม มันจะเกิดขึ้นวันหนึ่ง