WordPress editor de bloques

@wordpress/block-editor github

Este paquete asume que su código se ejecutará en un entorno ES2015+. Si utilizas un entorno que tiene un soporte limitado o nulo para estas características y APIs del lenguaje, debes incluir en tu código el polyfill incluido en @wordpress/babel-preset-default.

En este ejemplo, estamos instanciando un editor de bloques. Un editor de bloques se compone de un componente envolvente BlockEditorProvider donde se pasa el array actual de bloques y en cada cambio se llaman las callbacks onInput o onChange dependiendo de si el cambio se considera persistente o no.

En el ejemplo anterior estamos renderizando el BlockList para mostrar y editar la lista de bloques. Por ejemplo, podríamos añadir una barra lateral personalizada y utilizar el componente BlockInspector para poder editar la configuración avanzada del bloque actualmente seleccionado. (Consulte la API para ver la lista de todos los componentes disponibles).

En el ejemplo anterior, no hay ningún tipo de bloque registrado, para poder utilizar el editor de bloques con éxito asegúrese de registrar algunos tipos de bloque. Por ejemplo, el registro de los tipos de bloque del núcleo puede hacerse así:

Comentarios

"Gutenberg está desbloqueando una enorme cantidad de creatividad y poder en manos de los usuarios para crear y diseñar cosas y hacer sitios web por su cuenta sin depender de nadie más. [Sin Gutenberg] tal vez habrían tenido que contratar a alguien para hacerlo, o tal vez estos sitios web y cosas no existirían", dijo Matt Mullenweg en la sesión de clausura de WordCamp Europe 2022.

Gutenberg se estableció como editor por defecto en WordPress 5.0. De cara al futuro, el uso de este editor se ampliará a los widgets y menús, e incluso permitirá diseñar las plantillas de los temas con una edición completa del sitio.

El editor Gutenberg es el editor de contenido por defecto de WordPress que proporciona una nueva experiencia de edición modular. Cada pieza de contenido en el editor es su propio bloque que se puede añadir, organizar y reorganizar para crear páginas ricas en medios. Este proceso es muy visual e intuitivo, a diferencia de los procesos que requieren shortcodes, HTML personalizado y otras soluciones.

El editor Gutenberg se añadió por primera vez a WordPress en la versión 5.0, que se lanzó en diciembre de 2018. Reemplazó al antiguo editor TinyMCE, que ahora se conoce como el "editor clásico" o el "editor TinyMCE clásico".

Johannes gutenberg

Independientemente de cómo lo llames, el Editor de Bloques de WordPress (o Gutenberg si llevas tiempo siguiéndolo) trae algo de equipaje para el viaje. He estado siguiendo el ruido y el #wpdrama que rodea al Editor de Bloques desde que existe. Al principio, el ruido era ensordecedor. Ahora, sin embargo, a medida que el editor ha madurado, las conversaciones negativas se han convertido en optimismo.

Al principio, yo tenía sentimientos negativos en torno a todo el proyecto, al igual que muchos otros. A pesar de mi resistencia al cambio, lo probé y disfruté de la experiencia. La buena noticia es que hay muchos recursos para ayudarte a convertirte en un experto con el editor de bloques de WordPress.

El proyecto Gutenberg se conoce ahora como el Editor de Bloques de WordPress en la documentación oficial de WordPress. Es la nueva forma de editar contenido en WordPress y sustituye al antiguo editor de contenido de entradas TinyMCE. El Editor de Bloques puede hacer más, también - piensa en shortcodes, widgets, menús, e incluso campos personalizados.

El Editor de Bloques es una reacción obvia a los competidores de WordPress. Por ejemplo, se puede ver la influencia de la experiencia de escritura de Medium y los constructores de sitios rápidos y fáciles como Wix y Squarespace.

Editor visual

Puedes elegir entre utilizar el "editor clásico" o el "editor de bloques" (a veces llamado "editor Gutenberg") para editar el contenido de tu sitio web. El editor clásico es el mismo editor de texto enriquecido que se utilizaba anteriormente en WordPress, mientras que el editor de bloques es una característica reciente de WordPress y permite crear diseños flexibles de arrastrar y soltar.

El nuevo editor de WordPress utiliza bloques de contenido que se pueden añadir y organizar fácilmente en una interfaz de arrastrar y soltar. El área de bloques, donde se pueden añadir bloques de contenido, aparece en la parte izquierda de la ventana de edición. A la derecha aparece el panel del inspector, donde se pueden editar los ajustes de la página y del bloque seleccionado.

Para añadir un bloque, seleccione el icono del signo más "Añadir bloque" en la parte superior izquierda del área de bloques, o encima o debajo de los bloques ya existentes en la página. Elija un tipo de contenido de la lista, o busque o examine un tipo de bloque. Navegue por los bloques de una página mediante el icono de lista "Navegación por bloques" situado en la parte superior izquierda del área de bloques.