getEntityRecords<\/code>.<\/p>\nTill exempel kan vi ta tag i de senaste inl\u00e4ggen genom att anv\u00e4nda f\u00f6ljande kodbit:<\/p>\n
wp.data.select( ’core’ ).getEntityRecords( ’postType’, ’posts’ );<\/p>\n
Du kan ocks\u00e5 fr\u00e5ga Custom Post Types (CPT) p\u00e5 samma s\u00e4tt, s\u00e5 l\u00e4nge du har gjort din CPT tillg\u00e4nglig via REST API<\/a>.<\/p>\nwp.data.select( ’core’ ).getEntityRecords( ’postType’, ’my_custom_post_type’ );<\/p>\n
Vi kan till och med skicka in n\u00e5gra argument som kanske ser lite bekanta ut:<\/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>\nDu kan hitta den definitiva listan \u00f6ver de argument du kan \u00f6verf\u00f6ra till funktionen h\u00e4r i Gutenbergs utvecklarguide<\/a>.<\/p>\nProva det i konsolen<\/h2>\n
Om du \u00e4r inloggad p\u00e5 en webbplats och du tittar p\u00e5 gr\u00e4nssnittet kan du testa i stort sett vilket Gutenberg-kommando som helst. WordPress lagrar dem alla i det praktiska wp<\/code>objektet.<\/p>\nOm jag skriver kommandot ovan i konsolen p\u00e5 en av mina utvecklingswebbplatser f\u00e5r jag f\u00f6ljande:<\/p>\n
Anv\u00e4nda getEntityRecords f\u00f6r att f\u00e5nga inl\u00e4gg i konsolen<\/p>\n
Sk\u00e4rmdumpen ovan visar att konsolen returnerar tv\u00e5 WordPress-postobjekt i JavaScript, som \u00e4r utkastinl\u00e4gg (enligt parametrarna jag skickade in getEntityRecords<\/code>).<\/p>\nJavaScript Post Object<\/h2>\n
Om du utforskar postobjektet l\u00e4ngre fram i konsolen kan du se att det finns massor av egenskaper som returneras f\u00f6r dig att komma \u00e5t.<\/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 i Gutenberg<\/h2>\n
En sak du kommer att m\u00e4rka fr\u00e5n postobjektet vi utforskade ovan \u00e4r att all postmeta finns i objektet i meta<\/code>egenskapen. Detta sparar oss att g\u00f6ra motsvarande get_post_meta()<\/code>f\u00f6r detta objekt i Gutenberg.<\/p>\nMen om du vill f\u00e5 inl\u00e4ggets meta f\u00f6r ett enda inl\u00e4ggsobjekt, se get_post_meta<\/code>motsvarande i Gutenberg-artikeln<\/a>.<\/p>\nF\u00e5 bilddetaljerna i Gutemberg<\/h2>\n
Postobjektet kan du f\u00e5 utvalda media-ID, som lagras i featured_media<\/code>fastigheten.<\/p>\nDu kan anv\u00e4nda getMedia<\/code>( WordPress Gutenberg-motsvarigheten tillwp_get_attachment_image<\/code><\/a>) f\u00f6r att f\u00e5 egenskaperna f\u00f6r denna bilaga.<\/p>\nGutenberg Post Loop<\/h2>\n
L\u00e5t oss ut\u00f6ka blocket som skapats av @wordpress\/create-block<\/code>skriptet som jag skrev om tidigare<\/a> f\u00f6r att inkludera ett exempel p\u00e5 hur man g\u00f6r motsvarigheten till en WP_Query-loop i Gutenberg.<\/p>\nF\u00f6rst m\u00e5ste vi importera select()<\/code>funktionen fr\u00e5n wp-data. Vi kan g\u00f6ra detta genom att antingen referera till NPM-modulen:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nEller genom att anv\u00e4nda wp<\/code>objektet:<\/p>\nconst { select } = wp.data;<\/code><\/p>\nVi kommer att h\u00e5lla fast vid den praxis som anv\u00e4nds i det skapade blocket och anv\u00e4nda NPM-modulen och anv\u00e4nda @wordpress\/data<\/code>metoden.<\/p>\nH\u00e4r \u00e4r en grundl\u00e4ggande implementering av motsvarigheten till en WP_Query-loop i Gutenberg.<\/p>\n
Utvalda bilder<\/strong><\/p>\nObservera att utvalda bilder m\u00e5ste st\u00e4llas in f\u00f6r att de senaste tv\u00e5 inl\u00e4ggen ska fungera korrekt.<\/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>\nNotera anv\u00e4ndningen av withSelect<\/code>f\u00f6r att ladda data innan blocket laddas. Du kan ta reda p\u00e5 mer om withSelect genom att l\u00e4sa Gutenberg-dokumentationen<\/a>.<\/p>\nOvanst\u00e5ende kod matar ut f\u00f6ljande (mycket grundl\u00e4ggande) exempel p\u00e5 en artikellista och deras associerade miniatyrer i redigeraren:<\/p>\n
![\"WP_Query](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Exempel Post Loop i Gutenberg.<\/p>\n
Anv\u00e4nder REST API<\/h2>\n
Om du vill f\u00e5 anpassad data via REST API, kolla in mitt inl\u00e4gg om att anv\u00e4nda REST API med WordPress Block Editor (Gutenberg)<\/a>.<\/p>\n