Archivo de la etiqueta: editor

Los bloques reutilizables (Reusable Block) del editor Gutenberg de WordPress

Deja un comentario

Pues eso… una de las características de el editor Gutenberg para WordPress son los bloques y particularmente los bloques reutilizables (Reusable Block).
Aquí no te voy a explicar qué son esos bloques reutilizables o Reusable Block en inglés. En el enlace anterior tienes información sobre esto de los bloques reusables o reutilizables.

Lo que te voy a explicar es dónde se guardan y cómo localizarlos todos, ya que, al menos a mí se me ha dado el caso, que teniendo unos 15 bloques reutilizables, en el editor (algo escondido por cierto) del editor de bloques, solo me muestra 9. El resto, como si hubiesen desaparecido.

Y la verdad es que he estado buscando en la web a ver qué dicen de dónde están, pero en todos los casos que me he encontrado ha sido para decir lo escondidos que están y mostrar la ventana o página de edición de bloques reusables.

La página en concreto para editar esos bloques personalizados es:
<URL del blog>/wp-admin/edit.php?post_type=wp_block

La forma de acceder a esa página (aparte de escribirla en el navegador) es la siguiente:

Pulsa en editar (o crear) una entrada o página, en el editor (de Gutenberg o de bloques, no en el editor clásico), arriba a la izquierda hay una crucecita azul que al pulsarla te permite añadir uno de los bloques predefinidos de WordPress, pero además hay un enlace (o ficha) para los reutilizables (ver figuras 1 y 2).

Figura 1. Acceder a los bloques reutilizables de WordPress

 

Figura 2. Gestionar los bloques reutilizables.

Al seleccionar Reutilizable te mostrará los bloques que tienes definidos y debajo un enlace para poder editarlos (Gestionar todos los bloques reutilizables).

Al pulsa en ese enlace te mostrará la página con los bloques reutilizables (ver figura 3).

Figura 3. Editando los bloques reutilizables (del blog)

Tal como te mostré antes, la URL sería: <url del sitio>/wp-admin/edit.php?post_type=wp_block. Donde debes cambiar <url del sitio> por la url de tu blog.

En mi caso (ver figura 3) solo tengo 5 bloques reutilizables, pero en otros sitios, tengo unos 15 definidos, pero solo me muestra 9, y no de forma correlativa (según la creación).

Pero mirando la base de datos del sitio, concretamente en la tabal «posts» están todos los bloques (así como páginas, entradas del blog, etc.).

Y la forma de dar con todos ellos es haciendo una búsqueda (select) con estos datos:

SELECT * FROM 'PREFIJO_posts' WHERE post_type = 'wp_block' ORDER BY ID

Debes cambiar PREFIJO por el prefijo que tenga tu tabla.

Esto te mostrará todos los bloques reutilizables que hayas creado y podrás editarlos o al menos averiguar el ID para poder editarlo en el WordPress. Y si así te parece después poder exportarlo como un fichero .JSON.

Para editar un bloque sabiendo el ID o el nombre interno (campo post_name).

Es decir, para editar el bloque con ID 1900 tendrías que escribir algo como esto en la URL: <URL DEL SITIO>/wp-admin/post.php?post=1900&action=edit

Y esto es todo… solo quería dejar constancia por si alguien se siente un poco perdido (como yo estaba hace un par de días) por no saber dar con los bloques reutilizables. Al menos si intentaba buscarlos de forma «normal», sin tener que entrar en la base de datos 😉

Espero que te sea de utilidad.

Nos vemos.
Guillermo

Cuidadin al actualizar Visual Studio 2019

1 respuesta

Pues eso… en Visual Studio 2019, tanto la Preview como la definitiva, existe una opción supuestamente pensada para mejorar la edición de formularios (tanto de Windows Forms como de XAML) y si trabajas con monitores externos puede que te de problemas si esa opción está seleccionada, que es el estado que tiene cuando lo instalas o actualizas (al menos hasta la versión 16.4.4 de la versión final o la 16.5.0 Preview 2 de la versión Preview).

En la figura 1 y 2 puedes ver esa opción en concreto (Optimizar la representación de las pantallas de píxeles distintas) tanto en inglés como en español.

Figura 1. Options > General de Visual Studio 2019 (en inglés)
Figura 2. Opciones > General de Visual Studio 2019 (en español)

Cuando tienes esa opción seleccionada el Visual Studio ajusta (y lo peor es que sin avisar) los tamaños de los elementos del formulario (y del propio formulario) para que, en teoría, se ajuste adecuadamente.

Pero, al menos en mi experiencia, lo que hace es volverte loco… ya que te cambia los tamaños de los formularios o de los controles contenidos en esos formularios… lo último que me ha cambiado es el valor de la propiedad ImageScalingSize que es la que se encarga de mostrarte el tamaño de los iconos en un menú.
En realidad no me cambió el valor (ya que normalmente esa propiedad no se indica y se usan los valores predeterminados), lo que hizo fue añadir el tamaño 24 para los iconos… y, claro… eran algo grandes 😉

Comentarte cómo uso el Visual Studio.

Yo tengo un portátil (laptop) con una resolución de pantalla de 1920×1080 con un monitor externo de 3840×2160.

El Visual Studio lo abro en el monitor externo e intento que todas las ventanas se abran también en ese mismo monitor.

La opción que te he comentado, la tengo desactivada (sin marcar) ya que de tenerla me cambia las proporciones/tamaños de los controles y ventanas/formularios.

 

NOTA: Si vas a hacer pruebas para ver qué ocurre te recomiendo que hagas antes una copia del código con el que vas a probar.

Nos vemos.
Guillermo

Cómo activar el editor Gutenberg de WordPress

3 respuestas

Pues eso… desde la versión 5.0 WordPress incluye un nuevo editor por bloques llamado Gutenberg… y una vez que te acostumbras a él, pues… ya no quieres cambiar.

Se supone que está predeterminado para nuevos sitios con una versión igual o superior a la 5.0, de hecho es el editor que utilizo (ver la figura 1), pero estaba creando un nuevo sitio para una amiga que tiene una asociación sin ánimo de lucro (Las Maravillas Centro Ecuestre) y el editor que me muestra no es el nuevo (el que yo uso aquí) si no el clásico (ver figura 2).

Figura 1. El editor Gutenberg de WordPress
Figura 1. El editor Gutenberg de WordPress

 

Figura 2. El editor clásico de WordPress
Figura 2. El editor clásico de WordPress

 

Y buscando en la web sobre cómo activar el nuevo editor de WordPress, todo lo que he encontrado ha sido sobre ¡cómo desactivarlo! así que… me he puesto a escribir esto (en cuanto he averiguado cómo activarlo) Winking smile

Y la forma de activarlo (y desactivarlo sin usar código ni plug-ins de terceros) es muy simple. Tanto que no entiendo porqué tanto lío y cosas que hacer para algo tan simple, tanto que está en las opciones o ajustes de escritura. Bueno, sí sé porqué se complica tanto la gente… jeje. En fin.

¿Cómo activar / desactivar Gutenberg?

Ya sabes Gutenberg es el nuevo editor de bloques de WordPress. Por si te has saltado la introducción jeje.

En la barra lateral del escritorio de WordPress selecciona Ajustes y de las opciones que te muestra selecciona Escritura. Te mostrará una página como la de la figura 3.

En la parte resaltada verás las dos opciones del editor predeterminado. Selecciona Editor de bloques, guarda los cambios y ya está.

Figura 3. Activar o desactivar el editor por bloques (aka Gutenberg)
Figura 3. Activar o desactivar el editor por bloques (aka Gutenberg)

 

Una vez hecho esto, si vamos a la página que utiliza el editor clásico (ver la figura 2) verás que te dice que aún está usando el editor clásico (aunque hayas cambiado esa configuración de la figura 3) tal como te muestro en la figura 4, simplemente busca el menú de tres puntos verticales en la parte derecha y del menú desplegable selecciona convertir a bloques (ver figura 5). Y ya está.

Figura 4. Una página que usaba el editor clásico casi convertido al de bloques
Figura 4. Una página que usaba el editor clásico casi convertido al de bloques
Figura 5. La página convertida a bloques (el nuevo editor de WordPress)
Figura 5. La página convertida a bloques (el nuevo editor de WordPress)

Y de esta forma (figura 5) sería como quedaría la página mostrada en la figura 2 usando el editor de bloques.

Figura 5. La página mostrada en la figura 2 convertida a bloques
Figura 5. La página mostrada en la figura 2 convertida a bloques

 

Eso mismo hay que hacerlo en todas las páginas (y posts) que tengamos… si son muchos, ahora quizás si que valdría la pena usar código o automatizar de alguna forma que se cambie de editor. Como por ejemplo esta: How to Selectively Enable Gutenberg Block Editor (en inglés).

Y si quieres aprender cómo usar el editor Gutenberg, puedes mirar esta página: Tutorial editor Gutenberg WordPress 5.0 (en español).

 

Y esto es todo. Espero que te sea de utilidad.

Nos vemos.
Guillermo

us gb Versión en inglés / English version (traducido por Bing Translator)