Jarenlang vereiste het ontwikkelen van Gutenberg-blokken een diepgaand begrip van technologieën zoals React en Node.js, plus complexe buildprocessen en JavaScript tools.
WordPress ontwikkelt zich echter door, en je kunt Gutenberg-blokken nu volledig in PHP bouwen en beheren.
Dit is vooral gunstig voor ontwikkelaars die liever React en server-side JavaScript (JS) ontwikkeling vermijden. Het verlaagt de leercurve, stroomlijnt de ervaring van de ontwikkelaar en maakt hogere prestaties mogelijk door onnodige front-end script overhead te verwijderen.
In de volgende secties ontdek je hoe je deze nieuwe features gebruikt om PHP-only Gutenberg blokken te bouwen – en hoe je daarmee slankere, snellere en beter te onderhouden WordPress websites maakt.
Klinkt goed, toch? Tijd om aan de slag te gaan!
Wat zijn PHP-only blokken en waarom zijn ze belangrijk?
Het maken van een Gutenberg blok vereiste traditioneel geavanceerde server-side JavaScript en React codeervaardigheden. Dit vormde een belemmering voor de adoptie van de Block Editor door oude WordPress ontwikkelaars die misschien niet over de benodigde React en Node.js kennis beschikten.
Daar komt nu verandering in. Vanaf Gutenberg 21.8 kun je Gutenberg blokken registreren met niets anders dan PHP. Dit neemt de complexiteit weg van het opzetten van een Node.js-omgeving voor ontwikkelaars die niet met server-side JavaScript werken.
Met alleen PHP-blokregistratie kun je blokken registreren en weergeven in zowel de editor als de front-end met dezelfde PHP-code. Dit maakt het voor sites met hybride thema’s of traditionele PHP-functies en shortcodes makkelijker om de Block Editor te gebruiken en te ontwikkelen.
Voor degenen die meer willen weten, zijn hier de belangrijkste GitHub PR’s gewijd aan PHP-only blokken.
- Allow registering PHP-only block: Deze PR implementeert automatische server-side blokregistratie en hernoemt de
auto_ssrondersteuning naarauto_register. - PHP-only blocks: Pass all metadata from PHP registration to the client: PHP-only blokken met
auto_registerondersteuning geven nu alle metadata van de PHP-registratie door aan de client. - PHP-only blocks: Generate inspector controls from attributes: Deze PR introduceert het automatisch genereren van de UI (Inspector Controls) op basis van de attributen die op de server zijn gedeclareerd.
Zo bouw je je eerste PHP-only Gutenberg-blok
Wanneer een blok alleen aan de kant van de server wordt geregistreerd – zonder JS-bestanden – en de nieuwe auto_register support flag is ingesteld op true, gebruikt de editor automatisch de ServerSideRender component om het blok aan de kant van de client te registreren en de preview van het blok weer te geven. In wezen wordt de inhoud van het blok nu direct gegenereerd vanuit de PHP-code in zowel de editor als de front-end.
Ter illustratie is hier een eenvoudig PHP-voorbeeld dat een blok registreert met behulp van de PHP-only methode.
/**
* Render callback (frontend and editor)
*/
function my_php_only_block_render( $attributes ) {
return '<div>
<h3>🚀 PHP-only Block</h3>
<p>This block was created with only PHP!</p>
</div>';
}
/**
* Register the block on the 'init' hook.
*/
add_action( 'init', function() {
register_block_type( 'my-plugin/php-only-test-block', array(
'title' => 'My PHP-only Block',
'icon' => 'welcome-learn-more',
'category' => 'text',
'render_callback' => 'my_php_only_block_render',
'supports' => array(
// Automatically registers the block in the Editor JS (previously auto_ssr)
'auto_register' => true,
),
) );
});Je kunt deze code uitproberen door hem te kopiëren en te plakken in het hoofdbestand van een custom plugin. Na het activeren van de plugin zou je het “My PHP-Only Block” moeten zien in de Block Inserter.
De functie register_block_type registreert een bloktype op de server. Het bevat nu de nieuwe ondersteuning auto_register, die Gutenberg instrueert om metadata van de PHP registratie door te geven.
De functie accepteert twee argumenten:
- De naam van het bloktype, inclusief de namespace. In dit voorbeeld is de bloknaam
my-plugin/php-only-test-block. - Een array van argumenten voor het bloktype. In de bovenstaande code stellen we
titel,pictogram,categorie,render_callbackensupportsin. Nogmaals, voor PHP-only bloktypes moet desupportsarray'auto_register' => truebevatten.
Naast het vereenvoudigen van het maken van custom bloktypes en het eenvoudig integreren in hybride thema’s, kunnen PHP-only blokken worden gebruikt als wrappers voor oude PHP functies en shortcodes. Bovendien opent het gebruik van PHP-only blokken de deur naar nieuwe mogelijkheden voor custom integraties en server-side functionaliteit.
Volgens Héctor Priethor,
Een puur PHP registratiemodel zou de minimale vereisten voor het ontwikkelen van blokken vereenvoudigen, waardoor ze beschikbaar worden voor een breder ontwikkelaarspubliek en het ecosysteem van blokken verder zou kunnen groeien dan geavanceerd JavaScript gebruik.
Attributen gebruiken om de UI voor blokinstellingen te bouwen
PR 74102 maakt het mogelijk om automatisch inspector besturingselementen te genereren uit definities van blokattributen. Hierdoor kunnen gebruikers het uiterlijk en de functionaliteit van je PHP-only blokken configureren zoals elk ander Gutenberg blok dat via JavaScript is geregistreerd.
Voorheen moest je handmatig een edit.js bestand aanmaken in React en verschillende instellingscontroles definiëren met behulp van React componenten.
Nu leest Gutenberg de attribuutdefinities en genereert automatisch de bijbehorende invoervelden in de WordPress editor.
Het systeem koppelt de gegevenstypen die zijn gedefinieerd in de attributen array aan DataForm velddefinities.
'type' => 'string'genereert een tekstveld.type' => 'number'genereert een getalveld.'type' => 'integer'genereert een integer veld.'type' => 'boolean'genereert een selectievakje.'type' => 'string'met'enum' => array()genereert een select veld.
Je zult je realiseren dat je maar een paar besturingselementen kunt gebruiken. Als je specifieke besturingselementen nodig hebt, zoals RichText, RangeControl of ToggleControl, zul je toch moeten kiezen voor de JS/React aanpak.
Deze toevoeging heeft echter aanzienlijke voordelen. De toetredingsdrempels worden verder verlaagd en je hoeft geen React, Webpack of NPM te leren om custom blokken met eenvoudige bewerkbare opties te maken.
In het volgende voorbeeld breiden we het voorbeeldblok uit dat in de vorige sectie is getoond door enkele attributen toe te voegen.
/**
* 1. Define the block's HTML output.
*/
function my_php_only_block_render( $attributes ) {
// Extract attributes
$title = esc_html( $attributes['blockTitle'] );
$count = intval( $attributes['itemCount'] );
$enabled = $attributes['isEnabled']; // Boolean from the ToggleControl
$size = esc_attr( $attributes['displaySize'] );
// Start building the output
$output = sprintf( '<div class="my-php-block" style="font-size: %s; border: 1px solid #ccc; padding: 15px;">',
$size === 'large' ? '20px' : ($size === 'small' ? '12px' : '16px')
);
$output .= sprintf( '<h3>🚀 %s</h3>', $title );
// If the toggle is ON, show the list. If OFF, show a fallback message.
if ( $enabled ) {
$output .= '<ul>';
for ( $i = 1; $i <= $count; $i++ ) {
$output .= sprintf( '<li>Item %d</li>', $i );
}
$output .= '</ul>';
} else {
$output .= '<p><em>The list is currently disabled.</em></p>';
}
$output .= '</div>';
return $output;
}
/**
* 2. Register the block on 'init'.
*/
add_action( 'init', function() {
register_block_type( 'my-plugin/php-only-test-block', array(
'title' => 'My PHP-only Block',
'icon' => 'welcome-learn-more',
'category' => 'text',
'render_callback' => 'my_php_only_block_render',
// Attributes used to generate the Inspector UI
'attributes' => array(
'blockTitle' => array(
'type' => 'string',
'default' => 'PHP-only Block',
),
'itemCount' => array(
'type' => 'integer',
'default' => 3,
),
'isEnabled' => array(
'type' => 'boolean',
'default' => true,
),
'displaySize' => array(
'type' => 'string',
'enum' => array( 'small', 'medium', 'large' ),
'default' => 'medium',
),
),
'supports' => array(
'auto_register' => true,
),
) );
});Een blik op deze code laat zien hoe eenvoudig het is om een custom blok met al zijn configuratie-instellingen te registreren met behulp van de nieuwe API. Attributen worden nu niet alleen gebruikt om door de gebruiker ingevoerde gegevens op te slaan, maar ook om het UI-schema te definiëren. De bovenstaande code doet het volgende:
- De functie
register_block_typeregistreert het bloktypemy-plugin/php-only-test-block. - Het tweede argument dat aan de functie wordt doorgegeven is een array die de volgende elementen bevat:
title,icon,category,render_callback,attributesensupports. - De
attributesarray bevat de attributen van het blok. In het bovenstaande voorbeeld bevat de array de elementenblockTitle,itemCount,isEnabledendisplaySize. auto_register' => trueschakelt server-side automatische registratie in.
Dit is wat de callback-functie my_php_only_block_render doet:
- Eerst haalt de functie de attribuutwaarden uit de
$attributesarray en wijst ze toe aan de variabelen$title,$count,$enableden$size. - Daarna wordt de inhoud van het blok gegenereerd.
Hier zie je het resultaat op het scherm:
Een praktijkvoorbeeld van PHP-only blokken
Hoewel er veel scenario’s zijn waarbij JavaScript nog steeds nodig is, kun je al veel doen met PHP-only blokken, vooral als je ze gebruikt met block props.
In het volgende voorbeeld gebruiken we de functie get_block_wrapper_attributes(), die een reeks attributen genereert voor het huidige blok dat wordt weergegeven. Het blok krijgt automatisch de door de gebruiker ingestelde kleuren, randen en schaduwen en past de bijbehorende stijlen toe op de hoofdcontainer. Op deze manier is het blok aanpasbaar via de eigen tools van Gutenberg, net als een React-gebaseerd blok.
Om te zien hoe het werkt, maak je een smart-pricing-widget map aan op je computer. Maak in deze map een style.css bestand met de volgende CSS code:
/* style.css */
.pricing-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
}
.pricing-card h3 {
margin: 0;
font-size: 1.5rem;
}
.pricing-card .price-value {
font-size: 3.5rem;
font-weight: 800;
margin: 15px 0;
}
.pricing-card ul {
list-style: none;
padding: 25px 0;
margin: 20px 0;
width: 100%;
border-top: 1px solid rgba(128,128,128,0.3);
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-card li {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pricing-card .cta-button {
margin-top: auto;
padding: 15px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: opacity 0.2s;
}
.pricing-card .cta-button:hover {
opacity: 0.8;
}
/* Theme Variations */
.pricing-card.theme-light { background-color: #ffffff; color: #000000; }
.pricing-card.theme-light .cta-button { background-color: #21759b; color: #ffffff; }
.pricing-card.theme-dark { background-color: #1a1a1a; color: #ffffff; }
.pricing-card.theme-dark .cta-button { background-color: #ffffff; color: #1a1a1a; }
.pricing-card.theme-blue { background-color: #21759b; color: #ffffff; }
.pricing-card.theme-blue .cta-button { background-color: #000000; color: #ffffff; }
/* Utility Classes */
.pricing-card .is-full-width {
width: 100%;
display: block;
align-self: stretch;
}We geven geen verder commentaar op deze code omdat het een eenvoudige stylesheet is voor je widgetblok.
Maak nu het hoofdbestand voor je plugin, noem het smart-pricing-widget.php en plak de volgende code:
<?php
/**
* Plugin Name: Smart Pricing Widget
* Plugin URI: https://example.com/
* Description: PHP-only Pricing Table block
* Version: 1.2.0
* Author: Your Name
* Text Domain: smart-pricing-widget
*/
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* Render callback
*/
function render_smart_pricing_block( $attributes ) {
$plan_name = esc_html( $attributes['planName'] );
$price = intval( $attributes['price'] );
$theme = $attributes['blockTheme'];
$btn_text = esc_html( $attributes['buttonText'] );
$btn_size = $attributes['buttonSize'];
$features_raw = $attributes['featuresList'];
$features_array = array_filter( array_map( 'trim', explode( ',', $features_raw ) ) );
$wrapper_attributes = wp_kses_data( get_block_wrapper_attributes( array(
'class' => "pricing-card theme-{$theme}",
) ) );
$output = sprintf( '<div %s>', $wrapper_attributes );
$output .= sprintf( '<h3>%s</h3>', $plan_name );
$output .= sprintf( '<div class="price-value">€%d</div>', $price );
if ( ! empty( $features_array ) ) {
$output .= '<ul>';
foreach ( $features_array as $feature ) {
$is_checked = strpos( $feature, '+' ) === 0;
$clean_text = esc_html( ltrim( $feature, '+- ' ) );
$icon = $is_checked ? '✅' : '❌';
$style = $is_checked ? '' : 'style="opacity: 0.6;"';
$output .= sprintf( '<li %s><span>%s</span> %s</li>', $style, $icon, $clean_text );
}
$output .= '</ul>';
}
$btn_class = 'cta-button' . ( $btn_size === 'full' ? ' is-full-width' : '' );
$output .= sprintf( '<a href="#" class="%s">%s</a>', esc_attr( $btn_class ), $btn_text );
$output .= '</div>';
return $output;
}
/**
* Register Assets and Block
*/
add_action( 'init', function() {
// 1. Register the CSS file
wp_register_style(
'smart-pricing-style',
plugins_url( 'style.css', __FILE__ ),
array(),
'1.2.0'
);
// 2. Register the Block
register_block_type( 'tutorial/smart-pricing', array(
'api_version' => 3,
'title' => 'Pricing Card',
'icon' => 'cart',
'category' => 'widgets',
'render_callback' => 'render_smart_pricing_block',
// Link the registered style handle here
'style' => 'smart-pricing-style',
'attributes' => array(
'planName' => array( 'type' => 'string', 'default' => 'Professional' ),
'price' => array( 'type' => 'integer', 'default' => 49 ),
'buttonText' => array( 'type' => 'string', 'default' => 'Choose Plan' ),
'buttonSize' => array( 'type' => 'string', 'enum' => array( 'auto', 'full' ), 'default' => 'auto' ),
'blockTheme' => array( 'type' => 'string', 'enum' => array( 'light', 'dark', 'blue' ), 'default' => 'light' ),
'featuresList' => array( 'type' => 'string', 'default' => "+ Support, + Updates, - Domain" ),
),
'supports' => array(
'auto_register' => true,
'color' => array( 'background' => true, 'text' => true ),
'spacing' => array( 'margin' => true, 'padding' => true ),
'typography' => array( 'fontSize' => true ),
'shadow' => true,
'__experimentalBorder' => array( 'color' => true, 'radius' => true, 'style' => true, 'width' => true ),
'border' => array( 'color' => true, 'radius' => true, 'style' => true, 'width' => true ),
),
) );
});Dit script bevat twee functies. De functie register_block_type() is de motor van je plugin. Dit zijn de belangrijkste elementen:
- Het eerste argument is de blok identifier, inclusief de namespace (
tutorial/smart-pricing). - Het tweede argument is een array van argumenten. In de bovenstaande code hebben we de API versie, titel, pictogram, categorie, render callback, stijl, attributen en ondersteuning ingesteld.
- De attributen in de array genereren de besturingselementen die gebruikers zullen gebruiken om inhoud toe te voegen en het blok te configureren. Het
typeelement specificeert het type besturingselement dat moet worden toegevoegd aan de blokinspector. In dit voorbeeld zijn dat tekstvelden ('type' => 'string'), een geheel getal ('type' => 'integer') en een paar vervolgkeuzemenu’s ('type' => 'string', 'enum' => array()). - De
supportsarray items voegen eigenschappen toe die de blokstijl aanpasbaar maken. Zoals we al eerder zeiden, is de enige ondersteuning die nodig is in een blok dat alleen uit PHP bestaatauto_register, dat het automatisch genereren van UI voor custom attributen mogelijk maakt. De andere hierboven aangegeven ondersteuningen zijn kleur, spatiëring, typografie, schaduw en rand.
De callback functie render_smart_pricing_block() genereert de HTML van het blok. Hier volgt een gedetailleerde beschrijving van wat deze functie doet:
- Het extract en saniteert de blokattributen, voegt dan de CSS-code toe die het uiterlijk van het blok in de frontend en editor genereert.
- De kenmerken die in het blok moeten worden weergegeven (
$attributes['featuresList'];) worden apart behandeld. Op dit moment is het niet mogelijk om geavanceerde besturingselementen toe te voegen aan de zijbalk met blokinstellingen. Om een lijst te maken, zoals een lijst met kenmerken, kun je alleen een eenvoudig tekstveld gebruiken. In dit voorbeeld moet je de productkenmerken handmatig invoeren, gescheiden door komma’s. - De variabele
$wrapper_attributesis een container voor de wrapperattributen die worden geleverd door de functieget_block_wrapper_attributes. Deze functie voegt niet alleen de klassen toe die in de code zijn gespecificeerd (pricing-card theme-{$theme}), maar haalt automatisch alle stijlaanpassingen op die de gebruiker in de block inspector heeft ingesteld, inclusief kleuren, randen, opvulling, marge, schaduw, typografie en de standaard blokklassen (wp-block-tutorial-smart-pricing). wp_kses_datazorgt ervoor dat er geen kwaadaardige tags of scripts (XSS) in de string zitten.- De rest van de code genereert de inhoud van het blok.
Activeer de plugin en maak een nieuw bericht of pagina. Open de block inserter en scroll naar beneden naar de Widgets sectie. Hier zou je het blok “Pricing Card” moeten zien, herkenbaar aan het pictogram van een winkelwagentje.
De afbeelding hierboven toont het blok met het standaard lichte thema.
In de afbeelding hieronder zie je de donkere versie van het blok en de instellingen die je in je plugin hebt opgegeven.
De volgende afbeelding toont de stijlelementen die je hebt toegevoegd met de blok supports.
Het is ook de moeite waard om op te merken dat stijlen die zijn toegevoegd door supports de stijlen van het blokkenthema overschrijven. Hierdoor kan het uiterlijk van het blok beter worden aangepast, zoals te zien is in de volgende afbeelding:
Oude shortcodes omzetten naar Gutenberg blokken met pure PHP
Een van de meest directe toepassingen van PHP blokken is als shortcode wrapper. Met Gutenberg kun je nog steeds shortcodes gebruiken in je content, maar je moet je shortcode handmatig invoegen in een Shortcode blok, wat niet de meest prettige ervaring is.
Stel je hebt de volgende shortcode:
function my_custom_alert_shortcode( $atts ) {
$options = shortcode_atts( array(
'type' => 'info',
'message' => 'Default alert message',
), $atts );
$styles = array(
'info' => 'background: #d1ecf1; color: #0c5460; border-color: #bee5eb;',
'warning' => 'background: #fff3cd; color: #856404; border-color: #ffeeba;',
'error' => 'background: #f8d7da; color: #721c24; border-color: #f5c6cb;'
);
$style = $styles[ $options['type'] ] ?? $styles['info'];
return sprintf(
'<div class="sc-alert-box" style="%s padding: 20px; border: 1px solid; border-radius: 6px; margin: 10px 0;">
<strong style="text-transform: uppercase;">%s:</strong> %s
</div>',
esc_attr( $style ),
esc_html( $options['type'] ),
esc_html( $options['message'] )
);
}
add_shortcode( 'sc_alert', 'my_custom_alert_shortcode' );Deze code genereert een eenvoudige box die je in je inhoud kunt invoegen met de volgende shortcode:
[sc_alert type="alert" message="Hello"]In Gutenberg gebruik je een Shortcode blok om het vak in je inhoud in te voegen, zoals te zien is in de volgende afbeelding:
Het scenario verandert volledig met PHP-only blokken. Nu kun je je shortcode in een PHP-only Gutenberg-blok wrappen en het configureren via de UI-besturingselementen. Hier is de code die je aan je plugin moet toevoegen:
/**
* Rendering callback
*/
function render_shortcode_alert_wrapper_block( $attributes ) {
$type = esc_attr( $attributes['alertType'] );
$message = esc_attr( $attributes['alertMessage'] );
$shortcode_string = sprintf( '[sc_alert type="%s" message="%s"]', $type, $message );
$wrapper_attributes = wp_kses_data( get_block_wrapper_attributes( array(
'class' => 'wp-block-shortcode-alert-wrapper',
) ) );
return sprintf(
'<div %s>%s</div>',
$wrapper_attributes,
do_shortcode( $shortcode_string )
);
}
/**
* Register the block type on the server
*/
add_action( 'init', function() {
register_block_type( 'tutorial/alert-wrapper', array(
'api_version' => 3,
'title' => 'Alert (Shortcode wrapper)',
'icon' => 'feedback',
'category' => 'widgets',
'render_callback' => 'render_shortcode_alert_wrapper_block',
'attributes' => array(
'alertType' => array(
'type' => 'string',
'enum' => array( 'info', 'warning', 'error' ),
'default' => 'info',
),
'alertMessage' => array(
'type' => 'string',
'default' => 'Type your alert message here...',
),
),
'supports' => array(
'auto_register' => true,
'spacing' => array( 'margin' => true, 'padding' => true ),
'typography' => array( 'fontSize' => true ),
),
) );
});De bovenstaande code is vergelijkbaar met de code in de vorige sectie. Wat hier verandert is de rendering callback.
$shortcode_stringslaat de shortcode string op ([sc_alert type="%s" message="%s"]).- De functie retourneert de HTML van de blokcontainer en de opgenomen shortcode (
do_shortcode( $shortcode_string )).
Open nu de block inserter en zoek het blok “Shortcode wrapper” tussen de widgets. Voeg het in je inhoud in en configureer het via de blokinstellingenbalk. Het blok zal identiek verschijnen in zowel de editor als de front-end.
Hoe verandert de ontwikkeling van WordPress met PHP-only blokken?
Op dit moment bevinden pure PHP-blokken zich in een experimentele fase en hebben ze nog steeds beperkte mogelijkheden. Gutenberg biedt krachtigere features, zoals blokpatronen en blokvariaties, die alle bewerkingsfuncties bieden van native Gutenberg blokken en custom blokken die zijn gebouwd in JavaScript. Toch zijn er scenario’s waarin PHP-blokken aanzienlijke mogelijkheden bieden.
Ten eerste zouden PHP-only blokken voor een bredere toepassing van de Block Editor moeten zorgen, vooral onder WordPress ontwikkelaars die minder georiënteerd zijn op server-side JavaScript ontwikkeling.
Verder zijn het ideale wrappers voor custom functies en shortcodes, zoals het voorbeeld in dit artikel laat zien. Bovendien maken ze eenvoudige integratie met externe diensten mogelijk.
En we kunnen ook redelijkerwijs toekomstige verbeteringen en functietoevoegingen, meer configuratiecontroles en integraties met bestaande Gutenberg tools verwachten.
Eén ding is zeker: met alleen PHP-blokken is het bouwen van Gutenberg-blokken veel gemakkelijker geworden.
Als WordPress ontwikkeling je werk is, dan biedt Kinsta de ontwikkelaarstools die je nodig hebt, zodat je je kunt richten op WordPress ontwikkeling en geen complexe configuraties en vervelende onderhoudstaken meer nodig hebt: SSH, SFTP, Git-integratie, automatische updates, testomgevingen met één klik, een ingebouwde lokale ontwikkeltool en nog veel meer. Probeer het uit met je eerste gratis maand.
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
