Die Einführung des Full Site Editing (FSE) in WordPress verdeutlicht die wachsende Bedeutung der Datei theme.json
. Es gibt jetzt eine ganz neue Hierarchie und Struktur zu verstehen, zusammen mit den verschiedenen Eigenschaften, die dir helfen, deine Designs zu erstellen. Insbesondere die Eigenschaft blocks
in theme.json
ist wichtig, wenn du moderne, flexible WordPress-Themes mit einzigartigen Blöcken erstellen willst.
In diesem Leitfaden erkunden wir die Besonderheiten der Eigenschaft blocks
in theme.json
, damit du mit Blöcken arbeiten, sie entwerfen und gestalten kannst, um dynamischere und anpassbare WordPress-Erlebnisse zu schaffen.
Die Eigenschaft blocks in theme.json verstehen
Bevor wir in die Feinheiten der Eigenschaft blocks
eintauchen, wollen wir zunächst ihre Rolle innerhalb von theme.json
und der WordPress-Theme-Entwicklung verstehen.
Zunächst einmal ist theme.json
die Konfigurationsdatei, in der du globale Stile und Einstellungen für deine Themes festlegen kannst. In diesem „zentralen Knotenpunkt“ kannst du verschiedene Aspekte des Aussehens und Verhaltens deines Themes steuern, darunter Typografie, Farben und Layout-Optionen. Sie kann aber noch mehr als nur kosmetische Anpassungen vornehmen.
Mit der Eigenschaft blocks
kannst du einzelne Blocktypen und nicht nur die gesamte Website steuern. Du kannst Standardstile, -einstellungen und -verhaltensweisen für bestimmte Blöcke festlegen, was die Konsistenz deines Themes und die Flexibilität für Website-Betreiber gewährleistet.
Die Beziehung zwischen der Block-Eigenschaft und der vollständigen Website-Bearbeitung
FSE ist ein eher visueller Ansatz für den Aufbau deiner Website mit Blöcken als Kernstück. Auf dem Frontend stehen dir die meisten Styling- und Anpassungsoptionen für deine gesamte Website zur Verfügung:
Die Eigenschaft blocks
ist aus mehreren Gründen ein wichtiger Teil der theme.json
Datei:
- Sie bietet eine standardisierte Möglichkeit, Blockstile und Einstellungen zu definieren.
- Du kannst kohärente Designsysteme auf einer programmatischen Basis erstellen.
- Du kannst das Erscheinungsbild von Blöcken besser kontrollieren, ohne dass du benutzerdefiniertes CSS verwenden musst.
- Die Eigenschaft hilft dir, Blockmuster und Vorlagen zu erstellen.
Entwickler können die Eigenschaft blocks
nutzen, um Themes zu erstellen, die die vollständige Bearbeitung der Website ermöglichen.
Wie die Eigenschaft Blöcke strukturiert wird (und ihre Syntax)
Die Standardisierung, die die Eigenschaft blocks
bietet, ist hilfreich, wenn es um Struktur und Syntax geht. Du wirst sie immer innerhalb des settings
Objekts verschachteln:
{
"version": 3,
"settings": {
"blocks": {
"core/paragraph": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
]
…
Das obige Beispiel definiert benutzerdefinierte Schriftgrößen für einen Absatzblock. Die wichtigsten Komponenten lassen sich ganz einfach aufschlüsseln:
- Du verschachtelst die Eigenschaft
blocks
unter dem Objektsettings
. - Jeder Blocktyp hat einen Namespace und einen Namen (hier
core/paragraph
). - Dann legst du die Einstellungen des Blocks innerhalb des Objekts fest.
Die Einstellungen umfassen das meiste, was für globale Stile verfügbar ist. Dazu gehören zum Beispiel Typografie, Farbe, Abstände und viele andere.
Konfigurieren der globalen Blockeinstellungen
Schauen wir uns an, wie du globale Einstellungen definierst und wie sich dies auf die Eigenschaft blocks
auswirkt. So schaffst du eine Grundlage für ein einheitliches Design in deinem Theme.
{
"version": 3,
"settings": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
…
In diesem Beispiel legen wir die globalen Schriftgrößen fest, die für alle Blöcke verfügbar sind. Im WordPress-Site-Editor findest du diese Optionen im Bereich Typografie > Elemente > Text:
Jede Schriftgröße, die du auf theme.json
definierst, entspricht einer der Größenoptionen hier:
Natürlich gibt es noch viele andere Möglichkeiten, dein Theme anzupassen. Die Idee ist, ein globales Design zu erstellen, das in 80% der Anwendungsfälle funktioniert.
Mit der Eigenschaft blocks
kannst du die grundlegenden Blockstile überschreiben, um die letzten 20% abzudecken. Auf der Seite Stile im Seiteneditor kannst du auch die Designeinstellungen für jeden Block anpassen:
Das ist für Endnutzer/innen hervorragend, aber für Entwickler/innen weniger wertvoll. Wir konzentrieren uns auf die Verwendung von theme.json
, um mit der Eigenschaft blocks
zu arbeiten.
Wie man einzelne Blocktypen anpasst
Während globale Einstellungen wichtig sind, um die Konsistenz zu wahren, liegt die wahre Stärke in der Anpassungsfähigkeit der Eigenschaft blocks
. Mit dieser granularen Einstellung kannst du das Aussehen und Verhalten bestimmter Blöcke an das Design deines Themes anpassen, genau wie beim Site Editor
Schauen wir uns ein Beispiel für die Anpassung des Überschriftenblocks für dein Theme an:
{
"version": 3,
"settings": {
"blocks": {
"core/heading": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "20px"
},
{
"name": "Medium",
"slug": "medium",
"size": "30px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
}
],
"fontWeight": "bold"
},
"color": {
"palette": [
{
"name": "Heading Primary",
"slug": "heading-primary",
"color": "#333333"
},
{
"name": "Heading Secondary",
"slug": "heading-secondary",
"color": "#666666"
}
]
…
Wie du siehst, spiegeln die Attribute wider, wie du globale Änderungen vornehmen würdest. Fassen wir zusammen, was wir hier tun:
- Wir legen bestimmte Schriftgrößen für Überschriften fest und ordnen sie Größenbezeichnungen zu.
- Die Schriftstärke für alle Überschriften wird einfach fett sein.
- Diese Überschriften erhalten außerdem eine eigene Farbpalette.
So wird sichergestellt, dass unsere Überschriften im gesamten Design einheitlich aussehen. Außerdem können wir diese Elemente kontrollieren, wenn wir nicht wissen, wie der Endnutzer sie anwenden wird, was einem einheitlichen Design zugute kommt.
Die richtige Kombination aus Namespace und Slug verwenden
Wenn du Blocktypen aufrufst, ist es wichtig, dass du die richtige Namespace- und Slug-Kombination verwendest. Sonst werden deine Änderungen nicht auf die Blöcke angewendet, auf die du abzielen willst.
Jeder Block hat einen Namespace und einen Slug. WordPress-Kernblöcke haben in der Regel den Namespace core
. Der Slug ist der Name des Blocks:
…
"blocks": {
"core/image": {
…
Wenn du den Slug eines Blocks wissen willst, kannst du in seiner spezifischen block.json
Datei nachsehen. Du findest sie im Verzeichnis wp-includes/blocks
. Hier gibt es verschiedene Ordner, von denen jeder eine block.json
Datei enthält. In jedem Ordner sollten der Namensraum und der Slug für den Block ganz oben in der Datei stehen:
Wenn du diese Verzeichnisse durchsuchst, wirst du feststellen, dass das Verzeichnis wp-includes
eine eigene Datei theme.json
hat. Das mag verwirrend erscheinen, ist aber einfach zu erklären.
Warum theme.json standardmäßig angepasste Block-Einstellungen enthält
Die WordPress-eigene Datei theme.json
mag auf den ersten Blick seltsam erscheinen, weil es sich nicht um ein Theme handelt. Das ist jedoch kein Zufall. Der Hauptgrund ist die Abwärtskompatibilität mit älteren WordPress-Versionen.
Der Button-Block legt zum Beispiel einen Rahmenradius fest:
…
"blocks": {
"core/button": {
"border": {
"radius": true
}
},
…
Andere Blöcke haben ähnliche Einstellungen, um die Konsistenz zwischen verschiedenen WordPress-Versionen zu gewährleisten. Dies kann jedoch zu Problemen führen, wenn du dir dessen nicht bewusst bist.
Wenn du versuchst, globale Einstellungen zu definieren und dich fragst, warum diese Änderungen nicht für bestimmte Blöcke gelten, könnte die Abwärtskompatibilität die Antwort sein. Natürlich kannst du diese Einstellungen in deiner eigenen theme.json
Datei problemlos außer Kraft setzen.
Entwicklung von benutzerdefinierten Blöcken mit theme.json
Die Datei theme.json
ist ideal für die Anpassung bestehender Blöcke, aber ihre Möglichkeiten reichen auch für die Entwicklung eigener Blöcke. Du kannst theme.json
nutzen, um Standardstile und -einstellungen für deine eigenen Blöcke zu definieren. So kannst du eine nahtlose Integration in das Design deines Themes erreichen.
Zuerst musst du jedoch den Block selbst erstellen. Das würde den Rahmen dieses Artikels sprengen, aber zusammenfassend lassen sich ein paar wichtige Facetten hier auflisten:
- Das Gerüst für den Block. Dazu musst du eine lokale Entwicklungsumgebung einrichten und die Dateistruktur für den gesamten Block erstellen.
- Aktualisieren der Datei
block.json
. Hier musst du die Identität des Blocks ändern und Unterstützungen hinzufügen. Letzteres sind Möglichkeiten, um die Unterstützung für bestimmte WordPress-Funktionen zu deklarieren. So kannst du zum Beispiel die Ausrichtung anpassen, Ankerfelder implementieren, mit verschiedenen Typografieeinstellungen arbeiten und vieles mehr. - Passe die JavaScript-Dateien des Blocks an. Sowohl
index.js
als auchedit.js
benötigen Code, um WordPress mitzuteilen, wie der Block funktioniert und damit er im Site-Editor angezeigt wird.
Möglicherweise musst du auch render.php
bearbeiten, statisches Rendering hinzufügen und eine ganze Reihe anderer Aufgaben erledigen. An dieser Stelle kannst du wie bei jedem anderen Block auch stilistische Änderungen an theme.json
vornehmen. Schauen wir uns jetzt block.json
genauer an.
Die Datei block.json
Diese Datei wird vom WordPress-Entwicklungsteam als „kanonischer“ Weg bezeichnet, um Blöcke sowohl auf der Server- als auch auf der Client-Seite zu registrieren. Die Metadaten, die du hier einträgst, informieren WordPress über den Blocktyp und die dazugehörigen Dateien:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my-plugin/notice",
"title": "Notice",
"category": "text",
"parent": [ "core/group" ],
"icon": "star",
"description": "Shows warning, error or success notices...",
"keywords": [ "alert", "message" ],
"version": "1.0.3",
"textdomain": "my-plugin",
"attributes": {
"message": {
"type": "string",
"source": "html",
"selector": ".message"
}
},
…
Sie sind vergleichbar mit den Metadaten, die du am Anfang einer PHP-Datei für Themes und Plugins angeben würdest. Auch wenn die Datei ausschließlich JSON-Daten verwendet, kannst du dennoch Code über PHP, JavaScript und CSS austauschen:
…
"editorScript": "file:./index.js",
"script": "file:./script.js",
"viewScript": [ "file:./view.js", "example-shared-view-script" ],
"editorStyle": "file:./index.css",
"style": [ "file:./style.css", "example-shared-style" ],
"viewStyle": [ "file:./view.css", "example-view-style" ],
"render": "file:./render.php"
…
Darauf kommen wir später im Abschnitt über Variationen zurück. Zum Abschluss dieses Abschnitts musst du wissen, wie du deinen benutzerdefinierten Block als Standard in WordPress festlegen kannst. Es gibt mehrere Möglichkeiten, dies zu erreichen. Der klassische Weg ist, einen benutzerdefinierten Beitragstyp zu registrieren und die Blöcke dort einzufügen. Es gibt aber auch noch ein paar andere Methoden.
Du könntest zum Beispiel einen bestehenden Beitragstyp aktualisieren, um eine Block-Vorlage hinzuzufügen. Hier ist ein einfaches Beispiel:
…
function load_post_type_patterns() {
// Define an initial pattern for the 'HypnoToad' post type
$post_type_object = get_post_type_object( 'hypnoToad' );
$post_type_object->template = array(
array(
'core/block',
…
Eine weitere Möglichkeit ist, den default_content
Hook aufzurufen und den Block mit Markup zu definieren:
function toad_content( $content, $post ) {
if ( $post->post_type === 'hypnoToad' ) {
$content ='
<div class="is-layout-flex wp-container-1 wp-block-columns"><!-- wp:column →
<div class="wp-block-column">
<p></p>
</div>
<div class="is-layout-flow wp-block-column">
<p></p>
</div>
</div>
';
}
return $content;
}
add_filter( 'default_content', 'toad_content', 10, 2 );
Natürlich wirst du nicht nur JSON, HTML und PHP verwenden. Du wirst auch andere Sprachen verwenden, um das Design und die Interaktivität zu verbessern. Die gute Nachricht ist, dass WordPress dir eine unkomplizierte Möglichkeit bietet, dies zu tun.
Benutzerdefinierte CSS-Eigenschaften für deine Blöcke verwenden
Mit den vorhandenen Eigenschaften, Attributen und Objekten von theme.json
kannst du viel erreichen, aber das deckt nicht jeden Anwendungsfall ab. Die Datei gibt dir die Eigenschaft custom
an die Hand, mit der du relevante CSS-Eigenschaften erstellen kannst:
{
"version": 3,
"settings": {
"custom": {
"toad": "hypno"
}
}
}
Hier gibst du ein Schlüssel-Wert-Paar an, das am Frontend zu einer CSS-Variablen wird:
body {
--wp--custom--toad: hypno;
}
Beachte, dass die Variable doppelte Bindestriche verwendet, um ihre Elemente zu trennen. In der Regel siehst du immer --wp--custom--
, die dann den Schlüssel am Ende kennzeichnet. Manchmal definierst du Variablen und Eigenschaften mit Camel Case:
{
"version": 3,
"settings": {
"custom": {
"hypnoToad": "active"
}
}
}
In diesem Fall verwendet WordPress Bindestriche, um die Wörter zu trennen:
body {
--wp--custom--hypno-toad: active;
}
Zwischen der Eigenschaft custom
und block.json
hast du alle Möglichkeiten, deine Blöcke so zu gestalten, wie du es für richtig hältst, einschließlich aller Variationen, die du einbauen möchtest.
Ein kurzer Blick auf Block, Stil und Blockstilvariationen
Bevor wir uns der Gestaltung mit der Eigenschaft blocks
zuwenden, werfen wir einen Blick auf die Variationen. Es gibt verschiedene Variationen für deine Designs, und die Namenskonventionen könnten dazu führen, dass du den falschen Typ für deine Bedürfnisse verwendest. Hier ist eine Aufschlüsselung der Unterschiede:
- Blockvariationen. Wenn dein Block alternative Versionen hat (denk an einen Block, der viele benutzerdefinierte Links anzeigt, die vom Nutzer eingestellt wurden), ist dies eine Blockvariation. Der Social Media Block ist ein gutes Beispiel dafür.
- Stilvariationen. Dies sind alternative Versionen von
theme.json
, die auf deiner globalen Website funktionieren. Wir gehen hier nicht darauf ein, aber die meisten Block-Themes bieten sie für verschiedene Farbpaletten und Typografieeinstellungen an. - Block-Stilvariationen. Hier wird die Kernfunktionalität der Stilvariationen übernommen und du kannst alternative Designs für einen Block erstellen.
Du fragst dich vielleicht, ob du eine Blockvariation oder eine Blockstilvariation verwenden sollst; die Antwort ist ganz einfach. Wenn die Änderungen, die du vornehmen willst, innerhalb von theme.json
oder mit CSS erfolgen können, erstelle eine Blockstilvariation. Alles andere erfordert eine Blockvariation.
Blockvariationen
Blockvariationen registrierst du mit JavaScript. Es ist eine gute Idee, eine Datei im Verzeichnis des Themes zu erstellen, aber sie kann überall hingehen. Du brauchst nur eine Zeile, um eine Variation in deiner JavaScript-Datei zu registrieren:
const registerBlockVariation = ( blockName, variation )
Für blockName
musst du auch hier den Namespace angeben, wie bei der Eigenschaft blocks
. Innerhalb des variation
Objekts fügst du den Namen, den Titel, die Beschreibung, ob die Variation standardmäßig aktiv ist und mehr hinzu. Um die Datei im Site Editor zu laden, rufst du einfach den enqueue_block_editor_assets
Hook auf und reihst dein Skript darin ein.
Blockstilvariationen
Bei den Blockstilvariationen hast du zwei Möglichkeiten:
- Verwende die Funktion
register_block_style()
mit PHP. - Erstelle eine
block-editor.js
JavaScript-Datei, verwende dieregisterBlockStyle()
Funktion ähnlich wie bei Blockvariationen und reihe das Skript ein.
Sobald du eine Blockstilvariation registriert hast, kannst du den Block mit der Eigenschaft variations
ansteuern:
…
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"color": "var:preset|color|black",
"radius": "0",
"style": "solid",
"width": "3px"
},
…
Das bedeutet, dass du unter Umständen überhaupt kein benutzerdefiniertes CSS benötigst – fast jeder Aspekt der Gestaltung eines Blocks ist über die Eigenschaft blocks
möglich.
Die komplette Gestaltung eines Standardblocks mit der Eigenschaft blocks
Um zu zeigen, wie die Eigenschaft blocks
funktioniert, gehen wir ein Beispiel aus der Praxis durch. Unsere Website nutzt das Twenty Twenty-Four-Theme und verwendet die Standardstilvariante:
Bisher sieht das für uns ideal aus – obwohl die Überschriften und der Fließtext in der Farbe zu ähnlich erscheinen. Wir möchten eine oder beide Farben ändern, um sie voneinander zu unterscheiden. Als Endnutzer oder Website-Betreiber können wir dies in der Seitenleiste des Website-Editors ändern. Wenn du zu Blöcke > Überschrift gehst, kannst du auf das Element Text klicken und die Farbe in etwas Passenderes ändern:
Als Entwickler kannst du dies jedoch auch innerhalb von theme.json
tun. Wie bei jedem anderen Theme auch, ist es am besten, ein Child-Theme zu erstellen, damit alle Änderungen erhalten bleiben. Ein weiterer Vorteil ist, dass deine theme.json
Datei sauberer aussehen wird.
Wir werden ein Verzeichnis innerhalb von wp-content/themes/
erstellen und es twentytwentyfour-child
nennen. Hier fügst du eine gültige Datei style.css
und eine leere Datei theme.json
hinzu.
Von hier aus kannst du die JSON-Datei öffnen und dich an die Arbeit machen.
Eine theme.json-Datei für das Child-Theme erstellen und auffüllen
Der Hauptunterschied zwischen der Erstellung eines Parent- und eines Child-Themes in Bezug auf theme.json
ist die Struktur der Datei. Du musst das Schema nicht angeben und nicht unbedingt alles in das settings
Objekt einfügen. In unserem Fall müssen wir die Eigenschaft styles
verwenden:
{
"version": 3,
"styles": {
"blocks": {}
}
}
Als Nächstes müssen wir den Namespace und den Slug für den Heading Block finden. Der offizielle Core Blocks Reference Guide listet alle diese Angaben auf und sagt uns sogar, welche Attribute und Eigenschaften der Block unterstützt. Der Leitfaden sagt uns, dass wir die Werte background
, gradient
, link
und text
für die Eigenschaft color
anpassen können.
"blocks": {
"core/heading": {
"color": {}
}
}
Wenn die Struktur fertig ist, können wir uns überlegen, wie wir den Text umgestalten können.
Ein Farbschema finden und die Änderungen anwenden
Jetzt brauchen wir eine Farbe, die unseren Bedürfnissen entspricht. Die Standardvariante von Twenty Twenty-Four verfügt über eine hervorragende Farbpalette, und wenn wir sie in einem speziellen Kontrast-Checker überprüfen, bekommen wir einige Ideen:
Als Nächstes können wir die Farbauswahl für unseren Block zu theme.json
hinzufügen. Da das übergeordnete Twenty Twenty-Four-Theme benutzerdefinierte CSS-Eigenschaften verwendet, um Palettenstile zu definieren, können wir dies auch hier aufrufen:
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
…
Wenn du den Namen einer Palettenfarbe wissen willst, kannst du ihn im Site Editor über den Farbwähler finden:
Sobald du deine Änderungen gespeichert hast, aktualisiere deine Seite und du solltest das neue Farbschema sehen. Falls nicht, überprüfe, ob du die Eigenschaft blocks
im richtigen Objekt verschachtelt hast, denn das ist ein häufiger Fehler.
Wenn wir uns die Seite ansehen, ist der Text weniger kontrastreich und leichter zu lesen. Wir wollen aber immer noch eine gewisse Abgrenzung zwischen dem Absatzblock und den umgebenden Überschriften sehen. Die Standardpalette des Themes bietet einige andere, kräftige Farben. Wir werden die Farbe Accent / 3 für den Überschriftenblock ausprobieren:
"blocks": {
"core/heading": {
"color": { "text": "var(--wp--preset--color--accent-3)" }
},
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" }
}
}
Nachdem du die Änderungen gespeichert und das Frontend aktualisiert hast, wirst du sehen, dass der Überschriftenblock nun deutlicher zu erkennen ist:
Das muss noch nicht das Ende deiner Bearbeitung sein. Du kannst sogar die Optionen des Site Editors unter theme.json
anpassen.
Hinzufügen von Attributoptionen zu Blöcken
Die Optionen für die Blöcke im Site-Editor werden durch die Unterstützung der einzelnen Blöcke bestimmt. Beim Absatzblock zum Beispiel ist die Funktion der Initialen standardmäßig deaktiviert.
Wir können dies in der Datei theme.json
und der Eigenschaft blocks
wieder einschalten. Wenn wir uns das Referenzmaterial ansehen, können wir die Eigenschaft Typografie nutzen, um Initialisierungen zu aktivieren:
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
"typography": { "dropCap": true }
…
Sobald wir die Änderungen speichern und den Editor aktualisieren, steht dir die Option zum Aktivieren von Kapitälchen wieder zur Verfügung:
Die Datei theme.json
ist nicht nur eine Konfigurationsdatei für das Design. Sie kann auch dabei helfen, Funktionen zum Site-Editor hinzuzufügen oder zu entfernen.
Wie das Managed Hosting von Kinsta deine WordPress-Theme-Entwicklung unterstützen kann
Die Feinheiten der Theme-Entwicklung und theme.json
sind auf hochwertige Lösungen in der gesamten Entwicklungskette angewiesen, um das Potenzial für eine verbesserte Leistung auszuschöpfen.
Eine lokale Entwicklungsumgebung ist von entscheidender Bedeutung, denn so kannst du WordPress-Websites auf deinem lokalen Rechner erstellen, verwalten und daran herumschrauben. DevKinsta kann dir dabei helfen.
DevKinsta bietet viele Vorteile:
- Es läuft auf Docker-Containern, was bedeutet, dass du deine Installation vom Rest deines Rechners isolierst. So kannst du deine
theme.json
Konfigurationen und benutzerdefinierten Blöcke in aller Ruhe testen. - Du kannst schnell Änderungen an deiner
theme.json
Datei vornehmen und die Ergebnisse sofort in deiner lokalen Umgebung sehen. - Es ist ein Kinderspiel, mehrere lokale Websites zu erstellen, um dein Theme mit verschiedenen WordPress-Versionen und -Konfigurationen zu testen.
Außerdem beanspruchst du keine Ressourcen deines Servers, bis du zufrieden bist und fertig bist. Die Staging-Umgebungen von Kinsta sind ein idealer nächster Schritt. Du kannst schnell eine Kopie deiner Produktionsseite erstellen und sie sogar auf deine lokale Umgebung herunterziehen, um weiter zu arbeiten.
Dies ist eine großartige Möglichkeit, die Leistung deines Themes zu testen, vor allem, wenn du die Staging-Umgebung mit dem Application Performance Monitoring (APM) von Kinsta kombinierst.
Du kannst auch die Git-Integration von Kinsta für alle deine Umgebungen nutzen. So kannst du Änderungen in die Repos schieben und von dort aus bereitstellen.
Zusammenfassung
Das Verständnis der blocks
Eigenschaft in theme.json
ist ein essentieller Schritt für alle Theme-Entwickler. Damit kannst du ein globales Design einzigartiger, kohärenter und relevanter machen. Die Möglichkeit, mit individuellen Core- und Custom-Block-Einstellungen zu arbeiten, hilft jedem Nutzer, die Möglichkeiten der vollständigen Website-Bearbeitung zu nutzen. Außerdem bedeutet die Verfügbarkeit dieser Optionen im Seiteneditor, dass die Endnutzer ihre eigenen Änderungen ohne Code vornehmen können, während du stellare Standardoptionen präsentierst.
Hast du noch Fragen zur Verwendung der Eigenschaft blocks
mit der Datei theme.json
? Stelle deine Fragen einfach in den Kommentaren unten!
Schreibe einen Kommentar