Gestaltung von Schaltflächen in WordPress-Blockdesigns

Eine Weile zurück, Ganesh Dahal hat hier einen Beitrag zu CSS-Tricks verfasst Antwort auf einen Tweet, der nach dem Hinzufügen von CSS-Box-Schatten zu WordPress-Blöcken und -Elementen fragte. Es gibt eine Menge toller Dinge darin, die neue Funktionen nutzen, die in WordPress 6.1 ausgeliefert wurden und die Steuerelemente zum Anwenden von Schatten auf Dinge direkt in der Benutzeroberfläche des Block-Editors und des Site-Editors bieten.

Ganesh berührte in diesem Beitrag kurz Schaltflächenelemente. Ich möchte das aufgreifen und tiefer auf Ansätze für das Styling von Schaltflächen in WordPress-Blockdesigns eingehen. Genauer gesagt, wir werden ein frisches aufschlagen theme.json Datei und schlüsseln Sie verschiedene Ansätze zum Gestalten von Schaltflächen im Schema auf.

Warum Knöpfe, fragen Sie? Das ist eine gute Frage, also fangen wir damit an.

Die verschiedenen Arten von Schaltflächen

Wenn wir im Zusammenhang mit dem WordPress-Blockeditor über Schaltflächen sprechen, müssen wir zwischen zwei verschiedenen Arten unterscheiden:

1. Untergeordnete Blöcke innerhalb des Buttons-Blocks
2. Schaltflächen, die in einem anderen Block verschachtelt sind (z. B. der Block Kommentarformular posten)

Wenn wir diese beiden Blöcke zu einer Vorlage hinzufügen, sehen sie standardmäßig gleich aus.

Aber das Markup ist sehr unterschiedlich:

<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>

Wie wir sehen können, sind die Namen der HTML-Tags unterschiedlich. Es sind die gemeinsamen Klassen – .wp-block-button und .wp-element-button – die für ein einheitliches Styling zwischen den beiden Tasten sorgen.

Wenn wir CSS schreiben würden, würden wir auf diese beiden Klassen abzielen. Aber wie wir wissen, haben WordPress-Blockthemen eine andere Art, Stile zu verwalten, und das ist durch die theme.json Datei. Ganesh behandelte dies auch sehr detailliert, und Sie tun gut daran, seinen Artikel zu lesen.

Wie definieren wir Schaltflächenstile in theme.json ohne eigentliches CSS zu schreiben? Machen wir es zusammen.

Erstellen der Basisstile

theme.json ist ein strukturierter Schemasatz, der in Eigenschaft:Wert-Paaren geschrieben ist. Die Eigenschaften der obersten Ebene werden „Abschnitte“ genannt, und wir werden mit den arbeiten styles Sektion. Hier finden Sie alle Styling-Anweisungen.

Wir konzentrieren uns speziell auf die elements der styles. Dieser Selektor zielt auf HTML-Elemente ab, die von Blöcken gemeinsam genutzt werden. Dies ist die grundlegende Shell, mit der wir arbeiten:

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

Wir müssen also a definieren button Element.

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

Dass button entspricht HTML-Elementen, die zur Auszeichnung von Button-Elementen im Frontend verwendet werden. Diese Schaltflächen enthalten HTML-Tags, die einer unserer beiden Schaltflächentypen sein können: eine eigenständige Komponente (z. B. der Schaltflächenblock) oder eine Komponente, die in einen anderen Block eingebettet ist (z. B. der Block „Kommentar posten“).

Anstatt jeden einzelnen Block zu stylen, erstellen wir gemeinsame Styles. Lassen Sie uns fortfahren und den Standardhintergrund und die Textfarbe für beide Arten von Schaltflächen in unserem Design ändern. Da ist ein color Objekt darin, das wiederum unterstützt background und text Eigenschaften, in denen wir die gewünschten Werte festlegen:

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

Dadurch ändert sich die Farbe beider Schaltflächentypen:

Wenn Sie DevTools öffnen und sich das CSS ansehen, das WordPress für die Schaltflächen generiert, sehen wir, dass die .wp-element-button Klasse fügt die Stile hinzu, in denen wir definiert haben theme.json:

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

Das sind unsere Standardfarben! Als Nächstes möchten wir den Benutzern visuelles Feedback geben, wenn sie mit der Schaltfläche interagieren.

Implementieren interaktiver Schaltflächenstile

Da es sich bei dieser Seite ausschließlich um CSS handelt, wette ich, dass viele von Ihnen bereits mit den interaktiven Zuständen von Links und Schaltflächen vertraut sind. Wir können :hover Bewegen Sie den Mauszeiger über sie, tippen Sie sie hinein :focus, klicken Sie darauf, um sie zu erstellen :active. Verdammt, es gibt sogar eine :visited Status, um Benutzern einen visuellen Hinweis darauf zu geben, dass sie zuvor darauf geklickt haben.

Das sind CSS-Pseudoklassen und Wir verwenden sie, um auf die Interaktionen eines Links oder einer Schaltfläche abzuzielen.

In CSS könnten wir a formatieren :hover zustand so:

a:hover { /* Styles */
}

In theme.json, werden wir unsere bestehende Schaltflächendeklaration mit diesen Pseudoklassen erweitern.

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

Beachten Sie die „strukturierte“ Natur davon. Wir folgen im Grunde einer Gliederung:

Wir haben jetzt eine vollständige Definition der Standard- und interaktiven Stile unserer Schaltfläche. Aber was ist, wenn wir bestimmte Schaltflächen gestalten möchten, die in anderen Blöcken verschachtelt sind?

Styling-Schaltflächen, die in einzelnen Blöcken verschachtelt sind

Stellen wir uns vor, dass wir möchten, dass alle Schaltflächen unsere Basisstile haben, mit einer Ausnahme. Wir möchten, dass die Senden-Schaltfläche des Post Comment Form-Blocks blau ist. Wie würden wir das erreichen?

Dieser Block ist komplexer als der Schaltflächenblock, da er mehr bewegliche Teile hat: das Formular, Eingaben, Anweisungstext und die Schaltfläche. Um auf die Schaltfläche in diesem Block abzuzielen, müssen wir der gleichen Art von JSON-Struktur folgen, die wir für die verwendet haben button -Element, aber auf den Post Comment Form-Block angewendet, der dem zugeordnet ist core/post-comments-form Element:

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

Beachten Sie, dass wir nicht mehr in arbeiten elements mehr. Stattdessen arbeiten wir drinnen blocks die für die Konfiguration tatsächlicher Blöcke reserviert ist. Buttons dagegen gelten als globales Element, da sie in Blöcken verschachtelt werden können, obwohl sie auch als eigenständige Blöcke verfügbar sind.

Die JSON-Struktur unterstützt Elemente innerhalb von Elementen. Also, wenn es eine gibt button -Element im Post-Comment-Formular-Block, können wir es im core/post-comments-form Block:

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

Dieser Selektor bedeutet, dass wir nicht nur auf einen bestimmten Block abzielen, sondern auf ein bestimmtes Element, das in diesem Block enthalten ist. Jetzt haben wir einen Standardsatz von Schaltflächenstilen, die auf alle Schaltflächen im Design angewendet werden, und einen Satz von Stilen, die auf bestimmte Schaltflächen angewendet werden, die im Block „Post Comment Form“ enthalten sind.

Das von WordPress generierte CSS hat dadurch einen präziseren Selektor:

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

Und was ist, wenn wir verschiedene interaktive Stile für die Schaltfläche „Formular posten“ definieren möchten? Es ist dasselbe wie bei den Standardstilen, nur dass diese innerhalb der definiert sind 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. } } } } }
}

Was ist mit Schaltflächen, die sich nicht in Blöcken befinden?

WordPress generiert und wendet automatisch die richtigen Klassen an, um diese Schaltflächenstile auszugeben. Aber was ist, wenn Sie ein „hybrides“ WordPress-Theme verwenden, das Blöcke und die vollständige Seitenbearbeitung unterstützt, aber auch „klassische“ PHP-Vorlagen enthält? Oder was wäre, wenn Sie einen benutzerdefinierten Block erstellt haben oder sogar einen Legacy-Shortcode haben, der Schaltflächen enthält? Nichts davon wird von der behandelt WordPress-Style-Engine!

Keine Sorge. In all diesen Fällen würden Sie die hinzufügen .wp-element-button Klasse in der Vorlage, im Block oder im Shortcode-Markup. Die von WordPress generierten Stile werden dann in diesen Instanzen angewendet.

Und es kann Situationen geben, in denen Sie keine Kontrolle über das Markup haben. Einige Block-Plug-ins könnten beispielsweise etwas zu eigensinnig sein und ihr eigenes Styling großzügig anwenden. Dort können Sie normalerweise im Einstellungsfenster des Blocks zur Option „Erweitert“ gehen und die Klasse dort anwenden:

Wrapping up

Beim Schreiben von „CSS“ in theme.json mag sich zunächst unangenehm anfühlen, ich habe festgestellt, dass es zur zweiten Natur wird. Wie bei CSS gibt es eine begrenzte Anzahl von Eigenschaften, die Sie mit den richtigen Selektoren entweder allgemein oder sehr eng anwenden können.

Und vergessen wir nicht die drei Hauptvorteile der Verwendung theme.json:

1. Die Stile werden sowohl in der Frontend-Ansicht als auch im Blockeditor auf Schaltflächen angewendet.
2. Ihr CSS wird mit zukünftigen WordPress-Updates kompatibel sein.
3. Die generierten Stile funktionieren sowohl mit Blockdesigns als auch mit klassischen Designs – es besteht keine Notwendigkeit, etwas in einem separaten Stylesheet zu duplizieren.

Wenn du benutzt hast theme.json Stile in Ihren Projekten, bitte teilen Sie uns Ihre Erfahrungen und Gedanken mit. Ich freue mich über Kommentare und Feedback!

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/