Warum dieses erste Block Beispiel

Die ersten Versuche eine eigenen Gutenberg Block zu programmieren, können sehr verwirrend sein, viele Anleitungen, mit schon umfangreichen Funktionen und meist die Verwendung von node.js, können sehr verwirrend sein.

Um eine erste Basis zu haben, an der man ausbauen kann, möchte ich zeigen wie mit wenigen Codenzeilen bereits ein Block verwendbar ist.

Dieser Block zeigt sowohl im Editor als auch im Frontend einen Fixen Text und hat keine Einstellmöglichkeiten und keine extra Funktionen.

nur zum Experimentieren !!

diese Plugin ermöglicht eine einfache Block zu registieren, um solche Blöcke mit Funktionen zu erweitern, oder auch weitere Blöcke zu registrieren, muss der Grundaufbau von solchen Plugins erweitert werden. So gibt es die Möglichkeit weiterhin mit „nur“ Javascript daran zu arbeiten oder mit JSX Javascript Extension (react Frameworks) und durch verwenden von node.js. Ich habe bereits einige Blöcke nur mit Javascript entwickeln können und versuche auf diesem Weg noch weiter zu experimentieren.
Auch ist es wichtig mit welcher WordPress Version man arbeiten will, da sich laufend Erneuerung ergeben und so manch Anleitungen im Internet noch auf ältere Versionen aufgebaut haben. Auch ich muss ständig mit diesen Neuerungen experimentieren.
Dadurch werde ich auch diese Experimentierplugin wahrscheinlich bald wieder updaten umdauch neueste Erkenntnisse einzubinden.

ein neues Plugin Mein Hallo Welt Block

Als erstes wird die PHP Plugindatei erstellt
lege dazu unter wp-content/plugins zum Beispiel eine Ordner „meinblock“ an in diesem Ordner erstelle zB die Datei meinblock.php mit dem PHP Code

<?php
/*
Plugin Name: Mein Hallo Welt Block
Plugin URI: https://www.wiesser.at/wordpress/plugins/meinersterblock
Description: Ein einfachstes Plugin um einen Block zu erzeugen
Version: 1.0.0
Author: Franz Wieser
Author URI: https://www.wieser.at
License: GPL2
*/

function mein_block_init() {
    wp_register_script(
        'mein-block-editor-script',
        plugins_url( 'meinblock.js', __FILE__ ), // Pfad zu deiner JS-Datei
        array( 'wp-blocks' ), 
    );
    // wp_register_script bindet die Javascript datei ein, 
    // für die Javascriptseitige Blockregistrierung und Rendern im Editor


    register_block_type( 'mein-plugin/mein-erster-block', array(
        'editor_script' => 'mein-block-editor-script',
        'render_callback' => 'mein_block_render_callback', 
    ) );
    // register_block_type ist für die Serverseitige PHP Block registrierung
}
add_action( 'init', 'mein_block_init' );
function mein_block_render_callback(){
   return '<div>Hallo Welt Block</div>';
}
// render_callback ist für rendern im Frontend zuständig

Javascript Datei für den Block

im Ordner meinblock erzeuge die datei „meinblock.js“

const { registerBlockType } = wp.blocks;

registerBlockType('mein-plugin/mein-erster-block', {
    title: 'Mein erster Block',
    icon: 'star-filled',
    category: 'design', 
 
    edit() {
        return 'Mein Hallo Welt Block im Editor';
    },

    save() {
        return null;
    },
});

Aktivieren des Plugins Mein Hallo Welt Block

in deinem WordPress Admin bereich unter Plugins aktiviere das Plugin „Block Hallo Welt“

Verwende deinen Block im Editor

im Blockeditor lege einen neuen Block an mit dem Plus Symbol, dieser Block ist unter Blöcke in der Kategorie Design, oder gibt in suchen „mein erster Block“ ein, und wähle diesen Block aus.

im Editor siehst du den Text „Mein Hallo Welt Block im Editor“
in der Vorschau oder in Frontenden Ansicht siehst du den Text „Hallo Welt Block“

Damit hast du auf die wahrscheinlich schnellste Möglichkeit eine (Gutenberg) WordPress Block selbst programmiert.

Das fertige Plugin „Mein Hallo Welt Block“

du kannst auch diese meinblock.zip Datei Downloaden und in deinem WordPress unter „Neues Pugin hinzufügen“ diese Zip hochladen und aktivieren.

TIPP verwende WordPress Playground

zum Testen und ausprobieren verwende WordPress Playground, Dieses WordPress wird in deinem Browser gestartet und du brauchst keinen Webspace.
https://playground.wordpress.net/

wie geht es weiter?

du kannst somit dein Block Plugin erweitern, mit vielen Funktionen und Code kannst du geniale Blöcke coden.

in meiner Werkstatt habe ich zum Beispiel eine MiniTermin Kalender nur mit Blöcke aufgebaut.
und laufend entstehen neue Blöcke mit vielen Ideen

Praktisch kannst du meine Blöcke und wie du diese selbst Coden kannst, auch bei unserem WordPress Meetup in Linz (Oberösterreich) erleben.