Jahrelang erforderte die Entwicklung von Gutenberg-Blöcken ein tiefgreifendes Verständnis von Technologien wie React und Node.js sowie komplexe Build-Schritte und JavaScript-Tools.

Die WordPress-Entwicklung entwickelt sich jedoch weiter, und du kannst Gutenberg-Blöcke jetzt komplett in PHP erstellen und verwalten.

Das ist besonders für Entwickler/innen von Vorteil, die React und serverseitige JavaScript (JS)-Entwicklung vermeiden wollen. Es senkt die Lernkurve, rationalisiert die Erfahrung der Entwickler und ermöglicht eine höhere Leistung, da unnötiger Front-End-Skript-Overhead entfällt.

In den folgenden Abschnitten erfährst du, wie du die Vorteile dieser neuen Funktionen nutzen kannst, um reine PHP-Blöcke in Gutenberg zu erstellen. Dabei lernst du, wie du schlankere, schnellere und leichter zu wartende WordPress-Websites erstellen kannst.

Ziemlich aufregend, oder? Dann fangen wir an.


Was sind PHP-only-Blöcke und warum sind sie wichtig?

Die Erstellung eines Gutenberg-Blocks erforderte bisher fortgeschrittene serverseitige JavaScript- und React-Programmierkenntnisse. Das war ein Hindernis für die Einführung des Block-Editors bei langjährigen WordPress-Entwicklern, die nicht über die nötigen React- und Node.js-Kenntnisse verfügen.

Das ändert sich jetzt. Ab Gutenberg 21.8 kannst du Gutenberg-Blöcke ganz einfach mit PHP registrieren. Damit entfällt die komplizierte Einrichtung einer Node.js-Umgebung für diejenigen, die nicht mit serverseitigem JavaScript arbeiten.

Mit der reinen PHP-Blockregistrierung kannst du Blöcke sowohl im Editor als auch im Frontend mit demselben PHP-Code registrieren und anzeigen. Das ermutigt Websites, die hybride Themes oder traditionelle PHP-Funktionen und Shortcodes verwenden, den Block-Editor zu übernehmen und weiterzuentwickeln.

Wenn du mehr darüber erfahren möchtest, findest du hier die wichtigsten GitHub-PRs, die sich mit PHP-only-Blöcken beschäftigen.

Wie du deinen ersten reinen PHP-Block in Gutenberg erstellst

Wenn ein Block nur auf der Serverseite registriert wird – ohne JS-Dateien – und das neue Flag auto_register support auf true gesetzt ist, verwendet der Editor automatisch die Komponente ServerSideRender, um den Block auf der Clientseite zu registrieren und die Blockvorschau anzuzeigen. Der Inhalt des Blocks wird jetzt sowohl im Editor als auch im Frontend direkt aus dem PHP-Code generiert.

Zur Veranschaulichung ist hier ein einfaches PHP-Beispiel, das einen Block mit der reinen PHP-Methode registriert.

/**
 * 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, 
		),
	) );
});

Du kannst diesen Code ausprobieren, indem du ihn kopierst und in die Hauptdatei eines benutzerdefinierten Plugins einfügst. Nachdem du das Plugin aktiviert hast, solltest du den „My PHP-Only Block“ im Block-Inserter sehen.

Ein einfacher PHP-only-Block im Block-Editor
Ein einfacher PHP-only-Block im Block-Editor

Die Funktion register_block_type registriert einen Blocktyp auf dem Server. Sie enthält jetzt die neue auto_register-Unterstützung, die Gutenberg anweist, Metadaten aus der PHP-Registrierung zu übergeben.

Die Funktion nimmt zwei Argumente entgegen:

  • Den Namen des Blocktyps, einschließlich des Namensraums. In diesem Beispiel lautet der Blockname my-plugin/php-only-test-block.
  • Ein Array mit Argumenten für den Blocktyp. Im obigen Code legen wir title, icon, category, render_callback, und supports fest. Für PHP-only-Blocktypen muss das Array supports den Wert "auto_register" => true enthalten.

PHP-Blöcke vereinfachen nicht nur die Erstellung von benutzerdefinierten Blocktypen und ihre Integration in hybride Themes, sondern können auch als Wrapper für ältere PHP-Funktionen und Shortcodes verwendet werden. Darüber hinaus eröffnet die Verwendung von reinen PHP-Blöcken neue Möglichkeiten für benutzerdefinierte Integrationen und serverseitige Funktionen.

Héctor Priethor meint dazu,

Ein reines PHP-Registrierungsmodell würde die Mindestanforderungen für die Entwicklung von Blöcken vereinfachen, sie einem breiteren Entwicklerpublikum zugänglich machen und dazu beitragen, dass das Block-Ökosystem über die fortgeschrittene JavaScript-Nutzung hinaus wächst.

Verwendung von Attributen zur Erstellung der Blockeinstellungen

PR 74102 ermöglicht die automatische Generierung von Inspektor-Steuerelementen aus Block-Attributdefinitionen. So können Nutzer/innen das Aussehen und die Funktionalität von reinen PHP-Blöcken wie bei jedem Gutenberg-Block, der über JavaScript registriert wurde, konfigurieren.

Bisher musstest du manuell eine edit.js-Datei in React erstellen und verschiedene Einstellungselemente mit React-Komponenten definieren.

Jetzt liest Gutenberg die Attributdefinitionen und erzeugt automatisch die entsprechenden Eingabefelder im WordPress-Editor.

Das System ordnet die im attributes-Array definierten Datentypen den DataForm-Felddefinitionen zu.

  • type' => 'string' erzeugt ein Textfeld.
  • 'type' => 'number' erzeugt ein Zahlenfeld.
  • 'type' => 'integer' erzeugt ein Ganzzahlfeld.
  • 'type' => 'boolean' erzeugt ein Ankreuzfeld.
  • 'type' => 'string' mit 'enum' => array() erzeugt ein Auswahlfeld.

Du wirst feststellen, dass du nur wenige Steuerelemente verwenden kannst. Wenn du bestimmte Steuerelemente wie RichText, RangeControl oder ToggleControl benötigst, musst du dich trotzdem für den JS/React-Ansatz entscheiden.

Dieser Zusatz hat jedoch erhebliche Vorteile. Die Einstiegshürden werden weiter gesenkt, und du musst dich nicht mit React, Webpack oder NPM auseinandersetzen, um benutzerdefinierte Blöcke mit einfachen editierbaren Optionen zu erstellen.

Im folgenden Beispiel erweitern wir den im vorherigen Abschnitt gezeigten Beispielblock, indem wir einige Attribute hinzufügen.

/**
 * 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, 
		),
	) );
});

Ein kurzer Blick auf diesen Code zeigt, wie einfach es ist, einen benutzerdefinierten Block mit all seinen Konfigurationseinstellungen mithilfe der neuen API zu registrieren. Attribute werden jetzt nicht nur verwendet, um vom Benutzer eingegebene Daten zu speichern, sondern auch, um das UI-Schema zu definieren. Der obige Code macht Folgendes:

  • Die Funktion register_block_type registriert den Blocktyp my-plugin/php-only-test-block.
  • Das zweite Argument, das der Funktion übergeben wird, ist ein Array mit den folgenden Elementen: title, icon, category, render_callback, attributes und supports.
  • Das Array attributes enthält die Attribute des Blocks. Im obigen Beispiel enthält das Array die Elemente blockTitle, itemCount, isEnabled und displaySize.
  • auto_register' => true aktiviert die serverseitige automatische Registrierung.

So funktioniert die Callback-Funktion my_php_only_block_render:

  • Zuerst extrahiert die Funktion die Attributwerte aus dem Array $attributes und ordnet sie den Variablen $title, $count, $enabled und $size zu.
  • Dann generiert sie den Inhalt des Blocks.

Hier ist das Ergebnis auf dem Bildschirm zu sehen:

Ein PHP-only-Block mit Blockeinstellungen
Ein PHP-only-Block mit Blockeinstellungen

Ein praktisches Beispiel für einen reinen PHP-Block

Auch wenn es viele Szenarien gibt, in denen JavaScript immer noch erforderlich ist, kannst du mit reinen PHP-Blöcken schon viel erreichen, vor allem wenn du sie mit Block-Props verwendest.

Im folgenden Beispiel verwenden wir die Funktion get_block_wrapper_attributes(), die eine Reihe von Attributen für den aktuell gerenderten Block generiert. Der Block erhält automatisch die vom Benutzer eingestellten Farben, Rahmen und Schatten und wendet die entsprechenden Stile auf den Hauptcontainer an. Auf diese Weise kann der Block über die nativen Tools von Gutenberg angepasst werden, genau wie ein React-basierter Block.

Um zu sehen, wie das funktioniert, erstelle einen Ordner smart-pricing-widget auf deinem Computer. In diesem Ordner erstellst du eine style.css-Datei mit dem folgenden 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;
	breite: 100%;
	border-top: 1px solid rgba(128,128,128,0.3);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pricing-card li {
	anzeige: 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;
	übergang: Deckkraft 0,2s;
}

.pricing-card .cta-button:hover {
	deckkraft: 0,8;
}

/* Themenvariationen */
.pricing-card.theme-light { background-color: #ffffff; color: #000000; }
.pricing-card.theme-light .cta-button { background-color: #21759b; Farbe: #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 {
	breite: 100%;
	anzeige: block;
	align-self: stretch;
}

Wir werden diesen Code nicht weiter kommentieren, da es sich um ein einfaches Stylesheet für deinen Widget-Block handelt.

Erstelle nun die Hauptdatei für dein Plugin, nenne sie smart-pricing-widget.php und füge den folgenden Code ein:

<?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 ),
		),
	) );
});

Dieses Skript enthält zwei Funktionen. Die Funktion register_block_type() ist der Motor deines Plugins. Hier sind ihre wichtigsten Elemente:

  • Das erste Argument ist der Blockbezeichner, einschließlich des Namensraums (tutorial/smart-pricing).
  • Das zweite Argument ist ein Array von Argumenten. Im obigen Code haben wir die API-Version, den Titel, das Symbol, die Kategorie, den Render-Callback, den Stil, die Attribute und die Unterstützung festgelegt.
  • Die Attribute im Array erzeugen die Steuerelemente, die die Nutzer verwenden, um Inhalte hinzuzufügen und den Block zu konfigurieren. Das Element type gibt die Art des Steuerelements an, das dem Blockinspektor hinzugefügt werden soll. In diesem Beispiel sind dies Textfelder ('type' => 'string'), eine Ganzzahl ('type' => 'integer') und einige Dropdown-Menüs ('type' => 'string', 'enum' => array()).
  • Die Array-Elemente supports fügen Funktionen hinzu, mit denen der Blockstil angepasst werden kann. Wie bereits erwähnt, ist die einzige Unterstützung, die in einem reinen PHP-Block benötigt wird, auto_register, das die automatische Erstellung der Benutzeroberfläche für benutzerdefinierte Attribute ermöglicht. Zu den anderen oben angegebenen Unterstützungen gehören Farbe, Abstand, Typografie, Schatten und Rahmen.

Die Callback-Funktion render_smart_pricing_block() erzeugt das HTML des Blocks. Hier ist eine detaillierte Beschreibung, was diese Funktion macht:

  • Sie extrahiert und bereinigt die Blockattribute und fügt dann den CSS-Code hinzu, der das Erscheinungsbild des Blocks im Frontend und im Editor erzeugt.
  • Die Merkmale, die in dem Block angezeigt werden sollen ($attributes['featuresList'];), werden separat behandelt. Derzeit ist es nicht möglich, erweiterte Steuerelemente in die Seitenleiste der Blockeinstellungen einzufügen. Um eine Liste zu erstellen, z. B. eine Liste von Merkmalen, kannst du nur ein einfaches Textfeld verwenden. In diesem Beispiel musst du die Produktmerkmale manuell eingeben, getrennt durch Kommas.
  • Die Variable $wrapper_attributes ist ein Container für die Wrapper-Attribute, die von der Funktion get_block_wrapper_attributes bereitgestellt werden. Diese Funktion fügt nicht nur die im Code angegebenen Klassen hinzu (pricing-card theme-{$theme}), sondern ruft automatisch alle Stilanpassungen ab, die der Benutzer im Blockinspektor einstellt, einschließlich Farben, Rahmen, Polsterung, Rand, Schatten, Typografie und die Standardblockklassen (wp-block-tutorial-smart-pricing).
  • wp_kses_data stellt sicher, dass der String keine bösartigen Tags oder Skripte (XSS) enthält.
  • Der Rest des Codes erzeugt den Blockinhalt.

Aktiviere das Plugin und erstelle einen neuen Beitrag oder eine neue Seite. Öffne den Block-Inserter und scrolle nach unten zum Abschnitt Widgets. Hier solltest du deinen „Pricing Card“-Block sehen, der durch ein Einkaufswagen-Symbol gekennzeichnet ist.

Ein PHP-only-Block im Block-Editor
Ein PHP-only-Block im Block-Editor

Das Bild oben zeigt den Block mit dem Standardtheme Light.

Auf dem Bild unten siehst du die dunkle Version des Blocks und die Einstellungen, die du in deinem Plugin angegeben hast.

Der PHP-only-Block mit Blockeinstellungen
Der PHP-only-Block mit Blockeinstellungen

Das folgende Bild zeigt die Stilkontrollen, die du mit den Blockunterstützungen hinzugefügt hast.

Das dunkle Theme des PHP-only-Blocks mit benutzerdefinierten Farben
Das dunkle Theme des PHP-only-Blocks mit benutzerdefinierten Farben

Es ist auch erwähnenswert, dass Stile, die von Unterstützern hinzugefügt werden, die Stile des Blockthemas außer Kraft setzen. Dadurch kann das Erscheinungsbild des Blocks besser angepasst werden, wie das folgende Bild zeigt:

Eine Preistabelle für 3 Leistungsstufen mit drei Instanzen deines PHP-only-Blocks
Eine Preistabelle für 3 Leistungsstufen mit drei Instanzen deines PHP-only-Blocks

Legacy-Shortcodes in Gutenberg-Blöcke mit reinem PHP umwandeln

Eine der direktesten Verwendungen von PHP-Blöcken ist die Verwendung als Shortcode-Wrapper. Mit Gutenberg kannst du zwar immer noch Shortcodes in deinen Inhalten verwenden, aber du musst deinen Shortcode manuell in einen Shortcode-Block einfügen, was nicht gerade ein angenehmes Erlebnis ist.

Angenommen, du hast den folgenden 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' );

Dieser Code erzeugt eine einfache Box, die du mit dem folgenden Shortcode in deinen Inhalt einfügen kannst:

[sc_alert type="alert" message="Hallo"]

In Gutenberg verwendest du einen Shortcode-Block, um das Feld in deinen Inhalt einzufügen, wie in der folgenden Abbildung zu sehen ist:

A Shortcode block
Ein Shortcode-Block

Mit reinen PHP-Blöcken ändert sich das Szenario komplett. Jetzt kannst du deinen Shortcode in einen reinen PHP-Block in Gutenberg einbinden und ihn über die UI-Steuerung konfigurieren. Hier ist der Code, den du zu deinem Plugin hinzufügen musst:

/**
 * 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 ),
		),
	) );
});

Der obige Code ähnelt dem Code im vorherigen Abschnitt. Was sich hier ändert, ist der Rendering-Callback.

  • $shortcode_string speichert den Shortcode-String ([sc_alert type="%s" message="%s"]).
  • Die Funktion gibt den HTML-Code des Block-Containers und den enthaltenen Shortcode zurück (do_shortcode( $shortcode_string )).

Öffne nun den Block-Inserter und suche unter den Widgets nach dem Block „Shortcode-Wrapper“. Füge ihn in deinen Inhalt ein und konfiguriere ihn in der Blockeinstellungsleiste. Der Block wird sowohl im Editor als auch im Frontend identisch aussehen.

Ein Beispiel für einen Shortcode, der in einen PHP-only-Block eingeschlossen ist
Ein Beispiel für einen Shortcode, der in einen PHP-only-Block eingeschlossen ist

Wie verändert sich die WordPress-Entwicklung mit reinen PHP-Blöcken?

Zurzeit befinden sich reine PHP-Blöcke in einer experimentellen Phase und haben noch begrenzte Möglichkeiten. Gutenberg bietet leistungsfähigere Funktionen wie Blockmuster und Blockvariationen, die alle Bearbeitungsfunktionen von nativen Gutenberg-Blöcken und benutzerdefinierten, in JavaScript erstellten Blöcken bieten. Dennoch gibt es Szenarien, in denen PHP-Blöcke erhebliche Möglichkeiten bieten.

Erstens dürften reine PHP-Blöcke die Verbreitung des Blockeditors fördern, insbesondere bei WordPress-Entwicklern, die weniger auf die serverseitige JavaScript-Entwicklung ausgerichtet sind.

Außerdem sind sie ideale Wrapper für benutzerdefinierte Funktionen und Shortcodes, wie das Beispiel in diesem Artikel zeigt. Außerdem ermöglichen sie eine einfache Integration mit externen Diensten.

Und wir können auch mit zukünftigen Verbesserungen und Funktionserweiterungen, mehr Konfigurationskontrollen und Integrationen mit bestehenden Gutenberg-Tools rechnen.

Eines ist sicher: Mit den reinen PHP-Blöcken ist das Erstellen von Gutenberg-Blöcken viel einfacher geworden.

Wenn WordPress-Entwicklung dein Job ist, bietet dir Kinsta die nötigen Entwickler-Tools, damit du dich auf die WordPress-Entwicklung konzentrieren kannst und dich nicht mit komplexen Konfigurationen und mühsamen Wartungsaufgaben herumschlagen musst: SSH, SFTP, Git-Integration, automatische Updates, Staging mit einem Klick, ein integriertes lokales Entwicklungstool und vieles mehr. Probiere es mit deinem ersten Gratismonat gleich aus.

Carlo Daniele Kinsta

Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.