HARALD MELCHER

Eigener Block für den WordPress Gutenberg Editor

Aktuelle Versionen von WordPress beinhalten den „Gutenberg-Editor“, mit dem man Beiträge und Seiten aus einzelnen vorgefertigten Blöcken zusammenbauen kann. Das reicht von einfachen Textblöcken bis zu ganzen Galerien. Dies macht einen ganze Reihe von Themen oder Blockbuilder-Plugins überflüssig, weil WordPress nun von Haus aus Blöcke unterstützt.

Obwohl die mitgelieferten Block-Arten die meisten Einsatzfälle abdecken, wird es immer wieder Fälle geben, die einen eigenen, maßgeschneiderten Block erfordern.

Die einfachste Block-Art ist ein statischer Block, den ein zuvor registriertes Javascript zur Laufzeit aufbaut und anzeigt. Damit WordPress das Javascript zur Laufzeit finden und ansprechen kann, müssen es ein paar Zeilen Code bei WordPress anmelden. Insofert verhält sich ein Block zunächst wie ein Plugin und liegt daher auch im Plugin-Unterverzeichnis des WordPress-Verzeichnisbaums.

Block-Script anmelden

Damit WordPress das Block-Script und bei aufwändigeren Blöcken auch die Styles kennt, erhält es diese Information durch Aufruf der index.php im Blockverzeichnis – genau wie bei einem Plugin.

Kennt WordPress das Skript, versteht es auch die darauf folgende Anmeldung des eigentlichen Blocks, die auf das eben registrierte Skript Bezug nimmt.

<?php
/**
 * Plugin Name: Harald Melcher Blocks
 * Plugin URI: https://haraldmelcher.de/wordpress/plugins/haraldmelcherblocks
 * Description: More Blocks for the Gutenberg editor
 * Version: 0.0.1
 * Author: Harald Melcher
 *
 */

defined( 'ABSPATH' ) || exit;

function harald_melcher_blocks_01_register_block() {
    if ( ! function_exists( 'register_block_type' ) ) {
        // Gutenberg is not active.
        return;
    }

    wp_register_script(
        'harald-melcher-blocks-01',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    register_block_type( 'harald-melcher-blocks/block-01', array(
        'editor_script' => 'harald-melcher-blocks-01',
    ) );

}
add_action( 'init', 'harald_melcher_blocks_01_register_block' );

WordPress ruft das Javascript des Blocks an zwei Stellen auf, einmal im Backend beim Einfügen und Bearbeiten des Blocks und einmal im Frontend beim Anzeigen des Blocks.

Der vorangestellte Namensraum haraldmelcherblocks verhindert Namenskollisionen bei Blöcken.

Die Funktion edit() regelt, was die Autorin beim Einfügen des Blocks sieht. Da dies ein einfacher statischer Block ist, geht man davon aus, dass der Block die hier eventuell eingegebenen statischen Inhalte speichert und im Frontend bei Aufruf von save() wiedergibt.

/*
 * Copyright (c) 2019 by Harald Melcher
 */


( function( blocks, i18n, element ) {
    var el = element.createElement;
    var __ = i18n.__;

    var blockStyle = {
        backgroundColor: '#2A71B0',
        color: '#fff',
        padding: '20px',
    };

    blocks.registerBlockType( 'harald-melcher-blocks/block-01', {
        title: __( 'Harald Melcher: Basic', 'harald-melcher-blocks' ),
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                { style: blockStyle },
                'Haralds editor block.'
            );
        },
        save: function() {
            return el(
                'p',
                { style: blockStyle },
                'Haralds frontend block.'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element
) );

Beim Einfügen des Blocks erscheint die Backend-Ansicht:

Die Frontend-Ansicht unterscheidet sich in diesem Beispiel nur durch den statischen Text.