ควบคุมการออกแบบบล็อกผ่านปลั๊กอิน WordPress EditorPlus

เมื่อสัปดาห์ที่แล้วขณะที่ฉันกำลังแก้ไขขั้นสุดท้ายในการทบทวนโครงการ Gutenberg Forms ของเขา Munir Kamal กำลังเตรียมที่จะเปิดตัวปลั๊กอิน WordPress อีกประเภทหนึ่งสำหรับตัวแก้ไขบล็อก อันนี้เรียกว่า EditorPlus และจะสร้างระบบการออกแบบสำหรับบล็อก Kamal และทีมของเขาปิดท้ายอย่างเงียบ ๆ ในเวอร์ชัน 1.0 และเปิดตัวปลั๊กอินในที่เก็บปลั๊กอิน WordPress ในอีกสองสามวันต่อมา

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

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

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

EditorPlus ทำงานอย่างไร

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

• ชายแดน
• กล่องเงา
• ขนาด
• พื้นหลัง
• มาร์จิ้น
• การขยายความ
• รัศมีชายแดน
• ความพิเศษ

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

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

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

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

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

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

ปัญหาหนึ่งที่ฉันพบกับปลั๊กอินคือสไตล์ของธีมที่ใช้งานอยู่ของฉันจะแทนที่สไตล์ของปลั๊กอินโดยทั่วไป ตัวอย่างเช่น ธีมเริ่มต้นของ Twenty Twenty กำหนดเป้าหมาย p.has-background ใน CSS เพื่อเพิ่มช่องว่างภายในที่กำหนดเอง ดังนั้นจึงลบล้าง CSS ของปลั๊กอิน EditorPlus ด้วยความจำเพาะที่สูงกว่า ปัญหานี้เป็นไปตามคาด และผู้พัฒนาปลั๊กอินได้เพิ่มวิธีแก้ปัญหาในรูปแบบของช่องกาเครื่องหมาย "สำคัญ" สำหรับแต่ละตัวเลือกการออกแบบ หากผู้ใช้ทำเครื่องหมายที่ช่องนี้ ระบบจะเพิ่ม !important ให้กับกฎของสไตล์ในเอาต์พุต ซึ่งจะทำให้สามารถลบล้างสไตล์ของธีมได้ ไม่ใช่วิธีแก้ปัญหาที่โง่เขลา 100% ระยะทางของคุณอาจแตกต่างกันไป ขึ้นอยู่กับธีม แต่ควรใช้ได้กับกรณีการใช้งานส่วนใหญ่

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

ความคิดสุดท้าย

สำหรับการเปิดตัวเวอร์ชัน 1.0 EditorPlus ได้เริ่มต้นอย่างมั่นคง ในการทดสอบของฉัน ฉันพบข้อบกพร่องเล็กน้อย ปัญหาใดๆ สำหรับผู้ใช้ทั่วไปมักจะมาในรูปแบบของความขัดแย้งของธีม และความขัดแย้งเหล่านั้นมักจะอยู่ที่ธีมที่ใช้ความจำเพาะสูงหรือ !important ใน CSS

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

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