Ρυθμίσεις & styling μλοκ με χρήση του theme.json

Transcript

1. 33rd WordPress Thessaloniki Meetup theme.json Block settings & styling
2. Θα μιλήσουμε… Για το αρχείο theme.json • Τι είναι • Ποιες είναι οι βασικές λειτουργίες του • Πώς χρησιμοποιείται για styling
3. Τι είναι • Είναι ένα αρχείο ρυθμίσεων • Βρίσκεται στο root directory του theme μας • Είναι σε μορφή JSON
4. Ποιες είναι οι βασικές λειτουργίες του • Χωρίζεται σε δύο βασικές “ενότητες” ◦ settings ◦ styles • Επιτρέπει την ενεργοποίηση/απενεργοποίηση ρυθμίσεων για τα blocks • Επιτρέπει τον ορισμό default ρυθμίσεων (π.χ. χρωματική παλέτα, διαθέσιμες γραμματοσειρές κ.λπ.) • Επιτρέπει τον ορισμό default styles για τα blocks και συγκεκριμένα elements (π. χ. μεγέθη, αποστάσεις, τυπογραφία κ.λπ.)
5. Πώς χρησιμοποιείται για styling Στην ενότητα styles μπορούμε να ρυθμίσουμε πολλά πράγματα όπως: • χρώματα και τυπογραφία • μεγέθη και διάταξη • περιγράμματα και σκιάσεις κ.λπ. Το WordPress αναλύει το theme.json και δημιουργεί αυτόματα τους απαραίτητους κανόνες CSS.
6. Πώς χρησιμοποιείται για styling Οτιδήποτε ορίζεται στο “πρώτο επίπεδο” της ενότητας styles επηρεάζει όλο το site. { "version": 2, "settings": { ... }, "styles": { "color": { "background": "#FFF" } } } το φόντο όλων των σελίδων του site θα είναι σε λευκό χρώμα
7. Πώς χρησιμοποιείται για styling Στοιχεία που εμφανίζονται εντός της ενότητας styles.blocks αφορούν συγκεκριμένα blocks { "version": 2, "settings": { ... }, "styles": { ... "blocks": { "core/heading": { "typography": { "fontWeight": "bold" } } } } } όλες οι κεφαλίδες θα είναι έντονες (bold)
8. Προτεραιότητα φόρτωσης styles 1. Styles που έχουν επιλεγεί για το κάθε block μέσα από τον editor 2. Styles που έχετε φορτώσει εσείς (π.χ. style.css) Το πόσο συγκεκριμένοι είναι οι κανόνες CSS καθώς και η χρήση !important μπορούν να επηρεάσουν την σειρά εφαρμογής και το τελικό style ενός block ή element. 3. Styles που ορίζονται στο theme.json 4. Default styles του WordPress