Κουμπιά στυλ σε θέματα μπλοκ WordPress

Λίγο πίσω, ενώ, Ο Ganesh Dahal έγραψε μια ανάρτηση εδώ στο CSS-Tricks απαντώντας σε ένα tweet που ρωτούσε για την προσθήκη σκιών πλαισίου CSS σε μπλοκ και στοιχεία του WordPress. Υπάρχουν πολλά υπέροχα πράγματα εκεί μέσα που αξιοποιούν νέες δυνατότητες που αποστέλλονται στο WordPress 6.1 και παρέχουν στοιχεία ελέγχου για την εφαρμογή σκιών σε πράγματα απευθείας στο περιβάλλον χρήστη του Επεξεργαστή Αποκλεισμού και του Επεξεργαστή ιστότοπου.

Ο Ganesh άγγιξε εν συντομία τα στοιχεία κουμπιών σε εκείνη την ανάρτηση. Θέλω να το επαναλάβω και να εμβαθύνω σε προσεγγίσεις για κουμπιά στυλ σε θέματα μπλοκ WordPress. Συγκεκριμένα, θα ανοίξουμε ένα φρέσκο theme.json αρχειοθετήστε και αναλύστε διάφορες προσεγγίσεις για τα κουμπιά στυλ στο σχήμα.

Γιατί κουμπιά, ρωτάτε; Αυτή είναι μια καλή ερώτηση, οπότε ας ξεκινήσουμε με αυτό.

Τα διάφορα είδη κουμπιών

Όταν μιλάμε για κουμπιά στο πλαίσιο του WordPress Block Editor, πρέπει να διακρίνουμε μεταξύ δύο διαφορετικών τύπων:

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, θα στοχεύαμε αυτές τις δύο κλάσεις. Αλλά όπως γνωρίζουμε, τα θέματα μπλοκ WordPress έχουν διαφορετικό τρόπο διαχείρισης στυλ, και αυτό γίνεται μέσω του theme.json αρχείο. Ο Ganesh το κάλυψε επίσης αυτό με μεγάλη λεπτομέρεια, και καλά θα κάνετε να διαβάσετε το άρθρο του.

Λοιπόν, πώς ορίζουμε τα στυλ κουμπιών theme.json χωρίς να γράψω πραγματικό CSS; Ας το κάνουμε μαζί.

Δημιουργία των βασικών στυλ

theme.json είναι ένα δομημένο σύνολο σχήματος γραμμένο σε ζεύγη ιδιοτήτων:τιμή. Οι ιδιότητες ανώτατου επιπέδου ονομάζονται "τμήματα" και θα εργαστούμε με το styles Ενότητα. Εδώ πηγαίνουν όλες οι οδηγίες styling.

Θα εστιάσουμε συγκεκριμένα στο elements στο styles. Αυτός ο επιλογέας στοχεύει στοιχεία HTML που μοιράζονται μεταξύ των μπλοκ. Αυτό είναι το βασικό κέλυφος με το οποίο εργαζόμαστε:

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

Αυτό που πρέπει να κάνουμε λοιπόν είναι να ορίσουμε το α button στοιχείο.

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

Ότι button αντιστοιχεί σε στοιχεία HTML που χρησιμοποιούνται για τη σήμανση στοιχείων κουμπιού στο μπροστινό μέρος. Αυτά τα κουμπιά περιέχουν ετικέτες HTML που θα μπορούσαν να είναι οποιοσδήποτε από τους δύο τύπους κουμπιών μας: ένα αυτόνομο στοιχείο (π.χ. το μπλοκ Button) ή ένα στοιχείο ένθετο μέσα σε άλλο μπλοκ (π.χ. το μπλοκ Δημοσίευσης σχολίων).

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

Παρατηρήστε τη «δομημένη» φύση αυτού. Βασικά ακολουθούμε ένα περίγραμμα:

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

Κουμπιά styling φωλιασμένα σε μεμονωμένα μπλοκ

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

Αυτό το μπλοκ είναι πιο περίπλοκο από το μπλοκ 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 block:

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

Αυτός ο επιλογέας σημαίνει ότι όχι μόνο στοχεύουμε ένα συγκεκριμένο μπλοκ - στοχεύουμε ένα συγκεκριμένο στοιχείο που περιέχεται σε αυτό το μπλοκ. Τώρα έχουμε ένα προεπιλεγμένο σύνολο στυλ κουμπιών που εφαρμόζονται σε όλα τα κουμπιά του θέματος και ένα σύνολο στυλ που εφαρμόζονται σε συγκεκριμένα κουμπιά που περιέχονται στο μπλοκ Φόρμας σχολίων ανάρτησης.

Το CSS που δημιουργείται από το WordPress έχει έναν πιο ακριβή επιλογέα ως αποτέλεσμα:

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

Και τι γίνεται αν θέλουμε να ορίσουμε διαφορετικά διαδραστικά στυλ για το κουμπί φόρμας σχολίων ανάρτησης; Είναι η ίδια συμφωνία με τον τρόπο που το κάναμε για τα προεπιλεγμένα στυλ, μόνο αυτά ορίζονται μέσα στο core/post-comments-form block:

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

Τι γίνεται με τα κουμπιά που δεν είναι σε μπλοκ;

Το WordPress δημιουργεί αυτόματα και εφαρμόζει τις σωστές κλάσεις για την έξοδο αυτών των στυλ κουμπιών. Τι γίνεται όμως αν χρησιμοποιείτε ένα «υβριδικό» θέμα WordPress που υποστηρίζει μπλοκ και επεξεργασία πλήρους ιστότοπου, αλλά περιέχει και «κλασικά» πρότυπα PHP; Ή τι θα γινόταν αν δημιουργήσατε ένα προσαρμοσμένο μπλοκ, ή ακόμα και αν έχετε έναν σύντομο κωδικό παλαιού τύπου, που περιέχει κουμπιά; Κανένα από αυτά δεν αντιμετωπίζεται από το Μηχανή στυλ WordPress!

Μην ανησυχείς. Σε όλες αυτές τις περιπτώσεις, θα προσθέσετε το .wp-element-button κλάση στο πρότυπο, το μπλοκ ή τη σήμανση σύντομου κώδικα. Τα στυλ που δημιουργούνται από το WordPress θα εφαρμοστούν στη συνέχεια σε αυτές τις περιπτώσεις.

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

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

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

Και ας μην ξεχνάμε τα τρία βασικά πλεονεκτήματα της χρήσης theme.json:

1. Τα στυλ εφαρμόζονται σε κουμπιά τόσο στην προβολή της πρόσοψης όσο και στο πρόγραμμα επεξεργασίας μπλοκ.
2. Το CSS σας θα είναι συμβατό με μελλοντικές ενημερώσεις του WordPress.
3. Τα στυλ που δημιουργούνται λειτουργούν τόσο με θέματα μπλοκ όσο και με κλασικά θέματα — δεν χρειάζεται να αντιγράψετε οτιδήποτε σε ξεχωριστό φύλλο στυλ.

Εάν έχετε χρησιμοποιήσει theme.json στυλ στα έργα σας, μοιραστείτε τις εμπειρίες και τις σκέψεις σας. Ανυπομονώ να διαβάσω τυχόν σχόλια και σχόλια!

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/