Ο τρόπος με τον οποίο γράφουμε CSS για θέματα WordPress βρίσκεται εν μέσω σαρωτικών αλλαγών. Πρόσφατα μοιράστηκα μια τεχνική για προσθήκη υποστήριξης τύπου ρευστού στο WordPress μέσω της theme.json, ένα νέο αρχείο που Το WordPress έχει πιέσει σκληρά να γίνει μια κεντρική πηγή αλήθειας για τον ορισμό στυλ σε θέματα WordPress που υποστηρίζουν λειτουργίες επεξεργασίας πλήρους ιστότοπου (FSE).

Περιμένετε, όχι style.css αρχείο? Το έχουμε ακόμα αυτό. Στην πραγματικότητα, style.css is εξακολουθεί να είναι ένα απαραίτητο αρχείο σε θέματα μπλοκ, αν και ο ρόλος του περιορίζεται σε μεγάλο βαθμό σε μετα-πληροφορίες που χρησιμοποιούνται για την καταχώριση του θέματος. Τούτου λεχθέντος, το γεγονός είναι ότι theme.json βρίσκεται ακόμα σε ενεργό ανάπτυξη, πράγμα που σημαίνει ότι βρισκόμαστε σε μια μεταβατική περίοδο όπου μπορεί να βρείτε στυλ που ορίζονται εκεί, μέσα styles.css ή ακόμα και σε επίπεδο μπλοκ.

Λοιπόν, πώς μοιάζει πραγματικά το στυλ σε αυτές τις ημέρες του WordPress FSE; Αυτό θέλω να καλύψω σε αυτό το άρθρο. Υπάρχει έλλειψη τεκμηρίωσης για θέματα στυλ μπλοκ στο Εγχειρίδιο προγραμματιστή θεμάτων WordPress, επομένως όλα όσα καλύπτουμε εδώ είναι αυτά που έχω συγκεντρώσει σχετικά με το πού βρίσκονται τα πράγματα αυτήν τη στιγμή καθώς και τις συζητήσεις σχετικά με το μέλλον της θεματοποίησης του WordPress.

Η εξέλιξη των στυλ WordPress

Τα νέα αναπτυξιακά χαρακτηριστικά που περιλαμβάνονται σε WordPress 6.1 φέρτε μας πιο κοντά σε ένα σύστημα στυλ που καθορίζονται πλήρως theme.json, αλλά υπάρχει ακόμα πολλή δουλειά που πρέπει να γίνει πριν μπορέσουμε να στηριχτούμε πλήρως σε αυτό. Ένας τρόπος για να πάρουμε μια ιδέα για το τι έρχεται σε μελλοντικές εκδόσεις είναι χρησιμοποιώντας το Πρόσθετο Gutenberg. Αυτό είναι όπου τα πειραματικά χαρακτηριστικά δίνονται συχνά σε στεγνό τρέξιμο.

Ένας άλλος τρόπος με τον οποίο μπορούμε να πάρουμε μια αίσθηση για το πού βρισκόμαστε είναι κοιτάζοντας την εξέλιξη του προεπιλεγμένα θέματα WordPress. Μέχρι σήμερα, υπάρχουν τρία προεπιλεγμένα θέματα που υποστηρίζουν την επεξεργασία πλήρους ιστότοπου:

Αλλά μην αρχίσετε να ανταλλάσσετε το CSS style.css για ζεύγη ιδιοτήτων-τιμής JSON σε theme.json ακόμα. Υπάρχουν ακόμη κανόνες στυλ CSS που πρέπει να υποστηρίζονται theme.json πριν σκεφτούμε να το κάνουμε αυτό. Τα υπόλοιπα σημαντικά ζητήματα συζητούνται επί του παρόντος με στόχο να μεταφερθούν πλήρως όλοι οι κανόνες στυλ CSS theme.json και ενοποιούν διαφορετικές πηγές theme.json σε μια UI για τη ρύθμιση καθολικών στυλ απευθείας στο Πρόγραμμα επεξεργασίας ιστότοπου WordPress.

Αυτό μας αφήνει σε μια σχετικά δύσκολη θέση. Όχι μόνο υπάρχει δεν υπάρχει σαφής διαδρομή για υπερισχύοντα στυλ θέματος, αλλά δεν είναι σαφές από πού προέρχεται καν η πηγή αυτών των στυλ — είναι από διαφορετικά επίπεδα theme.json αρχεία, style.css, το πρόσθετο Gutenberg ή κάπου αλλού;

Γιατί theme.json αντί του style.css?

Ίσως αναρωτιέστε γιατί το WordPress κινείται προς έναν ορισμό στυλ που βασίζεται σε JSON αντί για ένα παραδοσιακό αρχείο CSS. Ο Ben Dwyer από την ομάδα ανάπτυξης του Gutenberg διατυπώνει εύγλωττα γιατί το theme.json Η προσέγγιση είναι ένα όφελος για τους προγραμματιστές θεμάτων.

Αξίζει να διαβάσετε την ανάρτηση του Ben, αλλά το κρέας βρίσκεται σε αυτό το απόσπασμα:

Η παράκαμψη του CSS, είτε στυλ διάταξης, προκαθορισμένης ρύθμισης ή μπλοκ, αποτελεί εμπόδιο στην ενοποίηση και τη διαλειτουργικότητα: η οπτική ισοτιμία μεταξύ της διεπαφής και του επεξεργαστή γίνεται πιο δύσκολο να διατηρηθεί, οι αναβαθμίσεις για αποκλεισμό εσωτερικών στοιχείων ενδέχεται να έρχονται σε σύγκρουση με παρακάμψεις. Επιπλέον, το προσαρμοσμένο CSS είναι λιγότερο φορητό σε άλλα θέματα μπλοκ.

Ενθαρρύνοντας τους συγγραφείς θεμάτων να χρησιμοποιούν theme.json API όπου είναι δυνατόν, η ιεραρχία των καθορισμένων στυλ «βάση > θέμα > χρήστης» μπορεί να επιλυθεί σωστά.

Ένα από τα σημαντικότερα πλεονεκτήματα της μετακίνησης του CSS σε JSON είναι ότι το JSON είναι μια μορφή αναγνώσιμη από μηχανή, πράγμα που σημαίνει ότι μπορεί να εκτεθεί στη διεπαφή χρήστη του WordPress Site Editor λαμβάνοντας ένα API, επιτρέποντας έτσι στους χρήστες να τροποποιούν τις προεπιλεγμένες τιμές και να προσαρμόζουν την εμφάνιση ενός ιστότοπου χωρίς γράφοντας οποιοδήποτε CSS καθόλου. Παρέχει επίσης έναν τρόπο για το στυλ μπλοκ με συνέπεια, ενώ παρέχει μια δομή που δημιουργεί επίπεδα ειδικότητας έτσι ώστε οι ρυθμίσεις χρήστη να έχουν την υψηλότερη προτεραιότητα σε σχέση με αυτές που ορίζονται στο theme.json. Αυτή η αλληλεπίδραση μεταξύ των στυλ σε επίπεδο θέματος theme.json και τα στυλ που ορίζονται από τον χρήστη στη διεπαφή χρήστη καθολικών στυλ είναι αυτό που κάνει την προσέγγιση JSON τόσο ελκυστική.

Οι προγραμματιστές διατηρούν τη συνέπεια στο JSON και οι χρήστες αποκτούν ευελιξία με προσαρμογές χωρίς κώδικα. Αυτό είναι ένα win-win.

Υπάρχουν και άλλα οφέλη, σίγουρα, και Ο Mike McAlister από το WP Engine παραθέτει αρκετούς σε αυτό το νήμα του Twitter. Μπορείτε να βρείτε ακόμη περισσότερα οφέλη σε αυτό σε βάθος συζήτηση στο blog Make WordPress Core. Και αφού το διαβάσετε, συγκρίνετε τα οφέλη της προσέγγισης JSON με τους διαθέσιμους τρόπους ορισμού και παράκαμψης στυλ σε κλασικά θέματα.

Καθορισμός στυλ με στοιχεία JSON

Έχουμε ήδη δει μεγάλη πρόοδο όσον αφορά τα μέρη ενός θέματος theme.json είναι ικανό για styling. Πριν από το WordPress 6.1, το μόνο που μπορούσαμε να κάνουμε ήταν να διαμορφώσουμε επικεφαλίδες και συνδέσμους. Τώρα, με το WordPress 6.1, μπορούμε να προσθέσουμε κουμπιά, λεζάντες, παραπομπές και επικεφαλίδες στο μείγμα.

Και αυτό το κάνουμε ορίζοντας στοιχεία JSON. Σκεφτείτε τα στοιχεία ως μεμονωμένα στοιχεία που ζουν σε ένα μπλοκ WordPress. Ας υποθέσουμε ότι έχουμε ένα μπλοκ που περιέχει μια επικεφαλίδα, μια παράγραφο και ένα κουμπί. Αυτά τα μεμονωμένα κομμάτια είναι στοιχεία, και υπάρχει ένα elements αντικείμενο μέσα theme.json όπου ορίζουμε τα στυλ τους:

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

Ένας καλύτερος τρόπος για να περιγράψετε στοιχεία JSON είναι ως στοιχεία χαμηλού επιπέδου για θέματα και μπλοκ που δεν χρειάζονται την πολυπλοκότητα των μπλοκ. Είναι αναπαραστάσεις πρωτόγονων HTML που δεν ορίζονται σε ένα μπλοκ αλλά μπορούν να χρησιμοποιηθούν σε όλα τα μπλοκ. Ο τρόπος με τον οποίο υποστηρίζονται στο WordPress (και στην προσθήκη Gutenberg) περιγράφεται στο Εγχειρίδιο Block Editor και αυτό Πλήρες σεμινάριο επεξεργασίας ιστότοπου από την Carolina Nymark.

Για παράδειγμα, οι σύνδεσμοι έχουν στυλ στο elements αντικείμενο αλλά δεν αποτελούν μπλοκ από μόνα τους. Αλλά ένας σύνδεσμος μπορεί να χρησιμοποιηθεί σε ένα μπλοκ και θα κληρονομήσει τα στυλ που ορίζονται στο elements.link αντικείμενο μέσα theme.json. Αυτό δεν ενσωματώνει πλήρως τον ορισμό ενός στοιχείου, ωστόσο, καθώς ορισμένα στοιχεία καταχωρούνται επίσης ως μπλοκ, όπως τα μπλοκ Επικεφαλίδα και Κουμπί — αλλά αυτά τα μπλοκ μπορούν ακόμα να χρησιμοποιηθούν σε άλλα μπλοκ.

Ακολουθεί ένας πίνακας με τα στοιχεία που είναι διαθέσιμα αυτήν τη στιγμή για στυλ theme.json, ευγενική προσφορά της Καρολίνας:

Όπως μπορείτε να δείτε, είναι ακόμα νωρίς και πολλά ακόμη πρέπει να μετακινηθούν από την προσθήκη Gutenberg στον πυρήνα του WordPress. Αλλά μπορείτε να δείτε πόσο γρήγορο θα ήταν να κάνετε κάτι σαν το στυλ όλων των επικεφαλίδων σε ένα θέμα παγκοσμίως χωρίς να αναζητήσετε επιλογείς σε αρχεία CSS ή Εργαλεία προγραμματισμού.

Επιπλέον, μπορείτε επίσης να αρχίσετε να βλέπετε πώς η δομή του theme.json σχηματίζει στρώματα ιδιαιτερότητας, που προέρχονται από παγκόσμια στοιχεία (π.χ headings) σε μεμονωμένα στοιχεία (π.χ h1), και στυλ σε επίπεδο μπλοκ (π.χ h1 που περιέχεται σε ένα μπλοκ).

Πρόσθετες πληροφορίες για στοιχεία JSON είναι διαθέσιμες στο αυτή η πρόταση Make WordPress και αυτό το ανοιχτό εισιτήριο στο αποθετήριο GitHub της προσθήκης Gutenberg.

Ιδιαιτερότητα JSON και CSS

Ας συνεχίσουμε να μιλάμε για την ιδιαιτερότητα του CSS. Ανέφερα προηγουμένως ότι η προσέγγιση JSON στο στυλ καθιερώνει μια ιεραρχία. Και είναι αλήθεια. Στυλ που ορίζονται σε στοιχεία JSON στο theme.json θεωρούνται προεπιλεγμένα στυλ θέματος. Και οτιδήποτε έχει οριστεί από τον χρήστη στη διεπαφή χρήστη καθολικών στυλ θα παρακάμψει τις προεπιλογές.

Με άλλα λόγια: Τα στυλ χρήστη έχουν μεγαλύτερη εξειδίκευση από τα προεπιλεγμένα στυλ θέματος. Ας ρίξουμε μια ματιά στο μπλοκ Button για να πάρουμε μια αίσθηση για το πώς λειτουργεί αυτό.

χρησιμοποιώ Κενό θέμα, ένα κενό θέμα WordPress χωρίς στυλ CSS. Θα προσθέσω ένα μπλοκ κουμπιών σε μια νέα σελίδα.

Εντάξει, γνωρίζουμε ότι το WordPress Core διατίθεται με ελαφρύ στυλ. Τώρα, θα μεταβώ στο προεπιλεγμένο θέμα TT3 από το WordPress 6.1 και θα το ενεργοποιήσω. Αν ανανεώνω τη σελίδα μου με το κουμπί, το κουμπί αλλάζει στυλ.

Μπορείτε να δείτε ακριβώς από όπου προέρχονται αυτά τα νέα στυλ σε ΤΤ3 theme.json αρχείο. Αυτό μας λέει ότι τα στυλ στοιχείων JSON έχουν προτεραιότητα έναντι των στυλ του WordPress Core.

Τώρα πρόκειται να τροποποιήσω το TT3 παρακάμπτοντάς το με ένα theme.json αρχείο σε ένα θυγατρικό θέμα, όπου το προεπιλεγμένο χρώμα φόντου του μπλοκ Button έχει οριστεί σε κόκκινο.

Προσέξτε όμως το κουμπί αναζήτησης σε αυτό το τελευταίο στιγμιότυπο οθόνης. Πρέπει να είναι και κόκκινο, σωστά; Αυτό πρέπει να σημαίνει ότι είναι διαμορφωμένο σε άλλο επίπεδο, εάν η αλλαγή που έκανα είναι σε παγκόσμιο επίπεδο. Αν θέλουμε να αλλάξουμε και οι δύο κουμπιά, θα μπορούσαμε να το κάνουμε σε επίπεδο χρήστη χρησιμοποιώντας τη διεπαφή χρήστη Global Styles στο πρόγραμμα επεξεργασίας ιστότοπου.

Αλλάξαμε το χρώμα φόντου και των δύο κουμπιών σε μπλε και τροποποιήσαμε το κείμενο επίσης χρησιμοποιώντας τη διεπαφή χρήστη καθολικών στυλ. Παρατηρήστε ότι το μπλε από εκεί προηγήθηκε των στυλ θεμάτων!

The Style Engine

Αυτή είναι μια πολύ γρήγορη, αλλά καλή ιδέα για τον τρόπο διαχείρισης της ιδιαιτερότητας CSS σε θέματα μπλοκ WordPress. Αλλά δεν είναι η πλήρης εικόνα γιατί είναι ακόμα ασαφές όπου αυτά τα στυλ δημιουργούνται. Το WordPress έχει τα δικά του προεπιλεγμένα στυλ που προέρχονται από κάπου, καταναλώνει τα δεδομένα theme.json για περισσότερους κανόνες στυλ και παρακάμπτει αυτούς με οτιδήποτε έχει οριστεί στα Καθολικά στυλ.

Είναι ενσωματωμένα αυτά τα στυλ; Είναι σε ξεχωριστό φύλλο στυλ; Ίσως έχουν εγχυθεί στη σελίδα σε α ?

Αυτό είναι το νέο Μηχανισμός στυλ ελπίζω να λυθεί. Το Style Engine είναι ένα νέο API στο WordPress 6.1 που προορίζεται να φέρει συνέπεια στον τρόπο δημιουργίας των στυλ και στο πού εφαρμόζονται τα στυλ. Με άλλα λόγια, παίρνει όλες τις πιθανές πηγές στυλ και είναι αποκλειστικά υπεύθυνος για τη σωστή δημιουργία στυλ μπλοκ. Ξέρω ξέρω. Μια ακόμη αφαίρεση πάνω από άλλες αφαιρέσεις μόνο για να γράψω μερικά στυλ. Αλλά το να έχετε ένα κεντρικό API για στυλ είναι ίσως η πιο κομψή λύση, δεδομένου ότι τα στυλ μπορούν να προέρχονται από διάφορα μέρη.

Ρίχνουμε μόνο μια πρώτη ματιά στο Style Engine. Μάλιστα, ιδού τι έχει ολοκληρωθεί μέχρι τώρα, Σύμφωνα με το εισιτήριο:

• Ελέγξτε και ενοποιήστε τα σημεία όπου ο κώδικας δημιουργεί μπλοκ υποστήριξη CSS στο πίσω μέρος, έτσι ώστε να παραδίδονται από το ίδιο μέρος (σε αντίθεση με πολλά μέρη). Αυτό καλύπτει κανόνες CSS όπως περιθώριο, padding, τυπογραφία, χρώματα και περιγράμματα.
• Καταργήστε επαναλαμβανόμενα στυλ ειδικά για διάταξη και δημιουργήστε σημασιολογικά ονόματα κλάσεων.
• Μειώστε τον αριθμό των ενσωματωμένων ετικετών στυλ που εκτυπώνουμε στη σελίδα για υποστήριξη μπλοκ, διάταξης και στοιχείων.

Βασικά, αυτό είναι το θεμέλιο για τη δημιουργία ενός ενιαίου API που περιέχει όλους τους κανόνες στυλ CSS για ένα θέμα, από όπου κι αν προέρχονται. Καθαρίζει τον τρόπο με τον οποίο το WordPress θα εισάγει ενσωματωμένα στυλ πριν από το 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).

Μπορούμε να το επιβεβαιώσουμε και στο DevTools. Παρατηρήστε ότι κάλεσε μια τάξη .wp-element-button είναι ο επιλογέας. Η ίδια κλάση χρησιμοποιείται επίσης για το στυλ των διαδραστικών καταστάσεων.

Και πάλι, αυτό το styling συμβαίνει σε παγκόσμιο επίπεδο, προερχόμενο από theme.json. Κάθε φορά που χρησιμοποιούμε ένα κουμπί, θα έχει το ίδιο φόντο επειδή μοιράζονται τον ίδιο επιλογέα και κανένας άλλος κανόνας στυλ δεν το παρακάμπτει.

Επιπλέον, προστέθηκε το WordPress 6.1 υποστήριξη για διαδραστικές καταστάσεις στυλ για ορισμένα στοιχεία, όπως κουμπιά και συνδέσμους, χρησιμοποιώντας ψευδο-κλάσεις στο theme.json - συμπεριλαμβανομένου :hover, :focus, να :active — ή τη διεπαφή χρήστη Global Styles. Μηχανικός Αυτοματισμού Ντέιβ Σμιθ καταδεικνύει αυτό το χαρακτηριστικό σε βίντεο στο YouTube.

Θα μπορούσαμε να παρακάμψουμε το χρώμα φόντου του κουμπιού είτε μέσα theme.json (κατά προτίμηση σε θυγατρικό θέμα, καθώς χρησιμοποιούμε ένα προεπιλεγμένο θέμα WordPress) ή στις ρυθμίσεις Καθολικών στυλ στο πρόγραμμα επεξεργασίας ιστότοπου (δεν απαιτείται θυγατρικό θέμα, καθώς δεν απαιτεί αλλαγή κώδικα).

Αλλά τότε τα κουμπιά θα αλλάξουν ταυτόχρονα. Τι γίνεται αν θέλουμε να παρακάμψουμε το χρώμα του φόντου όταν το κουμπί είναι μέρος ενός συγκεκριμένου μπλοκ; Εκεί μπαίνουν στο παιχνίδι τα στυλ σε επίπεδο μπλοκ.

Στυλ σε επίπεδο μπλοκ για στοιχεία

Για να κατανοήσουμε πώς μπορούμε να χρησιμοποιήσουμε και να προσαρμόσουμε στυλ σε επίπεδο μπλοκ, ας αλλάξουμε το χρώμα φόντου του κουμπιού που περιέχεται στο μπλοκ Αναζήτηση. Θυμηθείτε, υπάρχει ένα μπλοκ κουμπιών, αλλά αυτό που κάνουμε είναι να παρακάμψουμε το χρώμα φόντου στο επίπεδο μπλοκ του μπλοκ αναζήτησης. Με αυτόν τον τρόπο, εφαρμόζουμε μόνο το νέο χρώμα εκεί σε αντίθεση με την καθολική εφαρμογή του σε όλα τα κουμπιά.

Για να γίνει αυτό, ορίζουμε τα στυλ στο 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 που είναι προκαθορισμένες στο WordPress.

Το αποτέλεσμα? Το κουμπί αναζήτησης είναι τώρα κόκκινο (--wp--preset--color--quaternary), και το προεπιλεγμένο μπλοκ κουμπιών διατηρεί το φωτεινό πράσινο φόντο του.

Μπορούμε να δούμε την αλλαγή και στο DevTools.

Το ίδιο ισχύει αν θέλουμε να κάνουμε στυλ κουμπιών που περιλαμβάνονται σε άλλα μπλοκ. Και τα κουμπιά είναι απλώς ένα παράδειγμα, οπότε ας δούμε ένα άλλο.

Παράδειγμα: Επικεφαλίδες στυλ σε κάθε επίπεδο

Ας μεταφέρουμε όλες αυτές τις πληροφορίες στο σπίτι με ένα παράδειγμα. Αυτή τη φορά θα:

• Δώστε στυλ σε όλες τις επικεφαλίδες παγκοσμίως
• Δώστε στυλ σε όλα τα στοιχεία Επικεφαλίδας 2
• Στοιχεία Επικεφαλίδας στυλ 2 στο μπλοκ Βρόχου ερωτημάτων

Αρχικά, ας ξεκινήσουμε με τη βασική δομή για 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": { }
  }
}

Αυτό ορίζει το χρώμα για όλες τις επικεφαλίδες στο προκαθορισμένο βασικό χρώμα στο WordPress. Ας αλλάξουμε το χρώμα και το μέγεθος της γραμματοσειράς των στοιχείων Επικεφαλίδας 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": { }
  }
}

Τώρα, όλα τα στοιχεία Επικεφαλίδας 2 έχουν οριστεί να είναι το κύριο προκαθορισμένο χρώμα με α ρευστό μέγεθος γραμματοσειράς. Αλλά ίσως θέλουμε μια διόρθωση fontSize για το στοιχείο Επικεφαλίδα 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 που χρησιμοποιούνται στο μπλοκ Βρόχου ερωτήματος.

Παραδείγματα υπαρχόντων θεμάτων

Ενώ εξετάσαμε μόνο τα παραδείγματα στυλ για κουμπιά και επικεφαλίδες σε αυτό το άρθρο, το WordPress 6.1 υποστηρίζει πρόσθετα στοιχεία στυλ. Υπάρχει ένας πίνακας που τα περιγράφει στο "Ορισμός στυλ με στοιχεία JSON" τμήμα.

Πιθανότατα αναρωτιέστε ποια στοιχεία JSON υποστηρίζουν ποιες ιδιότητες CSS, για να μην αναφέρουμε πώς θα τις δηλώσατε. Ενώ περιμένουμε την επίσημη τεκμηρίωση, οι καλύτεροι πόροι που έχουμε θα είναι αυτοί theme.json αρχεία για υπάρχοντα θέματα. Θα παράσχω συνδέσμους προς θέματα με βάση τα στοιχεία που προσαρμόζουν και θα επισημάνω ποιες ιδιότητες είναι προσαρμοσμένες.

Φροντίστε να δώσετε το καθένα theme.json κοιτάξτε καλά γιατί αυτά τα θέματα περιλαμβάνουν εξαιρετικά παραδείγματα styling σε επίπεδο μπλοκ στο styles.blocks αντικείμενο.

Ολοκληρώνοντας

Οι συχνές αλλαγές στο πρόγραμμα επεξεργασίας πλήρους ιστότοπου γίνονται α κύριες πηγές ερεθισμού για πολλούς ανθρώπους, Συμπεριλαμβανομένων των χρήστες του Gutenberg με γνώσεις τεχνολογίας. Ακόμη και πολύ απλοί κανόνες CSS, που λειτουργούν καλά με κλασικά θέματα, δεν φαίνεται να λειτουργούν για θέματα μπλοκ λόγω νέα επίπεδα ιδιαιτερότητας καλύψαμε νωρίτερα.

Σχετικά με ένα Πρόταση GitHub για να επανασχεδιάσετε το πρόγραμμα επεξεργασίας ιστότοπου σε μια νέα λειτουργία προγράμματος περιήγησης, Γράφει η Sara Gooding σε ανάρτηση της WP Tavern:

Είναι εύκολο να χαθείτε ενώ προσπαθείτε να μετακινηθείτε στον Επεξεργαστή ιστότοπου, εκτός εάν εργάζεστε μέρα και νύχτα μέσα στο εργαλείο. Η πλοήγηση είναι ταραχώδης και προκαλεί σύγχυση, ειδικά όταν μεταβαίνετε από την περιήγηση προτύπων στην επεξεργασία προτύπων έως την τροποποίηση μεμονωμένων μπλοκ.

Ακόμη και ως έντονος αναβάτης στον κόσμο της επεξεργασίας μπλοκ Gutenberg και των θεμάτων block-eye, έχω πολλές δικές μου απογοητεύσεις. Είμαι αισιόδοξος, ωστόσο, και αναμένω ότι το πρόγραμμα επεξεργασίας ιστότοπου, μόλις ολοκληρωθεί, θα είναι ένα επαναστατικό εργαλείο τόσο για τους χρήστες όσο και για τους τεχνογνώστες προγραμματιστές θεμάτων. Αυτό Ελπίδα Tweet το επιβεβαιώνει ήδη. Στο μεταξύ, φαίνεται ότι πρέπει να προετοιμαζόμαστε για περισσότερες αλλαγές, και ίσως ακόμη και μια ανώμαλη διαδρομή.

αναφορές

Παραθέτω όλους τους πόρους που χρησιμοποίησα κατά την έρευνα πληροφοριών για αυτό το άρθρο.

στοιχεία JSON

Παγκόσμια Στυλ

Μηχανισμός στυλ

Ευχαριστώ για την ανάγνωση! Θα ήθελα πολύ να ακούσω τις δικές σας σκέψεις σχετικά με τη χρήση των θεμάτων μπλοκ και τον τρόπο διαχείρισης του CSS σας.