ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

ניהול סגנונות CSS בעיצוב בלוק וורדפרס

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

חכה לא style.css קוֹבֶץ? עדיין יש לנו את זה. למעשה, style.css is עדיין קובץ נדרש בנושאי בלוקים, אם כי תפקידו מצטמצם מאוד למטא מידע המשמש לרישום הנושא. עם זאת, העובדה היא זאת theme.json עדיין בפיתוח פעיל, כלומר אנחנו בתקופת מעבר שבה אתה עשוי למצוא סגנונות המוגדרים שם, ב styles.css או אפילו ברמת הבלוק.

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

האבולוציה של סגנונות וורדפרס

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

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

אבל אל תתחיל לסחור ב-CSS style.css עבור צמדים של ערך נכס JSON ב theme.json עדיין. עדיין יש כללי סגנון CSS שצריך לתמוך בהם theme.json לפני שאנחנו חושבים לעשות את זה. הנושאים המשמעותיים הנותרים נדונים כעת במטרה להעביר במלואם את כל כללי סגנון ה-CSS theme.json ולאחד מקורות שונים של theme.json אל ממשק משתמש עבור להגדרת סגנונות גלובליים ישירות ב עורך אתר וורדפרס.

ממשק המשתמש של Global Styles משולב בחלונית הימנית בעורך האתר. (אַשׁרַאי: למד וורדפרס)

זה משאיר אותנו במצב קשה יחסית. לא רק יש אין נתיב ברור לעקוף סגנונות נושא, אבל לא ברור מאיפה המקור של הסגנונות האלה בכלל - האם הוא משכבות שונות של theme.json קבצים, style.css, תוסף גוטנברג, או במקום אחר?

למה theme.json במקום style.css?

אולי אתה תוהה מדוע וורדפרס עוברת לעבר הגדרה מבוססת JSON של סגנונות במקום קובץ CSS מסורתי. בן דווייר מצוות הפיתוח של גוטנברג מנסח ברהיטות מדוע theme.json הגישה היא יתרון עבור מפתחי ערכות נושא.

שווה לקרוא את הפוסט של בן, אבל הבשר נמצא בציטוט הזה:

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

על ידי עידוד מחברי נושא להשתמש theme.json API במידת האפשר, ניתן לפתור את ההיררכיה של סגנונות מוגדרים "בסיס > נושא > משתמש".

אחד היתרונות העיקריים של העברת CSS ל-JSON הוא ש-JSON הוא פורמט קריא במכונה, כלומר ניתן לחשוף אותו בממשק המשתמש של עורך האתר של WordPress על ידי שליפת ממשק API, ובכך לאפשר למשתמשים לשנות ערכי ברירת מחדל ולהתאים אישית את מראה האתר ללא לכתוב כל CSS בכלל. זה גם מספק דרך לסגנן בלוקים באופן עקבי, תוך מתן מבנה שיוצר שכבות של ספציפיות כך שהגדרות המשתמש מקבלות את העדיפות הגבוהה ביותר על פני אלו המוגדרות ב theme.json. המשחק הזה בין סגנונות ברמת הנושא ב theme.json והסגנונות המוגדרים על ידי המשתמש בממשק הגלובלי סגנונות הם מה שהופך את גישת ה-JSON לכל כך מושכת.

מפתחים שומרים על עקביות ב-JSON, והמשתמשים מקבלים גמישות עם התאמות אישיות ללא קוד. זה win-win.

יש יתרונות אחרים, ללא ספק, ו מייק מקאליסטר מ-WP Engine מפרט כמה בשרשור הטוויטר הזה. אתה יכול למצוא אפילו יותר יתרונות בכך דיון מעמיק בבלוג Make WordPress Core. ואחרי שקראת את זה, השווה את היתרונות של גישת JSON עם הדרכים הזמינות להגדיר ולעקוף סגנונות בנושאים קלאסיים.

הגדרת סגנונות עם רכיבי JSON

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

ואנחנו עושים את זה על ידי הגדרה רכיבי JSON. חשבו על אלמנטים כרכיבים בודדים שחיים בבלוק וורדפרס. נניח שיש לנו בלוק שמכיל כותרת, פסקה וכפתור. החלקים הבודדים האלה הם אלמנטים, ויש elements חפץ ב theme.json שבו אנו מגדירים את הסגנונות שלהם:

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

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

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

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

אֵלֵמֶנט בורר איפה זה נתמך
link ליבת וורדפרס
h1 - h6 תג ה-HTML עבור כל רמת כותרת: 

ו 

ליבת וורדפרס
heading מעצב את כל הכותרות באופן גלובלי לפי תג HTML בודד: 

ו 

תוסף גוטנברג
button .wp-element-button.wp-block-button__link תוסף גוטנברג
caption .wp-element-caption,
.wp-block-audio figcaption,
.wp-block-embed figcaption,
.wp-block-gallery figcaption,
.wp-block-image figcaption,
.wp-block-table figcaption,
.wp-block-video figcaption
תוסף גוטנברג
cite .wp-block-pullquote cite תוסף גוטנברג

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

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

מידע נוסף על רכיבי JSON זמין ב זה הצע הצעה וורדפרס ו הכרטיס הפתוח הזה בריפו GitHub של תוסף גוטנברג.

ספציפיות של JSON ו-CSS

בואו נמשיך לדבר על ספציפיות CSS. ציינתי קודם שגישת ה-JSON לסטיילינג מבססת היררכיה. וזה נכון. סגנונות המוגדרים ברכיבי JSON ב theme.json נחשבים לסגנונות ערכת נושא המוגדרים כברירת מחדל. וכל מה שהוגדר על ידי המשתמש בממשק הגלובלי סגנונות יעקוף את ברירות המחדל.

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

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

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
צבע הרקע, צבע הטקסט והגבולות המעוגלים מגיעים מהגדרות ברירת המחדל של עורך הבלוק.

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

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
צבע הרקע, צבע הטקסט וסגנונות הפינה המעוגלת השתנו.

אתה יכול לראות בדיוק מאיפה מגיעים הסגנונות החדשים האלה ב-TT3 theme.json קוֹבֶץ. זה אומר לנו שסגנונות אלמנט ה-JSON מקבלים עדיפות על סגנונות ליבת WordPress.

עכשיו אני הולך לשנות את TT3 על ידי עקיפתו באמצעות a theme.json קובץ בעיצוב צאצא, כאשר צבע הרקע המוגדר כברירת מחדל של בלוק הלחצנים מוגדר לאדום.

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
סגנון ברירת המחדל של בלוק הלחצנים עודכן לאדום.

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

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
ניהול סגנונות CSS בעיצוב בלוק וורדפרס

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

מנוע הסטייל

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

האם הסגנונות האלה מוטבעים? האם הם נמצאים בגיליון סגנונות נפרד? אולי הם מוזרקים לדף ב ?

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

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

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

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

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
כל כפתור בערכת הנושא Twenty Twenty-Three חולק את אותו צבע רקע, המוגדר ל- --wp--preset--color--primary משתנה CSS, או #B4FD55.

אנו יכולים לאשר זאת גם ב-DevTools. שימו לב שכיתה התקשרה .wp-element-button הוא הבורר. אותה מחלקה משמשת גם לסגנון המצבים האינטראקטיביים.

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
ניהול סגנונות CSS בעיצוב בלוק וורדפרס

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

מלבד זאת, הוסף וורדפרס 6.1 תמיכה בעיצוב מצבים אינטראקטיביים עבור אלמנטים מסוימים, כמו כפתורים וקישורים, באמצעות מחלקות פסאודו ב theme.json - כולל :hover, :focus, ו :active - או ממשק המשתמש של Global Styles. מהנדס אוטומטי דייב סמית ' מדגים תכונה זו בסרטון יוטיוב.

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

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

סגנונות ברמת הבלוק לאלמנטים

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

לשם כך, אנו מגדירים את הסגנונות ב- 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 המוגדרים מראש בוורדפרס.

התוצאה? כפתור החיפוש אדום כעת (--wp--preset--color--quaternary), ובלוק הלחצנים המוגדר כברירת מחדל שומר על הרקע הירוק הבהיר שלו.

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
ניהול סגנונות CSS בעיצוב בלוק וורדפרס

אנו יכולים לראות את השינוי גם ב-DevTools.

ניהול סגנונות CSS ב-WordPress Block Theme PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
ניהול סגנונות CSS בעיצוב בלוק וורדפרס

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

דוגמה: עיצוב כותרות בכל רמה

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

  • סגנון כל הכותרות באופן גלובלי
  • סגנון כל האלמנטים של כותרת 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": { }
  }
}

זה מגדיר את הצבע עבור כל הכותרות לצבע הבסיס המוגדר מראש בוורדפרס. בואו נשנה את הצבע וגודל הגופן של רכיבי 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 עבור הרכיב Heading 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 המשמשים בלוק השאילתה.

דוגמאות לנושאים קיימים

בעוד שבדקנו רק את דוגמאות הסגנון עבור כפתורים וכותרות במאמר זה, וורדפרס 6.1 תומך בעיצוב אלמנטים נוספים. יש טבלה שמתארת ​​אותם ב- "הגדרת סגנונות עם רכיבי JSON" סָעִיף.

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

נושא מה מותאם אישית נושא JSON
Blockbase כפתורים, כותרות, קישורים, בלוקי ליבה קוד מקור
בלוק קנבס כפתורים, כותרות, קישורים, בלוקי ליבה קוד מקור
דיסקו כפתורים, כותרות, בלוקי ליבה קוד מקור
כפור כפתורים, כותרות, קישורים, כיתובים, ציטוט, בלוקי ליבה קוד מקור
פיקסל כפתורים, כותרות, קישורים, בלוקי ליבה קוד מקור
ירידת גשמים כפתורים, כותרות, קישורים, בלוקי ליבה קוד מקור
עשרים עשרים ושלוש כפתורים, כותרות, קישורים, בלוקי ליבה קוד מקור
לחיות כפתורים, כותרות, קישורים, בלוקי ליבה קוד מקור

הקפד לתת כל אחד theme.json בדוק היטב כי נושאים אלה כוללים דוגמאות מצוינות של סגנון ברמת הבלוק על styles.blocks אובייקט.

גלישה את

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

לגבי א הצעת GitHub לעצב מחדש את עורך האתר במצב דפדפן חדש, שרה גודינג כותבת בפוסט של WP Tavern:

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

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

הפניות

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

רכיבי JSON

סגנונות גלובל

מנוע סטייל


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

בול זמן:

עוד מ טריקים של CSS