Χρήση της νέας περιορισμένης διάταξης σε θέματα μπλοκ WordPress

Ένας από τους κύριους στόχους του WordPress Site Editor (και, ναι, αυτός είναι τώρα "επίσημο όνομα) είναι να μετακινήσετε το βασικό στυλ μπλοκ από CSS σε δομημένο JSON. Τα αρχεία JSON είναι αναγνώσιμα από μηχανή, γεγονός που τα καθιστά αναλώσιμα από τον Επεξεργαστή ιστότοπου που βασίζεται σε JavaScript για τη διαμόρφωση των καθολικών στυλ ενός θέματος απευθείας στο WordPress.

Δεν έχει τελειώσει ακόμα! Αν δούμε το προεπιλεγμένο θέμα Twenty Twenty-Two (TT2), υπήρχαν δύο κύρια ανεπίλυτα ζητήματα: αλληλεπιδράσεις στο στυλ (αρέσει :hover, :active, :focus), Και τα περιθώρια και επένδυση δοχείων διάταξης. Μπορείτε να δείτε πώς διορθώθηκαν προσωρινά στο TT2 style.css αρχείο αντί να το κάνετε στο theme.json αρχείο.

WordPress 6.1 Διόρθωσε αυτά τα προβλήματα και αυτό που θέλω να κάνω είναι να εξετάσω συγκεκριμένα το τελευταίο. Τώρα που διαθέτουμε στυλ προσαρμοσμένα σε JSON για τα περιθώρια και την επένδυση των κοντέινερ διάταξης, αυτό μας ανοίγει πιο ευέλικτοι και ισχυροί τρόποι για να ορίσουμε το διάστημα στις διατάξεις των θεμάτων μας.

Για τι είδους απόσταση μιλάμε;

Καταρχάς, έχουμε ήδη γέμιση σε επίπεδο ρίζας που είναι ένας φανταχτερός τρόπος να περιγράψουμε το padding στο στοιχείο. Αυτό είναι ωραίο γιατί εξασφαλίζει σταθερή απόσταση σε ένα στοιχείο που είναι κοινόχρηστο σε όλες τις σελίδες και τις αναρτήσεις.

Αλλά υπάρχουν περισσότερα σε αυτό γιατί τώρα έχουμε έναν τρόπο για τα μπλοκ να παρακάμψουν αυτό το γέμισμα και να ευθυγραμμιστούν σε όλο το πλάτος. Αυτό χάρη σε padding-aware ευθυγραμμίσεις που είναι μια νέα δυνατότητα επιλογής theme.json. Έτσι, ακόμα κι αν έχετε padding σε επίπεδο ρίζας, μπορείτε να επιτρέψετε, ας πούμε, μια εικόνα (ή κάποιο άλλο μπλοκ) να ξεσπάσει και να μεταβεί σε πλήρες πλάτος.

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

Ας ξεκινήσουμε με…

Γέμισμα σε επίπεδο ρίζας

Και πάλι, αυτό δεν είναι καινούργιο. Είχαμε τη δυνατότητα να ορίσουμε padding στο στοιχείο στο theme.json από την πειραματική Πρόσθετο Gutenberg το παρουσίασε στην έκδοση 11.7. Το ρυθμίσαμε στο styles.spacing αντικείμενο, όπου έχουμε margin και padding αντικείμενα για να ορίσετε την επάνω, δεξιά, κάτω και αριστερή απόσταση στο σώμα:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

Αυτή είναι μια παγκόσμια ρύθμιση. Λοιπόν, αν σπάσουμε το DevTools και επιθεωρήσουμε το στοιχείο, θα βλέπαμε αυτά τα στυλ CSS:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

Δροσερός. Αλλά εδώ έγκειται το ζήτημα του πώς μπορούμε να επιτρέψουμε σε ορισμένα μπλοκ να ξεφύγουν από αυτό το διάστημα για να γεμίσουν την πλήρη οθόνη, από άκρη σε άκρη. Γι' αυτό υπάρχει η απόσταση, σωστά; Βοηθά να μην συμβεί αυτό!

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

Εισαγω…

Ευθυγραμμίσεις με επίβλεψη

Κατά την προσπάθεια δημιουργίας του πρώτου προεπιλεγμένου θέματος WordPress που καθορίζει όλα τα στυλ στο theme.json αρχείο, ο επικεφαλής σχεδιαστής Kjell Reigstad επεξηγεί τις προκλητικές πτυχές της εξόδου από το padding σε επίπεδο ρίζας σε αυτό Πρόβλημα GitHub.

Δημιουργήθηκαν νέες δυνατότητες στο WordPress 6.1 για την αντιμετώπιση αυτού του ζητήματος. Ας ψάξουμε σε αυτά στη συνέχεια.

useRootPaddingAwareAlignments

Μία νέα useRootPaddingAwareAlignments δημιουργήθηκε ιδιοκτησία για την αντιμετώπιση του προβλήματος. Στην πραγματικότητα παρουσιάστηκε για πρώτη φορά στην προσθήκη Gutenberg v13.8. ο αρχικό αίτημα έλξης είναι ένα ωραίο αστάρι για το πώς λειτουργεί.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Αμέσως μετά, παρατηρήστε ότι αυτό είναι ένα χαρακτηριστικό που πρέπει να επιλέξουμε. Το ακίνητο έχει οριστεί σε false από προεπιλογή και πρέπει να το ορίσουμε ρητά σε true προκειμένου να το ενεργοποιήσετε. Παρατηρήστε επίσης ότι έχουμε appearanceTools οριστεί σε true επίσης. Αυτό μας επιλέγει στα στοιχεία ελέγχου διεπαφής χρήστη στον Επεξεργαστή ιστότοπου για περιγράμματα στυλ, χρώματα συνδέσμων, τυπογραφία και, ναι, διάστημα που περιλαμβάνει περιθώριο και γέμιση.

Ρύθμιση appearanceTools οριστεί σε true επιλέγει αυτόματα μπλοκ σε περιθώριο και γέμιση χωρίς να χρειάζεται να ρυθμίσετε settings.spacing.padding or setting.spacing.margin προς την true.

Όταν το ενεργοποιήσουμε useRootPaddingAwareAlignments, μας παρέχονται προσαρμοσμένες ιδιότητες με τιμές συμπλήρωσης ρίζας που ορίζονται στο στοιχείο στο μπροστινό άκρο. Είναι ενδιαφέρον ότι εφαρμόζει επίσης το padding στο .editor-styles-wrapper κλάση έτσι ώστε το διάστημα να εμφανίζεται όταν εργάζεστε στο back-end Block Editor. Πολύ ωραίο!

Κατάφερα να επιβεβαιώσω αυτές τις προσαρμοσμένες ιδιότητες CSS στο DevTools κατά την αναζήτηση.

Ενεργοποίηση useRootPaddingAwareAlignments εφαρμόζει επίσης αριστερή και δεξιά γέμιση σε οποιοδήποτε μπλοκ που υποστηρίζει τις τιμές πλάτους «περιεχομένου» και πλάτους «ευρείας» στην παραπάνω εικόνα Καθολικών στυλ. Μπορούμε επίσης να ορίσουμε αυτές τις τιμές στο theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

Εάν οι ρυθμίσεις καθολικών στυλ είναι διαφορετικές από αυτές που ορίζονται σε theme.json, τότε τα Global Styles έχουν προτεραιότητα. Μπορείτε να μάθετε τα πάντα σχετικά με τη διαχείριση στυλ θέματος μπλοκ στο τελευταίο μου άρθρο.

• contentSize είναι το προεπιλεγμένο πλάτος για μπλοκ.
• wideSize παρέχει μια "ευρεία" επιλογή διάταξης και δημιουργεί μια ευρύτερη στήλη για να απλωθούν τα μπλοκ.

Έτσι, αυτό το τελευταίο παράδειγμα κώδικα θα μας δώσει το ακόλουθο CSS:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] υποδεικνύει έναν μοναδικό αριθμό που δημιουργείται αυτόματα από το WordPress.

Αλλά μαντέψτε τι άλλο θα έχουμε; Πλήρης ευθυγράμμιση επίσης!

.wp-container-[id] .alignfull {
  max-width: none;
}

Δες αυτό? Με την ενεργοποίηση useRootPaddingAwareAlignments και τον καθορισμό contentSize και wideSize, λαμβάνουμε επίσης μια κλάση CSS πλήρους ευθυγράμμισης για συνολικά τρεις διαμορφώσεις κοντέινερ για τον έλεγχο του πλάτους των μπλοκ που προστίθενται σε σελίδες και αναρτήσεις.

Αυτό ισχύει για τα ακόλουθα μπλοκ ειδικά για τη διάταξη: Στήλες, Ομάδα, Περιεχόμενο ανάρτησης και Βρόχος ερωτημάτων.

Μπλοκ ελέγχου διάταξης

Ας υποθέσουμε ότι προσθέτουμε οποιοδήποτε από αυτά τα προαναφερθέντα μπλοκ ειδικά για τη διάταξη σε μια σελίδα. Όταν επιλέγουμε το μπλοκ, το περιβάλλον χρήστη των ρυθμίσεων μπλοκ μας προσφέρει νέες ρυθμίσεις διάταξης με βάση το settings.layout αξίες που ορίσαμε theme.json (ή η διεπαφή χρήστη Global Styles).

Έχουμε να κάνουμε με πολύ συγκεκριμένα μπλοκ εδώ — μπλοκ που μπορεί να έχουν άλλα μπλοκ ένθετα μέσα. Έτσι, αυτές οι ρυθμίσεις διάταξης αφορούν τον έλεγχο του πλάτους και της ευθυγράμμισης αυτών των ένθετων μπλοκ. Η ρύθμιση "Εσωτερικά μπλοκ χρησιμοποιούν πλάτος περιεχομένου" είναι ενεργοποιημένη από προεπιλογή. Αν το απενεργοποιήσουμε, τότε δεν έχουμε max-width στο δοχείο και τα μπλοκ μέσα σε αυτό πηγαίνουν από άκρη σε άκρη.

Αν αφήσουμε την εναλλαγή ενεργοποιημένη, τότε τα ένθετα μπλοκ θα προσκολληθούν είτε σε contentWidth or wideWidth τιμές (περισσότερα σε λίγο). Ή μπορούμε να χρησιμοποιήσουμε τις αριθμητικές εισόδους για να ορίσουμε το custom contentWidth και wideWidth τιμές σε αυτήν την εφάπαξ περίπτωση. Αυτή είναι μεγάλη ευελιξία!

Φαρδιά μπλοκ

Οι ρυθμίσεις που μόλις εξετάσαμε έχουν οριστεί στο γονικό μπλοκ. Αφού τοποθετήσουμε ένα μπλοκ μέσα και το επιλέξουμε, έχουμε επιπλέον επιλογές σε αυτό το μπλοκ για να το χρησιμοποιήσουμε contentWidth, wideWidth, ή μεταβείτε σε όλο το πλάτος.

Παρατηρήστε πώς το WordPress πολλαπλασιάζει τις προσαρμοσμένες ιδιότητες CSS padding σε επίπεδο ρίζας επί -1 για να δημιουργήσετε αρνητικά περιθώρια όταν επιλέγετε την επιλογή "Πλήρως πλάτος".

Χρήση περιορισμένης διάταξης

Μόλις καλύψαμε το νέο διάστημα και τις ευθυγραμμίσεις που λαμβάνουμε με το WordPress 6.1. Αυτά είναι ειδικά για μπλοκ και τυχόν ένθετα μπλοκ μέσα σε μπλοκ. Αλλά το WordPress 6.1 εισάγει επίσης νέες δυνατότητες διάταξης για ακόμη μεγαλύτερη ευελιξία και συνέπεια στα πρότυπα ενός θέματος.

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

Διατάξεις Flex, Flow και Constrained

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

• Διάταξη ροής: Προσθέτει κάθετη απόσταση μεταξύ ένθετων μπλοκ στο margin-block κατεύθυνση. Αυτά τα ένθετα μπλοκ μπορούν επίσης να ευθυγραμμιστούν αριστερά, δεξιά ή στο κέντρο.
• Περιορισμένη διάταξη: Η ίδια ακριβώς συμφωνία με μια διάταξη ροής, αλλά με περιορισμούς πλάτους σε ένθετα μπλοκ που βασίζονται στο contentWidth και wideWidth ρυθμίσεις (είτε μέσα theme.json ή Global Styles).
• Flex διάταξη: Αυτό παρέμεινε αμετάβλητο στο WordPress 6.1. Χρησιμοποιεί CSS Flexbox για να δημιουργήσετε μια διάταξη που ρέει οριζόντια (σε σειρά) από προεπιλογή, αλλά μπορεί να ρέει και κατακόρυφα, ώστε τα μπλοκ να στοιβάζονται το ένα πάνω στο άλλο. Το διάστημα εφαρμόζεται χρησιμοποιώντας το CSS gap ιδιοκτησία.

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

Τάξη σημασιολογικής διάταξης	Τύπος διάταξης	Υποστηριζόμενα μπλοκ
.is-layout-flow	Διάταξη ροής	Στήλες, Ομάδα, Περιεχόμενο ανάρτησης και Βρόχος ερωτημάτων.
.is-layout-constrained	Περιορισμένη διάταξη	Στήλες, Ομάδα, Περιεχόμενο ανάρτησης και Βρόχος ερωτημάτων.
.is-layout-flex	Ευέλικτη διάταξη	Στήλες, κουμπιά, εικονίδια κοινωνικής δικτύωσης

Ο Τζάστιν Τάντλοκ έχει μια εκτενή αναφορά τους διαφορετικούς τύπους διάταξης και τις σημασιολογικές τάξεις, συμπεριλαμβανομένων περιπτώσεων χρήσης και παραδειγμάτων.

Ενημέρωση του θέματός σας για υποστήριξη περιορισμένων διατάξεων

Εάν χρησιμοποιείτε ήδη ένα θέμα μπλοκ δικής σας κατασκευής, θα το θέλετε ενημερώστε το για να υποστηρίζει περιορισμένες διατάξεις. Το μόνο που χρειάζεται είναι να ανταλλάξουμε μερικά πράγματα theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

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

Απενεργοποίηση στυλ διάταξης

Τα βασικά στυλ διάταξης είναι προεπιλεγμένα χαρακτηριστικά που αποστέλλονται στο WordPress 6.1 Core. Με άλλα λόγια, ενεργοποιούνται αμέσως. Μπορούμε όμως να τα απενεργοποιήσουμε αν χρειαστεί με αυτό το μικρό απόσπασμα functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

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

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

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

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

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

Αυτός ο διαλογισμός στα Θέματα GitHub #44720 παραθέτει τις συζητήσεις που σχετίζονται με τη διάταξη προορίζεται για το WordPress 6.2.

Επιπρόσθετο υλικό

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

Οδηγίες

Δημοσιεύσεις WordPress

Αιτήματα και ζητήματα έλξης GitHub