getEntityRecords<\/code>.<\/p>\nPor ejemplo, podemos tomar las \u00faltimas publicaciones usando el siguiente c\u00f3digo:<\/p>\n
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’ );<\/p>\n
Tambi\u00e9n puede consultar tipos de publicaciones personalizadas (CPT) de la misma manera, siempre que haya hecho que su CPT sea accesible a trav\u00e9s de la API REST<\/a>.<\/p>\nwp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );<\/p>\n
Incluso podemos pasar algunos argumentos que pueden parecer familiares:<\/p>\n
wp.data.select( 'core' ).getEntityRecords(\n 'postType', \n 'post', \n {\n 'status': 'draft', \n 'per_page': 2, \n } \n);\n`\n<\/code><\/pre>\nPuede encontrar la lista definitiva de los argumentos que puede pasar a la funci\u00f3n aqu\u00ed en la gu\u00eda para desarrolladores de Gutenberg<\/a>.<\/p>\nPru\u00e9belo en la Consola<\/h2>\n
Si ha iniciado sesi\u00f3n en un sitio y est\u00e1 viendo la interfaz, puede probar pr\u00e1cticamente cualquier comando de Gutenberg. WordPress los almacena todos en el pr\u00e1ctico wp<\/code>objeto.<\/p>\nAl escribir el comando anterior en la consola en uno de mis sitios de desarrollo, obtengo lo siguiente:<\/p>\n
Uso de getEntityRecords para capturar publicaciones en la Consola<\/p>\n
La captura de pantalla anterior muestra que la consola devuelve dos objetos de publicaci\u00f3n de WordPress en JavaScript, que son publicaciones en borrador (seg\u00fan los par\u00e1metros que pas\u00e9 getEntityRecords<\/code>).<\/p>\nEl objeto de publicaci\u00f3n de JavaScript<\/h2>\n
Al explorar m\u00e1s el objeto de publicaci\u00f3n en la consola, puede ver que hay muchas propiedades devueltas para que pueda acceder.<\/p>\n
id: 42\n date: \"2020-03-21T14:02:00\"\n date_gmt: \"2020-03-21T14:02:00\"\n guid: {\n rendered: \"https:\/\/wholesomecode.ltd\/?p=42\"\n raw: \"https:\/\/wholesomecode.ltd\/?p=42\"\n }\n modified: \"2020-03-21T14:02:00\"\n modified_gmt: \"2020-03-21T14:02:00\"\n password: \"\"\n slug: \"wp-query-and-the-wordpress-block-editor-gutenberg\"\n status: \"draft\"\n type: \"post\"\n link: \"https:\/\/wholesomecode.ltd\/?p=42\"\n title: {\n raw: \"WP_Query and the WordPress Block Editor (Gutenberg)\"\n rendered: \"WP_Query and the WordPress Block Editor (Gutenberg)\"\n }\n content: {\n raw: \"Content goes here.\" \n rendered: \"<p>Content goes here.<\/p>\u21b5\"\n protected: false\n block_version: 0\n }\n excerpt: {\n raw: \"\"\n rendered: \"<p>Content goes here.<\/p>\u21b5\"\n protected: false\n }\n author: 1\n featured_media: 101\n comment_status: \"open\"\n ping_status: \"open\"\n sticky: false\n template: \"\"\n format: \"standard\"\n meta: {\n _wcltd_meta_example_1: \"1\" \n _wcltd_meta_example_2: \"Hello\"\n }\n categories: [1]\n tags: []\n country: []\n region: []\n city: []\n permalink_template: \"https:\/\/wholesomecode.ltd\/%postname%\/\"\n generated_slug: \"wp-query-and-the-wordpress-block-editor-gutenberg\"\n<\/code><\/pre>\nPublicar Meta en Gutenberg<\/h2>\n
Una cosa que notar\u00e1 del objeto de publicaci\u00f3n que exploramos anteriormente es que todo el meta de la publicaci\u00f3n est\u00e1 contenido dentro del objeto en la meta<\/code>propiedad. Esto nos ahorra hacer el equivalente a get_post_meta()<\/code>para este objeto en Gutenberg.<\/p>\nSin embargo, si desea obtener el meta de publicaci\u00f3n para un solo objeto de publicaci\u00f3n, consulte el get_post_meta<\/code>equivalente en el art\u00edculo de Gutenberg<\/a>.<\/p>\nObtener los detalles de la imagen en Gutemberg<\/h2>\n
El objeto de publicaci\u00f3n puede obtener el ID de medios destacados, que se almacena en la featured_media<\/code>propiedad.<\/p>\nPuede usar getMedia<\/code>(el equivalente de WordPress Gutenberg dewp_get_attachment_image<\/code><\/a>) para obtener las propiedades de este archivo adjunto.<\/p>\nEl bucle de correos de Gutenberg<\/h2>\n
Expandamos el bloque creado por el @wordpress\/create-block<\/code>script, sobre el que escrib\u00ed anteriormente<\/a> para incluir un ejemplo de c\u00f3mo hacer el equivalente de un bucle WP_Query en Gutenberg.<\/p>\nPrimero necesitamos importar la select()<\/code>funci\u00f3n desde wp-data. Podemos hacer esto haciendo referencia al m\u00f3dulo NPM:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nO usando el wp<\/code>objeto:<\/p>\nconst { select } = wp.data;<\/code><\/p>\nSeguiremos con las pr\u00e1cticas utilizadas en el bloque creado y usaremos el m\u00f3dulo NPM, y usaremos el @wordpress\/data<\/code>m\u00e9todo.<\/p>\nAqu\u00ed hay una implementaci\u00f3n b\u00e1sica del equivalente de un bucle WP_Query en Gutenberg.<\/p>\n
Im\u00e1genes destacadas<\/strong><\/p>\nTenga en cuenta que las im\u00e1genes destacadas deben configurarse para las \u00faltimas dos publicaciones para que este ejemplo funcione correctamente.<\/p>\n
import { registerBlockType } from '@wordpress\/blocks';\nimport { select, withSelect } from '@wordpress\/data';\nimport { __ } from '@wordpress\/i18n';\n\nregisterBlockType( 'wholesomecode\/wholesome-plugin', {\n title: __( 'Wholesome Plugin', 'wholesomecode' ),\n description: __( 'Just an Example Plugin', 'wholesomecode' ),\n category: 'common',\n icon: 'smiley',\n\n edit: withSelect( (select) => {\n const posts = select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': 2 } );\n let media = {};\n posts.forEach( post => {\n media[ post.id ] = select('core').getMedia( post.featured_media );\n });\n return {\n posts,\n media\n };\n } )( props => {\n\n const { media, posts } = props;\n\n if (! posts ||! media) {\n return (<p>{ __( 'Loading...', 'wholesomecode') }<\/p>\n );\n }\n\n return (<ul>\n { posts.map( (post) => {\n if (media[ post.id ]) {\n const imageThumbnailSrc = media[ post.id ].media_details.sizes.thumbnail.source_url;\n return (<li>\n <img src={ imageThumbnailSrc } \/>\n <a href={ post.link }>\n { post.title.raw }\n <\/a>\n <\/li>) }\n }) }\n <\/ul>\n );\n } ),\n\n save() {\n return (<p>\n { __( 'Wholesome Plugin \u2013 Nothing to see here.', 'wholesomecode') }\n <\/p>\n );\n },\n} );\n<\/code><\/pre>\nTenga en cuenta el uso de withSelect<\/code>para precargar los datos antes de que se cargue el bloque. Puede obtener m\u00e1s informaci\u00f3n sobre withSelect leyendo la documentaci\u00f3n de Gutenberg<\/a>.<\/p>\nEl c\u00f3digo anterior genera el siguiente ejemplo (muy b\u00e1sico) de una lista de art\u00edculos y sus miniaturas asociadas en el editor:<\/p>\n
![\"El](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Ejemplo de Post Loop en Gutenberg.<\/p>\n
Uso de la API REST<\/h2>\n
Si desea obtener datos personalizados a trav\u00e9s de la API REST, consulte mi publicaci\u00f3n sobre el uso de la API REST con el Editor de bloques de WordPress (Gutenberg)<\/a>.<\/p>\n