עיצוב כפתורים ב-WordPress Block ערכות נושא

זמן קצר לאחר מכן גאנש דהל כתב כאן פוסט ב-CSS-Tricks תגובה לציוץ ששאל לגבי הוספת צללי קופסת CSS על בלוקים ואלמנטים של וורדפרס. יש שם הרבה דברים נהדרים שממנפים תכונות חדשות שנשלחו בוורדפרס 6.1 המספקות בקרות להחלת צללים על דברים ישירות ב-Block Editor ו- Site Editor UI.

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

למה כפתורים, אתם שואלים? זו שאלה טובה, אז בואו נתחיל עם זה.

סוגי הכפתורים השונים

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

1. בלוקים של ילדים בתוך בלוק הכפתורים
2. לחצנים שמקוננים בתוך בלוק אחר (למשל בלוק טופס פוסט הערות)

אם נוסיף את שני הבלוקים הללו לתבנית, הם יהיו באותו מראה כברירת מחדל.

אבל הסימון שונה מאוד:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

כפי שאנו יכולים לראות, שמות תגי ה-HTML שונים. זה השיעורים הנפוצים - .wp-block-button ו .wp-element-button - שמבטיחים עיצוב עקבי בין שני הכפתורים.

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

אז איך נגדיר סגנונות כפתורים ב theme.json בלי לכתוב CSS בפועל? בוא נעשה זאת יחדיו.

יצירת סגנונות הבסיס

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

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

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

אז מה שאנחנו צריכים לעשות זה להגדיר את א button אלמנט.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

כי button מתאים לרכיבי HTML המשמשים לסימון רכיבי כפתור בקצה הקדמי. לחצנים אלה מכילים תגי HTML שיכולים להיות אחד משני סוגי הכפתורים שלנו: רכיב עצמאי (כלומר בלוק הלחצנים) או רכיב מקונן בתוך בלוק אחר (למשל בלוק Post Comment).

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

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

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

אם תפצחו את DevTools ותסתכלו על ה-CSS ש-WordPress מייצרת עבור הכפתורים, אנו רואים שה .wp-element-button class מוסיף את הסגנונות שהגדרנו בהם theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

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

הטמעת סגנונות כפתורים אינטראקטיביים

מכיוון שמדובר באתר שכולו CSS, אני מתערב שרבים מכם כבר מכירים את המצבים האינטראקטיביים של קישורים וכפתורים. אנחנו יכולים :hover סמן העכבר מעליהם, טאץ אותם לתוך :focus, לחץ עליהם כדי ליצור אותם :active. לעזאזל, יש אפילו א :visited מצב לתת למשתמשים אינדיקציה חזותית שהם לחצו על זה בעבר.

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

ב-CSS, אנו עשויים לסגנון א :hover מצב כזה:

a:hover { /* Styles */
}

In theme.json, אנחנו הולכים להרחיב את הצהרת הכפתורים הקיימת שלנו עם מחלקות פסאודו אלה.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

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

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

כפתורי עיצוב מקוננים בלוקים בודדים

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

בלוק זה מורכב יותר מבלוק ה-Button כי יש לו יותר חלקים נעים: הטופס, הקלט, הטקסט המאלף והלחצן. על מנת למקד את הכפתור בבלוק זה, עלינו לעקוב אחר אותו סוג של מבנה JSON שעשינו עבור button רכיב, אך מוחל על בלוק טופס פוסט תגובה, אשר ממופה ל- core/post-comments-form אֵלֵמֶנט:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

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

מבנה JSON תומך באלמנטים בתוך אלמנטים. אז, אם יש א button רכיב בגוש טופס פוסט תגובה, נוכל למקד אותו ב- core/post-comments-form בלוק:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

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

ל-CSS שנוצר על ידי וורדפרס יש בורר מדויק יותר כתוצאה מכך:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

ומה אם נרצה להגדיר סגנונות אינטראקטיביים שונים עבור כפתור טופס פוסט תגובה? זה אותה עסקה כמו שעשינו את זה עבור סגנונות ברירת המחדל, רק אלה מוגדרים בתוך core/post-comments-form בלוק:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

מה לגבי כפתורים שאינם בבלוקים?

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

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

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

גלישה את

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

ובל נשכח את שלושת היתרונות העיקריים של השימוש theme.json:

1. הסגנונות מוחלים על כפתורים גם בתצוגת הקצה וגם בעורך הבלוק.
2. ה-CSS שלך יהיה תואם לעדכוני וורדפרס עתידיים.
3. הסגנונות שנוצרו עובדים עם ערכות נושא בלוק וערכות נושא קלאסיות כאחד - אין צורך לשכפל שום דבר בגיליון סגנונות נפרד.

אם השתמשת theme.json סגנונות בפרויקטים שלך, אנא שתף ​​בחוויות ובמחשבות שלך. אני מצפה לקרוא כל הערה ומשוב!

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/