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

เดี๋ยวก่อนไม่ style.css ไฟล์? เรายังมีสิ่งนั้น ในความเป็นจริง, style.css is ยังคงเป็นไฟล์ที่จำเป็น ในบล็อกธีม แม้ว่าบทบาทของมันจะลดลงอย่างมากสำหรับข้อมูลเมตาที่ใช้สำหรับการลงทะเบียนธีม ที่พูดมา ความจริงก็คือว่า theme.json ยังอยู่ในระหว่างการพัฒนา หมายความว่าเราอยู่ในช่วงเปลี่ยนผ่านซึ่งคุณอาจพบสไตล์ที่กำหนดไว้ใน styles.css หรือแม้แต่ในระดับบล็อก

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

วิวัฒนาการของรูปแบบ WordPress

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

อีกวิธีหนึ่งที่เราจะรู้สึกว่าเราอยู่ที่ไหนคือการดูวิวัฒนาการของ ธีม WordPress เริ่มต้น. จนถึงปัจจุบัน มีธีมเริ่มต้นสามแบบที่สนับสนุนการแก้ไขทั้งไซต์:

แต่อย่าเริ่มซื้อขาย CSS ใน style.css สำหรับคู่ค่าคุณสมบัติ JSON ใน theme.json ยัง ยังคงมีกฎสไตล์ CSS ที่ต้องได้รับการสนับสนุน theme.json ก่อนที่เราจะคิดที่จะทำสิ่งนั้น ประเด็นสำคัญที่เหลืออยู่กำลังถูกหารือโดยมีเป้าหมายเพื่อย้ายกฎสไตล์ CSS ทั้งหมดเข้าไป theme.json และรวบรวมแหล่งต่างๆ theme.json ลง UI สำหรับการตั้งค่าสไตล์ส่วนกลาง โดยตรงในไฟล์ ตัวแก้ไขไซต์ WordPress.

นั่นทำให้เราอยู่ในจุดที่ค่อนข้างยาก ไม่เพียงเท่านั้น ไม่มีเส้นทางที่ชัดเจนสำหรับการเอาชนะสไตล์ของธีมแต่ก็ไม่ชัดเจนว่าแหล่งที่มาของสไตล์เหล่านั้นมาจากไหน — มันมาจากเลเยอร์ต่างๆ ของ theme.json ไฟล์, style.cssปลั๊กอิน Gutenberg หรือที่อื่น?

Why theme.json แทน style.css?

คุณอาจสงสัยว่าเหตุใด WordPress จึงเปลี่ยนไปสู่การกำหนดรูปแบบตาม JSON แทนที่จะเป็นไฟล์ CSS แบบดั้งเดิม Ben Dwyer จากทีมพัฒนา Gutenberg อธิบายอย่างชัดเจนว่าทำไม theme.json วิธีการนี้เป็นประโยชน์สำหรับนักพัฒนาธีม.

มันคุ้มค่าที่จะอ่านโพสต์ของเบ็น แต่เนื้อหาอยู่ในคำพูดนี้:

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

โดยสนับสนุนให้ผู้เขียนธีมใช้ theme.json API หากเป็นไปได้ ลำดับชั้นของสไตล์ที่กำหนด “ฐาน > ธีม > ผู้ใช้” สามารถแก้ไขได้อย่างถูกต้อง

ข้อดีอย่างหนึ่งของการย้าย CSS ไปยัง JSON คือ JSON เป็นรูปแบบที่เครื่องอ่านได้ ซึ่งหมายความว่าสามารถแสดงได้ใน WordPress Site Editor UI โดยการเรียก API จึงทำให้ผู้ใช้สามารถแก้ไขค่าเริ่มต้นและปรับแต่งรูปลักษณ์ของเว็บไซต์ได้โดยไม่ต้อง เขียน CSS อะไรก็ได้ นอกจากนี้ยังมีวิธีการจัดรูปแบบบล็อกอย่างสม่ำเสมอ ในขณะที่ให้โครงสร้างที่สร้างชั้นของความเฉพาะเจาะจง เพื่อให้การตั้งค่าของผู้ใช้มีลำดับความสำคัญสูงสุดเหนือที่กำหนดไว้ใน theme.json. การทำงานร่วมกันระหว่างสไตล์ระดับธีมใน theme.json และสไตล์ที่ผู้ใช้กำหนดใน Global Styles UI คือสิ่งที่ทำให้แนวทาง JSON น่าสนใจมาก

นักพัฒนารักษาความสอดคล้องใน JSON และผู้ใช้จะได้รับความยืดหยุ่นด้วยการปรับแต่งที่ไม่ต้องใช้โค้ด นั่นคือการชนะ

มีประโยชน์อย่างอื่นอีกแน่นอนและ Mike McAlister จาก WP Engine แสดงหลายรายการในหัวข้อ Twitter นี้. คุณจะพบประโยชน์มากกว่านี้ สนทนาเชิงลึก ที่บล็อก Make WordPress Core และเมื่อคุณอ่านแล้ว ให้เปรียบเทียบประโยชน์ของแนวทาง JSON กับ วิธีที่มีในการกำหนดและแทนที่สไตล์ในธีมคลาสสิก.

การกำหนดสไตล์ด้วยองค์ประกอบ JSON

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

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

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

วิธีที่ดีกว่าในการอธิบายองค์ประกอบ JSON คือองค์ประกอบระดับต่ำสำหรับธีมและบล็อกที่ไม่ต้องการความซับซ้อนของบล็อก พวกเขาเป็นตัวแทนของ HTML ดั้งเดิม ที่ไม่ได้กำหนดไว้ในบล็อกแต่สามารถใช้ข้ามบล็อกได้ วิธีการรองรับใน WordPress (และปลั๊กอิน Gutenberg) ได้อธิบายไว้ใน คู่มือตัวแก้ไขบล็อก และนี้ บทช่วยสอนการแก้ไขไซต์แบบเต็ม โดย Carolina Nymark

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

นี่คือตารางขององค์ประกอบที่มีอยู่ในปัจจุบันเพื่อจัดรูปแบบ theme.json, ได้รับความอนุเคราะห์จากแคโรไลนา:

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

นอกจากนี้ คุณยังสามารถเริ่มดูว่าโครงสร้างของ theme.json การเรียงลำดับรูปแบบเป็นชั้น ๆ เฉพาะจากองค์ประกอบส่วนกลาง (เช่น headings) ไปยังแต่ละองค์ประกอบ (เช่น h1) และสไตล์ระดับบล็อก (เช่น h1 อยู่ในบล็อก)

ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ JSON มีอยู่ใน ทำข้อเสนอ WordPress นี้ และ ตั๋วเปิดนี้ ใน repo GitHub ของปลั๊กอิน Gutenberg

ความเฉพาะเจาะจงของ JSON และ CSS

เรามาพูดถึงความเฉพาะเจาะจงของ CSS กันต่อไป ฉันได้กล่าวไว้ก่อนหน้านี้ว่าวิธีการจัดรูปแบบ JSON สร้างลำดับชั้น และมันเป็นเรื่องจริง สไตล์ที่กำหนดในองค์ประกอบ JSON ใน theme.json ถือเป็นรูปแบบธีมเริ่มต้น และสิ่งใดก็ตามที่ตั้งค่าโดยผู้ใช้ใน Global Styles UI จะลบล้างค่าเริ่มต้น

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

ฉันกำลังใช้ ธีมว่างธีม WordPress เปล่าที่ไม่มีสไตล์ CSS ฉันจะเพิ่มบล็อกปุ่มในหน้าใหม่

ตกลง เรารู้ว่า WordPress Core มาพร้อมกับสไตล์ที่บางเบา ตอนนี้ ฉันจะเปลี่ยนไปใช้ธีม TT3 เริ่มต้นจาก WordPress 6.1 และเปิดใช้งาน ถ้าฉันรีเฟรชหน้าด้วยปุ่ม ปุ่มจะเปลี่ยนสไตล์

คุณสามารถเห็นได้อย่างแน่นอน สไตล์ใหม่ๆ เหล่านั้นมาจากไหน ใน TT3 theme.json ไฟล์. สิ่งนี้บอกเราว่าสไตล์องค์ประกอบ JSON มีความสำคัญเหนือสไตล์ WordPress Core

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

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

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

เครื่องยนต์สไตล์

นั่นเป็นแนวคิดที่รวดเร็วมาก แต่ดีสำหรับวิธีจัดการความเฉพาะเจาะจงของ CSS ในธีมบล็อก WordPress แต่ถ่ายไม่ครบเพราะยังไม่ชัด ที่ไหน สไตล์เหล่านั้นถูกสร้างขึ้น WordPress มีสไตล์เริ่มต้นของตัวเองที่มาจากที่ไหนสักแห่ง ใช้ข้อมูลใน theme.json สำหรับกฎของสไตล์เพิ่มเติม และลบล้างกฎเหล่านั้นด้วยการตั้งค่าใดๆ ใน Global Styles

สไตล์เหล่านั้นเป็นแบบอินไลน์หรือไม่? พวกเขาอยู่ในรูปแบบแยกต่างหากหรือไม่ บางทีพวกเขาอาจถูกฉีดเข้าไปในหน้าใน ?

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

เราเพิ่งได้ดูครั้งแรกที่ Style Engine อันที่จริงแล้ว นี่คือสิ่งที่เสร็จสมบูรณ์แล้ว ตามตั๋ว:

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

โดยพื้นฐานแล้ว นี่เป็นรากฐานสำหรับการสร้าง API เดียวที่มีกฎสไตล์ CSS ทั้งหมดสำหรับธีม ไม่ว่าจะมาจากไหน มันล้างวิธีที่ WordPress ใส่สไตล์อินไลน์ก่อน 6.1 และสร้างระบบสำหรับชื่อคลาสความหมาย

รายละเอียดเพิ่มเติมเกี่ยวกับเป้าหมายระยะยาวและระยะสั้นของ Style Engine สามารถพบได้ในสิ่งนี้ ทำการอภิปรายหลักของ WordPress. ยังสามารถติดตามได้ที่ ปัญหาการติดตาม และ คณะกรรมการโครงการ สำหรับการปรับปรุงเพิ่มเติม

การทำงานกับองค์ประกอบ JSON

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

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

สไตล์สากลสำหรับองค์ประกอบ JSON

มาดูธีม TT3 เริ่มต้นใหม่และดูว่าปุ่มมีสไตล์อย่างไร ต่อไปนี้เป็นการคัดลอกและวางแบบย่อของ TT3 theme.json ไฟล์ (นี่คือไฟล์ รหัสเต็ม) แสดงส่วนสไตล์ส่วนกลาง แต่คุณสามารถค้นหาโค้ดต้นฉบับได้ที่นี่

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

ปุ่มทั้งหมดได้รับการออกแบบในระดับโลก (styles.elements.button).

เราสามารถยืนยันสิ่งนี้ได้ใน DevTools เช่นกัน สังเกตว่าคลาสที่เรียกว่า .wp-element-button เป็นผู้คัดเลือก คลาสเดียวกันนี้ใช้เพื่อจัดรูปแบบสถานะการโต้ตอบเช่นกัน

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

นอกจากนี้ WordPress 6.1 ยังเพิ่มเข้ามา รองรับการจัดรูปแบบสถานะการโต้ตอบ สำหรับองค์ประกอบบางอย่าง เช่น ปุ่มและลิงก์ โดยใช้คลาสหลอกใน theme.json - รวมถึง :hover, :focusและ :active — หรือ Global Styles UI วิศวกรอัตโนมัติ เดฟสมิ ธ แสดงให้เห็นถึง คุณลักษณะนี้ ในวิดีโอ YouTube

เราสามารถแทนที่สีพื้นหลังของปุ่มได้ theme.json (ควรเป็นธีมลูกเนื่องจากเราใช้ธีม WordPress เริ่มต้น) หรือในการตั้งค่า Global Styles ในตัวแก้ไขเว็บไซต์ (ไม่ต้องใช้ธีมลูกเนื่องจากไม่ต้องเปลี่ยนรหัส)

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

สไตล์ระดับบล็อกสำหรับองค์ประกอบ

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

ในการทำเช่นนั้น เราได้กำหนดสไตล์บน styles.blocks วัตถุใน theme.json. ถูกต้อง หากเรากำหนดรูปแบบส่วนกลางสำหรับปุ่มทั้งหมด styles.elementsเราสามารถกำหนดสไตล์เฉพาะบล็อกสำหรับองค์ประกอบปุ่มได้ styles.blockซึ่งเป็นไปตามโครงสร้างที่คล้ายกัน:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

เห็นไหม? ฉันตั้ง background และ text คุณสมบัติบน styles.blocks.core/search.elements.button ด้วยตัวแปร CSS สองตัวที่ตั้งค่าไว้ล่วงหน้าใน WordPress

ผลลัพธ์? ขณะนี้ปุ่มค้นหาเป็นสีแดง (--wp--preset--color--quaternary) และบล็อกปุ่มเริ่มต้นจะคงพื้นหลังสีเขียวสดใสไว้

เราสามารถเห็นการเปลี่ยนแปลงใน DevTools เช่นกัน

เช่นเดียวกับที่เราต้องการจัดรูปแบบปุ่มที่รวมอยู่ในบล็อกอื่นๆ และปุ่มต่างๆ เป็นเพียงตัวอย่างหนึ่งเท่านั้น ดังนั้น มาดูตัวอย่างอื่นกัน

ตัวอย่าง: การจัดรูปแบบหัวเรื่องในแต่ละระดับ

ลองนำข้อมูลทั้งหมดนี้กลับบ้านด้วยตัวอย่าง ครั้งนี้ เราจะ:

• จัดรูปแบบหัวเรื่องทั้งหมดทั่วโลก
• จัดรูปแบบองค์ประกอบหัวเรื่อง 2 ทั้งหมด
• หัวข้อสไตล์ 2 องค์ประกอบในบล็อก Query Loop

ก่อนอื่นมาเริ่มกันที่โครงสร้างพื้นฐานสำหรับ theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

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

จัดรูปแบบหัวเรื่องทั้งหมดทั่วโลก

ขอเพิ่ม headings คัดค้านสไตล์สากลของเราและใช้สไตล์บางอย่าง:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

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

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

ตอนนี้องค์ประกอบ Heading 2 ทั้งหมดถูกกำหนดให้เป็นสีหลักที่ตั้งไว้ล่วงหน้าด้วย a ขนาดตัวอักษรของเหลว. แต่บางทีเราต้องการการแก้ไข fontSize สำหรับองค์ประกอบหัวเรื่อง 2 เมื่อใช้ในบล็อก Query Look:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

ตอนนี้เรามีสไตล์สามระดับสำหรับองค์ประกอบหัวเรื่อง 2: หัวเรื่องทั้งหมด องค์ประกอบหัวเรื่อง 2 ทั้งหมด และองค์ประกอบหัวเรื่อง 2 ที่ใช้ในบล็อก Query Loop

ตัวอย่างธีมที่มีอยู่

แม้ว่าเราจะดูเฉพาะตัวอย่างการจัดรูปแบบสำหรับปุ่มและส่วนหัวในบทความนี้ แต่ WordPress 6.1 รองรับการจัดรูปแบบองค์ประกอบเพิ่มเติม มีตารางสรุปไว้ใน “การกำหนดรูปแบบด้วยองค์ประกอบ JSON” มาตรา.

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

อย่าลืมให้แต่ละคน theme.json ดูดีเพราะธีมเหล่านี้มีตัวอย่างที่ยอดเยี่ยมของสไตล์บล็อกระดับบน styles.blocks วัตถุ.

ตัดขึ้น

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

เกี่ยวกับ ข้อเสนอ GitHub เพื่อออกแบบเครื่องมือแก้ไขไซต์ใหม่ในโหมดเบราว์เซอร์ใหม่ Sara Gooding เขียนในโพสต์ WP Tavern:

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

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

อ้างอิง

ฉันแสดงรายการแหล่งข้อมูลทั้งหมดที่ฉันใช้ในขณะที่ค้นคว้าข้อมูลสำหรับบทความนี้

องค์ประกอบ JSON

สไตล์ทั่วโลก

เครื่องยนต์สไตล์

ขอบคุณที่อ่าน! ฉันชอบที่จะรับฟังความคิดเห็นของคุณเองเกี่ยวกับการใช้ธีมบล็อกและวิธีที่คุณจัดการ CSS ของคุณ