שימוש בפריסה המצומצמת החדשה בעיצובי בלוק וורדפרס

אחת המטרות העיקריות של עורך אתר וורדפרס (וכן, זה עכשיו ה שם "רשמי".) הוא להעביר עיצוב בלוקים בסיסי החל מ- CSS ל-JSON מובנה. קובצי JSON ניתנים לקריאה במכונה, מה שהופך אותם לצריכה על ידי עורך האתר מבוסס JavaScript לקביעת הסגנונות הגלובליים של ערכת נושא ישירות בוורדפרס.

זה עוד לא הגיע עד הסוף! אם נסתכל על ערכת ברירת המחדל של עשרים עשרים ושתיים (TT2), היו שתי בעיות עיקריות שלא נפתרו: אינטראקציות סטיילינג (כמו :hover, :active, :focus,) ו השוליים ו ריפוד של מיכלי פריסה. אתה יכול לראות כיצד אלה תוקנו באופן זמני ב-TT2 style.css קובץ במקום להפוך אותו ל- theme.json קובץ.

וורדפרס 6.1 תיקן את הבעיות האלה ומה שאני רוצה לעשות זה להסתכל במיוחד על האחרון. עכשיו, כשיש לנו סגנונות מאושרים ב-JSON עבור השוליים והריפוד של מיכלי פריסה, זה פותח לנו את דרכים גמישות וחזקות יותר להגדרת מרווח בפריסות הנושא שלנו.

על איזה מרווח אנחנו מדברים?

ראשית, כבר יש לנו ריפוד ברמת השורש שזו דרך מהודרת לתאר ריפוד על אֵלֵמֶנט. זה נחמד כי זה מבטיח מרווח עקבי ברכיב שמשותף בכל הדפים והפוסטים.

אבל יש יותר מזה כי עכשיו יש לנו דרך לבלוקים לעקוף את הריפוד הזה ולהתיישר לרוחב המלא. זה בזכות יישורים מודעים לריפוד שהיא תכונת הצטרפות חדשה theme.json. לכן, גם אם יש לך ריפוד ברמת השורש, אתה עדיין יכול לאפשר, נניח, תמונה (או בלוק אחר) להתפרץ החוצה ולעבור לרוחב מלא.

זה מביא אותנו לדבר נוסף שאנחנו מקבלים: פריסות מוגבלות. הרעיון כאן הוא שכל הבלוקים המקוננים בפריסה מכבדים את רוחב התוכן של הפריסה - שהיא הגדרה גלובלית - ואינם זורמים מחוצה לה. אנחנו יכולים לעקוף את ההתנהגות הזו על בסיס בלוק אחר בלוק עם יישורים, אבל נגיע לזה.

בוא נתחיל עם…

ריפוד ברמת השורש

שוב, זה לא חדש. הייתה לנו את היכולת להגדיר ריפוד על אלמנט ב theme.json מאז הניסוי תוסף גוטנברג הציג אותו בגרסה 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;
}

מגניב. אבל כאן טמונה הסוגיה של איך בכלל אנחנו יכולים לאפשר לכמה בלוקים לפרוץ מהמרווח הזה כדי למלא את המסך המלא, מקצה לקצה. בגלל זה יש המרווחים, נכון? זה עוזר למנוע את זה!

אבל אכן יש הרבה מקרים שבהם אולי תרצה לצאת מהמרווח הזה במופע חד פעמי כשאתה עובד בעורך החסימות. נניח שאנו מפלחים בלוק תמונה על דף ואנחנו רוצים שהוא יעבור ברוחב מלא בעוד ששאר התוכן מכבד את הריפוד ברמת השורש?

להיכנס…

יישורים מודעים לריפוד

תוך כדי ניסיון ליצור את ערכת ערכת ברירת המחדל הראשונה של וורדפרס המגדירה את כל הסגנונות ב- theme.json קובץ, המעצב הראשי Kjell Reigstad ממחיש את ההיבטים המאתגרים של יציאה מהריפוד ברמת השורש בזה סוגיית GitHub.

תכונות חדשות בוורדפרס 6.1 נוצרו כדי לטפל בבעיה זו. בואו נחפור באלה הבאים.

useRootPaddingAwareAlignments

חדש useRootPaddingAwareAlignments נכס נוצר כדי לטפל בבעיה. זה למעשה הוצג לראשונה בתוסף Gutenberg v13.8. ה בקשת משיכה מקורית הוא פריימר נחמד על איך זה עובד.

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

מיד, שימו לב שזו תכונה שאנחנו צריכים להצטרף אליה. הנכס מוגדר ל false כברירת מחדל ועלינו להגדיר זאת במפורש true על מנת לאפשר זאת. שימו לב גם שיש לנו appearanceTools מכוון ל true גם כן. זה מצרף אותנו לבקרות ממשק המשתמש בעורך האתר לעיצוב גבולות, צבעי קישור, טיפוגרפיה וכן, מרווחים הכוללים שוליים וריפוד.

הגדרת appearanceTools מכוון ל true בוחר אוטומטית בלוקים לשוליים ולריפוד מבלי להגדיר גם settings.spacing.padding or setting.spacing.margin ל true.

כאשר אנחנו כן מאפשרים useRootPaddingAwareAlignments, מסופקים לנו מאפיינים מותאמים אישית עם ערכי ריפוד שורש המוגדרים ב- אלמנט בקצה הקדמי. מעניין, זה גם מחיל את הריפוד על .editor-styles-wrapper class כך שהריווח יוצג בעת עבודה בעורך הבלוק האחורי. די מגניב!

הצלחתי לאשר את מאפייני ה-CSS המותאמים אישית ב-DevTools תוך כדי חפירה.

מפעיל useRootPaddingAwareAlignments מחיל גם ריפוד שמאל וימין על כל בלוק התומך בערכי הרוחב "התוכן" והרוחב "הרחב" בתמונת Global Styles למעלה. אנחנו יכולים גם להגדיר את הערכים האלה ב 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] מציין מספר ייחודי שנוצר אוטומטית על ידי וורדפרס.

אבל נחשו מה עוד נקבל? גם יישור מלא!

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

תראה את זה? על ידי הפעלת useRootPaddingAwareAlignments ומגדיר contentSize ו wideSize, אנו מקבלים גם מחלקת CSS יישור מלאה עבור סה"כ שלוש תצורות מיכל לשליטה על רוחב הבלוקים שמתווספים לדפים ולפוסטים.

זה חל על הבלוקים הספציפיים לפריסה הבאים: עמודות, קבוצה, תוכן פוסטים ו-Query Loop.

פקדי פריסה חסומים

נניח שאנו מוסיפים כל אחד מהבלוקים הספציפיים לפריסה שהוזכרו לעיל לדף. כאשר אנו בוחרים את הבלוק, ממשק המשתמש של הגדרות הבלוק מציע לנו הגדרות פריסה חדשות המבוססות על settings.layout ערכים שהגדרנו בהם theme.json (או ממשק המשתמש של Global Styles).

אנחנו מתמודדים עם בלוקים מאוד ספציפיים כאן - כאלה שיכולים לקנן בתוכם בלוקים אחרים. אז, הגדרות פריסה אלה עוסקות באמת בשליטה על הרוחב והיישור של אותם בלוקים מקוננים. ההגדרה "בלוקים פנימיים משתמשים ברוחב תוכן" מופעלת כברירת מחדל. אם נכבה את זה, אז אין לנו max-width על המיכל והבלוקים שבתוכו הולכים מקצה לקצה.

אם נשאיר את הלחצן מופעל, בלוקים מקוננים ייצמדו לאחד מה- contentWidth or wideWidth ערכים (עוד על זה עוד קצת). או שנוכל להשתמש בכניסות המספריות כדי להגדיר מותאם אישית contentWidth ו wideWidth ערכים במקרה חד פעמי זה. זו גמישות גדולה!

בלוקים רחבים

ההגדרות שבדקנו זה עתה מוגדרות בבלוק האב. לאחר שקינן בתוכו בלוק ובחרנו בו, יש לנו אפשרויות נוספות בבלוק זה להשתמש ב- contentWidth, wideWidth, או ללכת לרוחב מלא.

שימו לב כיצד וורדפרס מכפילה את המאפיינים המותאמים אישית של ריפוד CSS ברמת השורש -1 כדי ליצור שוליים שליליים בעת בחירה באפשרות "רוחב מלא".

שימוש בפריסה מוגבלת

זה עתה כיסינו את המרווחים והיישורים החדשים שאנו מקבלים עם וורדפרס 6.1. אלה ספציפיים לבלוקים ולכל בלוקים מקוננים בתוך בלוקים. אבל WordPress 6.1 מציגה גם תכונות פריסה חדשות לגמישות ועקביות עוד יותר בתבניות של ערכת נושא.

מקרה לדוגמא: וורדפרס ביצעה מחדש לחלוטין את סוגי הפריסה של Flex ו-Flow והעניקה לנו א מוגבל פריסה סוג המקל על יישור פריסות בלוקים בערכות נושא באמצעות הגדרות רוחב התוכן בממשק הגלובלי הסגנונות של עורך האתר.

פריסות Flex, Flow ו-Constrained

ההבדל בין שלושת סוגי הפריסה הללו הוא הסגנונות שהם מפלטים. לאיזבל בריסון יש כתיבה מעולה זה מתאר יפה את ההבדלים, אבל בואו ננסח אותם כאן לעיון:

• פריסת זרימה: מוסיף מרווח אנכי בין בלוקים מקוננים ב- margin-block כיוון. ניתן ליישר את הבלוקים המקוננים האלה לשמאל, לימין או למרכז.
• פריסה מוגבלת: אותה עסקה בדיוק כמו פריסת זרימה, אבל עם מגבלות רוחב על בלוקים מקוננים המבוססים על contentWidth ו wideWidth הגדרות (או ב theme.json או סגנונות גלובליים).
• פריסה גמישה: זה לא השתנה בוורדפרס 6.1. זה משתמש פלקסבוקס של CSS כדי ליצור פריסה שזורמת אופקית (ברצף) כברירת מחדל, אבל יכולה לזרום אנכית גם כך שבלוקים נערמים אחד על גבי השני. ריווח מוחל באמצעות ה-CSS gap נכס.

לוח חדש זה של סוגי פריסה יוצר שמות מחלקות סמנטיות עבור כל פריסה:

שיעור פריסה סמנטית	סוג פריסה	בלוקים נתמכים
.is-layout-flow	פריסת זרימה	עמודות, קבוצה, תוכן פוסטים ולולאת שאילתה.
.is-layout-constrained	פריסה מוגבלת	עמודות, קבוצה, תוכן פוסטים ולולאת שאילתה.
.is-layout-flex	פריסה גמישה	עמודות, כפתורים, אייקונים חברתיים

לג'סטין טדלוק יש כתבה נרחבת בנושא סוגי הפריסה השונים והמחלקות הסמנטיות, כולל מקרי שימוש ודוגמאות.

עדכון ערכת הנושא שלך כדי לתמוך בפריסות מוגבלות

אם אתה כבר משתמש בנושא בלוק מעשה ידיך, אתה הולך לרצות עדכן אותו כדי לתמוך בפריסות מוגבלות. כל מה שצריך זה להחליף כמה דברים פנימה 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' );

אזהרה גדולה כאן: השבתת תמיכה גם בסוגי פריסת ברירת המחדל מסיר את כל הסגנון הבסיסי עבור פריסות אלה. זה אומר שתצטרך לגלגל סגנונות משלך עבור מרווחים, יישורים וכל דבר אחר שצריך כדי להציג תוכן בהקשרים שונים של תבניות וחסימה.

גלישה את

בתור מעריץ גדול של תמונות ברוחב מלא, פריסת וורדפרס 6.1 החדשה ותכונות יישור מודעות ריפוד הן שתיים מהאהובות עלי ביותר עד כה. ביחד עם כלים אחרים, כולל שליטה טובה יותר בשוליים ובריפוד, טיפוגרפיה נוזלית, ובלוקים מעודכנים של רשימה וציטוט, בין היתר, הם הוכחה מוצקה לכך ש-WordPress צועדת לעבר חווית יצירת תוכן טובה יותר.

כעת, עלינו לחכות ולראות כיצד הדמיון והיצירתיות של מעצבים ויוצרי תוכן רגילים משתמשים בכלים המדהימים הללו ולוקחים את זה לרמה חדשה.

בגלל איטרציות הפיתוח של עורך האתר, אנחנו צריכים תמיד לצפות לדרך קשה קדימה. עם זאת, כאופטימיסט, אני להוט לראות מה יקרה בגרסה הקרובה של וורדפרס 6.2. חלק מהדברים שאני שומר עליהם מקרוב הם דברים כמו תכונות שנלקחות בחשבון להכללה, תמיכה עבור מיקום דביק, שמות מחלקות פריסה חדשות עבור עטיפות בלוק פנימי, אפשרויות יישור כותרת תחתונה מעודכנות, ו הוספת אפשרויות פריסת מוגבלות וזרימה לקוביות כיסוי.

זֶה GitHub נושא #44720 מפרט את הדיונים הקשורים לפריסה מיועד לוורדפרס 6.2.

משאבים נוספים

התייעצתי והפניתי להרבה מקורות תוך כדי התעמקות בכל זה. הנה רשימה גדולה של דברים שמצאתי מועילים ואני חושב שגם אתה יכול ליהנות.

הדרכות

פוסטים של וורדפרס

בקשות ובעיות למשיכת GitHub