WordPress 5.0 is om de hoek en velen van ons voelen zich op hetzelfde moment enthousiast en bezorgd. Gutenberg brengt een grote verandering teweeg in de manier waarop we WordPress gebruiken en er is zeker enige bezorgdheid over wat er met onze websites zal gebeuren als we onze installaties updaten zonder het eerst te testen. Maar maak je geen zorgen, we hebben een blog over hoe je de Gutenberg WordPress Editor kunt uitschakelen (zelfs als het slechts tijdelijk is) om te voorkomen dat niet-ondersteunde thema’s en plugins onze websites breken.
Je zult er misschien versteld van staan dat we WordPress 5.0 al gebruiken. Eigenlijk doen we dat al! Zoals Matt zei op Make WordPress blog:
Als we de 5.0-release strikt houden op 4.9.8 + Gutenberg, zullen we een release hebben die zowel groot als een non-event is in termen van nieuwe code. Het is allemaal beproefd voor de strijd. In sommige opzichten is 5.0 al de facto in het wild, met sommige vooruitkijkende hosts die Gutenberg al installeren en activeren voor nieuwe installaties.
Dit betekent dat we al WordPress 5.0 op onze servers hebben staan: het is gewoon WordPress 4.9.8, met Gutenberg in de kern. Eigenlijk is dat niet alles, want WordPress 5.0 wordt geleverd met een extra item, het gloednieuwe Twenty Nineteen standaard thema.
Dus laten we eens kijken naar wat er nieuw is.
- Over Gutenberg en Twenty Nineteen
- Twenty Nineteen installeren
- De look and feel van Twenty Nineteen
- Theming voor Gutenberg: de ontwikkelaars aanpak
Over Gutenberg en Twenty Nineteen
Sommigen van jullie houden misschien niet van Gutenberg. Bovendien is het debat over de nieuwe editor nog lang niet voorbij, maar houd rekening met de beoogde reikwijdte van Gutenberg:
Deze aangepaste blokken veranderen hoe gebruikers, ontwikkelaars en hosts omgaan met WordPress voor het eenvoudiger en intuïtiever maken van rijke web content, het democratiseren van publiceren en werken voor iedereen, ongeacht technische vaardigheden.
Dit is waar Gutenberg naar streeft, en Twenty Nineteen brengt dit een stap voorwaarts, gebouwd met en voor Gutenberg. Het is een minimaal, op typografie gebaseerd blogging thema met een lay-out met één kolom en kan worden gebruikt om een breed scala aan websites te bouwen, van persoonlijke blogs tot websites voor kleine bedrijven.
Het schrijven over Twenty Nineteen betekent meestal dat we over Gutenberg schrijven. In Twenty Nineteen kunnen gebruikers van Gutenberg niet alleen rijke inhoud maken, maar zelfs hun hele website in de editor bouwen. Volgens Allan Cole op Make WordPress blog:
Gutenberg verleent gebruikers een ongeëvenaarde mate van vrijheid om de lay-out en het ontwerp van hun site aan te passen. Om hun visie volledig te realiseren, hebben gebruikers een nieuwe generatie flexibele thema’s nodig, gebouwd om te profiteren van de creatieve vrijheid die Gutenberg biedt.
Met dat in gedachten zal WordPress 5.0 worden gelanceerd met een gloednieuw standaard thema: Twenty Nineteen
In het Twenty Nineteen-thema is Gutenberg meer dan een content builder, het is een site builder en WordPress-gebruikers mogen hun hele website bouwen met behulp van blokken. En als Gutenberg nog niet je ding is, voegen de meeste van de populaire plugins voor paginabuilders ook ondersteuning toe voor Gutenberg.
(Voorgestelde lectuur: een inleiding tot het Twenty Twenty-thema)
Twenty Nineteen Installeren
Twenty Nineteen zou het releaseplan van de nieuwe versie van WordPress major moeten volgen. WordPress 5.0 zou echter op 19 november uitgebracht moeten worden en het is mogelijk dat een werkende versie van Twenty Nineteen op die datum nog niet klaar is. Bekijk alle mogelijke releasedatums voor WordPress 5.0. Hoe dan ook, het thema is beschikbaar om te downloaden op Github en blijft daar totdat het is samengevoegd in de kern.
Twenty Nineteen is gebaseerd op zowel he _s als het Gutenberg-starter-thema en wordt geleverd met Sass erin. Zodra je het .zip-pakket hebt, pak je het thema uit en upload/verplaats je de themamap naar de map /wp-content/themes van je ontwikkelingsinstallatie. Je kunt het thema ook uploaden vanuit je WordPress-dashboard.
Kinsta klanten kunnen het op hun staging-omgevingen installeren. Als jij niet met Kinsta werkt, kan je het op jouw lokale computer installeren.
De look and feel van Twenty Nineteen
De lay-out met één kolom benadrukt de inhoud en de beste pasvorm voor blokken met volledige en brede breedte. Het thema ondersteunt nu een footer zijbalk en wordt geleverd met drie navigatiemenu’s: het hoofdmenu en het sociale links menu, beide geplaatst in de pagina header, en het Footer menu in de footer.
De blogpagina ziet eruit als een gewone blogpagina waarop uitgelichte afbeeldingen zijn ingeschakeld. Single berichten en pagina’s tonen het beste het potentieel van de huidige versie van Gutenberg als sitebouwer.
Omdat het volledig op Gutenberg is gebaseerd, zijn de functies van Twenty Nineteen meestal afhankelijk van de ontwikkelingscyclus van Gutenberg en van de beschikbaarheid van blokken. We kunnen widget blokken, shortcode-blokken, galerijen, HTML-code, enzovoort toevoegen. Al deze blokken dekken echter lang niet altijd al onze behoeften. Maar gelukkig zijn er verschillende plugins waarmee we nieuwe blokken aan Gutenberg kunnen toevoegen, zoals Atomic Blocks, Advanced Gutenberg en Stackable. Er zijn zelfs projecten zoals de Gutenberg Cloud die zijn ontstaan.
Als je denkt dat het thema te minimaal is, moet je bedenken dat Twenty Nineteen nog steeds een werk in uitvoering is. We weten niet zeker of het zal worden samengevoegd in de kern tegen de tijd dat WordPress 5.0 wordt uitgebracht en we kunnen in de komende tijd verschillende toevoegingen en bug fixes verwachten. Bovendien zijn er veel problemen die nog steeds niet zijn opgelost en functies die moeten worden geïmplementeerd. Nu ondersteunt Twenty Nineteen submenu’s maar geen aangepaste headers en video headers. Hoe dan ook, we kunnen verwachten dat extra functies in een redelijk tijdsbestek worden toegevoegd.
Als je geïnteresseerd bent in de status van het thema, bekijk dan de volledige lijst met problemen op Github.
Theming voor Gutenberg: de aanpak van ontwikkelaars
Standaard biedt Gutenberg basisondersteuning voor blokstijlen in thema’s, en thema-ontwikkelaars zijn vrij om de standaardstijlen van Gutenberg met hun aangepaste stijlen te negeren. Maar ontwikkelaars kunnen ook aangepaste stijlen volledig weglaten en besluiten om uitsluitend op Gutenberg te vertrouwen om blokken aan de voorkant van de site te stijlen.
Het hebben van een editor die eruitziet en aanvoelt als de resulterende inhoud verbetert de schrijfervaring van de auteur en stelt iedereen in staat zich op zijn gemak te voelen bij de gebruikersinterface.
Hoe dan ook, sommige stijlen en presentatiekenmerken van Gutenberg vereisen thema’s om expliciet ondersteuning voor hen toe te voegen, en dit kan gedaan worden door add_theme_support aan te roepen in het functions.php bestand wanneer de actie after_setup_theme wordt geactiveerd. Hier is een voorbeeld van een functie-implementatie:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Hieronder vind je een selectie van deze Gutenberg-functies, waarvan sommige ook worden ondersteund door Twenty Nineteen. Je vindt de volledige lijst met functies in Gutenberg Handboek.
Ondersteuning toevoegen voor Gutenberg Blok Presentatie stijlen
Een van de doelen van het team achter Gutenberg was om een flexibel systeem voor styling te bouwen binnen thema’s, en om zo dicht mogelijk bij elkaar te komen “naar visuele pariteit tussen front-end en de editor”. Het doel is om de gebruiker een nauwkeurige voorvertoning van de inhoud te geven zoals deze eruit zal zien op de voorkant.
Om dat doel te bereiken, moest het team presentatiestijlen en structurele stijlen scheiden. Standaard worden presentatiestijlen niet geladen op de front-end om te voorkomen dat ze de weergave van de site beïnvloeden. Hoe dan ook, nieuwe thema’s kunnen profiteren van de presentatiestijlen van Gutenberg door hen eenvoudigweg de volgende registratie toe te staan (zie het Handboek voor meer informatie):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );Zoals je mag verwachten, ondersteunt Twenty Nineteen de blokstijlen van Gutenberg. De single post pagina ziet er aan de voorkant net zo uit als de pagina voor het bewerken van de berichten, met het enige verschil van de featured afbeelding, die op een bureaublad wordt weergegeven als een afbeelding die de hele viewport beslaat. De afbeelding hieronder toont Gutenberg in actie aan de achterkant.
En hier is hetzelfde bericht op de voorpagina.
Brede en volledige uitlijning
Gutenberg biedt ook twee extra uitlijningsopties: breed en volledige uitlijning, maar je kunt alleen breed en volledige uitlijning selecteren als jouw thema ze ondersteunt. Als dat zo is, toont Gutenberg de twee extra uitlijningspictogrammen.
De afbeelding hieronder toont uitlijning in midden, breed en Volledige breedte afbeeldingen in Twenty NineTeen.
Thema-ontwikkelaars kunnen ondersteuning voor brede en volledige uitlijning toevoegen door ze in het functie bestand in te schakelen met een enkele instructie:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Zodra we ondersteuning voor brede en volledige uitlijning hebben toegevoegd, moeten we de CSS-verklaringen voor twee extra CSS klassen verstrekken: alignfull en alignwide. Twenty Nineteen biedt de volgende stijlen:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Opmerking: wees voorzichtig wanneer je deze optie gebruikt, omdat dit problemen kan veroorzaken als je van thema verandert (lees meer over dit onderwerp op Github).
Editor stijling
De Editor Style is een functie geïntroduceerd in WordPress 3.0, waarmee thema-ontwikkelaars aangepaste stijlen aan de TinyMCE-editor kunnen toevoegen. Gutenberg ondersteunt deze functie ook, maar het werkt anders dan de Classic Editor, die stijlen direct in het iframe van de editor laadt. Gutenberg voegt specifieke CSS-selectors toe, omdat het geen iframe gebruikt.
We kunnen als volgt ondersteuning voor editorstijlen toevoegen:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Deze functie wordt ook ondersteund door Twenty Nineteen. Je kunt uitgebreider naar dit onderwerp kijken in Editor Style in Gutenberg.
Block Kleur paletten
Gutenberg biedt een generieke kleurselectie in het deelvenster Kleurinstellingen van de editor. Thema-ontwikkelaars kunnen deze tool verbeteren door aangepaste kleurenpaletten toe te voegen waarmee gebruikers snel de juiste kleur voor blokachtergrond en tekst kunnen ophalen. Dit proces bestaat uit twee stappen:
Eerst moeten we een reeks kleuren aanbieden:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Daarna moeten we de corresponderende stijl in de stylesheet van het thema declareren:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Klasse namen beginnen met has-, gevolgd door de kleur slug in het kebab-case en eindigen met de context, die een color of background-color kan zijn. Op dit moment ondersteunt Twenty Nineteen geen block kleurenpaletten, maar we kunnen dit eenvoudig veranderen via een Child-thema.
Als je in plaats daarvan een aangepast kleurenpalet wilt uitschakelen, moet je de volgende regel toevoegen aan het functie bestand van jouw thema of onderliggende thema:
add_theme_support( 'disable-custom-colors' );Block font grootte
Een thema kan ook de standaard set lettergroottes van Gutenberg overschrijven. Hier is een voorbeeld van de code die je aan het functies bestand moet toevoegen:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );De nieuwe lettergroottes worden toegevoegd aan de lettertypekiezer in de tekstinstellingen van Gutenberg.
Hierna moeten we de overeenkomstige stijlen in de stylesheet van het thema declareren. De klasse naam moet beginnen me has-, gevolgd door de naam van de lettertypegrootte in het kebab case en eindigt met -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen biedt geen specifieke lettergroottes en vertrouwt op de standaardwaarden van Gutenberg.
Opmerking: onthoud dat je, om al deze code te laten werken, de actie after_setup_theme moet doorlopen.
Samenvatting
Twenty NineTeen zou goed kunnen werken voor persoonlijke blogs, en je zou het meer kunnen zien als een wit canvas dan als een volledig functioneel WordPress-thema. Zo’n minimale aanpak kan een beetje beperkend zijn als het aankomt op het bouwen van websites voor bedrijven en e-commerce, maar maak je zich geen zorgen: nieuwe functies worden binnenkort geïmplementeerd en we zouden binnenkort een krachtigere versie van Twenty NineTeen kunnen zien.
In de tussentijd zou je ook enkele thema’s kunnen bekijken die Gutenberg al ondersteunen. Atomic Blocks, GeneratePress, Gutentype en Divi om er maar een paar te noemen, maar er zullen nog veel meer volgen. Omdat WordPress 5.0 zo snel nadert, is ondersteuning van Gutenberg geen optie meer en moeten themaontwikkelaars de nieuwe WordPress-editor zo snel mogelijk omarmen om de concurrentie voor te blijven.
Heb je Twenty Nineteen of een ander thema geïnstalleerd dat Gutenberg ondersteunt? We horen graag jouw mening in de onderstaande opmerkingen.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Laat een reactie achter