HARALD MELCHER

Externer Style für einen eigenen WordPress Gutenberg Block

Inline-Styles für Blöcke machen nur dann Sinn, wenn es dort wenig zu stylen gibt. Mehr Stilangaben sammelt man sinnvollerweise in externen Stylesheet-Dateien.

WordPress erzeugt dabei zu jedem Block im Frontend einen Stylesheet-Klassennamen, den es aus „wp-block-„, Namespace, „-“ und Blocknamen zusammensetzt. Der folgende Code baut den gleichen Klassennamen auch ins Backend ein, auch wenn das Backend später eine andere CSS-Datei verwendet.

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

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

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

Die Styles für den Backend-Editor wandern in editor.css:

/*
 * Copyright (c) 2019 by Harald Melcher
 * editor.css
 */

.wp-block-harald-melcher-blocks-block-01 {
     color: darkblue;
     background: dodgerblue;
     border: 2px solid #9c9;
     padding: 20px;
 }

… und das sieht im Backend dann so aus:

Im Frontend ziehen die Styles von style.css:

/*
 * Copyright (c) 2019 by Harald Melcher
 * style.css
 */

.wp-block-harald-melcher-blocks-block-01 {
    color: darkred;
    background: indianred;
    border: 2px solid #c99;
    padding: 20px;
}

Hier sind die Farben anders, damit man einen Unterschied sieht. Später sollten die Ansichten möglichst ähnlich sein, damit die Designerin ahnt, wie der Block rauskommen wird.