getEntityRecords<\/code>.<\/p>\nVoimme esimerkiksi napata uusimmat viestit k\u00e4ytt\u00e4m\u00e4ll\u00e4 seuraavaa koodibitti\u00e4:<\/p>\n
wp.data.select( ’core’ ).getEntityRecords( ’postType’, ’posts’ );<\/p>\n
Voit my\u00f6s kysy\u00e4 mukautettuja viestityyppej\u00e4 (CPT) samalla tavalla, kunhan olet asettanut CPT:n k\u00e4ytett\u00e4v\u00e4ksi REST API:n kautta<\/a>.<\/p>\nwp.data.select( ’core’ ).getEntityRecords( ’postType’, ’my_custom_post_type’ );<\/p>\n
Voimme jopa v\u00e4litt\u00e4\u00e4 joitain argumentteja, jotka saattavat n\u00e4ytt\u00e4\u00e4 tutuilta:<\/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>\nL\u00f6yd\u00e4t lopullisen luettelon argumenteista, jotka voit v\u00e4litt\u00e4\u00e4 funktioon t\u00e4\u00e4lt\u00e4 Gutenbergin kehitt\u00e4j\u00e4oppaasta<\/a>.<\/p>\nKokeile konsolissa<\/h2>\n
Jos olet kirjautunut sivustolle ja tarkastelet k\u00e4ytt\u00f6liittym\u00e4\u00e4, voit testata melkein mit\u00e4 tahansa Gutenberg-komentoa. WordPress tallentaa ne kaikki k\u00e4tev\u00e4\u00e4n wp<\/code>esineeseen.<\/p>\nKun kirjoitat yll\u00e4 olevan komennon konsoliin jollakin kehityssivustollani, saan seuraavan:<\/p>\n
K\u00e4yt\u00e4 getEntityRecords-ohjelmaa viestien nappaamiseen konsolissa<\/p>\n
Yll\u00e4 oleva kuvakaappaus n\u00e4ytt\u00e4\u00e4, ett\u00e4 konsoli palauttaa kaksi WordPress-postiobjektia JavaScriptiss\u00e4, jotka ovat luonnosviestej\u00e4 (parametrien mukaan, joihin siirryin getEntityRecords<\/code>).<\/p>\nJavaScript-postiobjekti<\/h2>\n
Kun tutkit viestiobjektia tarkemmin konsolissa, n\u00e4et, ett\u00e4 sinulle on palautettu paljon ominaisuuksia.<\/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>\nL\u00e4het\u00e4 Meta Gutenbergiss\u00e4<\/h2>\n
Yksi asia, jonka huomaat yll\u00e4 tutkimastamme post-objektista, on se, ett\u00e4 kaikki post-meta sis\u00e4ltyy meta<\/code>ominaisuuden objektiin. T\u00e4m\u00e4 s\u00e4\u00e4st\u00e4\u00e4 meid\u00e4t tekem\u00e4st\u00e4 vastaavaa get_post_meta()<\/code>t\u00e4lle Gutenbergin objektille.<\/p>\nJos kuitenkin haluat saada post-meta yksitt\u00e4iselle viestiobjektille, katso get_post_meta<\/code>vastaava Gutenbergin artikkelista<\/a>.<\/p>\nKuvan tietojen saaminen Gutembergist\u00e4<\/h2>\n
Viestiobjektista saat esitellyn median tunnuksen, joka on tallennettu featured_media<\/code>omaisuuteen.<\/p>\nVoit k\u00e4ytt\u00e4\u00e4 getMedia<\/code>( WordPressin Gutenberg-vastinettawp_get_attachment_image<\/code><\/a>) saadaksesi t\u00e4m\u00e4n liitteen ominaisuudet.<\/p>\nGutenbergin postisilmukka<\/h2>\n
Laajennetaan komentosarjan luomaa lohkoa @wordpress\/create-block<\/code>, josta kirjoitin aiemmin<\/a>, sis\u00e4llytt\u00e4m\u00e4ll\u00e4 siihen esimerkki WP_Query-silmukan vastineen tekemisest\u00e4 Gutenbergiss\u00e4 .<\/p>\nEnsin meid\u00e4n on tuotava select()<\/code>funktio wp-datasta. Voimme tehd\u00e4 t\u00e4m\u00e4n joko viittaamalla NPM-moduuliin:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nTai k\u00e4ytt\u00e4m\u00e4ll\u00e4 wp<\/code>objektia:<\/p>\nconst { select } = wp.data;<\/code><\/p>\nAiomme pysy\u00e4 luodussa lohkossa k\u00e4ytetyiss\u00e4 k\u00e4yt\u00e4nn\u00f6iss\u00e4 ja k\u00e4ytt\u00e4\u00e4 NPM-moduulia ja @wordpress\/data<\/code>menetelm\u00e4\u00e4.<\/p>\nT\u00e4ss\u00e4 on Gutenbergin WP_Query-silmukan vastaavan perustoteutus.<\/p>\n
Suositellut kuvat<\/strong><\/p>\nHuomaa, ett\u00e4 suositellut kuvat on asetettava kahdelle viimeiselle viestille, jotta t\u00e4m\u00e4 esimerkki toimisi oikein.<\/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>\nHuomaa, ett\u00e4 k\u00e4ytet\u00e4\u00e4n withSelect<\/code>tietojen esilataamiseen ennen lohkon latautumista. Saat lis\u00e4tietoja withSelectist\u00e4 lukemalla Gutenbergin dokumentaation<\/a>.<\/p>\nYll\u00e4 oleva koodi tulostaa seuraavan (eritt\u00e4in yksinkertaisen) esimerkin artikkeliluettelosta ja niihin liittyvist\u00e4 pikkukuvista editorissa:<\/p>\n
![\"WP_Query](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Esimerkki viestisilmukasta Gutenbergiss\u00e4.<\/p>\n
REST API:n k\u00e4ytt\u00f6<\/h2>\n
Jos haluat saada mukautettuja tietoja REST API:n kautta, tutustu viestiini REST API:n k\u00e4yt\u00f6st\u00e4 WordPress Block Editorin (Gutenberg) kanssa<\/a>.<\/p>\n