Snippets Block en WordPress.org

Snippets Block en WordPress.org

ByLuis

El otro día comentaba que estaba haciendo un plugin para WordPress que permitiera añadir snippets como bloques en Gutenber.

Por fin el otro día aprobaron el plugin en el directorio de WordPress.org, así que ya sabéis, si os viene bien, podéis instalarlo en vuestras webs.

Por cierto, echad un ojo al script que venía incluído dentro del boilerplate que usé. Está genial para poder subir al SVN de WordPress.org los cambios realizados en GitHub. Etiqueta versiones, sube a WP.org, …

Snippets Blocks en WordPress.org

Gutenberg Snippet block

ByLuis

Ú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,
};

Snippet Block en Github