WP_Query WordPressi plokiredaktori (Gutenberg) ekvivalent on getEntityRecords

Kui te pole WordPressi plokiredaktori (Gutenberg) jaoks pistikprogrammide kirjutamises uus, võite olla pisut segaduses, kuidas teha kõike, mida regulaarselt tegite, näiteks WP_Query abil postituste haaramine.

Teil on väga hea meel teada saada, et saate peaaegu endiselt teha kõike, mida varem WP_Queryga tegite, kasutades getEntityRecords.

Näiteks saame haarata uusimad postitused, kasutades järgmist koodibitti:

wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘postitused’);

Samal viisil saate päringuid teha ka kohandatud postitustüüpide (CPT) kohta, kui olete oma CPT-le REST API kaudu juurdepääsetavaks teinud.

wp.data.select( ‘core’ ).getEntityRecords( ‘postType’, ‘my_custom_post_type’ );

Võime isegi esitada mõned argumendid, mis võivad tunduda tuttavad:

wp.data.select( 'core' ).getEntityRecords(
    'postType', 
    'post', 
    {
        'status': 'draft', 
        'per_page': 2, 
    } 
);
`

Funktsioonile edastatavate argumentide lõpliku loendi leiate siit Gutenbergi arendaja juhendist.

Proovige seda konsoolis

Kui olete saidile sisse logitud ja vaatate esiosa, saate katsetada peaaegu kõiki Gutenbergi käske. WordPress salvestab need kõik käepärasesse wpobjekti.

Ülaltoodud käsu tippimisel ühe arendussaidi konsooli saan järgmise:

GetEntityRecordsi kasutamine konsoolis postituste haaramiseks

Ülaltoodud ekraanipilt näitab, et konsool tagastab JavaScriptis kaks WordPressi postitusobjekti, mis on mustandipostitused (vastavalt parameetritele, millesse sisestasin getEntityRecords).

JavaScripti postitusobjekt

Postitusobjekti konsoolis edasi uurides näete, et teile on tagastatud palju atribuute, millele pääsete juurde.

    id: 42
    date: "2020-03-21T14:02:00"
    date_gmt: "2020-03-21T14:02:00"
    guid: {
        rendered: "https://wholesomecode.ltd/?p=42"
        raw: "https://wholesomecode.ltd/?p=42"
    }
    modified: "2020-03-21T14:02:00"
    modified_gmt: "2020-03-21T14:02:00"
    password: ""
    slug: "wp-query-and-the-wordpress-block-editor-gutenberg"
    status: "draft"
    type: "post"
    link: "https://wholesomecode.ltd/?p=42"
    title: {
        raw: "WP_Query and the WordPress Block Editor (Gutenberg)"
        rendered: "WP_Query and the WordPress Block Editor (Gutenberg)"
    }
    content: {
        raw: "Content goes here."    
        rendered: "<p>Content goes here.</p>↵"
        protected: false
        block_version: 0
    }
    excerpt: {
        raw: ""
        rendered: "<p>Content goes here.</p>↵"
        protected: false
    }
    author: 1
    featured_media: 101
    comment_status: "open"
    ping_status: "open"
    sticky: false
    template: ""
    format: "standard"
    meta: {
        _wcltd_meta_example_1: "1"         
        _wcltd_meta_example_2: "Hello"
    }
    categories: [1]
    tags: []
    country: []
    region: []
    city: []
    permalink_template: "https://wholesomecode.ltd/%postname%/"
    generated_slug: "wp-query-and-the-wordpress-block-editor-gutenberg"

Postitage Meta Gutenbergis

Üks asi, mida ülalpool uuritud postitusobjektist märkate, on see, et kogu postituse meta sisaldub metaatribuudi objektis. get_post_meta()See säästab meid selle Gutenbergi objekti jaoks samaväärsete toimingute tegemisest.

Kui aga soovite saada postituse meta ühe postituse objekti jaoks, vaadake get_post_metasamaväärset Gutenbergi artiklit.

Kujutise üksikasjade hankimine Gutembergis

Postitusobjektile saate esiletõstetud meediumi ID, mis on featured_mediaatribuudis salvestatud.

Selle manuse atribuutide hankimiseks saate kasutada getMedia( WordPressi Gutenbergi vastet ).wp_get_attachment_image

Gutenbergi postiaas

Laiendame skripti loodud plokki @wordpress/create-block, millest ma varem kirjutasin, et lisada näide selle kohta, kuidas teha Gutenbergis WP_Query silmuse ekvivalent.

Kõigepealt peame select()funktsiooni wp-data-st importima. Saame seda teha, viidates NPM-moodulile:

import { select } from '@wordpress/data;

Või kasutades wpobjekti:

const { select } = wp.data;

Jääme kindlaks loodud plokis kasutatud tavade juurde ja kasutame NPM-moodulit ning kasutame @wordpress/datameetodit.

Siin on Gutenbergi WP_Query tsükli ekvivalendi põhirakendus.

Esiletõstetud pildid

Pange tähele, et selle näite korrektseks toimimiseks tuleb esiletõstetud pildid määrata kahe viimase postituse jaoks.

import { registerBlockType } from '@wordpress/blocks';
import { select, withSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

registerBlockType( 'wholesomecode/wholesome-plugin', {
    title: __( 'Wholesome Plugin', 'wholesomecode' ),
    description: __( 'Just an Example Plugin', 'wholesomecode' ),
    category: 'common',
    icon: 'smiley',

    edit: withSelect( (select) => {
        const posts = select( 'core' ).getEntityRecords( 'postType', 'post', { 'per_page': 2 } );
        let media = {};
        posts.forEach( post => {
            media[ post.id ] = select('core').getMedia( post.featured_media );
        });
        return {
            posts,
            media
        };
    } )( props => {

        const { media, posts } = props;

        if (! posts ||! media) {
            return (<p>{ __( 'Loading...', 'wholesomecode') }</p>
            );
        }

        return (<ul>
            { posts.map( (post) => {
                    if (media[ post.id ]) {
                        const imageThumbnailSrc = media[ post.id ].media_details.sizes.thumbnail.source_url;
                    return (<li>
                            <img src={ imageThumbnailSrc } />
                            <a href={ post.link }>
                                { post.title.raw }
                            </a>
                        </li>) }
                }) }
            </ul>
        );
    } ),

    save() {
        return (<p>
                { __( 'Wholesome Plugin – Nothing to see here.', 'wholesomecode') }
            </p>
        );
    },
} );

Pange tähele, withSelectet andmete eellaadimiseks kasutatakse enne ploki laadimist. Lisateavet withSelecti kohta leiate Gutenbergi dokumentatsioonist .

Ülaltoodud kood väljastab järgmise (väga lihtsa) näite artiklite loendist ja nendega seotud pisipiltidest redaktoris:

Näidispostisilmus Gutenbergis.

REST API kasutamine

Kui soovite saada kohandatud andmeid REST API kaudu, vaadake minu postitust REST API kasutamise kohta WordPressi plokiredaktoriga (Gutenberg).