Mit der Einführung des Gutenberg-Editors hat WordPress die Art und Weise, wie Inhalte erstellt und verwaltet werden, grundlegend verändert. Eine der mächtigsten Funktionen des neuen Editors ist die Möglichkeit, eigene Custom Blöcke zu erstellen. Diese erlauben es Entwicklern und IT-Experten, maßgeschneiderte Lösungen zu entwickeln, die genau auf die Bedürfnisse ihrer Projekte abgestimmt sind. In diesem Blogbeitrag werden wir die Grundlagen der Erstellung von Custom Blöcken verstehen und Ihnen eine praktische Anleitung bieten, wie Sie eigene Blöcke entwickeln können.

Warum Custom Blöcke?

Custom Blöcke bieten eine unglaubliche Flexibilität und Anpassungsfähigkeit. Während die standardmäßigen Gutenberg-Blöcke eine Vielzahl von Funktionen abdecken, gibt es oft spezifische Anforderungen, die nur durch individuell entwickelte Blöcke erfüllt werden können. Hier sind einige Gründe, warum Sie Custom Blöcke in Betracht ziehen sollten:

• Einzigartige Funktionalitäten: Benutzerdefinierte Bausteine ermöglichen es Ihnen, spezielle Funktionen zu implementieren, die über die Standardoptionen hinausgehen.
• Markenkonformität: Sie können Bausteine erstellen, die genau den Design– und Funktionsrichtlinien Ihrer Marke entsprechen.
• Wiederverwendbarkeit: Einmal erstellte Benutzerdefinierte Bausteine können in verschiedenen Projekten wiederverwendet werden, was Zeit und Ressourcen spart.

Grundlagen der Entwicklung von Custom Blöcken

Voraussetzungen

Bevor Sie mit der Entwicklung von Custom Blöcken beginnen, sollten Sie sicherstellen, dass Sie die folgenden Voraussetzungen erfüllen:

• Grundkenntnisse in JavaScript und React: Gutenberg verwendet React für die Erstellung von Blöcken.
• Kenntnisse in PHP: Für die Registrierung und Server-seitige Verarbeitung von Blöcken.
• Installierte Entwicklungsumgebung: Node.js, npm und ein Texteditor wie Visual Studio Code.

Einrichtung der Entwicklungsumgebung

1. WordPress installieren: Installieren Sie eine lokale WordPress-Installation.
2. Theme oder Plugin erstellen: Erstellen Sie ein neues Theme oder Plugin, um Ihre Benutzerdefinierten Blöcke zu verwalten.
3. npm initialisieren: Navigieren Sie in Ihr Theme- oder Plugin-Verzeichnis und führen Sie npm init aus, um ein neues npm-Projekt zu initialisieren.

Erstellen eines einfachen Custom Blocks

Hier ist ein grundlegendes Beispiel, wie Sie einen Custom Block erstellen können.

1. Block-Dateien erstellen: Erstellen Sie in Ihrem Plugin-Verzeichnis eine Datei namens block.js und eine PHP-Datei, um den Block zu registrieren.

block.js

javascript

const { registerBlockType } = wp.blocks;

const { RichText } = wp.blockEditor;

registerBlockType(‚myplugin/custom-block‘, {

    title: ‚Custom Block‘,

    icon: ’smiley‘,

    category: ‚common‘,

    attributes: {

        content: {

            type: ’string‘,

            source: ‚html‘,

            selector: ‚p‘,

        },

    },

    edit({ attributes, setAttributes }) {

        const { content } = attributes;

        return (

            <RichText

                tagName=“p“

                value={content}

                onChange={(content) => setAttributes({ content })}

                placeholder=“Geben Sie den Inhalt ein…“

            />

        );

    },

    save({ attributes }) {

        const { content } = attributes;

        return <RichText.Content tagName=“p“ value={content} />;

    },

});

block.php

php

function myplugin_register_custom_block() {

    wp_register_script(

        ‚myplugin-custom-block‘,

        plugins_url( ‚block.js‘, __FILE__ ),

        array( ‚wp-blocks‘, ‚wp-element‘, ‚wp-editor‘ )

    );

    register_block_type( ‚myplugin/custom-block‘, array(

        ‚editor_script‘ => ‚myplugin-custom-block‘,

    ) );

}

add_action( ‚init‘, ‚myplugin_register_custom_block‘ );

Dieses Beispiel zeigt, wie Sie einen einfachen Custom Block mit einem RichText-Feld erstellen, das im Editor und im Frontend angezeigt wird.

Erweiterte Techniken

Verwendung von Block-Controls und Inspector-Controls

Um Ihre Blöcke noch leistungsfähiger zu machen, können Sie Block-Controls und Inspector-Controls verwenden.

Block-Controls

Block-Controls ermöglichen es Ihnen, steuerelemente direkt im Block-Editor anzuzeigen, z.B. für Textausrichtungen.

javascript

const { BlockControls, AlignmentToolbar } = wp.blockEditor;

registerBlockType(‚myplugin/custom-block‘, {

    // … vorheriger Code

    edit({ attributes, setAttributes }) {

        const { content, alignment } = attributes;

        return (

            <>

                <BlockControls>

                    <AlignmentToolbar

                        value={alignment}

                        onChange={(alignment) => setAttributes({ alignment })}

                    />

                </BlockControls>

                <RichText

                    tagName=“p“

                    value={content}

                    style={{ textAlign: alignment }}

                    onChange={(content) => setAttributes({ content })}

                    placeholder=“Geben Sie den Inhalt ein…“

                />

            </>

        );

    },

    save({ attributes }) {

        const { content, alignment } = attributes;

        return <RichText.Content tagName=“p“ value={content} style={{ textAlign: alignment }} />;

    },

});

Inspector-Controls

Inspector-Controls bieten zusätzliche Einstellungen im Seitenleisten-Bereich des Editors.

javascript

const { InspectorControls } = wp.blockEditor;

const { PanelBody, TextControl } = wp.components;

registerBlockType(‚myplugin/custom-block‘, {

    // … vorheriger Code

    edit({ attributes, setAttributes }) {

        const { content, customClass } = attributes;

        return (

            <>

                <InspectorControls>

                    <PanelBody title=“Einstellungen“>

                        <TextControl

                            label=“Benutzerdefinierte CSS-Klasse“

                            value={customClass}

                            onChange={(customClass) => setAttributes({ customClass })}

                        />

                    </PanelBody>

                </InspectorControls>

                <RichText

                    tagName=“p“

                    value={content}

                    onChange={(content) => setAttributes({ content })}

                    placeholder=“Geben Sie den Inhalt ein…“

                    className={customClass}

                />

            </>

        );

    },

    save({ attributes }) {

        const { content, customClass } = attributes;

        return <RichText.Content tagName=“p“ value={content} className={customClass} />;

    },

});

Dynamische Bausteine

Dynamische Bausteine bieten die Möglichkeit, Inhalte serverseitig zu rendern. Dies ist nützlich, wenn der Blockinhalt dynamisch generiert wird, z.B. durch Datenbankabfragen.

php

register_block_type(‚myplugin/dynamic-block‘, array(

    ‚render_callback‘ => ‚myplugin_render_dynamic_block‘,

));

function myplugin_render_dynamic_block($attributes) {

    $recent_posts = wp_get_recent_posts(array(’numberposts‘ => 5));

    $output = ‚<ul>‘;

    foreach ($recent_posts as $post) {

        $output .= ‚<li><a href=“‚ . get_permalink($post[‚ID‘]) . ‚“>‘ . $post[‚post_title‘] . ‚</a></li>‘;

    }

    $output .= ‚</ul>‘;

    return $output;

}

Fazit

Die Entwicklung von Custom Blöcken für den Gutenberg-Editor eröffnet Entwicklern und IT-Experten eine Welt voller Möglichkeiten. Durch das Erstellen maßgeschneiderter Bausteine können Sie Ihre WordPress-Websites flexibler, leistungsfähiger und benutzerfreundlicher gestalten. Nutzen Sie die hier vorgestellten Techniken und Best Practices, um Ihre eigenen Custom Blöcke zu entwickeln und die volle Power des Gutenberg-Editors auszuschöpfen. Mit den richtigen Tools und ein wenig Kreativität können Sie beeindruckende und einzigartige Content-Erlebnisse schaffen, die Ihre Benutzer begeistern werden.