WP_Query WordPress Block Editor (Gutenberg) Motsvarande är getEntityRecords

Om du är ny på att skriva plugins för WordPress Block Editor (Gutenberg), kan du vara lite förvirrad över hur du gör allt du gjorde regelbundet, som att ta tag i inlägg med WP_Query.

Du kommer att bli mycket glad att veta att du i stort sett fortfarande kan göra allt du brukade göra med WP_Query genom att använda getEntityRecords.

Till exempel kan vi ta tag i de senaste inläggen genom att använda följande kodbit:

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

Du kan också fråga Custom Post Types (CPT) på samma sätt, så länge du har gjort din CPT tillgänglig via REST API.

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

Vi kan till och med skicka in några argument som kanske ser lite bekanta ut:

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

Du kan hitta den definitiva listan över de argument du kan överföra till funktionen här i Gutenbergs utvecklarguide.

Prova det i konsolen

Om du är inloggad på en webbplats och du tittar på gränssnittet kan du testa i stort sett vilket Gutenberg-kommando som helst. WordPress lagrar dem alla i det praktiska wpobjektet.

Om jag skriver kommandot ovan i konsolen på en av mina utvecklingswebbplatser får jag följande:

Använda getEntityRecords för att fånga inlägg i konsolen

Skärmdumpen ovan visar att konsolen returnerar två WordPress-postobjekt i JavaScript, som är utkastinlägg (enligt parametrarna jag skickade in getEntityRecords).

JavaScript Post Object

Om du utforskar postobjektet längre fram i konsolen kan du se att det finns massor av egenskaper som returneras för dig att komma åt.

    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"

Post Meta i Gutenberg

En sak du kommer att märka från postobjektet vi utforskade ovan är att all postmeta finns i objektet i metaegenskapen. Detta sparar oss att göra motsvarande get_post_meta()för detta objekt i Gutenberg.

Men om du vill få inläggets meta för ett enda inläggsobjekt, se get_post_metamotsvarande i Gutenberg-artikeln.

Få bilddetaljerna i Gutemberg

Postobjektet kan du få utvalda media-ID, som lagras i featured_mediafastigheten.

Du kan använda getMedia( WordPress Gutenberg-motsvarigheten tillwp_get_attachment_image) för att få egenskaperna för denna bilaga.

Gutenberg Post Loop

Låt oss utöka blocket som skapats av @wordpress/create-blockskriptet som jag skrev om tidigare för att inkludera ett exempel på hur man gör motsvarigheten till en WP_Query-loop i Gutenberg.

Först måste vi importera select()funktionen från wp-data. Vi kan göra detta genom att antingen referera till NPM-modulen:

import { select } from '@wordpress/data;

Eller genom att använda wpobjektet:

const { select } = wp.data;

Vi kommer att hålla fast vid den praxis som används i det skapade blocket och använda NPM-modulen och använda @wordpress/datametoden.

Här är en grundläggande implementering av motsvarigheten till en WP_Query-loop i Gutenberg.

Utvalda bilder

Observera att utvalda bilder måste ställas in för att de senaste två inläggen ska fungera korrekt.

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

Notera användningen av withSelectför att ladda data innan blocket laddas. Du kan ta reda på mer om withSelect genom att läsa Gutenberg-dokumentationen.

Ovanstående kod matar ut följande (mycket grundläggande) exempel på en artikellista och deras associerade miniatyrer i redigeraren:

Exempel Post Loop i Gutenberg.

Använder REST API

Om du vill få anpassad data via REST API, kolla in mitt inlägg om att använda REST API med WordPress Block Editor (Gutenberg).