Gutenberg Snippet block
Últimamente estoy trabajando bastante con Gutenberg, tiene sus cosas buenas y malas. Sea como sea, es el futuro de WordPress, así que toca aprender.
Lo más interesante de todo es poder usar lo que sabía de webpack, React, HMR, … Y para practicar he hecho un plugin que permite añadir snippets de código en los posts usando los bloques de Gutenberg
Para ello uso la librería highlight.js que permite destacar código de forma sencilla. Aquí un ejemplo
// Import CSS.
import './scss/style.scss';
import './scss/editor.scss';
import icon from './icon';
import edit from './edit';
import save from './save';
import attributes from './attributes';
import { __ } from '@wordpress/i18n'; // Import __() from wp.i18n
export const name = 'sentidoweb/snippet';
export const settings = {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Snippets editor', 'sw-snippet' ), // Block title.
icon: icon,
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'code', 'sw-snippet' ),
__( 'format', 'sw-snippet' ),
__( 'snippet', 'sw-snippet' ),
],
attributes,
edit,
save,
};