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

Similar Posts

|

BlueShoes: framework y CMS para PHP

ByLuis

blueshoes.pngBlueShoes es un framework y CMS escrito en PHP, con soporte para MySQL y para Oracle y MSSQL. Ofrece a los desarrolladores soluciones para necesidades reales, para lo cual disponemos de componentes que manejo de usuarios, sesión, grupo de usuarios, tratamiento de excepciones, logs, formularios y mucho más.
Dispone de la posibilidad de añadir plugins, pero los 3 que ofrece hasta ahora no les veo mucha utilidad. Esperemos que vayan en aumento con el tiempo.
Existe una versión gratuita y otra enterprise que por un precio nos ofrece más características. No es el framework que más me ha gustado, pero cuanta más variedad dónde podamos elegir, mejor.
BlueShoes

Como modificar las URLs de la BD de WordPress al exportar

ByLuis

Cuando se exporta la versión de desarrollo de WordPress a otro dominio, nos encontramos con el problema de las URLs. WordPress permite modificar las URLs fácilmente desde el wp-config mediante WP_HOME y WP_SITEURL. Desgraciadamente, WP puede estar lleno de URLs en la BD como en wp_options, o directamente en posts, …

Para solucionar esto existe un script que realizar esta tarea por nosotros directamente sobre la BD.

Database Search and Replace Script in PHP

Vía / WP Beaches

Crear thumbs con WordPress

ByLuis

Si antes hablaba de una librería que crea thumbs con PHP, ahora comento cómo hacerlo con WordPress, ya que a veces es necesario subir ficheros cuando WP se utiliza para algo más que un simple blog:

// uploadfile tiene el path del fichero subido
// el cuarto parámetro es para que haga crop
$thumb = image_resize($uploadfile, $width, $height, true); 
$upload = wp_upload_dir();
$thumburl = str_replace($upload['path'], $upload['url'],  $thumb );

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' );

Ejemplos de código para WP

ByLuis

Yo soy de la opinión, quizás no muy compartida, de que el código de WordPress es una mie…. Siempre que quiero hacer algo en una plantilla o un plugin me desespero, por eso, a la gente que le pase como a mí, estos casos de ejemplos de código le puede venir muy bien:

Asignar una imagen al ID de un post

Esto puede parecer raro, pero si quieres que cada post pueda tener una imagen asociada, este truco explica cómo hacerlo.

$image = "$id.gif";
if(is_readable("./images/$image")) {
echo 'alt tag';
} else {
echo 'alt tag';
}

Separar los trackbacks de los comentarios

Para ello hay que modificar la plantilla de comentarios y duplicar la estructura de los comentarios, añadiendo justo despues del foreach de los comentarios:

<?php foreach ($comments as $comment) : ?>

lo siguiente:

$comment_type = get_comment_type();
if($comment_type == ‘comment’) {

Mostrar el nombre de la categoría

Muestra el nombre de la categoría allí donde la mostremos.

$cat = get_the_category(); $cat = $cat[0]; echo $cat->cat_name;

Posts más recientes

Una lista con los tres posts más recientes:

get_archives(’postbypost’, 3);

5 WordPress PHP Code Snippets

POG: generador de objetos para PHP

ByLuis

pog.pngPOG (PHP Object Generator) es una aplicación open source que genera código limpio y válido para PHP4 y PHP5 para generar objetos. Otra característica del código que genera es que es sencillo de seguir.
El tiempo que podemos ahorrar a la hora de desarrollar nuestras aplicaciones puede ser considerable. También nos ofrece la aplicación online para poder crear nuestros objetos. Habrá que indicar qué versión de PHP queremos, el nombre del objeto y los atributos del objeto: nombre y tipo de dato, el cual coincidirá con los posibles tipos de datos de MySQL. A parte de ofrecernos el código PHP, en los comentarios PHP encontraremos la sentencia para crear la tabla en MySQL.
PHP Object Generator
Vía / International PHP Magazine