Crear bloque de Gutenberg personalizado – Parte 10: Obtener publicaciones y componentes de orden superior

En esta parte final de la serie de tutoriales de bloques personalizados de Gutenberg, aprenderemos cómo usar componentes de orden superior para utilizar los componentes de WordPress para realizar consultas de publicaciones y otra información central de WordPress.

En la parte anterior, aprendimos sobre los bloques dinámicos y terminamos implementando la funcionalidad para escribir una ID de publicación y usar PHP para recuperar dinámicamente la publicación y representarla en el modo de interfaz y vista previa. Escribir manualmente una ID de publicación no es intuitivo ni fácil de usar. Es mucho mejor proporcionar al usuario alguna forma de seleccionar o buscar publicaciones por título y hacer clic en algo para elegir una.

Una parte de resolver esto es bastante fácil; cómo consultar publicaciones desde la editfunción de su bloque. Tenemos algunas opciones para esto, y la mejor opción es usar algunos de los llamados componentes de orden superior de WordPress. También puede usar métodos de navegador Javascript para realizar una llamada AJAX hacia la API REST de WordPress usando, por ejemplo [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), o axios. WordPress en realidad proporciona su propia versión de fetch: apiFetch().

La otra parte de resolver esto depende un poco de ti; que es como presentar la lista o elección en nuestro bloque. ¿Cómo vas a presentar la lista de publicaciones para elegir? ¿En una selección, lista de casillas de verificación o botones de radio? ¿O desea ofrecer la posibilidad de buscar y, por lo tanto, implementar una solución de autocompletar o una solución de filtro? ¿Deberías permitir seleccionar varias publicaciones o solo una? Por lo general, puede resolver esto utilizando diferentes componentes de WordPress, pero debe decidir qué solución desea implementar.

Primero, aprendamos un poco sobre los componentes de orden superior y el módulo de datos de WordPress, antes de ver cómo podemos realizar consultas posteriores en nuestro bloque.

Módulo de datos básicos de WordPress y componentes de orden superior

Cuando trabaje con React, a menudo necesitará pasar el estado a los componentes secundarios o hacia arriba a un componente principal común para que todos los demás componentes secundarios tengan acceso a ellos. Una solución para resolver el problema de centralizar el estado de una aplicación es usar Redux. Con Redux puede crear tiendas, que son objetos que contienen el estado y la información de una aplicación.

El módulo de datos de WordPress es un centro de diferentes tiendas y proporciona funciones para administrar datos entre diferentes módulos. Está construido sobre Redux, pero no lo confundas con Redux para WordPress, ya que hay bastantes diferencias. Puede registrar sus propias tiendas dentro de WordPress, o quizás más importante, acceder a las tiendas registradas de WordPress.

Aquí hay una descripción general de las tiendas disponibles en el módulo de datos de WordPress (probablemente cambiará con el tiempo). Todas las tiendas de WordPress están contenidas en el módulo Core Data. Por ejemplo, hay tiendas que contienen los datos del editor (core/editor), avisos (core/notices), datos de bloque (core/blocks), información de ventana gráfica (core/viewport) y, por último, pero no menos importante, la propia tienda principal: core.

Para acceder a los datos de las tiendas, deberá utilizar selectores. WordPress tiene un selector dentro del wp.datapaquete; [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). También puede manipular las tiendas con dispatch, pero esto no está cubierto por esta serie de tutoriales. De hecho, puede probar fácilmente el selector usted mismo para ver qué hay disponible en las tiendas de WordPress.

Probando el selector

Abra el editor de Gutenberg en Chrome y abra la herramienta de depuración de la consola. Escribir:

wp.data.select('core')

Y presione Entrar. Debería obtener un objeto como respuesta con todos los selectores (funciones) que puede usar. Como ejemplos, encontrará funciones como getMedia, getTaxonomy, getAuthors, etc. El que usaremos para consultar las publicaciones también está allí, pero no tiene un nombre intuitivo; getEntityRecordsse llama Por el momento, algunas de estas funciones están documentadas, pero la mayoría no lo están, lamentablemente.

Prueba también con otras tiendas que no sean core, por ejemplo:

wp.data.select('core/editor').getBlocks()

Esto devuelve toda la información sobre todos los bloques actualmente en su publicación. Puede jugar con esto en el depurador de la consola Chrome e intentar llamar a algunas funciones para ver qué obtiene en respuesta. Algunos requieren parámetros y otros no.

Para usar selectores y acceder a tiendas, necesitamos usarlos dentro de componentes de orden superior. Los componentes de orden superior son simplemente un patrón de hacer algo en React. Pasamos un componente a una función (o componente) que podría agregar algunos accesorios y luego devolver un nuevo componente.

Dentro del módulo de datos de WordPress encontramos [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect); un componente de orden superior que se puede usar para inyectar accesorios usando selectores registrados. En otras palabras; dentro withSelecttenemos acceso al selector select()y podemos usarlo para realizar llamadas. Los resultados del selector serán accesorios para el componente al que le pasemos withSelect. Si necesita combinar múltiples componentes de orden superior, el módulo de datos de WordPress ofrece la composefunción, pero esto está fuera del alcance de este tutorial. Solo usaremos un componente de orden superior; withSelect.

Esto ha sido mucha teoría, así que comencemos a ver algunos códigos y ejemplos prácticos.

Obtener publicaciones usando withSelect, select y getEntityRecords

Para resumir lo anterior, necesitamos configurar el componente de orden superior withSelectpara nuestro bloque. Dentro de este podemos usar selectores para acceder a las tiendas de WordPress, que serán accesorios del componente al que le pasemos withSelect. Usaremos la coretienda y el selector getEntityRecordspara consultar publicaciones.

getEntityRecordsDesafortunadamente, la función no está muy documentada en este momento. Pero he aprendido que podemos pasar postTypecomo primer parámetro (tipo de entidad) y luego el tipo de publicación como segundo parámetro (por ejemplo, ‘ post‘ o ‘ page‘). El tercer parámetro es opcional y puede ser un objeto con argumentos de consulta. Veremos el tercer parámetro más adelante.

Si siguió esta serie de tutoriales de la parte anterior, tendría un bloque personalizado que acepta una ID de publicación ingresada manualmente en una entrada de texto. El bloque usa PHP para representar dinámicamente la publicación en la interfaz (y en el modo de vista previa). Eliminemos el requisito de escribir manualmente el ID de la publicación y reemplácelo con algo más intuitivo. Como se mencionó anteriormente, debe decidir por sí mismo cómo presentar la lista de publicaciones y la mejor manera de permitir que el usuario elija una publicación. Para mantenerlo simple, agregaremos una selección de todos los títulos de publicaciones para elegir.

Codificando elwithSelect

Empecemos a codificar esto. Primero necesitamos desestructurar lo que necesitamos del paquete de datos;

const { withSelect, select } = wp.data;

Luego usamos withSelecten la función de nuestro bloque edity pasamos nuestro componente de edición; FirstBlockEdit. Dentro withSelectdesestructuramos selectcomo parámetro y usamos el selector select()para consultar publicaciones con getEntityRecords. Devolvemos un objeto con una propiedad que llamamos postsque contiene el resultado de la select()llamada.

Con el código de arriba de nuestro componente, FirstBlockEditahora tendrá una nueva propiedad; posts. Todo lo que devolvamos dentro del withSelectcomponente de orden superior será accesible como accesorios para el componente que pasamos (en el paréntesis al final).

Manejo de las publicaciones desde el selector

Ahora podemos ir a nuestro componente FirstBlockEdity echar un vistazo al nuevo props.posts. Debido a que nuestro componente es un componente basado en clases, debemos referirnos a los accesorios con this. Vamos a cerrar sesión en la consola dentro de la render()función en FirstBlockEdit:

render() {
    const { attributes, setAttributes } = this.props;
    console.log(this.props.posts);
    ...
}

Esté atento al depurador de su consola. Puede notar que esto se registrará dos veces; primero null, y luego, un tiempo después, registra una serie de publicaciones. Esto se debe a que la consulta de publicaciones se realiza de forma asíncrona. Nuestro componente se representa primero antes de la respuesta, en cuyo momento props.postses null. Una vez que recibimos una respuesta, nuestro componente se vuelve a renderizar con la prop poblada. Siempre debe recordar acomodar este pequeño período de tiempo sin datos en su código.

Agregar una selección para mostrar las publicaciones

Preparémonos para completar una selección con las publicaciones devueltas y para eso usaremos el componente de WordPress SelectControl. El componente SelectControlacepta una matriz de opciones donde cada opción es un objeto con las propiedades valuey label.

Si observa la (segunda) respuesta registrada en la consola, puede ver que obtenemos una serie de objetos de publicación. Cada publicación contiene la mayor parte de la información de la publicación, pero para las opciones en una selección, solo nos interesa la identificación de la publicación como valor y el título de la publicación como etiqueta. Así que recorreremos el postsaccesorio y completaremos una variable de matriz que pasaremos a SelectControl. No olvide manejar el pequeño marco de tiempo en el que se encuentra el postsaccesorio null. En ese caso, completaremos la matriz de elección con una opción que tenga la etiqueta "Cargando…".

Tenga en cuenta que debemos referirnos al título de la publicación como post.title.rendered. Puedes buscarte en la consola logueado postsy ver cómo se estructura la información para cada publicación.

Después de esto, simplemente necesitamos agregar un SelectControllugar donde lo deseemos. Puede estar dentro del propio bloque (preferiblemente dentro del código para el modo de edición) o dentro del Inspector.

Configuramos el SelectControlpara referirse al atributo selectedPostIdque definimos en el paso anterior. Establecemos el valor guardado en el accesorio valuey nos encargamos de actualizarlo en el onChangeaccesorio, tal como lo hemos hecho varias veces antes. Nos aseguramos de que un número se almacene usando parseInt()porque selectedPostIdtiene el tipo number. Y pasamos la matriz de opciones generada en el prop options.

¡Eso es realmente todo! Si siguió el código del paso anterior, ya debería tener un código que lea el ID de la publicación guardada y lo muestre.

Por supuesto, le recomiendo que implemente la lista y la elección de publicaciones de manera diferente a una simple selección. Esta no es una solución bonita o fácil de usar, especialmente para sitios con muchas publicaciones. Hablando de la cantidad de publicaciones, ¿notó que el selector getEntityRecords solo devuelve un máximo de las 10 publicaciones más recientes? Ese es el comportamiento predeterminado de getEntityRecords, pero podemos modificar la consulta posterior pasando un tercer parámetro.

Modificar la consulta para getEntityRecords

Al pasar un objeto como tercer parámetro a getEntityRecords, podemos modificar la consulta posterior. Como se mencionó antes, lamentablemente getEntityRecordsfalta la documentación. Pero al leer toda la web, he reunido una lista de posibles argumentos de consulta;

• per_page: establezca un número para limitar el número de publicaciones. Establézcalo en -1para recuperar el máximo de 100. Predeterminado 10.
• exclude: Excluye ciertas publicaciones de la consulta. Establezca una ID de publicación o una matriz de números para varias ID de publicación.
• parent_exclude: Excluye ciertas publicaciones principales. Establezca una ID de publicación o una matriz de múltiples ID de publicación.
• orderby: Decide el orden de las publicaciones. Lo más probable es que pueda usar los mismos parámetros que en orderby de WP_Query. Puede ser, por ejemplo, ‘ menu_order‘.
• order: Cualquiera 'asc'o ‘ desc'para ordenación ascendente o descendente.
• status: Filtrar por estado de la publicación. Puede ser una cadena, una cadena con varios estados separados por comas o una matriz de cadenas de estado. Por ejemplo ['publish', 'draft'], para consultar publicaciones publicadas y redactadas.
• categories: Filtra publicaciones por ciertas categorías. Proporcione un ID de categoría o una matriz de ID de categoría. Creo que esto solo funciona para categorías de publicaciones y no para otras taxonomías personalizadas.
• tags: Filtra publicaciones por ciertas etiquetas. Proporcione una ID de etiqueta o una matriz de ID de etiquetas. Funciona solo para etiquetas de publicación y no para otras taxonomías personalizadas.
• search: agregue una consulta de búsqueda (cadena).

Nota: ¡Esta no es una lista exhaustiva y también está sujeta a cambios!

Modifiquemos nuestra consulta. Queremos hacer dos cosas; primero queremos buscar todas las publicaciones y no solo las 10 últimas. Para ello proporcionamos -1a per_page. En segundo lugar, queremos excluir la publicación actual de la lista de publicaciones proporcionando el ID de la publicación actual a exclude. A menudo no tiene sentido mostrar un atajo de publicación o una vista previa de la publicación actual.

Tú puedes pensar; espera, ¿cómo obtenemos el ID de la publicación actual? No olvides que nosotros dentro del componente de orden superior withSelecty con el selectselector podemos acceder a todos los almacenes de datos básicos de WordPress. El ID de publicación actual es algo natural para almacenar en una de las tiendas principales de WordPress. Dentro core/editorencontramos la función getCurrentPostId().

Modifiquemos el withSelectretorno a algo como esto:

El cambio anterior se explica por sí mismo. Generamos un objeto de consulta con las propiedades per_pagey excludey lo pasamos como tercer parámetro a getEntityRecords(). Ahora nuestro props.postsinterior del FirstBlockEditcomponente debería enumerar todas las publicaciones pero excluir la publicación actual.

Conclusión

Esta publicación concluye la serie de tutoriales Cómo crear bloques de Gutenberg personalizados. La serie estaba destinada a repasar los conceptos básicos del desarrollo de sus propios bloques personalizados, brindándole un punto de partida para desarrollar sus propios bloques y más complejos. Definitivamente esté atento a más tutoriales relacionados con Gutenberg aquí. ¡Quizás encuentres un tutorial que explique más específicamente algo que querías hacer tú mismo!