getEntityRecords<\/code>.<\/p>\nNa przyk\u0142ad, mo\u017cemy pobra\u0107 najnowsze posty, u\u017cywaj\u0105c nast\u0119puj\u0105cego fragmentu kodu:<\/p>\n
wp.data.select( 'core’ ).getEntityRecords( 'postType’, 'posts’ );<\/p>\n
W ten sam spos\u00f3b mo\u017cesz r\u00f3wnie\u017c wysy\u0142a\u0107 zapytania do niestandardowych typ\u00f3w post\u00f3w (CPT), o ile udost\u0119pnisz sw\u00f3j CPT za po\u015brednictwem interfejsu API REST<\/a>.<\/p>\nwp.data.select( 'core’ ).getEntityRecords( 'postType’, 'my_custom_post_type’ );<\/p>\n
Mo\u017cemy nawet poda\u0107 kilka argument\u00f3w, kt\u00f3re mog\u0105 wygl\u0105da\u0107 znajomo:<\/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>\nMo\u017cesz znale\u017a\u0107 ostateczn\u0105 list\u0119 argument\u00f3w, kt\u00f3re mo\u017cesz przekaza\u0107 do funkcji tutaj w przewodniku programisty Gutenberga<\/a>.<\/p>\nWypr\u00f3buj w konsoli<\/h2>\n
Je\u015bli jeste\u015b zalogowany na stronie i przegl\u0105dasz interfejs, mo\u017cesz przetestowa\u0107 prawie ka\u017cde polecenie Gutenberga. WordPress przechowuje je wszystkie w por\u0119cznym wp<\/code>obiekcie.<\/p>\nWpisuj\u0105c powy\u017csze polecenie do konsoli na jednej z moich witryn programistycznych, otrzymuj\u0119 nast\u0119puj\u0105ce informacje:<\/p>\n
U\u017cywanie getEntityRecords do pobierania post\u00f3w w konsoli<\/p>\n
Powy\u017cszy zrzut ekranu pokazuje konsol\u0119 zwracaj\u0105c\u0105 dwa obiekty post\u00f3w WordPress w JavaScript, kt\u00f3re s\u0105 wersjami roboczymi post\u00f3w (zgodnie z parametrami, do kt\u00f3rych przekaza\u0142em getEntityRecords<\/code>).<\/p>\nObiekt postu JavaScript<\/h2>\n
Eksploruj\u0105c obiekt posta dalej w konsoli, mo\u017cesz zobaczy\u0107, \u017ce zwr\u00f3cono wiele w\u0142a\u015bciwo\u015bci, do kt\u00f3rych mo\u017cesz uzyska\u0107 dost\u0119p.<\/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 w Gutenberg<\/h2>\n
Jedn\u0105 z rzeczy, kt\u00f3re zauwa\u017cysz z obiektu posta, kt\u00f3ry zbadali\u015bmy powy\u017cej, jest to, \u017ce ca\u0142a meta posta jest zawarta w obiekcie we meta<\/code>w\u0142a\u015bciwo\u015bci. Oszcz\u0119dza nam to robienia odpowiednika get_post_meta()<\/code>dla tego obiektu w Gutenbergu.<\/p>\nJe\u015bli jednak chcesz uzyska\u0107 meta posta dla pojedynczego obiektu posta, zobacz get_post_meta<\/code>odpowiednik w artykule Gutenberga<\/a>.<\/p>\nUzyskiwanie szczeg\u00f3\u0142\u00f3w obrazu w Gutemberg<\/h2>\n
Obiekt postu mo\u017cna uzyska\u0107 z polecanym identyfikatorem multimedi\u00f3w, kt\u00f3ry jest przechowywany w featured_media<\/code>us\u0142udze.<\/p>\nMo\u017cesz u\u017cy\u0107 getMedia<\/code>(odpowiednik WordPress Gutenbergwp_get_attachment_image<\/code><\/a> ), aby uzyska\u0107 w\u0142a\u015bciwo\u015bci tego za\u0142\u0105cznika.<\/p>\nP\u0119tla postu Gutenberga<\/h2>\n
Rozwi\u0144my blok stworzony przez @wordpress\/create-block<\/code>skrypt, o kt\u00f3rym pisa\u0142em wcze\u015bniej<\/a>, o przyk\u0142ad, jak zrobi\u0107 odpowiednik p\u0119tli WP_Query w Gutenbergu.<\/p>\nNajpierw musimy zaimportowa\u0107 select()<\/code>funkcj\u0119 z wp-data. Mo\u017cemy to zrobi\u0107, odwo\u0142uj\u0105c si\u0119 do modu\u0142u NPM:<\/p>\nimport { select } from '@wordpress\/data;<\/code><\/p>\nLub za pomoc\u0105 wp<\/code>obiektu:<\/p>\nconst { select } = wp.data;<\/code><\/p>\nB\u0119dziemy trzyma\u0107 si\u0119 praktyk zastosowanych w utworzonym bloku i korzysta\u0107 z modu\u0142u NPM oraz korzysta\u0107 z @wordpress\/data<\/code>metody.<\/p>\nOto podstawowa implementacja odpowiednika p\u0119tli WP_Query w Gutenbergu.<\/p>\n
Polecane obrazy<\/strong><\/p>\nPami\u0119taj, \u017ce polecane obrazy musz\u0105 by\u0107 ustawione dla ostatnich dw\u00f3ch post\u00f3w, aby ten przyk\u0142ad dzia\u0142a\u0142 poprawnie.<\/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>\nZwr\u00f3\u0107 uwag\u0119 na u\u017cycie withSelect<\/code>do wst\u0119pnego za\u0142adowania danych przed za\u0142adowaniem bloku. Wi\u0119cej informacji na temat withSelect<\/a> mo\u017cna znale\u017a\u0107 w dokumentacji Gutenberga .<\/p>\nPowy\u017cszy kod wy\u015bwietla nast\u0119puj\u0105cy (bardzo podstawowy) przyk\u0142ad listy artyku\u0142\u00f3w i powi\u0105zanych z nimi miniatur w edytorze:<\/p>\n
![\"WP_Query](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168779-61e7f3032376a.png\")
Przyk\u0142adowa p\u0119tla postu w Gutenbergu.<\/p>\n
Korzystanie z REST API<\/h2>\n
Je\u015bli chcesz uzyska\u0107 niestandardowe dane za po\u015brednictwem interfejsu API REST, zapoznaj si\u0119 z moim postem na temat korzystania z interfejsu API REST z edytorem blok\u00f3w WordPress (Gutenberg)<\/a>.<\/p>\n