WordPress Styles als Plugin für Gutenberg Blöcke

Vor einigen Tagen habe ich hier über meine Lösung für eigene Styles für Gutenberg Blöcke berichtet. Auch hatte ich erklärt dass die Lösung von „Die Netzialisten“ bei mir nicht funktioniert. Mir hat das keine Ruhe gelassen. Die komfortable „Netzialisten-Lösung“ funktioniert jetzt doch, wenn man die PHP-Funktion etwas ändert.

Der Grund für das „Nicht-Funktionieren“ liegt in der WordPress-Funktion wp_enqueue_script() (WordPress Code Reference). Dort ist im Original ein Array zu finden. In diesem Array sind registrierte Scripte notiert von denen diese Funktion abhängig ist. Welcher Teil dieses Array hier nicht will weiß ich nicht. Ersetzt man dieses Array durch false funktioniert das Ganze.

PHP-Funktion

Allerdings habe ich das PHP-Snippet der Netzialisten nicht genutzt, sondern durch ein eigene Funktion ersetzt. Nachfolgendes Snippet lädt zuerst das Stylesheet und das Javascript im WordPress- Backend und anschließend auch das gleiche Stylesheet im WordPress Theme. Dadurch dass ich die CSS-Datei im Front- und Backend lade muss ich bei Änderungen nur eine Datei editieren.

/*
 * Plugin Name:
 * Description: 
 * Plugin URI: 
 * Version:
 * Author:
 * Author URI:
 */

if (! defined('WPINC')) {
  die;
}

// Gutenberg Stylesheet + Javascript -------------------------------------------*/
function my_gutenberg_editor_styles() {	

  wp_enqueue_style( 'my-gutenberg-css', plugins_url( 'my-gutenberg-styles.css', __FILE__ ), false, '2020.03.20.3' );
  wp_enqueue_script( 'my-gutenberg-js',  plugins_url( 'my-gutenberg-styles.js', __FILE__ ), false, '2020.03.20' );
}
add_action( 'enqueue_block_editor_assets', 'my_gutenberg_editor_styles' );

// Theme Stylesheets -----------------------------------------------------------*/
function my_gutenberg_theme_styles() {	
  
  wp_enqueue_style( 'my-gutenberg-style', plugins_url( 'my-gutenberg-styles.css', __FILE__ ), false, '2020.03.20.3' );
}
add_action( 'wp_enqueue_scripts', 'my_gutenberg_theme_styles', 15 );

JS und CSS Dateien

Der nachfolgende JS-Code und auch das Stylesheet habe ich fast unverändert übernommen.

/* Hinweis Box -----------------------------------------------------------------*/
wp.blocks.registerBlockStyle( 'core/paragraph', {
name: 'paragraph-box',
label: 'Hinweis'
} );

/* Häkchenliste ----------------------------------------------------------------*/
wp.blocks.registerBlockStyle( 'core/list', { 
name: 'checkmark-list',
label: 'Häkchenliste'
} );    

/* Linkliste -------------------------------------------------------------------*/
wp.blocks.registerBlockStyle( 'core/list', { 
name: 'link-list',
label: 'Linkliste'
} );
/* Hinweis Box -----------------------------------------------------------------*/
.is-style-paragraph-box { 
  padding: 20px 30px;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Häkchenliste ----------------------------------------------------------------*/
.is-style-checkmark-list { 
  list-style-type: '✔' !important;
  list-style-position: outside !important;
  padding-left: 0;
} 

.is-style-checkmark-list li { 
  padding-left: 0.25em !important;
}

/* Linkliste -------------------------------------------------------------------*/
.has-black-link-color a, 
.is-style-link-list a { 
  color: rgba(0, 0, 0, 0.9) !important;
}

Ich habe alle 3 Dateien in einen Ordner gepackt, gezippt und als Plugin in WordPress installiert.