getEntityRecords<\/code>.<\/p>\nPor exemplo, podemos pegar as postagens mais recentes usando o seguinte trecho de c\u00f3digo:<\/p>\n
wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘posts’ );<\/p>\n
Voc\u00ea tamb\u00e9m pode consultar tipos de postagem personalizados (CPT) da mesma maneira, desde que tenha tornado seu CPT acess\u00edvel por meio da API REST<\/a>.<\/p>\nwp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );<\/p>\n
Podemos at\u00e9 passar alguns argumentos que podem 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>\nVoc\u00ea pode encontrar a lista definitiva dos argumentos que voc\u00ea pode passar para a fun\u00e7\u00e3o aqui no guia do desenvolvedor do Gutenberg<\/a>.<\/p>\nExperimente no console<\/h2>\n
Se voc\u00ea estiver logado em um site e estiver visualizando o front-end, poder\u00e1 testar praticamente qualquer comando do Gutenberg. O WordPress armazena todos eles no wp<\/code>objeto acess\u00edvel.<\/p>\nDigitando o comando acima no console em um dos meus sites de desenvolvimento, recebo o seguinte:<\/p>\n
Usando getEntityRecords para pegar postagens no Console<\/p>\n
A captura de tela acima mostra o console retornando dois objetos de postagem do WordPress no JavaScript, que s\u00e3o postagens de rascunho (de acordo com os par\u00e2metros que passei para getEntityRecords<\/code>).<\/p>\nO objeto de postagem JavaScript<\/h2>\n
Explorando ainda mais o objeto post no console, voc\u00ea pode ver que h\u00e1 muitas propriedades retornadas para voc\u00ea acessar.<\/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>\nPost Meta em Gutenberg<\/h2>\n
Uma coisa que voc\u00ea notar\u00e1 no objeto post que exploramos acima \u00e9 que todo o meta do post est\u00e1 contido no objeto na meta<\/code>propriedade. Isso nos poupa de fazer o equivalente a get_post_meta()<\/code>para este objeto em Gutenberg.<\/p>\nNo entanto, se voc\u00ea quiser obter a meta do post para um \u00fanico objeto post, veja o get_post_meta<\/code>equivalente no artigo do Gutenberg<\/a>.<\/p>\nObtendo os detalhes da imagem em Gutemberg<\/h2>\n
O objeto de postagem voc\u00ea pode obter o ID da m\u00eddia em destaque, que \u00e9 armazenado na featured_media<\/code>propriedade.<\/p>\nVoc\u00ea pode usar getMedia<\/code>(o equivalente do WordPress Gutenberg dewp_get_attachment_image<\/code><\/a>) para obter as propriedades deste anexo.<\/p>\nO Loop Post de Gutenberg<\/h2>\n
Vamos expandir o bloco criado pelo @wordpress\/create-block<\/code>script, sobre o qual escrevi anteriormente<\/a>, para incluir um exemplo de como fazer o equivalente a um loop WP_Query no Gutenberg.<\/p>\nPrimeiro, precisamos importar a select()<\/code>fun\u00e7\u00e3o de wp-data. Podemos fazer isso referenciando o m\u00f3dulo NPM:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nOu usando o wp<\/code>objeto:<\/p>\nconst { select } = wp.data;<\/code><\/p>\nVamos ficar com as pr\u00e1ticas usadas no bloco criado e usar o m\u00f3dulo NPM, e usar o @wordpress\/data<\/code>m\u00e9todo.<\/p>\nAqui est\u00e1 uma implementa\u00e7\u00e3o b\u00e1sica do equivalente a um loop WP_Query em Gutenberg.<\/p>\n
Imagens em destaque<\/strong><\/p>\nObserve que as imagens em destaque devem ser definidas para as duas \u00faltimas postagens para que este exemplo funcione corretamente.<\/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>\nObserve o uso de withSelect<\/code>para pr\u00e9-carregar os dados antes que o bloco seja carregado. Voc\u00ea pode descobrir mais sobre withSelect lendo a documenta\u00e7\u00e3o do Gutenberg<\/a>.<\/p>\nO c\u00f3digo acima gera o seguinte exemplo (muito b\u00e1sico) de uma lista de artigos e suas miniaturas associadas no editor:<\/p>\n
![\"WP_Query](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Exemplo de Post Loop em Gutenberg.<\/p>\n
Usando a API REST<\/h2>\n
Se voc\u00ea deseja obter dados personalizados por meio da API REST, confira meu post sobre como usar a API REST com o WordPress Block Editor (Gutenberg)<\/a>.<\/p>\n