การใช้ระบบการออกแบบกับ WordPress Block Editor Pt. 1: ธีม. json

เผยแพร่แล้ว: 2022-12-15

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

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

  • ทำความเข้าใจส่วนต่างๆ ของ theme.json ที่เกี่ยวข้องกับระบบการออกแบบ
  • แก้ไขและขยาย theme.json เพื่อใช้ระบบการออกแบบที่นำเข้า

ทำความเข้าใจเกี่ยวกับธีม.json

theme.json เป็นไฟล์กำหนดค่าที่ให้คุณกำหนดค่าและกำหนดธีมให้กับตัวแก้ไขบล็อก เปลี่ยนการตั้งค่าบล็อก และสร้างรากฐานเพื่อพัฒนาธีมบล็อกทั้งหมด

มีขึ้นเพื่อให้คุณสามารถควบคุมการตั้งค่าและสไตล์โดยรวมสำหรับไซต์ WordPress ของคุณได้ ทุกไซต์ WordPress VIP ใหม่มาพร้อมกับธีม Twenty Twenty-Three ซึ่งเป็นธีมบล็อก ธีมนี้เป็นจุดเริ่มต้นที่ดีในการทดลองกับธีมบล็อกน้ำหนักเบาและทำความเข้าใจการควบคุมอันทรงพลังบางอย่างที่มีให้ใน theme.json

แก้ไข theme.json

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

ด้านล่างเราจะพูดถึงเคล็ดลับและกลยุทธ์เพื่อให้คุณสามารถใช้ประโยชน์จากทุกสิ่งที่ theme.json มีให้

การจัดเก็บโทเค็นการออกแบบ

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

การใช้โทเค็นการออกแบบ

มาดูตัวอย่างการใช้ส่วนที่กำหนดเองของ theme.json เรามีตัวอย่างข้อมูลที่เรากำหนดสีข้อความหลักเป็นสีเขียวและพื้นหลังเป็นสีดำ:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

สิ่งนี้ช่วยให้เราสามารถอ้างอิงสองสีนี้ได้ทุกที่ภายใน theme.json โดยใช้:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

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

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

สคีมาสำหรับคีย์ใดๆ ที่คุณต้องการอ้างอิงจากการตั้งค่าแบบกำหนดเองคือ:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

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

ปฏิบัติที่ดีที่สุด

  • ใช้ตัวแปรโทเค็นการออกแบบที่สร้างโดย WordPress (เช่น var(--wp--custom--text--primary) ) เพื่ออ้างอิงโทเค็นทุกที่ โปรดสังเกตตัวอย่างข้อมูลด้านบน ซึ่งเราอ้างอิงสีหลักและสีพื้นหลังที่กำหนดเอง แทนที่จะใช้ค่าจริง สิ่งนี้ทำให้มั่นใจได้ว่าเมื่อคุณต้องการอัพเดตคุณสมบัติ เช่น สีข้อความ คุณต้องเปลี่ยนเพียงตำแหน่งเดียวเท่านั้น เนื่องจากตำแหน่งอื่นๆ เป็นเพียงการอ้างอิงเท่านั้น
  • โทเค็นการออกแบบที่แทรกลงใน theme.json สามารถเข้าถึงได้ด้วย CSS ภายนอก theme.json เช่นกัน โดยใช้การอ้างอิงคีย์เดียวกับที่แสดงด้านบน สิ่งนี้ใช้กับการพัฒนาบล็อกและส่วนประกอบอื่นๆ ที่ใช้ในธีม ซึ่งไม่ได้มีไว้สำหรับการใช้งานภายใน theme.json เท่านั้น และควรใช้ซ้ำใน CSS ที่กำหนดเอง

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

แก้ไขตัวแก้ไขและบล็อกสไตล์

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

มีสองตำแหน่งหลักใน theme.json:

  • การตั้งค่าและ settings.blocks—อนุญาตให้ปรับแต่งการตั้งค่าโดยทั่วไปในตัวแก้ไขบล็อก และการตั้งค่าที่ปรับแต่งสำหรับบล็อกแต่ละประเภท
  • Styles และ styles.blocks—อนุญาตให้กำหนดสไตล์ที่กำหนดไว้ล่วงหน้าสำหรับตัวแก้ไขบล็อกทั้งหมด และการปรับแต่งต่อบล็อก

ตัวอย่างเช่น ต่อไปนี้เป็นวิธีการตรวจสอบให้แน่ใจว่าส่วนหัวทั้งหมดมีสีเขียว (หลัก) เริ่มต้นและตัวเลือกสีรอง:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

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

คำเตือนสไตล์

ใช้เฉพาะส่วน style และ style.blocks ของ theme.json เพื่อจัดรูปแบบบล็อกของคุณหากทำได้ อย่าใช้สไตล์ CSS เพื่อเอาชนะสไตล์บล็อกหลัก เว้นแต่จะจำเป็นจริงๆ โดยทั่วไปการแทนที่ CSS สำหรับสไตล์บล็อกจะไม่เสถียร – การอัปเดตตัวแก้ไขบล็อกสามารถเปลี่ยนสไตล์และโครงสร้างได้ ทำให้สไตล์เหล่านั้นเสียหาย

การปรับแต่งต่อบล็อก

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

เรามาดำเนินการต่อด้วยตัวอย่างการตั้งค่าสีอื่นที่ใช้หลักการเดียวกันนี้กับคุณสมบัติที่กำหนดค่าได้อื่นๆ เช่น สี รูปแบบตัวอักษร และการเว้นวรรค หากต้องการปิดใช้งานความสามารถในการเปลี่ยนสีข้อความเริ่มต้นได้ทุกที่ ยกเว้นบล็อกหัวเรื่อง วิธีกำหนดค่า theme.json มีดังนี้

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

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

เทมเพลตที่ตั้งไว้ล่วงหน้าอย่างง่าย

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

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

ด้วยค่าดีฟอลต์ที่ล็อคไว้เหล่านี้ คุณสามารถใช้ settings.blocks เพื่อแสดงตัวเลือกสำหรับบล็อกเฉพาะในตัวแก้ไข และจำกัดการปรับแต่งเฉพาะการตั้งค่าที่กำหนดไว้อย่างดี

สรุปแล้ว

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

ในส่วนที่ 2 ของซีรีส์ เราจะพูดถึงเคล็ดลับขั้นสูงเพิ่มเติมนอก theme.json สำหรับการจัดการประเภทและสไตล์ของบล็อกในตัวในระบบการออกแบบ

ลิงค์ที่มีประโยชน์

  • Theme.json คืออะไร
  • การตั้งค่าและสไตล์ส่วนกลาง (theme.json)

ผู้เขียน

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

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

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

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