En esta parte final de la serie de tutoriales de bloques personalizados de Gutenberg, aprenderemos c\u00f3mo usar componentes de orden superior para utilizar los componentes de WordPress para realizar consultas de publicaciones y otra informaci\u00f3n central de WordPress.<\/p>\n
En la parte anterior, aprendimos sobre los bloques din\u00e1micos y terminamos implementando la funcionalidad para escribir una ID de publicaci\u00f3n y usar PHP para recuperar din\u00e1micamente la publicaci\u00f3n y representarla en el modo de interfaz y vista previa. Escribir manualmente una ID de publicaci\u00f3n no es intuitivo ni f\u00e1cil de usar. Es mucho mejor proporcionar al usuario alguna forma de seleccionar o buscar publicaciones por t\u00edtulo y hacer clic en algo para elegir una.<\/p>\n
Una parte de resolver esto es bastante f\u00e1cil; c\u00f3mo consultar publicaciones desde la La otra parte de resolver esto depende un poco de ti; que es como presentar la lista o elecci\u00f3n en nuestro bloque. \u00bfC\u00f3mo vas a presentar la lista de publicaciones para elegir? \u00bfEn una selecci\u00f3n, lista de casillas de verificaci\u00f3n o botones de radio? \u00bfO desea ofrecer la posibilidad de buscar y, por lo tanto, implementar una soluci\u00f3n de autocompletar o una soluci\u00f3n de filtro? \u00bfDeber\u00edas permitir seleccionar varias publicaciones o solo una? Por lo general, puede resolver esto utilizando diferentes componentes de WordPress, pero debe decidir qu\u00e9 soluci\u00f3n desea implementar.<\/p>\n Primero, aprendamos un poco sobre los componentes de orden superior y el m\u00f3dulo de datos de WordPress, antes de ver c\u00f3mo podemos realizar consultas posteriores en nuestro bloque.<\/p>\n Cuando trabaje con React, a menudo necesitar\u00e1 pasar el estado a los componentes secundarios o hacia arriba a un componente principal com\u00fan para que todos los dem\u00e1s componentes secundarios tengan acceso a ellos. Una soluci\u00f3n para resolver el problema de centralizar el estado de una aplicaci\u00f3n es usar Redux<\/a>. Con Redux puede crear tiendas, que son objetos que contienen el estado y la informaci\u00f3n de una aplicaci\u00f3n.<\/p>\n El m\u00f3dulo de datos de WordPress<\/a> es un centro de diferentes tiendas y proporciona funciones para administrar datos entre diferentes m\u00f3dulos. Est\u00e1 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\u00e1s m\u00e1s importante, acceder a las tiendas registradas de WordPress.<\/p>\n Aqu\u00ed hay una descripci\u00f3n general de las tiendas disponibles<\/a> en el m\u00f3dulo de datos de WordPress (probablemente cambiar\u00e1 con el tiempo). Todas las tiendas de WordPress est\u00e1n contenidas en el m\u00f3dulo Core Data<\/a>. Por ejemplo, hay tiendas que contienen los datos del editor ( Para acceder a los datos de las tiendas, deber\u00e1 utilizar selectores. WordPress tiene un selector dentro del Abra el editor de Gutenberg en Chrome y abra la herramienta de depuraci\u00f3n de la consola. Escribir:<\/p>\n Y presione Entrar. Deber\u00eda obtener un objeto como respuesta con todos los selectores (funciones) que puede usar. Como ejemplos, encontrar\u00e1 funciones como Prueba tambi\u00e9n con otras tiendas que no sean Esto devuelve toda la informaci\u00f3n sobre todos los bloques actualmente en su publicaci\u00f3n. Puede jugar con esto en el depurador de la consola Chrome e intentar llamar a algunas funciones para ver qu\u00e9 obtiene en respuesta. Algunos requieren par\u00e1metros y otros no.<\/p>\n Para usar selectores y acceder a tiendas, necesitamos usarlos dentro de componentes de orden superior. Los componentes de orden superior son simplemente un patr\u00f3n de hacer algo en React. Pasamos un componente a una funci\u00f3n (o componente) que podr\u00eda agregar algunos accesorios y luego devolver un nuevo componente.<\/p>\n Dentro del m\u00f3dulo de datos de WordPress encontramos Esto ha sido mucha teor\u00eda, as\u00ed que comencemos a ver algunos c\u00f3digos y ejemplos pr\u00e1cticos.<\/p>\n Para resumir lo anterior, necesitamos configurar el componente de orden superior Si sigui\u00f3 esta serie de tutoriales de la parte anterior, tendr\u00eda un bloque personalizado que acepta una ID de publicaci\u00f3n ingresada manualmente en una entrada de texto. El bloque usa PHP para representar din\u00e1micamente la publicaci\u00f3n en la interfaz (y en el modo de vista previa). Eliminemos el requisito de escribir manualmente el ID de la publicaci\u00f3n y reempl\u00e1celo con algo m\u00e1s intuitivo. Como se mencion\u00f3 anteriormente, debe decidir por s\u00ed mismo c\u00f3mo presentar la lista de publicaciones y la mejor manera de permitir que el usuario elija una publicaci\u00f3n. Para mantenerlo simple, agregaremos una selecci\u00f3n de todos los t\u00edtulos de publicaciones para elegir.<\/p>\n Empecemos a codificar esto. Primero necesitamos desestructurar lo que necesitamos del paquete de datos;<\/p>\n Luego usamos Con el c\u00f3digo de arriba de nuestro componente, Ahora podemos ir a nuestro componente Est\u00e9 atento al depurador de su consola. Puede notar que esto se registrar\u00e1 dos veces; primero Prepar\u00e9monos para completar una selecci\u00f3n con las publicaciones devueltas y para eso usaremos el componente de WordPress Si observa la (segunda) respuesta registrada en la consola, puede ver que obtenemos una serie de objetos de publicaci\u00f3n. Cada publicaci\u00f3n contiene la mayor parte de la informaci\u00f3n de la publicaci\u00f3n, pero para las opciones en una selecci\u00f3n, solo nos interesa la identificaci\u00f3n de la publicaci\u00f3n como valor y el t\u00edtulo de la publicaci\u00f3n como etiqueta. As\u00ed que recorreremos el Tenga en cuenta que debemos referirnos al t\u00edtulo de la publicaci\u00f3n como Despu\u00e9s de esto, simplemente necesitamos agregar un Configuramos el \u00a1Eso es realmente todo! Si sigui\u00f3 el c\u00f3digo del paso anterior, ya deber\u00eda tener un c\u00f3digo que lea el ID de la publicaci\u00f3n guardada y lo muestre.<\/p>\n Por supuesto, le recomiendo que implemente la lista y la elecci\u00f3n de publicaciones de manera diferente a una simple selecci\u00f3n. Esta no es una soluci\u00f3n bonita o f\u00e1cil de usar, especialmente para sitios con muchas publicaciones. Hablando de la cantidad de publicaciones, \u00bfnot\u00f3 que el selector getEntityRecords solo devuelve un m\u00e1ximo de las 10 publicaciones m\u00e1s recientes? Ese es el comportamiento predeterminado de getEntityRecords, pero podemos modificar la consulta posterior pasando un tercer par\u00e1metro.<\/p>\n Al pasar un objeto como tercer par\u00e1metro a getEntityRecords, podemos modificar la consulta posterior. Como se mencion\u00f3 antes, lamentablemente Nota: \u00a1Esta no es una lista exhaustiva y tambi\u00e9n est\u00e1 sujeta a cambios!<\/p>\n Modifiquemos nuestra consulta. Queremos hacer dos cosas; primero queremos buscar todas las publicaciones y no solo las 10 \u00faltimas. Para ello proporcionamos T\u00fa puedes pensar; espera, \u00bfc\u00f3mo obtenemos el ID de la publicaci\u00f3n actual? No olvides que nosotros dentro del componente de orden superior Modifiquemos el El cambio anterior se explica por s\u00ed mismo. Generamos un objeto de consulta con las propiedades Esta publicaci\u00f3n concluye la serie de tutoriales C\u00f3mo crear bloques de Gutenberg personalizados. La serie estaba destinada a repasar los conceptos b\u00e1sicos del desarrollo de sus propios bloques personalizados, brind\u00e1ndole un punto de partida para desarrollar sus propios bloques y m\u00e1s complejos. Definitivamente est\u00e9 atento a m\u00e1s tutoriales relacionados con Gutenberg aqu\u00ed<\/a>. \u00a1Quiz\u00e1s encuentres un tutorial que explique m\u00e1s espec\u00edficamente algo que quer\u00edas hacer t\u00fa mismo!<\/p>\nedit<\/code>funci\u00f3n de su bloque. Tenemos algunas opciones para esto, y la mejor opci\u00f3n es usar algunos de los llamados componentes de orden superior<\/a> de WordPress. Tambi\u00e9n puede usar m\u00e9todos 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)<\/code>, o axios. WordPress en realidad proporciona su propia versi\u00f3n de fetch<\/code>: apiFetch()<\/code>.<\/p>\nM\u00f3dulo de datos b\u00e1sicos de WordPress y componentes de orden superior<\/h2>\n
core\/editor<\/code>), avisos (core\/notices<\/code>), datos de bloque (core\/blocks<\/code>), informaci\u00f3n de ventana gr\u00e1fica (core\/viewport<\/code>) y, por \u00faltimo, pero no menos importante, la propia tienda principal: core<\/code>.<\/p>\nwp.data<\/code>paquete; [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. Tambi\u00e9n puede manipular las tiendas con dispatch<\/code>, pero esto no est\u00e1 cubierto por esta serie de tutoriales. De hecho, puede probar f\u00e1cilmente el selector usted mismo para ver qu\u00e9 hay disponible en las tiendas de WordPress.<\/p>\nProbando el selector<\/h3>\n
wp.data.select('core')<\/code><\/pre>\ngetMedia<\/code>, getTaxonomy<\/code>, getAuthors<\/code>, etc. El que usaremos para consultar las publicaciones tambi\u00e9n est\u00e1 all\u00ed, pero no tiene un nombre intuitivo; getEntityRecords<\/code>se llama Por el momento, algunas de estas funciones est\u00e1n documentadas<\/a>, pero la mayor\u00eda no lo est\u00e1n, lamentablemente.<\/p>\ncore<\/code>, por ejemplo:<\/p>\nwp.data.select('core\/editor').getBlocks()<\/code><\/pre>\n[withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>; un componente de orden superior que se puede usar para inyectar accesorios usando selectores registrados. En otras palabras; dentro withSelect<\/code>tenemos acceso al selector select()<\/code>y podemos usarlo para realizar llamadas. Los resultados del selector ser\u00e1n accesorios para el componente al que le pasemos withSelect<\/code>. Si necesita combinar m\u00faltiples componentes de orden superior, el m\u00f3dulo de datos de WordPress ofrece la compose<\/code>funci\u00f3n, pero esto est\u00e1 fuera del alcance de este tutorial. Solo usaremos un componente de orden superior; withSelect<\/code>.<\/p>\nObtener publicaciones usando withSelect, select y getEntityRecords<\/h2>\n
withSelect<\/code>para nuestro bloque. Dentro de este podemos usar selectores para acceder a las tiendas de WordPress, que ser\u00e1n accesorios del componente al que le pasemos withSelect<\/code>. Usaremos la core<\/code>tienda y el selector getEntityRecords<\/code>para consultar publicaciones.<\/p>\ngetEntityRecords<\/code>Desafortunadamente, la funci\u00f3n no est\u00e1 muy documentada<\/a> en este momento. Pero he aprendido que podemos pasar postType<\/code>como primer par\u00e1metro (tipo de entidad) y luego el tipo de publicaci\u00f3n como segundo par\u00e1metro (por ejemplo, ‘ post<\/code>‘ o ‘ page<\/code>‘). El tercer par\u00e1metro es opcional y puede ser un objeto con argumentos de consulta. Veremos el tercer par\u00e1metro m\u00e1s adelante.<\/p>\nCodificando el
withSelect<\/code><\/h3>\nconst { withSelect, select } = wp.data;<\/code><\/pre>\nwithSelect<\/code>en la funci\u00f3n de nuestro bloque edit<\/code>y pasamos nuestro componente de edici\u00f3n; FirstBlockEdit<\/code>. Dentro withSelect<\/code>desestructuramos select<\/code>como par\u00e1metro y usamos el selector select()<\/code>para consultar publicaciones con getEntityRecords<\/code>. Devolvemos un objeto con una propiedad que llamamos posts<\/code>que contiene el resultado de la select()<\/code>llamada.<\/p>\n...\nedit: withSelect(select => {\n return {\n posts: select('core').getEntityRecords('postType', 'post')\n }\n})(FirstBlockEdit),\nsave:() => { return null }\n...<\/code><\/pre>\nFirstBlockEdit<\/code>ahora tendr\u00e1 una nueva propiedad; posts<\/code>. Todo lo que devolvamos dentro del withSelect<\/code>componente de orden superior ser\u00e1 accesible como accesorios para el componente que pasamos (en el par\u00e9ntesis al final).<\/p>\nManejo de las publicaciones desde el selector<\/h3>\n
FirstBlockEdit<\/code>y echar un vistazo al nuevo props.posts<\/code>. Debido a que nuestro componente es un componente basado en clases, debemos referirnos a los accesorios con this<\/code>. Vamos a cerrar sesi\u00f3n en la consola dentro de la render()<\/code>funci\u00f3n en FirstBlockEdit<\/code>:<\/p>\nrender() {\n const { attributes, setAttributes } = this.props;\n console.log(this.props.posts);\n ...\n}<\/code><\/pre>\nnull<\/code>, y luego, un tiempo despu\u00e9s, registra una serie de publicaciones. Esto se debe a que la consulta de publicaciones se realiza de forma as\u00edncrona. Nuestro componente se representa primero antes de la respuesta, en cuyo momento props.posts<\/code>es null<\/code>. Una vez que recibimos una respuesta, nuestro componente se vuelve a renderizar con la prop poblada. Siempre debe recordar acomodar este peque\u00f1o per\u00edodo de tiempo sin datos en su c\u00f3digo.<\/p>\nAgregar una selecci\u00f3n para mostrar las publicaciones<\/h3>\n
SelectControl<\/code>. El componente SelectControl<\/code>acepta una matriz de opciones donde cada opci\u00f3n es un objeto con las propiedades value<\/code>y label<\/code>.<\/p>\nposts<\/code>accesorio y completaremos una variable de matriz que pasaremos a SelectControl<\/code>. No olvide manejar el peque\u00f1o marco de tiempo en el que se encuentra el posts<\/code>accesorio null<\/code>. En ese caso, completaremos la matriz de elecci\u00f3n con una opci\u00f3n que tenga la etiqueta "Cargando…".<\/p>\nlet choices = [];\nif (this.props.posts) {\n choices.push({ value: 0, label: __('Select a post', 'awhitepixel') });\n this.props.posts.forEach(post => {\n choices.push({ value: post.id, label: post.title.rendered });\n });\n} else {\n choices.push({ value: 0, label: __('Loading...', 'awhitepixel') })\n}<\/code><\/pre>\npost.title.rendered<\/code>. Puedes buscarte en la consola logueado posts<\/code>y ver c\u00f3mo se estructura la informaci\u00f3n para cada publicaci\u00f3n.<\/p>\nSelectControl<\/code>lugar donde lo deseemos. Puede estar dentro del propio bloque (preferiblemente dentro del c\u00f3digo para el modo de edici\u00f3n) o dentro del Inspector.<\/p>\n<SelectControl\n label={__('Selected Post', 'awhitepixel')}\n options={choices}\n value={attributes.selectedPostId}\n onChange={(newval) => setAttributes({ selectedPostId: parseInt(newval) })}\n\/><\/code><\/pre>\nSelectControl<\/code>para referirse al atributo selectedPostId<\/code>que definimos en el paso anterior. Establecemos el valor guardado en el accesorio value<\/code>y nos encargamos de actualizarlo en el onChange<\/code>accesorio, tal como lo hemos hecho varias veces antes. Nos aseguramos de que un n\u00famero se almacene usando parseInt()<\/code>porque selectedPostId<\/code>tiene el tipo number<\/code>. Y pasamos la matriz de opciones generada en el prop options<\/code>.<\/p>\nModificar la consulta para getEntityRecords<\/h3>\n
getEntityRecords<\/code>falta la documentaci\u00f3n. Pero al leer toda la web, he reunido una lista de posibles argumentos de consulta;<\/p>\n\n
per_page<\/code>: establezca un n\u00famero para limitar el n\u00famero de publicaciones. Establ\u00e9zcalo en -1<\/code>para recuperar el m\u00e1ximo de 100. Predeterminado 10<\/code>.<\/li>\nexclude<\/code>: Excluye ciertas publicaciones de la consulta. Establezca una ID de publicaci\u00f3n o una matriz de n\u00fameros para varias ID de publicaci\u00f3n.<\/li>\nparent_exclude<\/code>: Excluye ciertas publicaciones principales. Establezca una ID de publicaci\u00f3n o una matriz de m\u00faltiples ID de publicaci\u00f3n.<\/li>\norderby<\/code>: Decide el orden de las publicaciones. Lo m\u00e1s probable es que pueda usar los mismos par\u00e1metros que en orderby de WP_Query<\/a>. Puede ser, por ejemplo, ‘ menu_order<\/code>‘.<\/li>\norder<\/code>: Cualquiera 'asc'<\/code>o ‘ desc'<\/code>para ordenaci\u00f3n ascendente o descendente.<\/li>\nstatus<\/code>: Filtrar por estado de la publicaci\u00f3n. Puede ser una cadena, una cadena con varios estados separados por comas o una matriz de cadenas de estado. Por ejemplo ['publish', 'draft']<\/code>, para consultar publicaciones publicadas y redactadas.<\/li>\ncategories<\/code>: Filtra publicaciones por ciertas categor\u00edas. Proporcione un ID de categor\u00eda o una matriz de ID de categor\u00eda. Creo que esto solo funciona para categor\u00edas de publicaciones y no para otras taxonom\u00edas personalizadas.<\/li>\ntags<\/code>: Filtra publicaciones por ciertas etiquetas. Proporcione una ID de etiqueta o una matriz de ID de etiquetas. Funciona solo para etiquetas de publicaci\u00f3n y no para otras taxonom\u00edas personalizadas.<\/li>\nsearch<\/code>: agregue una consulta de b\u00fasqueda (cadena).<\/li>\n<\/ul>\n-1<\/code>a per_page<\/code>. En segundo lugar, queremos excluir la publicaci\u00f3n actual de la lista de publicaciones proporcionando el ID de la publicaci\u00f3n actual a exclude<\/code>. A menudo no tiene sentido mostrar un atajo de publicaci\u00f3n o una vista previa de la publicaci\u00f3n actual.<\/p>\nwithSelect<\/code>y con el select<\/code>selector podemos acceder a todos los almacenes de datos b\u00e1sicos de WordPress. El ID de publicaci\u00f3n actual es algo natural para almacenar en una de las tiendas principales de WordPress. Dentro core\/editor<\/code>encontramos la funci\u00f3n getCurrentPostId()<\/code>.<\/p>\nwithSelect<\/code>retorno a algo como esto:<\/p>\nedit: withSelect(select => {\n const currentPostId = select('core\/editor').getCurrentPostId();\n const query = {\n per_page: -1,\n exclude: currentPostId\n }\n return {\n posts: select('core').getEntityRecords('postType', 'post', query)\n }\n})(FirstBlockEdit),<\/code><\/pre>\nper_page<\/code>y exclude<\/code>y lo pasamos como tercer par\u00e1metro a getEntityRecords()<\/code>. Ahora nuestro props.posts<\/code>interior del FirstBlockEdit<\/code>componente deber\u00eda enumerar todas las publicaciones pero excluir la publicaci\u00f3n actual.<\/p>\nConclusi\u00f3n<\/h2>\n