Gutenberg 12.1 แก้ไขการเลื่อนเค้าโครงของ Appender เพิ่มมุมมองรายการเทมเพลต และปรับปรุงสไตล์สากล

เผยแพร่แล้ว: 2021-12-09

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

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

ไม่มีการเปลี่ยนเค้าโครงอีกต่อไป

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

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

ปุ่ม Appender ไม่เปลี่ยนเค้าโครง

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

การปรับปรุงสไตล์ระดับโลก

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

การสร้างการไล่ระดับสีแบบกำหนดเอง

จานสียังแสดงสีดูโอโทนภายใต้ส่วนการไล่ระดับสีเดียวกัน อย่างไรก็ตาม ยังไม่มีตัวเลือกสำหรับการสร้างฟิลเตอร์ดูโอโทนแบบกำหนดเอง มันเป็นส่วนอ่านอย่างเดียว

แผงสไตล์ส่วนกลางยังแยกตัวเลือกการพิมพ์ระหว่างองค์ประกอบข้อความและลิงก์ ซึ่งเปิดประตูสำหรับองค์ประกอบ HTML อื่นๆ ในอนาคต

ส่วนการพิมพ์ลิงค์

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

มุมมองเทมเพลตและส่วนเทมเพลต

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

ขณะนี้แผงได้รับการปรับขนาดกลับเพื่อรวมลิงก์สามลิงก์สำหรับไซต์ เทมเพลต และส่วนเทมเพลต ลิงก์แรกจะแสดงตัวแก้ไขไซต์ ส่วนอื่นๆ จะแสดงตารางของเทมเพลตที่มีอยู่

มุมมองรายการเทมเพลต

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

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

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

การสร้างส่วนเทมเพลตแบบกำหนดเอง

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

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

มุมมองรายการชิ้นส่วนเทมเพลต

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

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

ทางเลือกทางเลือกที่ว่างเปล่า

รุ่นล่าสุดแนะนำทางเลือกสำหรับบล็อกเมนูการนำทางที่ว่างเปล่า ท้ายที่สุดแล้ว หากไม่พบเมนูใด ๆ เมนูนั้นจะแสดงบล็อกรายการเพจ ขึ้นอยู่กับจำนวนหน้าของไซต์ของผู้ใช้ การดำเนินการนี้สามารถทำได้อย่างรวดเร็ว ดังที่แสดงในภาพหน้าจอต่อไปนี้ของ Twenty Twenty-Two:

การนำทางบล็อกทางเลือกสำรองพร้อมรายการหน้ายาว

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

รายการธีมบล็อกที่น่าจดจำ

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

  • /block-templates เปลี่ยนชื่อเป็น /templates
  • /block-template-parts เปลี่ยนชื่อเป็น /parts

การเปลี่ยนแปลงนี้จะล้างไดเร็กทอรีธีมระดับบนสุด แต่ยังสร้างเส้นทางสู่มาตรฐานมากขึ้นในอนาคต มีตั๋วเปิดอยู่แล้วสำหรับ /patterns และโฟลเดอร์ /styles เป็นไปได้

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