WP_Query WordPress Block Editor (Gutenberg) vastaa getEntityRecords

Jos olet uusi WordPress Block Editor (Gutenberg) -laajennusten kirjoittamisessa, saatat olla hieman hämmentynyt, kuinka voit tehdä kaikki asiat, joita teit säännöllisesti, kuten viestien nappaaminen WP_Querylla.

Tulet olemaan erittäin ilahtunut, kun tiedät, että voit edelleen tehdä kaiken, mitä WP_Querylla ennen, käyttämällä getEntityRecords.

Voimme esimerkiksi napata uusimmat viestit käyttämällä seuraavaa koodibittiä:

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

Voit myös kysyä mukautettuja viestityyppejä (CPT) samalla tavalla, kunhan olet asettanut CPT:n käytettäväksi REST API:n kautta.

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

Voimme jopa välittää joitain argumentteja, jotka saattavat näyttää tutuilta:

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

Löydät lopullisen luettelon argumenteista, jotka voit välittää funktioon täältä Gutenbergin kehittäjäoppaasta.

Kokeile konsolissa

Jos olet kirjautunut sivustolle ja tarkastelet käyttöliittymää, voit testata melkein mitä tahansa Gutenberg-komentoa. WordPress tallentaa ne kaikki kätevään wpesineeseen.

Kun kirjoitat yllä olevan komennon konsoliin jollakin kehityssivustollani, saan seuraavan:

Käytä getEntityRecords-ohjelmaa viestien nappaamiseen konsolissa

Yllä oleva kuvakaappaus näyttää, että konsoli palauttaa kaksi WordPress-postiobjektia JavaScriptissä, jotka ovat luonnosviestejä (parametrien mukaan, joihin siirryin getEntityRecords).

JavaScript-postiobjekti

Kun tutkit viestiobjektia tarkemmin konsolissa, näet, että sinulle on palautettu paljon ominaisuuksia.

    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"

Lähetä Meta Gutenbergissä

Yksi asia, jonka huomaat yllä tutkimastamme post-objektista, on se, että kaikki post-meta sisältyy metaominaisuuden objektiin. Tämä säästää meidät tekemästä vastaavaa get_post_meta()tälle Gutenbergin objektille.

Jos kuitenkin haluat saada post-meta yksittäiselle viestiobjektille, katso get_post_metavastaava Gutenbergin artikkelista.

Kuvan tietojen saaminen Gutembergistä

Viestiobjektista saat esitellyn median tunnuksen, joka on tallennettu featured_mediaomaisuuteen.

Voit käyttää getMedia( WordPressin Gutenberg-vastinettawp_get_attachment_image) saadaksesi tämän liitteen ominaisuudet.

Gutenbergin postisilmukka

Laajennetaan komentosarjan luomaa lohkoa @wordpress/create-block, josta kirjoitin aiemmin, sisällyttämällä siihen esimerkki WP_Query-silmukan vastineen tekemisestä Gutenbergissä .

Ensin meidän on tuotava select()funktio wp-datasta. Voimme tehdä tämän joko viittaamalla NPM-moduuliin:

import { select } from '@wordpress/data;

Tai käyttämällä wpobjektia:

const { select } = wp.data;

Aiomme pysyä luodussa lohkossa käytetyissä käytännöissä ja käyttää NPM-moduulia ja @wordpress/datamenetelmää.

Tässä on Gutenbergin WP_Query-silmukan vastaavan perustoteutus.

Suositellut kuvat

Huomaa, että suositellut kuvat on asetettava kahdelle viimeiselle viestille, jotta tämä esimerkki toimisi oikein.

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>
        );
    },
} );

Huomaa, että käytetään withSelecttietojen esilataamiseen ennen lohkon latautumista. Saat lisätietoja withSelectistä lukemalla Gutenbergin dokumentaation.

Yllä oleva koodi tulostaa seuraavan (erittäin yksinkertaisen) esimerkin artikkeliluettelosta ja niihin liittyvistä pikkukuvista editorissa:

Esimerkki viestisilmukasta Gutenbergissä.

REST API:n käyttö

Jos haluat saada mukautettuja tietoja REST API:n kautta, tutustu viestiini REST API:n käytöstä WordPress Block Editorin (Gutenberg) kanssa.