Gutenberg 8.3 อัปเดตหมวดหมู่บล็อก รวมตัวเลือกบล็อกหลัก และเพิ่มการควบคุมการออกแบบใหม่

เผยแพร่แล้ว: 2020-06-13

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

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

ใน Gutenberg 8.2 การกดปุ่ม Enter ในช่องคำอธิบายภาพสำหรับบล็อกรูปภาพจะสร้างย่อหน้าใหม่ ใน 8.3 ฟีเจอร์ดังกล่าวได้ขยายไปยังบล็อกทั้งหมดที่มีคำบรรยาย

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

หมวดหมู่บล็อกใหม่

สกรีนช็อตของตัวแทรกบล็อก Gutenberg
หมวดหมู่ "การออกแบบ" ใหม่ในตัวแทรกบล็อก

ทีม Gutenberg ได้เปลี่ยนชื่อและจัดระเบียบหมวดหมู่บล็อกใหม่ รายการใหม่ดูสมเหตุสมผลกว่าและรวมเป็นกลุ่มที่เหมาะสมได้ดีกว่า:

  • ข้อความ
  • สื่อ
  • ออกแบบ
  • วิดเจ็ต
  • ฝัง

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

เลือกบล็อกหลัก

วางเมาส์เหนือแถบเครื่องมือแก้ไขเพื่อค้นหาตัวเลือกบล็อกหลัก
วางเมาส์เหนือแถบเครื่องมือเพื่อค้นหาตัวเลือกบล็อกหลัก

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

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

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

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

การควบคุมระยะห่าง/ระยะห่างในการทดลอง

การใช้ตัวควบคุมการเติมใหม่สำหรับบล็อกหน้าปก
การเพิ่มช่องว่างภายในแบบกำหนดเองไปยังบล็อกปก

ผู้สร้างธีมสามารถเพิ่มการสนับสนุนสำหรับการควบคุมการขยายแบบทดลองผ่าน add_theme_support( 'experimental-custom-spacing' ) เมื่อได้รับการสนับสนุน ผู้ใช้ปลายทางจะเห็นแท็บการเว้นวรรคใหม่ภายใต้แถบด้านข้างตัวเลือกการบล็อกสำหรับบล็อกหน้าปก ซึ่งน่าจะมีให้สำหรับบล็อกอื่นๆ ในอนาคต โดยค่าเริ่มต้น ผู้ใช้สามารถควบคุมช่องว่างภายในสำหรับบล็อกทั้งสี่ด้านด้วยค่าเดียว นอกจากนี้ยังสามารถ "ยกเลิกการเชื่อมโยง" ช่องว่างภายในและควบคุมค่าบน ล่าง ซ้าย และขวาแยกกันได้

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

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

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

ลิงค์สี

การเลือกสีลิงค์ในตัวแก้ไขบล็อก
การเลือกสีลิงค์แบบกำหนดเอง

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

นั่นคือที่มาของสีลิงก์ที่ควบคุมโดยผู้ใช้ หากต้องการเพิ่มการรองรับสีลิงก์ที่กำหนดเอง ผู้สร้างธีมต้องเลือกใช้คุณลักษณะนี้ผ่าน add_theme_support( 'experimental-link-color' ) สิ่งนี้จะเพิ่มตัวเลือกสีใหม่สำหรับบล็อก Paragraph, Heading, Group, Columns และ Media & Text

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

 a { color: var( --wp--style--color--link, #000 ); }

WordPress จะตั้งค่า --wp--style--color--link โดยอัตโนมัติ เพื่อความเฉพาะเจาะจงเพิ่มเติม ผู้เขียนธีมยังสามารถกำหนดเป้าหมาย . .has-link-color a