getEntityRecords<\/code>.<\/p>\nAd esempio, possiamo prendere gli ultimi post utilizzando il seguente bit di codice:<\/p>\n
wp.data.select(‘core’).getEntityRecords(‘postType’, ‘post’);<\/p>\n
Puoi anche interrogare i tipi di post personalizzati (CPT) allo stesso modo, purch\u00e9 tu abbia reso accessibile il tuo CPT tramite l’API REST<\/a>.<\/p>\nwp.data.select(‘core’).getEntityRecords(‘postType’, ‘my_custom_post_type’);<\/p>\n
Possiamo anche passare alcuni argomenti che possono sembrare familiari:<\/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>\nPuoi trovare l’elenco definitivo degli argomenti che puoi passare alla funzione qui nella guida dello sviluppatore Gutenberg<\/a>.<\/p>\nProvalo nella Console<\/h2>\n
Se hai effettuato l’accesso a un sito e stai visualizzando il front-end, puoi testare praticamente qualsiasi comando Gutenberg. WordPress li memorizza tutti wp<\/code>nell’oggetto a portata di mano.<\/p>\nDigitando il comando sopra nella console su uno dei miei siti di sviluppo ottengo quanto segue:<\/p>\n
Utilizzo di getEntityRecords per acquisire post nella Console<\/p>\n
Lo screenshot sopra mostra la console che restituisce due oggetti post di WordPress in JavaScript, che sono bozze di post (secondo i parametri che ho passato in getEntityRecords<\/code>).<\/p>\nL’oggetto Post JavaScript<\/h2>\n
Esplorando ulteriormente l’oggetto post nella console puoi vedere che ci sono molte propriet\u00e0 restituite a cui puoi accedere.<\/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 a Gutenberg<\/h2>\n
Una cosa che noterai dall’oggetto post che abbiamo esplorato sopra, \u00e8 che tutto il meta post \u00e8 contenuto all’interno dell’oggetto nella meta<\/code>propriet\u00e0. Questo ci evita di fare l’equivalente di get_post_meta()<\/code>questo oggetto in Gutenberg.<\/p>\nTuttavia, se si desidera ottenere il meta post per un singolo oggetto post, vedere l’ get_post_meta<\/code>equivalente nell’articolo di Gutenberg<\/a>.<\/p>\nOttenere i dettagli dell’immagine a Gutemberg<\/h2>\n
L’oggetto del post \u00e8 possibile ottenere l’ID del supporto in primo piano, che \u00e8 memorizzato nella featured_media<\/code>propriet\u00e0.<\/p>\n\u00c8 possibile utilizzare getMedia<\/code>(l’ equivalente di WordPress Gutenberg diwp_get_attachment_image<\/code><\/a>) per ottenere le propriet\u00e0 per questo allegato.<\/p>\nIl ciclo del post di Gutenberg<\/h2>\n
Consente di espandere il blocco creato dallo @wordpress\/create-block<\/code>script, di cui ho scritto in precedenza<\/a> per includere un esempio di come creare l’equivalente di un ciclo WP_Query in Gutenberg.<\/p>\nPer prima cosa dobbiamo importare la select()<\/code>funzione da wp-data. Possiamo farlo facendo riferimento al modulo NPM:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nOppure utilizzando l’ wp<\/code>oggetto:<\/p>\nconst { select } = wp.data;<\/code><\/p>\nCi atterremo alle pratiche utilizzate nel blocco creato e utilizzeremo il modulo NPM e utilizzeremo il @wordpress\/data<\/code>metodo.<\/p>\nEcco un’implementazione di base dell’equivalente di un ciclo WP_Query in Gutenberg.<\/p>\n
Immagini in primo piano<\/strong><\/p>\nNota che le immagini in primo piano devono essere impostate affinch\u00e9 gli ultimi due post funzionino correttamente.<\/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>\nNotare l’uso di withSelect<\/code>per precaricare i dati prima del caricamento del blocco. Puoi saperne di pi\u00f9 su withSelect leggendo la documentazione di Gutenberg<\/a>.<\/p>\nIl codice precedente restituisce il seguente esempio (molto semplice) di un elenco di articoli e le miniature associate nell’editor:<\/p>\n
![\"L'equivalente](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Esempio Post Loop a Gutenberg.<\/p>\n
Utilizzo dell’API REST<\/h2>\n
Se desideri ottenere dati personalizzati tramite l’API REST, dai un’occhiata al mio post sull’utilizzo dell’API REST con WordPress Block Editor (Gutenberg)<\/a>.<\/p>\n