Zo werk je met properties en key value pairs in theme.json

Het begrijpen van de structuur en properties van het theme.json bestand is fundamenteel bij het ontwikkelen van blokkenthema’s. Dit bestand dient immers als de primaire configuratiehub voor alle op blokken gebaseerde thema’s.

Of je nu een nieuw thema bouwt, een bestaand thema aanpast, een stijlvariant ontwikkelt of aan een childthema werkt, begrijpen hoe je met theme.json moet werken is essentieel.

Gelukkig is JSON (JavaScript Object Notation) een menselijk leesbare indeling met een hiërarchische structuur die informatie organiseert van algemene naar specifieke properties. In de context van theme.json is bekendheid met Cascading Style Sheets (CSS) relevanter dan diepgaande kennis van JavaScript.

In dit artikel worden de primaire en secundaire (nested) properties in een theme.json bestand uitgesplitst, waarbij de nadruk ligt op de belangrijkste instellingen en style properties. Dit zijn namelijk de kernelementen van het bestand en we geven gedetailleerde uitleg en codevoorbeelden voor elke property.

We bouwen voort op de basis die we hebben gelegd in ons vorige artikel, Zo profiteer je van de kracht van theme.json: customize je WordPress thema als een pro en dan met name uit het gedeelte Werken met properties van het theme.json bestand.

Hoe stijlen worden weergegeven in een blokthema

WordPress gebruikt een ingebouwd cascadeproces om stijlen voor een site te renderen. Wanneer meerdere bronnen dezelfde instelling of stijl definiëren, moet WordPress bepalen welke voorrang heeft. Hieronder staat de rangorde die WordPress volgt om te bepalen welke stijlen worden toegepast:

1. WordPress core – Het fallback theme.json bestand staat in de wp-includes map. Dit bestand wordt bijgewerkt met grote releases van WordPress en moet niet worden bewerkt.
2. Thema – Het primaire theme.json bestand dat wordt gebruikt door thema-ontwikkelaars om de instellingen, stijlen en andere properties van het thema te definiëren.
3. Stijlvariaties – Als een thema stijlvariaties bevat, heeft elk zijn eigen theme.json bestand dat is opgeslagen in de styles subdirectory van het thema.
4. Childthema – Net als bij klassieke thema’s kan een childthema een parentthema wijzigen zonder de bestanden te wijzigen (optioneel).
5. Childthema stijlvariaties – Net als bij gewone stijlvariaties kan een childthema zijn eigen theme.json bestand hebben in zijn styles subdirectory (optioneel).
6. Door de gebruiker gemaakte stijlen – Dit zijn custom stijlen die zijn toegevoegd door WordPress editors (voor pagina’s, berichten of de site als geheel) en opgeslagen in de database.

De cascadevolgorde zorgt ervoor dat stijlen van bronnen met een hogere prioriteit die van bronnen met een lagere prioriteit overschrijven. Instellingen in het bestand theme.json van het thema zullen bijvoorbeeld de core WordPress theme.json overschrijven. Op dezelfde manier zal de stijlvariatie van een childthema voorafgaan aan de stijlvariatie van het parentthema.

Door de gebruiker gemaakte stijlen (6) hebben de hoogste prioriteit en hebben voorrang op alle andere stijlen in de cascade.

In dit artikel richten we ons op het bestand theme.json in de hoofdmap van elk WordPress blokthema.

Een referentie voor primaire properties en hun key waarden

Laten we eens kijken naar de zeven objecten op het hoogste niveau in theme.json, die we hebben gegroepeerd in drie secties om de informatie gemakkelijker te begrijpen te maken.

Een paar definities voordat we beginnen

Bij het werken met theme.json zul je waarschijnlijk verschillende definities vinden voor belangrijke componenten. Voor de duidelijkheid volgt hier hoe we ze in dit artikel definiëren:

1. Secties – Groeperingen van opties op het hoogste niveau (in sommige artikelen ook wel “objecten op het hoogste niveau” genoemd).
2. Objecten – De primaire elementen in het theme.json bestand, zoals settings en styles.
3. Properties – De componenten binnen objecten. Het settings object bevat bijvoorbeeld 12 verschillende properties.
4. Key value pairs – Properties zijn opgebouwd uit key value pairs. Een “key” vertegenwoordigt een property en staat tussen aanhalingstekens. Een “value” kan een booleaanse, string of array zijn.

Wanneer we het hebben over “standaard”, verwijzen we naar de standaardconfiguraties in het corebestand theme.json, te vinden op wp-includes/theme.json.

“Gebruikers” verwijst naar iedereen die de WordPress Admin gebruikt en instellingen kan wijzigen in de site-, pagina- of posteditors.

Syntax overzicht

1. Booleans staan niet tussen aanhalingstekens.
2. Strings staan tussen dubbele aanhalingstekens.
3. Arrays staan tussen vierkante haken [].
4. Objecten worden omsloten door accolades {}, die meerdere properties of nested objecten bevatten.
5. Komma’s worden gebruikt om meerdere key value pairs binnen een object te scheiden.

Hier is een voorbeeld van een typische syntaxis:

{
    "house": {
        "rooms": "kitchen"
    }
}

De properties groeperen

We hebben de properties georganiseerd in drie secties om het navigeren te vergemakkelijken:

1. Basisproperties
2. Instellingen en stijlen
3. Properties voor templates en patterns

Om de voorbeelden te vereenvoudigen, hebben we soms de buitenste objectwrappers weggelaten. In plaats van de hele structuur te laten zien:

{
    "settings": {
        "appearanceTools": false,
        "background": {
            "backgroundImage": true
        }
    }
}

We zouden het kunnen inkorten tot:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Basic properties

Aan het begin van een theme.json bestand staan meestal twee belangrijke properties: $schema en version. Deze properties worden meestal bovenaan het bestand geplaatst. De huidige schemaversie is 3, geïntroduceerd met WordPress 6.6.

"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3

Instellingen en stijlproperties

Als je bekend bent met klassieke thema’s, beschouw de instellingen-property dan als properties en functies die over het algemeen worden ingesteld in het functions.php bestand en worden weergegeven in de Appearance > Custom sectie van de WordPress admin.

Stijlen, aan de andere kant, zijn vergelijkbaar met de CSS properties die vroeger in het styles.css bestand stonden en die de layout en het ontwerp van het thema regelen.

Instellingen

Behalve de properties block en elements zijn alle andere instellingen globaal. Omdat veel van deze instellingen booleans zijn, fungeren ze als toggles om een UI feature in of uit te schakelen.

Het is belangrijk op te merken dat niet alle keys in elke context van toepassing zijn. Het is bijvoorbeeld niet mogelijk om gebruikers een minimale hoogte voor een alinea in te laten stellen.

Appearance tools

Deze instellingen kunnen collectief of individueel worden ingeschakeld met "appearanceTools": true.

Door deze functie in te schakelen worden verschillende UI opties in de WordPress editor zichtbaar, wat ontwikkelaars tijd bespaart. Standaard zijn deze tools uitgeschakeld ("appearanceTools": false).

Keys binnen appearanceTools zijn onder andere:

• background
  • backgroundImage – Hiermee kan de gebruiker een achtergrondafbeelding aan blokken toevoegen.
  • backgroundSize – Definieert hoe de achtergrondafbeelding wordt geschaald (bedekken, insluiten, enz.).
• border
  • color – Maakt kleurselectie voor randen mogelijk.
  • style – Hiermee kan de gebruiker de stijl van de rand kiezen (effen, gestreept, gestippeld, enz.).
  • width – Bepaalt de dikte van de rand.
  • radius – Hiermee kunnen gebruikers afgeronde hoeken instellen door de straal van de rand aan te passen.
• color
  • link – Maakt het mogelijk om een kleur in te stellen voor links binnen de inhoud.
  • heading – Hiermee kunnen gebruikers kleuren definiëren voor heading-tags (<h1>, <h2>, enz.).
  • button – Bepaalt de kleur van knoppen in het thema.
  • caption – Maakt het mogelijk een custom kleur in te stellen voor bijschriften.
• dimensions
  • aspectRatio – Laat gebruikers de breedte-hoogte verhouding van blokken bepalen.
  • minHeight – Hiermee kan een minimale hoogte voor blokken worden ingesteld.
• position
  • sticky – Hiermee kan de gebruiker een blok sticky maken, wat betekent dat het op zijn plaats blijft tijdens het scrollen.
• spacing
  • blockGap – Bepaalt de afstand tussen blokken.
  • margin – Hiermee kunnen gebruikers de marges rond een blok aanpassen.
  • padding – Bepaalt de opvulling binnen een blok, de ruimte tussen de inhoud en de rand.
• typography
  • lineHeight – Hiermee kunnen gebruikers de regelhoogte (ruimte tussen regels tekst) aanpassen voor een betere leesbaarheid.

Voorbeeld: Als je wilt dat gebruikers een achtergrondafbeelding toevoegen terwijl andere appearance tools uitgeschakeld blijven, gebruik je:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Blocks

Met de property blocks kunnen gebruikers instellingen per blok inschakelen, die globale instellingen kunnen overschrijven.

Voorbeeld: Als appearanceTools is ingesteld op false, maar je wilt toch randcontrols voor een blok laten zien, gebruik dan:

"border": {
    "color": true,
    "style": true,
    "width": true,
    "radius": true
}

Color

Met deze property kunnen gebruikers kleuropties instellen zoals achtergrondkleur, tekstkleur of kleurverlopen.

Keys binnen de property color:

• background – Regelt de achtergrondkleur van blokken of elementen.
• custom – Schakelt de mogelijkheid voor gebruikers in of uit om customkleuren te selecteren.
• customDuotone – Hiermee kunnen gebruikers custom duotoonfilters toepassen op afbeeldingen.
• customGradient – Schakelt custom verloopopties in.
• defaultDuotone – Geeft standaard duotoon afbeeldingsfilteropties.
• defaultGradient – Definieert de standaard verloopopties die beschikbaar zijn voor gebruikers.
• defaultPalette – Bepaalt het standaard kleurenpalet voor het thema.
• duotone – Maakt duotone filters op afbeeldingen mogelijk.
• gradient – Schakelt verloopopties in voor achtergronden of andere elementen.
• link – Stelt de kleur in voor links in het thema.
• text – Bepaalt de opties voor tekstkleuren.
• heading – Stelt kleuren in voor koppen (bijv. h1, h2, enz.).
• button – Bepaalt de kleuropties voor knoppen.
• caption – Stelt de bijschriftkleur voor media-elementen in.

Laten we een paar voorbeelden bekijken:

Voorbeeld 1: Als je de kleurenkiezer voor gebruikers wilt uitschakelen, kun je het volgende gebruiken:

"color": {
    "custom": false
}

Voorbeeld 2: Om custom primaire en secundaire themakleuren in te stellen, kun je deze configuratie gebruiken:

"color": {
   "palette": [
       { "slug": "primary", "color": "#0000ff", "name": "Primary" },
       { "slug": "secondary", "color": "#ff0000", "name": "Secondary" }
   ]
}

Dimensions

Deze property biedt opties om blokafmetingen te regelen, zoals breedte, hoogte en beeldverhouding.

Keys binnen de property dimensions:

• aspectRatio – Stelt gebruikers in staat om de beeldverhouding van een blok in te stellen of te tonen (bijv. 16:9, 4:3).
• defaultAspectRatios – Definieert standaard hoogte-breedteverhoudingen voor blokken.
• minHeight – Maakt het mogelijk om een minimale hoogte voor blokken in te stellen.

Om gebruikers bijvoorbeeld toe te staan een minimale hoogte in te stellen voor ondersteunde blokken, gebruik je het volgende:

"dimensions": {
    "minHeight": true
}

Layout

Met de property layout kunnen gebruikers lay-outgerelateerde opties instellen, zoals de breedte van de inhoud en of gebruikers de lay-out kunnen aanpassen. Hiermee kunnen gebruikers opmaakopties instellen met deze keys:

• contentSize – Stelt de standaardbreedte van blokken in .
• wideSize – Bepaalt de breedte van blokken wanneer de optie brede uitlijning is geselecteerd.
• allowEditing – Bepaalt of gebruikers opmaakopties kunnen bewerken.
• allowCustomContentAndWideSize – Maakt het aanpassen van contentSize en wideSize mogelijk .

Voorbeeld: Opmaakinstellingen configureren met standaard en brede blokbreedtes:

"layout": {
    "contentSize": "620px",
    "wideSize": "1000px"
}

Lightbox

Met de property lightbox kunnen gebruikers de functie “Uitvouwen bij klikken” inschakelen voor afbeeldingen, waardoor ze in een grotere weergave worden geopend wanneer erop wordt geklikt.

Sleutels binnen de property lightbox:

• enabled – Schakelt de Lightbox-functie in of uit.
• allowEditing – Hiermee kunnen gebruikers de lightbox-instelling omschakelen.

Voorbeeld: Om gebruikers toe te staan de Lightbox-functie voor afbeeldingen aan te zetten, gebruik je deze configuratie:

"blocks": {
    "core/image": {
        "lightbox": {
            "allowEditing": true
        }
    }
}

Position

Met de property position kunnen gebruikers de positie van blokken bepalen, zoals het sticky maken van een blok op de pagina.

Voorbeeld: Maak een blok sticky:

"position": {
    "sticky": true
}

Shadow

Met deze property kunnen gebruikers schaduweffecten toepassen op blokken, door vooraf gedefinieerde voorinstellingen of zelf gedefinieerde schaduwen te gebruiken.

Keys binnen de property shadow:

• defaultPresets – Schakelt standaard presetting voor schaduwen in of uit.
• presets – Stelt gebruikers in staat om custom voorinstellingen voor schaduwen te definiëren.

Hier is een voorbeeld waarbij standaard schaduwen zijn uitgeschakeld en een custom schaduw met de naam “Natural” is gedefinieerd:

"shadow": {
    "defaultPresets": false,
    "presets": [
        { "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }
    ]
}

De nummers geven de klikstappen in de Site Editor aan om de UI te demonstreren. De laatste stap toont de “Natural” schaduw.

Spacing

Deze property definieert hoe de spatiëring (opvulling, marge, tussenruimte) wordt geregeld in de editor.

Keys binnen de property spacing:

• blockGap – Regelt de ruimte tussen blokken.
• margin – Stelt gebruikers in staat om marges rond blokken in te stellen.
• padding – Geeft opties om opvulling binnen blokken in te stellen.
• units – Definieert de beschikbare eenheden voor spatiëring (bijv. px, rem).
• customSpacingSize – Stelt gebruikers in staat om custom afstanden in te stellen.
• spacingSizes – Definieert een reeks vooraf ingestelde spatiëringsmaten.
• spacingScale – Maakt het mogelijk om afstandseenheden te schalen.

Voorbeeld: Om gebruikers te beperken tot twee maateenheden (pixels en rem) voor opvulling, marges, breedtes en hoogtes en om de afstandsbesturingselementen zichtbaar te maken in de site-editor, stel je appearanceTools in op true en configureer je als volgt:

"spacing": {
    "units": ["px", "rem"]
}

Typography

Deze property bepaalt de tekstgerelateerde instellingen voor je thema, zoals lettergrootte, lettergewicht en regelhoogte.

Keys binnen de property typography:

• defaultFontSizes – Definieert de standaard lettergroottes die beschikbaar zijn voor gebruikers.
• customFontSize – Schakelt de mogelijkheid in of uit om custom lettergroottes in te stellen.
• fontStyle – Bepaalt de stijl van het lettertype (bijv. normaal, cursief).
• fontWeight – Hiermee kunnen gebruikers het gewicht van het lettertype instellen (bijvoorbeeld vet, licht).
• fluid – Maakt vloeiende typografie mogelijk , waarbij de lettergrootte dynamisch wordt aangepast aan de schermgrootte.
• letterSpacing – Bepaalt de ruimte tussen letters.
• lineHeight – Bepaalt de hoogte van elke regel tekst.
• fontStyle – Controle over de uitlijning van tekst (bijvoorbeeld links, midden, rechts).
• textDecoration – Geeft opties voor tekstdecoratie (bijvoorbeeld onderstrepen).
• writingMode – Stelt de schrijfmodus voor de tekst in (bijvoorbeeld horizontaal of verticaal).

Voorbeeld: Om zowel custom lettergroottes als ropCap opties uit te schakelen, gebruik je het volgende:

"typography": {
    "customFontSize": false,
    "dropCap": false
}

In dit geval verschijnen beide gemarkeerde keys niet in de editor.

Root padding aware alignments

Wanneer deze property is ingesteld op true, zorgt deze ervoor dat brede of volledige blokuitlijningen zich bewust zijn van de opvulling die is toegepast op het basiselement van de pagina (bijv. <html> of <body>), waardoor de juiste uitlijning wordt gegarandeerd, zelfs wanneer opvulling wordt toegepast.

Voorbeeld:

"useRootPaddingAwareAlignments": true

Wanneer deze is ingesteld op true, moet je ook de waarden voor de opvulling boven, rechts, onder en links van de root definiëren als stijl. (Meer over stijlproperties hieronder).

"spacing": {
    "padding": {
        "top": "0",
        "right": "100px",
        "bottom": "0",
        "left": "100px"
    }
}

Het toepassen van de useRootPaddingAwareAlignements instelling samen met de rechter en linker padding op de body (zoals in de bovenstaande code) resulteert in het volgende.

Styles

Met de property styles kun je CSS-stijlen toepassen op de root (standaard), specifieke elementen of individuele blokken in je thema.

Achtergrond stijlen

Je kunt achtergrond-gerelateerde properties regelen, zoals afbeeldingen, positionering en bijlagen.

Algemene keys voor achtergrond:

• backgroundImage – Definieert de achtergrondafbeelding voor het blok of element.
• backgroundPosition – Stelt de positie van de achtergrondafbeelding (bijv. midden, rechtsboven).
• backgroundRepeat – Geeft aan of de achtergrondafbeelding wordt herhaald (bijv. herhalen, niet herhalen).
• backgroundSize – Bepaalt de grootte van de achtergrondafbeelding (bijv. omslag, bevatten).
• backgroundAttachment – Geeft aan of de achtergrondafbeelding vast staat of met de pagina mee scrolt.

Je kunt bijvoorbeeld een achtergrondafbeelding voor je thema instellen:

"background": {
   "backgroundImage": {
       "url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png"
   }
}

Specifieke stijlen blokkeren

Je kunt specifieke stijlen, zoals schaduw, typografie en randen, toepassen op afzonderlijke blokken.

Keys voor rand:

• color – Definieert de kleur van de rand.
• radius – Stelt de straal van de rand in voor afgeronde hoeken.
• style – Specificeert de stijl van de rand (bijvoorbeeld effen, gestippeld).
• width – Bepaalt de breedte van de rand.
• top, right, bottom, left – Hiermee kun je individuele randstijlen voor elke zijde instellen.

Het volgende stelt bijvoorbeeld een stevige rode rand van 20px in rond de hele pagina:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Je kunt ook custom CSS toewijzen aan een specifiek blok, element of de root.
De code hieronder past bijvoorbeeld een rode tekstkleur toe op een tabelblok:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Kleurstijlen

Met de color property kun je de achtergrond-, kleurverloop- en tekstkleurinstellingen regelen.
Keys voor color:

• background – Stelt de achtergrondkleur van het blok of element in.
• gradient – Definieert een achtergrondverloop voor het blok.
• text – Bepaalt de kleur van de tekst.

Het onderstaande voorbeeld stelt een zwarte achtergrond met witte tekst in op elk element voor elke pagina:

"color": {
   "background": "#000000",
   "text": "#ffffff"
}

CSS

Met de property css kun je custom stijlen koppelen aan specifieke klassen, waardoor je meer controle hebt over de themastijlen.

Voorbeeld: Pas custom stijlen toe op wp-block-template-parts en wp-block-button, en voeg een hover-effect toe voor de knop:

"css": ".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }"

Zoals je kunt zien, hebben de template parts voor de header en footer de stijlen background-color en padding toegewezen gekregen, terwijl de hover-status voor de knop een witte achtergrond met zwarte tekst heeft.

Dimensions

Met de property dimensions kun je de breedte, hoogte en beeldverhouding van blokken bepalen.

Keys voor afmetingen:

• aspectRatios – Definieert custom hoogte-breedteverhoudingen voor elementen.
• minHeight – Stelt de minimale hoogte voor blokken in.

Voorbeeld: Maak een custom hoogte-breedteverhouding van 3:7 voor een afbeeldingsblok:

"blocks": {
   "core/image": {
       "dimensions": {
           "aspectRatio": "custom"
       }
   }
}

Het bovenstaande alleen is echter niet voldoende. Je moet de “custom” stijl registreren in de instellingensecties.

"dimensions": {
   "defaultAspectRatios": true,
   "aspectRatios": [
       {
           "name": "Custom Ratio 3:7",
           "slug": "custom",
           "ratio": "3/7"
       }
   ]
}

Hier kun je zien dat de optie “Custom Ratio” is toegevoegd. Als je liever de zeven standaard beeldverhoudingen verwijdert, verwijder dan "defaultAspectRatios":true uit de instellingensectie.

Elements specifieke stijlen

Met de property elements kun je stijlen toepassen op specifieke HTML-elementen zoals links, knoppen of koppen.

De onderstaande code schakelt bijvoorbeeld tekstdecoratie (onderstrepen) uit voor alle links:

"elements": {
   "link": {
       "typography": {
           "textDecoration": "none"
       }
   }
}

Filter

Met de property filter kun je CSS-achtige filtereffecten (bijv. vervagen, helderheid) toepassen op bepaalde blokken zoals afbeeldingen.

Voorbeeld: Pas een vervaging- en helderheidsfilter toe op een afbeeldingsblok:

"blocks": {
   "core/image": {
       "filter": {
           "duotone": "blur(5px) brightness(0.8)"
       }
   }
}

Hier zijn vervagende en helderheidseffecten toegepast op het afbeeldingsblok. Andere beschikbare filterwaarden zijn:

• contrast – Past het contrast van het element aan .
• grayscale – Converteert het element naar grijswaarden.
• invert – Inverteert de kleuren van het element.
• opacity – Regelt de transparantie van het element.
• saturate – Verhoogt of verlaagt de verzadiging van kleuren.
• sepia – Past een sepiatoon toe op het element.

Outline

De property outline definieert stijlen voor contouren die buiten de rand van het element worden getekend, zonder de opmaakruimte te beïnvloeden.

Keys voor contour:

• color – Stelt de kleur van de contour in .
• offset – Bepaalt de ruimte tussen de rand en de contour.
• style – Bepaalt de stijl van de omtreklijn (bv. gestippeld, effen).
• width – Bepaalt de breedte van de contour.

Voorbeeld: Pas een rode gestippelde contour toe op een knop:

"elements": {
   "button": {
       "outline": {
           "color": "#ff0000",
           "style": "dotted",
           "width": "4px"
       }
   }
}

Shadow stijlen

Met de property shadow kun je boxschaduwen toepassen op blokken, waardoor je diepte en nadruk toevoegt aan elementen.

Voorbeeld: Pas een schaduw toe op alle afbeeldingen:

"blocks": {
   "core/image": {
       "shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)"
   }
}

Spacing stijlen

De property spacing beheert de opvul-, marge- en blokafstandstijlen voor je thema.

Keys voor spatiëring:

• blockGap – Regelt de ruimte tussen blokken.
• margin – Stelt de marges rond blokken in .
• padding – Regelt de opvulling binnen blokken.

Dit voorbeeld hieronder stelt custom opvulling in aan de linker- en rechterkant:

"spacing": {
   "padding": {
       "left": "min(6.5rem, 8vw)",
       "right": "min(6.5rem, 8vw)"
   }
}

Typography stijlen

De property typography beheert lettertypestijlen, -groottes en andere tekstgerelateerde instellingen.

Veelgebruikte toetsen voor typografie:

• fontFamily – Stelt de lettertypefamilie voor de tekst in .
• fontSize – Bepaalt de lettergrootte.
• fontStyle – Bepaalt de stijl van het lettertype (bijvoorbeeld cursief, normaal).
• fontWeight – Bepaalt het gewicht (dikte) van het lettertype.
• letterSpacing – Past de ruimte tussen letters aan .
• lineHeight – Bepaalt de regelhoogte (afstand tussen regels tekst).
• textAlign – Stelt de tekstuitlijning in (bijvoorbeeld links, midden, rechts).
• textColumns – Bepaalt het aantal tekstkolommen.
• textDecoration – Stelt de tekstdecoratie in (bijvoorbeeld onderstrepen).
• writingMode – Bepaalt de schrijfmodus (bijvoorbeeld horizontaal, verticaal).
• textTransform – Bepaalt de transformatie van tekst (bijv. hoofdletters, kleine letters).

Je kunt bijvoorbeeld instellen dat alle koppen een font-weight van 300 en een italic stijl hebben:

"blocks": {
   "core/heading": {
       "typography": {
           "fontWeight": "300",
           "fontStyle": "italic"
       }
   }
}

Properties voor templates en patterns

Deze drie properties op het hoogste niveau worden gebruikt om custom elementen in je thema te registreren.

1. Custom templates

De property templates wordt gebruikt om custom templates te registreren voor verschillende posttypes.

• name – De naam van het bestand .html of .php in de subdirectory templates.
• title – De titel die wordt toegewezen aan de template om identificatie te vergemakkelijken.
• postTypes – Specificeert het type inhoud (bijv. berichten, pagina’s) waarvoor de template wordt gebruikt.

2. Template parts

De property templateParts wordt gebruikt om herbruikbare onderdelen van templates te definiëren (bijv. kop- en voetteksten).

• name – De naam van het bestand .html of .php in de subdirectory parts.
• title – De titel die aan het template part wordt gegeven om identificatie te vergemakkelijken.
• area – Specificeert op welk deel van de pagina het template part van toepassing is (bijv. header, footer, sidebar).

3. Patterns

Met de property patterns kun je een reeks pattern slugs registreren uit de WordPress Patterns Directory, zodat ze beschikbaar worden in het thema.

Zo registreer je een pattern:

"patterns": [
    "my-custom-pattern-slug"
]

Drie praktische voorbeelden van het werken met theme.json

Hier zijn een paar dingen die je misschien zou willen doen voor een thema dat je aan het ontwikkelen bent.

1. Een pattern toevoegen

Hier zie je hoe je twee pattern uit de WordPress Patterns Directory kunt toevoegen. Hier zie je het pattern “Fullscreen Cover Image Gallery”:

"patterns": [
   "fullscreen-cover-image-gallery",
   "hero-banner-with-overlap-images"
]

Opmerkingen:

• Patronen uit de map Patterns worden niet weergegeven in de Pattern sectie van de site-editor. Deze patterns zijn alleen beschikbaar via de Inserter.
• In dit voorbeeld nemen we de top-level property patterns op (vergeleken met settings en styles, die we in eerdere voorbeelden kortheidshalve hebben weggelaten).

2. Een eigen lettertype toevoegen

We hebben twee lettertypebestanden (Roboto-Regular.ttf en Roboto-Bold.ttf) gedownload uit de Google Fonts bibliotheek en geüpload naar de assets/fonts/ subdirectory van ons thema.

De volgende code registreert beide lettertypen en maakt ze beschikbaar voor de hele site:

"settings": {
   "typography": {
       "fontFamilies": [
           {
               "fontFamily": "Roboto",
               "name": "Roboto",
               "slug": "roboto",
               "fontFace": [
                   {
                       "fontFamily": "Roboto Regular",
                       "fontWeight": "400",
                       "fontStyle": "normal",
                       "src": [
                           "file./assets/fonts/Roboto-Regular.ttf"
                       ]
                   },
                   {
                       "fontFamily": "Roboto Bold",
                       "fontWeight": "700",
                       "fontStyle": "bold",
                       "src": [
                           "file./assets/fonts/Roboto-Bold.ttf"
                       ]      
                   }  
               ]
           }
       ]
   }
}

3. Je kleurenpalet instellen

Als je je gebruikers wilt beperken tot een specifiek kleurenpalet, kun je dat als volgt instellen. (Kleurverlopen en duotonen kunnen ook worden ingesteld volgens jouw specificaties).

Voorbeeld:

"settings": {
   "color": {
       "custom": false,
       "defaultPalette": false,
       "palette": [
           {
               "slug": "primary",
               "color": "#1e8cbe",
               "name": "Primary"
           },
           {
               "slug": "secondary",
               "color": "#21759b",
               "name": "Secondary"
           },
           {
               "slug": "tertiary",
               "color": "#",
               "name": "Tertiary"
           },
           {
               "slug": "accent",
               "color": "#464646",
               "name": "Accent"
           }
       ]
   }
}

Herken je deze vier kleuren? Ze maken deel uit van de branding van WordPress.

Samenvatting

Dit artikel belicht de centrale rol van theme.json in de moderne ontwikkeling van WordPress thema’s. Door theme.json te beheersen, kun je het visuele ontwerp en de gebruikersinterface van je thema volledig aanpassen zonder ingewikkelde PHP of CSS overschrijvingen.

Als je weet hoe je properties zoals appearanceTools effectief kunt gebruiken, krijg je meer controle en efficiëntie bij het bouwen of finetunen van WordPress thema’s, waardoor dit bestand een essentieel hulpmiddel is voor ontwikkelaars die flexibele, gebruiksvriendelijke thema’s willen maken.