Cómo adaptar su complemento a Gutenberg: Parte 1 (API de bloque)

“Tengo un complemento”, dices, “¿cómo lo hago para Gutenberg?” La historia es simple; Gutenberg es la nueva experiencia del editor en WordPress, que se combinará con el núcleo en la próxima versión principal. Muchos complementos que no se mantienen al día con esto quedará desactualizado. Esto hace que sea esencial adaptar su complemento a Gutenberg antes de que sea demasiado tarde. ¿Quién se ve afectado? Casi todos los complementos relacionados con el editor de publicaciones se verán afectados por Gutenberg. Por ejemplo, si su complemento agrega un botón a TinyMCE para colocar un código corto en el editor, malas noticias; Será su final.

Cómo adaptar su complemento #WordPress para #Gutenberg: Block API #Turial
Haga clic en Tweet
“¿Tengo que adaptar mis complementos a Gutenberg?” Entonces, ¿qué complementos necesitan actualización para Gutenberg? Cualquier complemento que funcione con:
Metaboxs personalizados
Códigos cortos
Botones tinymce
o cualquier función del editor
Si su complemento cae en las categorías anteriores, podría ser el momento de crear un sistema de solicitud de funciones, porque, aunque algunos complementos continuarán funcionando con Gutenberg, como un complemento que agrega un metabox simple, por ejemplo, no será un Experiencia igualmente simple para sus usuarios.
Incluso los códigos cortos continuarán funcionando como antes, pero será solo un nudo de texto simple en el editor, mientras que todos los complementos de código corto para Gutenberg seguirán la interfaz de uso del bloque y será más fácil de usar por los usuarios. Entonces, sí, los usuarios preferirán complementos creados para la experiencia de Gutenberg. Y los que permanecerán atrás serán reemplazados por un complemento competidor. Solo para tener una idea, aquí hay un ejemplo de cómo se ve la experiencia de editor de usuarios estándar con un complemento nuestro (A) y luego cómo se ve en Gutenberg (B), con el complemento optimizado para él (A)
(b)

¡No temáis! Estamos aquí para ayudarlo a preparar sus complementos para Gutenberg. Hay muchas maneras de integrar el complemento en Gutenberg, dependiendo de cómo funcione el complemento, que discutiremos en este artículo.

Cosas que vale la pena saber de antemano
Gutenberg está escrito en React. Los complementos de Gutenberg también están codificados en JavaScript, que también puede ser una transición difícil para los desarrolladores que solo codifican PHP. Aunque no tiene que saber sobre React para crear complementos para Gutenberg, necesitará algunos conocimientos básicos sobre JavaScript. Si previamente ha trabajado en React y JSX, será una razón similar para usted.
Aunque no hay suficiente documentación oficial para Gutenberg, su almacén de GitHub tiene mucha información valiosa para los desarrolladores. Si desea aprender profundamente el desarrollo de Gutenberg, debe mantener los ojos abiertos a todo lo que sucede en el almacén de Github de Gutenberg, porque el proyecto se mueve muy rápidamente y las cosas cambian todos los días.
Sube para adaptar tu complemento para la API de Gutenberg Gutenberg nos brinda muchas formas de expandir al editor, como la API de bloque, la API de código corto y muchas más. Qué API para usar depende del tipo de complemento que construimos.
Si su complemento es un simple complemento de código corto, entonces la API de bloque se puede usar para crear un buen bloque para el editor. Pero si su complemento usa metaboxs complejos en los que un bloque no es suficiente, podemos usar la API de la barra lateral. También utilizaremos una pila moderna de herramientas de desarrollo de JavaScript, como NodeJS, NPM, Webpack y Esnext. Le daremos ejemplos de exámenes para que no se preocupe por configurar el entorno de desarrollo. En esta publicación, analizaremos cómo hacer que su complemento compatible con Gutenberg usando API de bloque. Ingresaremos los otros métodos (la API en la barra lateral, el panel de publicación, la barra estatal y las API) en la segunda parte, si es necesario.
Puede encontrar todos los ejemplos mencionados en este almacén de GitHub.
Subir
El desarrollo del entorno de desarrollo de Gutenberg para Gutenberg requiere muchas herramientas, como NPM, Webpack, Babel y JSX. Se necesita mucho tiempo y esfuerzo, así que preparé el entorno para usted. Gutenberg Boilerplate es un complemento con configuraciones mínimas y ejemplos de Gutenberg. Contiene un ejemplo de bloque y barra lateral. Puede usar esto para expandirse en su bloque personalizado.
Puede transferir o clonar el almacén de Boilerplate Gutenberg a/WP-Contemplate/Plugins/y puede usarlo como medio de desarrollo.
Después de eso, debe instalar NodeJs en su computadora para comenzar. Navegue a la carpeta Gutenberg Boilerplate y ejecute la instalación de NPM en este momento, debe conocer tres comandos que usará durante el proceso de desarrollo: NPM Instalar: instalar adicciones al proyecto al clonar el proyecto.

NPM Ejecutar desarrollando el código durante el proceso de desarrollo. Tienes que ejecutar esto una vez y continuará siguiendo los cambios.
NPM Run Build: compile el código para una construcción optimizada una vez que se complete el proceso de desarrollo.
Subir
Los bloques de API de bloque son el elemento fundamental de Gutenberg, siendo este un editor basado en el bloque. BLOCK API le permite hacer bloques para Gutenberg. Puede crear bloques que puedan reproducir HTML básico, códigos cortos o incluso hacer bloques dinámicos para mostrar, por ejemplo, las últimas publicaciones.
El proceso se basa en un complemento existente en nuestro ejemplo, adoptaremos un código de clic corto para tuitear en un bloque de Gutenberg. Este breve código de clic para tweet representa un cuadro de tweet con su texto y un botón para twittear ese texto. Como esto:
Nuestro código corto parece:
Tweet: texto que aparece en su sitio.
Tweetsent: texto que llega a Twitter.

Botón: El texto del botón Tweet.
Tema: Haga clic en Tweet o haga clic en Tweet como un tema de cuadro.
Adaptando complementos para Gutenberg con API de bloque Hay dos formas de hacerlo con Gutenberg, o podemos jugar el HTML en el front-end, o podemos usar nuestro bloque de Gutenberg para jugar el código corto hasta el front-end. Para este artículo, haremos el último. Todo el código está disponible en el complemento Hello Gutenberg Warehouse en GitHub. Puede clonar el almacén para ver el complemento en acción o para cambiar el código. Pon los guiones/estilos para Gutenberg en la cola, necesitamos poner nuestros scripts y estilos en el editor de Gutenberg usando enqueue_block_assets:
/**
* Poner en el editor de JavaScript y CSS en la cola
*/
Hello_gutenberg_scripts function () {
$ blockpath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;
// Poner en el archivo JS de cola incluido
wp_enqueue_script (
“Hello-Gutenberg-Block-JS”,
Plugins_url ($ blockpath, __file__),
[‘WP-I18N’, ‘WP-Blocks’, ‘WP-edor’, ‘WP-Components’],
FileMtime (plugin_dir_path (__ archivo__). $ Blockpath)
);
// Coloque en la cola los estilos de los bloques para front-end y editor
wp_enqueue_style (
“Hello-Gutenberg-Block-CSS”,
Plugins_url ($ stylepath, __file__),
”
FileMtime (plugin_dir_path (__ archivo__). $ Stylepath)
);
}
// colgar la función de las Escrituras en el gancho del editor de bloques
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);
Hemos agregado cuatro adicciones a nuestro script que usaremos en nuestro bloque. Aprendamos primero sobre estas adicciones:
WP-I18N es la versión de Gutenberg de las funciones de internacionalización, como __ (). WP-Blocks se usa para la función RegistroBlockType que registra su bloque. Utilizamos scripts de componentes WP-editor y WP para diferentes componentes en nuestro bloque. Ahora que ponemos sus activos en su cola, podemos comenzar a escribir nuestro bloque en el archivo /sc/block.js. Importando adicciones Si usa Gutenberg Boilerplate, entonces su archivo block.js debe tener una estructura de bloque básica que pueda usar para crear arados para gutenberg:/**
* Bibliotecas de bloques internos
*/
const {__} = wp.i18n;
Const {registroBlockType} = wp.blocks;
/**
* Bloque de registro
*/
Exportar predeterminado RegistroBlockType (‘Gutenberg-Boilerplate/Block’, {
// Bloquear título
Título: __ (‘Gutenberg Boilerplate’),
// Descripción del bloque
Descripción: __ (‘un ejemplo de un bloque’),
// Categoría de bloque
Categoría: “Común”,
// icono de bloque
icono: “Sitio administrativo”,
// Bloquear las palabras clave
Palabras clave: [
__ (‘Boilerplate’),
__( ‘Hola Mundo’ ),
__(‘Ejemplo’),
] ,,
Atributo: {
},
// Definición de interfaz de edición
Editar: props => {
devolver (

{__ (“Hola, retroceder”)}

);
},
// Definición de la interfaz front-end
Guardar: props => {
devolver (

{__ (“Hola frontend”)}

);
},
});
Puede ejecutar NPM Ejecutar dev para comenzar a compilar nuestro código en tiempo real.
Primero, importaremos todos los componentes y bibliotecas que necesitamos para el bloque en la parte superior: /**
* Bloquear adicciones
*/
Importar nombres de clase de “nombres de clase”;
/**
* Bibliotecas de bloques internos
*/
const {__} = wp.i18n; const {registreBockype} = wp.blocks;
const {
Texto rico,
InspectorControls,
BlockControls,
} = Wp.editor;
const {
Cuerpo de panel,
Textecontrol,
TextControl,
Dashicon,
La barra de herramientas,
Botón,
Instrumento de balón,
} = wp.components; Los primeros nombres de clases de importación que hemos instalado utilizando NPM para usar más clases en nuestro código, porque JSX no permite más clases en los elementos. Descubriremos otros componentes que importamos a medida que usamos. Defina los atributos ahora definiremos cuatro atributos para nuestro bloque Gutenberg, así como nuestro código corto: Atributos: {
Pío: {
Tipo: “cadena”,
},
Tweet enviado: {
Tipo: “cadena”,
},
el botón: {
Tipo: “cadena”,
Predeterminado: __ (‘tweet’),
},
tema: {
Tipo: “booleano”,
predeterminado: falso,
},
}, Como puede ver, todos los atributos son los mismos que nuestro código corto. Todos los atributos tienen una clave de tipo, que le dice a Gutenberg el tipo de datos. Puede usar cadena, número, booleano y objeto como tipos aceptados. Algunos de los atributos también contienen un valor predeterminado. Los atributos pueden tener otras propiedades, como fuente y selectores, que no usaremos en nuestro ejemplo, pero puede obtener más información sobre ellas aquí. Edite la interfaz ahora construiremos la interfaz de edición de nuestro bloque, que será la pantalla: los usuarios la verán mientras editan el bloque en Gutenberg.
Para obtener una idea básica, primero podemos codificar nuestro bloque y construir sobre su base, reemplazando la siguiente área de nuestro código: // Definición de la interfaz de edición
Editar: props => {
devolver (

{__ (“Hola, retroceder”)}

);
}, Con el siguiente código:

// Definición de la interfaz de edición: props => {
devolver [
Pumpkins y Pinguini
tweet
];
},
Esto debería darle una idea de nuestro resultado final.Se verá así:
El primer elemento del bloque es el área de texto de Tweet.Lo reemplazaremos con un campo de texto editable, similar al bloque de título de Gutenberg.Utilizaremos el componente RichText que importamos anteriormente para reemplazar nuestro texto codificado.
<Texto rico
formato = "cadena"
FormattingControls = {[]}
sustituent = {__ ('tweet, tweet!')}
onchange = {onchagetweet}
Valor = {propos.attributes.tweet}

/>
Nuestro componente RichText tiene cinco argumentos. El formato es una cadena, porque usaremos nuestro código corto para mostrar los elementos en el front-end. Si quisiéramos usar un selector en nuestro atributo, entonces el formato habría sido una matriz. RichText tiene algunas opciones de formato de forma predeterminada, como Bold y Italic, que hemos desactivado al pasar una matriz vacía en los Contcontrols de formación. El marcador de posición es el texto sustituyente cuando no hay texto en el campo, y Onchage activará la función OnChagetweet cuando se realiza un evento de modificación. Finalmente, el valor será el valor de nuestro campo, que se tomará del atributo tweet que definimos anteriormente. Una vez que definimos el área de RichText, debemos construir la función Onchagetweet que se activará cuando el valor cambie en nuestro campo de texto. // Definición de la interfaz de edición: props => {
Const onChangetweet = value => {
propos.sattributes ({tweet: valor});
};
devolver [
… El resto del código transmitimos el valor del campo RichText a la función OnChagetweet, que utiliza la función ProposAttributes para actualizar el valor del atributo Tweet. Verá el poder de Gutenberg ahora cuando use su bloque.
¿No es genial? Inspector de bloque Cuando crea complementos para Gutenberg, no debe reinventar la rueda cada vez para crear opciones para sus complementos Gutenberg. De UI Incorporated. Similar al componente RichText, el componente InspectorControls agrega una barra lateral cuando se selecciona el bloque. Algo como: también usaremos el texto del contrato y TextControl para agregar un área de texto y una entrada de texto en el área de nuestro inspector. Agregaremos el siguiente código al extracto de retorno:
¡! propos.isselected && (

<TextareControl
etiqueta = {__ ('Tweet Text')}
Valor = {propos.attributes.tweetsent}
onchange = {onchageTweetsent}

Ayuda = {__ (“Puede agregar aquí hashtags y menciones que serán parte del tweet real, pero no de mostrar su publicación”.)}

/>

),
Pros.Enseled Checks para asegurarse de que el inspector aparezca solo cuando se selecciona el bloque. Los componentes del Textual y TextControl, similares a RichText, tienen un valor y un cambio. También debemos cambiar el código de visualización de su bloque para permitir nuevos cambios. En nuestro caso, solo tenemos que agregar el texto del botón al bloque, porque el texto del tweet se agregará al enlace, por lo que no tenemos que mostrarlo en Back End. Puede reemplazar el hipervínculo en nuestro código inicial con el siguiente: {propos.attributes.button}
Como se mencionó anteriormente, eliminamos el hipervínculo de nuestro código, porque no debemos mostrarlo en Backd. Esto hará que nuestro bloque se vea así:
El inspector de bloques puede ser una herramienta poderosa para su bloque. Si su complemento tiene opciones avanzadas que son demasiado complicadas para el área del editor, entonces puede colocarlas en el área del inspector. Agregaremos una última opción a nuestro bloque para completar el lado de JavaScript en la siguiente sección. Barra de herramientas de la barra de herramientas de bloque es otro componente preconstruido que podemos usar para agregar más opciones a nuestro bloque. Aparecerá por encima de su bloque al seleccionarlo. Ejemplo:
Idealmente, la barra de herramientas de bloque debe contener los controles primarios de su bloque, con el inspector que aloja controles secundarios. Sin embargo, esto es cuestionable y depende de su bloque. Utilizaremos el área de la barra de herramientas de bloque para alojar nuestro control de estilo alternativo. Similar al inspector de bloques, debemos agregar el siguiente código a nuestra declaración de retorno para agregar barra de herramientas de bloque a nuestro bloque:
¡! propos.isselected && (

<Botón
Classname = {nombre de clase (
"Botón de componente pictograma",

‘componentes-toolbar__control’,

{“Es activo”: propos.attributes.the},
)}
OnClick = {toggletheme}
>

),
Utilizamos blockcontrols y componentes de la barra de herramientas para agregar una barra de instrumentos a nuestro bloque. Similar al inspector de bloques, Pros.isseled asegura que nuestra barra de herramientas aparezca solo cuando enfatizamos nuestro bloque. También usamos ToolTiP y Componentes de botones para nuestro control. El componente de información sobre herramientas está rodeado alrededor del componente del botón para garantizar que haya una información sobre herramientas cuando va con el mouse sobre el control para brindarle más contexto. El componente del botón utiliza el módulo ClassNames que importé anteriormente en el artículo. Utilizamos la función ClassNames para dar tres clases a nuestro control. La tercera clase, IS-Active, aparece solo cuando el valor de nuestro atributo del tema es cierto. Su función Onchange cambia el atributo del tema a True/False. Finalmente, los componentes de Dashicon se utilizan para mostrar un icono para nuestro control. También necesitaremos cambiar nuestro código de bloque para que funcione con los cambios. Necesitamos reemplazar la siguiente línea:
con:
Verificamos si el atributo del tema es verdadero o falso y atribuimos una clase a nuestro bloque en consecuencia. Ahora tu bloque debería verse así:
Terminamos la parte de JavaScript de nuestro bloque Gutenberg. Puede encontrar el código fuente completo del archivo aquí. Ahora terminaremos el bloque administrando la salida desde el lado del servidor. Jugar en el lado del servidor Gutenberg le permite usar la fila en el servidor para mostrar sus bloques en el front-end. Esa reproducción en el lado del servidor permite crear bloques de códigos cortos. En primer lugar, haremos que nuestro método de rescate regrese nulo, reemplazándolo con el siguiente código: // Definición de la interfaz front-ESDENDALVA () {
// jugar en php
devuelve nulo;
}, Utilizaremos la función PHP Register_Block_Type para registrar nuestro tipo de bloque en php:
If (function_exists (‘registro_block_type’)) {
// Conecte la representación del servidor en la llamada inversa
TIP_BLOC_ Registro (
“Hello-Gutenberg/Haga clic en Tweet”, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘atributo’ => matriz (
‘Tweet’ => Matrix (

‘Type’ => ‘string’,
),
‘tweetsent’ => matrix (
‘Type’ => ‘string’,
),
‘Botón’ => matriz (
‘Type’ => ‘string’,
‘predeterminado’ => ‘tweet’,
),
‘theme => matriz (
‘Type’ => ‘boolean’,
‘predeterminado’ => falso,
),
),
] );
}
Nuestra función de registro_block_type. Primero transmitimos el nombre del bloque, junto con una serie de argumentos. El primer argumento es la función Render_Callback, que recurre a nuestra función Hello_gutenberg_Block_Callback para el servidor. Después de nuestra llamada de rango, enviamos atributos como una matriz, similar al archivo block.js, que usamos en nuestra función de llamada inversa. Nuestra función de reproducción de devolución de llamada se ve así: la función hello_gutenberg_block_callback ($ attr) {
extracto ($ att);
if (isset ($ tweet)) {
$ thema = ($ thema === verdadero? ‘hacer clic en tweet-tal’: ‘hacer clic en tweet’);
$ Shortcode_string = ‘[Clicktweet tweet = “%s” tweTsent = “%s” botón = “%s” thema = “%s”];
Return sprintf ($ shortcode_string, $ tweet, $ tweetsent, button $, $ tema);
}
}
Extraemos todos los atributos y luego los devolvemos a nuestro código corto. Es todo lo que necesita para adaptar sus complementos breves codificados a Gutenberg. Puede encontrar todo el código utilizado en este artículo en este almacén Hello-Gutenberg.
Subir
En la siguiente parte, echaremos un vistazo a otras formas de adaptar los complementos existentes para Gutenberg, incluida la API de la barra lateral. Lectura adicional:
Un tutorial de Gutenberg para desarrolladores para principiantes
Hacer una “página de opción de arado” con componentes de Gutenberg
Vea otros tutoriales de tutoriales de API: tome la API API API JavaScript Google Maps Si tiene alguna pregunta sobre cómo adaptar su complemento para Gutenberg, ¡pregúnteles en los comentarios!
Cómo adaptar su complemento #WordPress para #Gutenberg: Block API #Turial
Haga clic en Tweet
… Recuerde unirse a nuestro curso rápido para acelerar su sitio de WordPress.Con algunos remedios simples, puede reducir el tiempo de carga incluso en 50-80%: