Buttons in WordPress Block Themes stylen

Vor einiger Zeit hat Ganesh Dahal hier auf CSS-Tricks einen Beitrag verfasst, der auf einen Tweet reagierte, in dem nach dem Hinzufügen von CSS-Box-Schatten zu WordPress-Blöcken und Elementen gefragt wurde. Dort gibt es viele großartige Dinge, die neue Funktionen nutzen, die in WordPress 6.1 eingeführt wurden und Steuerelemente für das direkte Anwenden von Schatten auf Dinge in der Benutzeroberfläche des Block-Editors und des Site-Editors bieten.

Ganesh hat in diesem Beitrag kurz auf Schaltflächenelemente eingegangen. Ich möchte das aufgreifen und tiefer in Ansätze zur Gestaltung von Schaltflächen in WordPress Block Themes eintauchen. Insbesondere werden wir eine neue theme.json Datei öffnen und verschiedene Ansätze zur Gestaltung von Schaltflächen im Schema aufschlüsseln.

Warum Schaltflächen, fragst du? Das ist eine gute Frage, also lass uns damit beginnen.

Die verschiedenen Arten von Schaltflächen

Wenn wir im Kontext des WordPress Block Editors über Schaltflächen sprechen, müssen wir zwischen zwei verschiedenen Arten unterscheiden

1. Kindblöcke innerhalb des Schaltflächenblocks
2. Schaltflächen, die in andere Blöcke verschachtelt sind (z. B. der Beitragsformularblock)

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

Aber die 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, sind die HTML-Tag-Namen unterschiedlich. Es sind die gemeinsamen Klassen – .wp-block-button und .wp-element-button –, die eine konsistente Gestaltung zwischen den beiden Schaltflächen gewährleisten.

Wenn wir CSS schreiben würden, würden wir diese beiden Klassen ansprechen. Aber wie wir wissen, haben WordPress Block Themes eine andere Art, Stile zu verwalten, und das ist über die theme.json Datei. Ganesh hat dies auch sehr detailliert behandelt, und es wäre gut, seinen Artikel zu lesen.

Also, wie definieren wir Schaltflächenstile in theme.json, ohne tatsächliches CSS zu schreiben? Lass es uns gemeinsam tun.

Die Basisstile erstellen

theme.json ist eine strukturierte Sammlung von Schemata, die in Schlüssel-Wert-Paaren geschrieben sind. Die obersten Schlüssel werden „Abschnitte“ genannt, und wir werden mit dem Abschnitt styles arbeiten. Hier kommen alle Styling-Anweisungen hin.

Wir werden uns speziell auf die elements in den styles konzentrieren. Dieser Selektor zielt auf HTML-Elemente ab, die zwischen Blöcken gemeinsam genutzt werden. Dies ist die grundlegende Hülle, mit der wir arbeiten

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

Wir müssen also ein button Element definieren.

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

Dieses button entspricht HTML-Elementen, die zur Auszeichnung von Schaltflächenelementen auf der Frontend-Seite verwendet werden. Diese Schaltflächen enthalten HTML-Tags, die eines unserer beiden Schaltflächenarten sein könnten: eine eigenständige Komponente (d. h. der Schaltflächenblock) oder eine Komponente, die in einen anderen Block verschachtelt ist (z. B. der Beitrags-Kommentarblock).

Anstatt jeden einzelnen Block stylen zu müssen, erstellen wir gemeinsame Stile. Ändern wir nun die standardmäßige Hintergrund- und Textfarbe für beide Arten von Schaltflächen in unserem Theme. Dort gibt es ein color Objekt, das wiederum background und text Eigenschaften unterstützt, wo wir die gewünschten Werte festlegen

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

Dies ändert die Farbe beider Schaltflächenarten

Wenn wir DevTools öffnen und uns den von WordPress generierten CSS-Code für die Schaltflächen ansehen, sehen wir, dass die Klasse .wp-element-button die in theme.json definierten Stile hinzufügt

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

Interaktive Schaltflächenstile implementieren

Da dies eine Seite ist, die sich ganz um CSS dreht, wette ich, dass viele von Ihnen bereits mit den interaktiven Zuständen von Links und Schaltflächen vertraut sind. Wir können mit dem Mauszeiger über sie :hovern, mit der Tabulatortaste zu :focus gelangen, darauf klicken, um sie :active zu machen. Es gibt sogar einen :visited Zustand, um Benutzern eine visuelle Anzeige zu geben, dass sie ihn zuvor geklickt haben.

Das sind CSS-Pseudoklassen und wir verwenden sie, um Interaktionen eines Links oder einer Schaltfläche anzusprechen.

In CSS würden wir einen :hover-Zustand vielleicht so stylen

a:hover {
  /* Styles */
}

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

{
  "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 dessen. Wir folgen im Grunde einer Gliederung

• Elemente
  • Element
    • Objekt
      • Eigenschaft
        • Wert

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

Schaltflächen stylen, die in einzelne Blöcke verschachtelt sind

Stellen wir uns vor, wir möchten, dass alle Schaltflächen unsere Basisstile haben, mit einer Ausnahme. Wir möchten, dass die Schaltfläche zum Absenden des Beitragsformularblocks blau ist. Wie würden wir das erreichen?

Dieser Block ist komplexer als der Schaltflächenblock, da er mehr bewegliche Teile hat: das Formular, die Eingabefelder, erläuternden Text und die Schaltfläche. Um die Schaltfläche in diesem Block anzusprechen, müssen wir der gleichen Art von JSON-Struktur folgen, wie wir sie für das button Element verwendet haben, aber angewendet auf den Beitragsformularblock, der dem Element core/post-comments-form zugeordnet ist

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

Beachten Sie, dass wir nicht mehr unter elements arbeiten. Stattdessen arbeiten wir unter blocks, was für die Konfiguration tatsächlicher Blöcke reserviert ist. Schaltflächen hingegen gelten als globale Elemente, da sie in Blöcke verschachtelt werden können, obwohl sie auch als eigenständiger Block verfügbar sind.

Die JSON-Struktur unterstützt Elemente innerhalb von Elementen. Wenn es also ein button-Element im Beitragsformularblock gibt, können wir es im core/post-comments-form-Block ansprechen

{
  "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 einen bestimmten Block ansprechen – wir sprechen ein bestimmtes Element an, das in diesem Block enthalten ist. Nun haben wir einen Standardsatz von Schaltflächenstilen, die auf alle Schaltflächen im Theme angewendet werden, und einen Satz von Stilen, die auf bestimmte Schaltflächen angewendet werden, die im Beitragsformularblock enthalten sind.

Der von WordPress generierte CSS-Code hat infolgedessen 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 unterschiedliche interaktive Stile für die Schaltfläche des Beitragsformularblocks definieren möchten? Das ist dasselbe wie bei den Standardstilen, nur dass diese innerhalb des core/post-comments-form-Blocks definiert sind

{
  "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 nicht in Blöcken sind?

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 Full-Site-Editing unterstützt, aber auch „klassische“ PHP-Vorlagen enthält? Oder was ist, wenn Sie einen benutzerdefinierten Block erstellt haben oder sogar einen älteren Shortcode mit Schaltflächen haben? Keine dieser Fälle wird von der WordPress Style Engine behandelt!

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

Und es kann Situationen geben, in denen Sie keine Kontrolle über das Markup haben. Einige Block-Plugins könnten zum Beispiel etwas zu eigenwillig sein und ihre eigenen Stile großzügig anwenden. Dort können Sie normalerweise zur Option „Erweitert“ im Einstellungsbereich des Blocks gehen und die Klasse dort anwenden

Zusammenfassung

Während das Schreiben von „CSS“ in theme.json anfangs seltsam erscheinen mag, habe ich festgestellt, dass es zur zweiten Natur wird. Wie bei CSS gibt es eine begrenzte Anzahl von Eigenschaften, die Sie entweder breit oder sehr eng mit den richtigen Selektoren anwenden können.

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

1. Die Stile werden sowohl im Frontend als auch im Blockeditor auf Schaltflächen angewendet.
2. Ihr CSS ist mit zukünftigen WordPress-Updates kompatibel.
3. Die generierten Stile funktionieren sowohl mit Block Themes als auch mit Classic Themes – es ist nicht notwendig, etwas in einer separaten Stylesheet zu duplizieren.

Wenn Sie theme.json-Stile in Ihren Projekten verwendet haben, teilen Sie bitte Ihre Erfahrungen und Gedanken mit. Ich freue mich darauf, Kommentare und Feedback zu lesen!