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.
