Traduce tu plugin para Gutenberg

ByLuis

Traducir los plugins desde WordPress es bastante fácil, tan solo tienes que ejecutar este comando para generar los ficheros .pot.

wp i18n make-pot .

Una vez generados los ficheros de traducción, yo uso PoEdit, el siguiente paso es generar los ficheros JSON, ya que Gutenberg es lo que usa.

Para ello utilizaremos la herramienta po2json, que podrás instalar ejecutando:

npm i -g po2json

Cuando se haya instalado tendremos que generar el fichero json ejecutando desde el directorio donde están los ficheros de traducción:

po2json mi-plugin-es_ES.po mi-plugin-es_ES-mi-plugin-handler.json -f jed

Ahora viene la parte más complicada, y digo complicada porque sinceramente he tenido que mirar el código porque algo me fallaba cuando seguía lo que decía la documentación.

El nombre del fichero JSON tiene el siguiente formato [dominio de traducción]-[idioma]-[handler del fichero].json, total nada.

  • Dominio será el que usemos para traducir, en el ejemplo sería mi-plugin:
__( 'Hola que tal', 'mi-plugin' );
  • Idioma es el código del idioma, en este caso es_ES
  • Y por último el handler del fichero es el primer parámetro que usamos en wp_enqueue_script

Lo podemos ver todo en un ejemplo final:

wp_enqueue_script(
	'mi-plugin-handler', // El handler mencionado anteriormente
	$blocks_script, // Nuestro path
	[
		'wp-i18n', // De referenciar al menos a wp-i18n
	],
);

wp_set_script_translations( 'mi-plugin-handler, 'mi-plugin', plugin_dir_path( __FILE__ ) . 'languages' );

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