Gutenberg Snippet block

Allows to add snippets blocks to your content: Javascript, CSS, HTML...

Purpose

Add snippet blocks to your WordPress content using the new Gutenberg editor

Getting Started

• Download the plugin into your 'plugins' folder.
• cd into the folder
• run composer install to install PHPCS
• run npm install to install the project dependancies
• run npm run build to compile the plugin assets

How to use it

Add a Snippet block within your content

Include your code

Select the language

Save the post and check your front-end

Supported languages

• Apache
• Bash
• C#
• C++
• CSS
• Erlang
• Go
• HTML
• XML
• Handlebars
• JSON
• Java
• JavaScript
• Markdown
• Objective C
• PHP
• Python
• R
• Ruby
• Rust
• SCSS
• SQL
• Shell
• Twig
• TypeScript

Credits

Based in Making WordPress Do More Block Starter Kit

Original webpack configuration (before modifications) from Zac Gordon's Gutenberg Course.

Original deploy script (before modifications) from Garry Jones.

Webpack HMR thanks to Christian Glingener

Development

If you want to use Webpack HMR, add these lines to your wp-config.php file. I tried to add them to the plugin but it is not allowed by WordPress plugin reviewers

$webpack_server_http_scripts_root   = 'http://localhost:3000';
$webpack_server_http_scripts_a_file = $webpack_server_http_scripts_root . '/blocks.js';

// phpcs:disable
if ( @file_get_contents( $webpack_server_http_scripts_a_file ) !== false ) {
	define( 'SW_BUNDLE_SCRIPT_BASE', $webpack_server_http_scripts_root );
}
// phpcs:enable

Changelod

Read the changelog here