การใช้เลย์เอาต์ที่มีข้อจำกัดใหม่ใน WordPress Block Themes

หนึ่งในเป้าหมายหลักของ WordPress Site Editor (และใช่แล้ว นั่นคือตอนนี้ "ชื่อเป็นทางการ) คือการย้ายรูปแบบบล็อกพื้นฐาน ราคาเริ่มต้นที่ CSS เป็น JSON ที่มีโครงสร้าง. ไฟล์ JSON สามารถอ่านได้ด้วยเครื่อง ซึ่งทำให้ Site Editor ที่ใช้ JavaScript ใช้งานได้สำหรับการกำหนดค่าสไตล์ส่วนกลางของธีมโดยตรงใน WordPress

ยังไม่หมดทาง! หากเราดูที่ธีมเริ่มต้น Twenty Twenty-Two (TT2) จะพบว่ามีปัญหาหลักสองประการที่ยังไม่ได้รับการแก้ไข: การโต้ตอบกับสไตล์ (ชอบ :hover, :active, :focus), และ ขอบ และ การเติมคอนเทนเนอร์เลย์เอาต์. คุณสามารถดูวิธีการแก้ไขชั่วคราวได้ใน TT2 style.css ไฟล์แทนที่จะทำให้เป็นไฟล์ theme.json ไฟล์

6.1 WordPress แก้ไขปัญหาเหล่านั้นและสิ่งที่ฉันต้องการทำคือดูเฉพาะที่หลัง ตอนนี้เรามีรูปแบบ JSON-ified สำหรับระยะขอบและช่องว่างภายในของคอนเทนเนอร์โครงร่าง ซึ่งเปิดให้เรา วิธีที่ยืดหยุ่นและมีประสิทธิภาพมากขึ้นในการกำหนดระยะห่างในรูปแบบธีมของเรา.

เรากำลังพูดถึงระยะห่างประเภทใด

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

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

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

มาเริ่มกันที่…

ช่องว่างภายในระดับราก

อีกครั้ง นี่ไม่ใช่เรื่องใหม่ เรามีความสามารถในการตั้งค่าช่องว่างภายใน องค์ประกอบใน theme.json ตั้งแต่การทดลอง ปลั๊กอิน Gutenberg เปิดตัวในเวอร์ชัน 11.7 เราตั้งไว้ที่ styles.spacing วัตถุที่เรามี margin และ padding วัตถุเพื่อกำหนดระยะห่างด้านบน ขวา ล่าง และซ้ายบนเนื้อหา:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

นี่คือการตั้งค่าส่วนกลาง ดังนั้น หากเราจะถอดรหัสเปิด DevTools และตรวจสอบ เราจะเห็นรูปแบบ CSS เหล่านี้:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

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

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

เข้า ...

การจัดตำแหน่งที่รับรู้การเติม

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

คุณลักษณะใหม่ใน WordPress 6.1 ถูกสร้างขึ้นเพื่อแก้ไขปัญหานี้ มาเจาะลึกกันต่อไป

useRootPaddingAwareAlignments

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

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

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

การตั้งค่า appearanceTools ตั้งค่าให้ true เลือกบล็อคโดยอัตโนมัติในระยะขอบและช่องว่างภายใน โดยไม่ต้องตั้งค่าอีกด้วย settings.spacing.padding or setting.spacing.margin ไปยัง true.

เมื่อเราเปิดใช้งาน useRootPaddingAwareAlignmentsเราได้รับคุณสมบัติแบบกำหนดเองพร้อมค่าการเติมรูทที่ตั้งค่าไว้บน องค์ประกอบที่ส่วนหน้า ที่น่าสนใจคือยังใช้ช่องว่างภายในกับ .editor-styles-wrapper คลาสเพื่อแสดงระยะห่างเมื่อทำงานใน Back-end Block Editor สวยเท่!

ฉันสามารถยืนยันคุณสมบัติที่กำหนดเองของ CSS ใน DevTools ในขณะที่ขุดค้น

การเปิดใช้งาน useRootPaddingAwareAlignments ยังใช้ช่องว่างภายในซ้ายและขวากับบล็อกใดๆ ที่รองรับความกว้าง "เนื้อหา" และค่าความกว้าง "กว้าง" ในภาพสไตล์สากลด้านบน เรายังสามารถกำหนดค่าเหล่านั้นใน theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

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

• contentSize เป็นความกว้างเริ่มต้นสำหรับบล็อก
• wideSize ให้ตัวเลือกเลย์เอาต์ "กว้าง" และสร้างคอลัมน์ที่กว้างขึ้นเพื่อให้บล็อกยืดออก

ดังนั้นตัวอย่างโค้ดสุดท้ายจะให้ CSS ต่อไปนี้แก่เรา:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] ระบุหมายเลขเฉพาะที่สร้างโดย WordPress โดยอัตโนมัติ

แต่เดาว่าเราจะได้อะไรอีก? จัดเต็มเช่นกัน!

.wp-container-[id] .alignfull {
  max-width: none;
}

เห็นไหม? โดยเปิดใช้งาน useRootPaddingAwareAlignments และการกำหนด contentSize และ wideSizeเรายังได้รับคลาส CSS การจัดตำแหน่งแบบเต็มสำหรับการกำหนดค่าคอนเทนเนอร์ทั้งหมดสามแบบสำหรับควบคุมความกว้างของบล็อกที่เพิ่มไปยังเพจและโพสต์

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

การควบคุมเค้าโครงบล็อก

สมมติว่าเราเพิ่มบล็อกเฉพาะเลย์เอาต์ใดๆ ที่กล่าวมาข้างต้นลงในเพจ เมื่อเราเลือกบล็อก UI การตั้งค่าบล็อกจะเสนอการตั้งค่าเลย์เอาต์ใหม่ตาม settings.layout ค่าที่เรากำหนดไว้ใน theme.json (หรือ Global Styles UI)

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

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

บล็อกกว้าง

การตั้งค่าที่เราเพิ่งดูมีการตั้งค่าในบล็อกหลัก เมื่อเราซ้อนบล็อกภายในและเลือกแล้ว เราจะมีตัวเลือกเพิ่มเติมในบล็อกนั้นเพื่อใช้ contentWidth, wideWidthหรือใช้แบบเต็มความกว้าง

สังเกตว่า WordPress คูณคุณสมบัติที่กำหนดเองของ CSS ที่เติมระดับรูทอย่างไร -1 เพื่อสร้างระยะขอบติดลบเมื่อเลือกตัวเลือก “เต็มความกว้าง”

การใช้เลย์เอาต์ที่มีข้อจำกัด

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

ประเด็น: WordPress ได้ทำการปรับโครงสร้างประเภทเลย์เอาต์แบบ Flex และ Flow ใหม่ทั้งหมด และให้ a ถูก จำกัด แบบ ประเภทที่ช่วยให้จัดเลย์เอาต์บล็อกในธีมได้ง่ายขึ้นโดยใช้การตั้งค่าความกว้างของเนื้อหาใน Global Styles UI ของ Site Editor

รูปแบบ Flex, Flow และ Constrained

ความแตกต่างระหว่างเลย์เอาต์ทั้งสามประเภทนี้คือสไตล์ที่แสดงออกมา Isabel Brison มีผลงานเขียนที่ยอดเยี่ยม ซึ่งสรุปความแตกต่างได้อย่างสวยงาม แต่ขอถอดความไว้ที่นี่เพื่อเป็นข้อมูลอ้างอิง:

• รูปแบบการไหล: เพิ่มระยะห่างแนวตั้งระหว่างบล็อกที่ซ้อนกันใน margin-block ทิศทาง. บล็อกที่ซ้อนกันเหล่านั้นสามารถจัดชิดซ้าย ขวา หรือตรงกลางได้เช่นกัน
• เลย์เอาต์ที่มีข้อจำกัด: ดีลแบบเดียวกับเลย์เอาต์โฟลว์ แต่มีข้อจำกัดด้านความกว้างในบล็อกที่ซ้อนกันซึ่งยึดตาม contentWidth และ wideWidth การตั้งค่า (ทั้งใน theme.json หรือ Global Styles).
• เลย์เอาต์แบบยืดหยุ่น: สิ่งนี้ไม่เปลี่ยนแปลงใน WordPress 6.1 มันใช้ CSS เฟล็กซ์บ็อกซ์ เพื่อสร้างเลย์เอาต์ที่ไหลในแนวนอน (เป็นแถว) ตามค่าเริ่มต้น แต่สามารถไหลในแนวตั้งได้เช่นกัน เพื่อให้บล็อกวางซ้อนกัน ใช้การเว้นวรรคโดยใช้ CSS gap คุณสมบัติ

โครงร่างประเภทใหม่นี้สร้างชื่อคลาสความหมายสำหรับแต่ละโครงร่าง:

คลาสเค้าโครงความหมาย	ประเภทเลย์เอาต์	บล็อกที่รองรับ
.is-layout-flow	เลย์เอาต์การไหล	คอลัมน์ กลุ่ม โพสต์เนื้อหา และคิวรีวนซ้ำ
.is-layout-constrained	เลย์เอาต์ที่มีข้อจำกัด	คอลัมน์ กลุ่ม โพสต์เนื้อหา และคิวรีวนซ้ำ
.is-layout-flex	เลย์เอาต์แบบยืดหยุ่น	คอลัมน์, ปุ่ม, ไอคอนทางสังคม

Justin Tadlock มีบทความมากมายเกี่ยวกับ ประเภทเลย์เอาต์และคลาสความหมายที่แตกต่างกันรวมถึงกรณีการใช้งานและตัวอย่าง

การอัปเดตธีมของคุณเพื่อรองรับเลย์เอาต์ที่มีข้อจำกัด

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

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

ธีมบล็อกเหล่านี้เพิ่งเปิดตัวซึ่งเปิดใช้งานการตั้งค่าระยะห่างด้วย useRootPaddingAwareAlignments และมีการอัพเดท theme.json ไฟล์ที่กำหนดเลย์เอาต์ที่มีข้อจำกัด:

ปิดใช้งานรูปแบบเค้าโครง

รูปแบบเค้าโครงพื้นฐานเป็นคุณสมบัติเริ่มต้นที่จัดส่งใน WordPress 6.1 Core กล่าวอีกนัยหนึ่งคือเปิดใช้งานทันทีที่แกะกล่อง แต่เราสามารถปิดการใช้งานได้หากต้องการด้วยตัวอย่างเล็ก ๆ น้อย ๆ นี้ functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

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

ตัดขึ้น

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

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

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

GitHub ออก #44720 แสดงการอภิปรายที่เกี่ยวข้องกับโครงร่าง กำหนดไว้สำหรับ WordPress 6.2.

แหล่งข้อมูลเพิ่มเติม

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

สอน

โพสต์ WordPress

GitHub ดึงคำขอและปัญหา