Wordpress Logo auf hellblauem Hintergrund

WordPress im Gutenberg Editor eigene Blocks mit ACF erstellen.

Seit der WordPress Version 5.0 hat WordPress einen neuen Standard Editor. Sein Name ist Gutenberg, was der alles kann findet man in einem älteren Beitrag von mir.

Ich selber bin ein sehr grosser Fan vom neuen Gutenberg Editor. Und möchte euch eine einfache Möglichkeit zeigen, wie ihr eigene Blocks für den Editor erstellen könnt.

Eigene Blocks…

Ich nutze dazu das Advanced Custom Fields Pro Plugin (da ich das eh bei jeder Webseite installiert habe). ACF (ab Version 5.8) bietet eine sehr einfache Möglichkeit eigene Blocks zu erstellen.

Ich zeige euch das ganze am Beispiel eines „Spoiler“ Block. Die Idee ist es Inhalt zu verstecken und erst mit dem Klick auf einen Button darzustellen.

Theoretisch kommt nachfolgender Code in die functions.php des Themes oder in ein eigenes Plugin. Damit die „functions.php“ bei mir etwas übersichtlicher ist habe ich eine Datei „gutenberg-blocks.php“ erstellt, die ich in die functions.php einbinde.

Lasst uns ein bisschen Code schreiben

Als erste schreiben wir eine Funktion, die einen neuen Block registriert:

/***************************************
 * Create Custom Gutenberg Blocks
 ***************************************/
function themename_generate_custom_blocks() {
    if( function_exists('acf_register_block') ) {
	$args = array(
		'name' => 'rueeggerme_spoiler',
		'title' => 'Spoiler',
		'description' => 'Spoiler Texte werden nicht direkt angezeigt, sondern müssen vom Leser manuell aktiviert werden.',
		'render_callback' => 'rueeggerme_render_block_spoiler',
		'category' => 'formatting',
		'icon' => 'hidden',
		'keywords' => array('spoiler')
	);
	acf_register_block($args);
    }
}
add_action('acf/init', 'stvc_generate_custom_blocks');

Was macht diese Funktion?

Theoretisch erstellen wir mit der Funktion „acf_register_block()“ einen neuen Block und geben dem mehrere Parameter in einem Array mit.

  • „name“: Ist der Name des Blocks. Es macht Sinn hier einen Präfix zu benutzen um Problemen mit anderen Plugins auszuschliessen.
  • „title“: Ist der Titel des Blocks – der im Backend sichtbar ist.
  • „description“: Ist die Beschreibung des Blocks die im Adminbereich angezeigt wird.
  • „render_callback“: Hier kommt der Name einer neuen Funktion rein. Diese Funktion steuert die Ausgabe im Frontend des Blocks.
  • „category“: Gibt die Kategorie an wo der Block im Backend sortiert wird.
  • „icon“: Gibt das Icon des Blocks an.
  • „keywords“: Sind Stichworte die genutzt werden, damit der Block über die interne Suchfunktion gefunden wird.

Theoretisch haben wir jetzt bereits einen Block der im WordPress Backend angezeigt wird. Allerdings haben wir noch keine funktionierende Ausgabe. Daher müssen wir jetzt die Funktion die im „render_callback“ aufgerufen wird erstellen. Diese Funktion kommt ebenfalls in die functions.php:

/***************************************
 * Ausgabe des Spoiler Blocks
 ***************************************/
function rueeggerme_render_block_spoiler( $block ) {
    $slug = str_replace('acf/', '', $block['name']);
    if( file_exists( get_theme_file_path("/templates/blocks/content-{$slug}.php") ) ):
        include( get_theme_file_path("/templates/blocks/content-{$slug}.php") );
    endif;
}

Ausgabe des Blocks

Hier wird eigentlich nur eine Datei eingefügt die folgenden Inhalt hat:

//Block Name: Spoiler
$id = 'testimonial-' . $block['id'];
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<p class="text-center">
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#<?php echo $id; ?>" aria-expanded="false" aria-controls="<?php echo $id; ?>">Spoiler anzeigen?</button>
</p>
<div id="<?php echo $id; ?>" class="rueeggerme-block-spoiler my-3 collapse <?php echo $block['align']; ?>">
    <h5>Vorsicht Spoiler!</h5>
    <?php the_field('block_spoiler_txt'); ?>
</div>

Danach braucht es nur noch etwas CSS und Javascript und wir sind weitgehend fertig. Jetzt müssen wir im WordPress Backend nur noch die Felder für den Block erstellen.

Feldgruppen bearbeiten

Ich habe mich für ein Wysiwyg Feld mit dem Namen „block_spoiler_txt“ entschieden. Das ganze sieht im Backend so aus:

Ansicht für Advanced Custom Fields Pro für den Spoiler Gutenberg Block

Fazit

Theoretisch kann man auch mit WordPress Bordmitteln eigene Blocks erstellen. Der Vorgang ist allerdings ziemlich kompliziert und JavaScript lastig. Da ACF Pro eh bei allen meinen WordPress Installationen läuft bin ich froh, dass es hier eine sehr einfache und super flexible Lösung gibt um alle möglichen Blocks zu erstellen!

iOS 12 im Test
Der Klimawandel ist kein politisches sondern ein technologisches Problem

Noch keine Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.