WP_Query WordPress Block Editor (Gutenberg) Äquivalent ist getEntityRecords

Wenn Sie neu im Schreiben von Plugins für den WordPress-Blockeditor (Gutenberg) sind, sind Sie vielleicht ein wenig verwirrt, wie Sie all die Dinge tun, die Sie regelmäßig tun, wie das Abrufen von Beiträgen mit WP_Query.

Sie werden sehr erfreut sein zu wissen, dass Sie mit WP_Query so ziemlich alles tun können, was Sie früher mit WP_Query gemacht haben getEntityRecords.

Zum Beispiel können wir die neuesten Posts abrufen, indem wir den folgenden Code verwenden:

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

Auf die gleiche Weise können Sie auch Custom Post Types (CPT) abfragen, sofern Sie Ihren CPT über die REST-API zugänglich gemacht haben .

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

Wir können sogar einige Argumente übergeben, die uns irgendwie bekannt vorkommen:

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

Die endgültige Liste der Argumente, die Sie an die Funktion übergeben können, finden Sie hier im Gutenberg-Entwicklerhandbuch.

Probieren Sie es in der Konsole aus

Wenn Sie bei einer Site angemeldet sind und das Frontend anzeigen, können Sie so ziemlich jeden Gutenberg-Befehl testen. WordPress speichert sie alle in dem handlichen wpObjekt.

Wenn ich den obigen Befehl in die Konsole auf einer meiner Entwicklungsseiten eintippe, erhalte ich Folgendes:

Verwenden von getEntityRecords zum Abrufen von Beiträgen in der Konsole

Der obige Screenshot zeigt die Konsole, die zwei WordPress-Beitragsobjekte im JavaScript zurückgibt, bei denen es sich um Beitragsentwürfe handelt (gemäß den Parametern, die ich an übergeben habe getEntityRecords).

Das JavaScript-Post-Objekt

Wenn Sie das Post-Objekt in der Konsole weiter untersuchen, sehen Sie, dass zahlreiche Eigenschaften zurückgegeben werden, auf die Sie zugreifen können.

    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 in Gutenberg

Eine Sache, die Sie an dem Post-Objekt, das wir oben untersucht haben, bemerken werden, ist, dass das gesamte Post-Meta innerhalb des Objekts in der metaEigenschaft enthalten ist. Dies erspart uns das Äquivalent von get_post_meta()für dieses Objekt in Gutenberg.

Wenn Sie jedoch das Post-Meta für ein einzelnes Post-Objekt erhalten möchten, lesen Sie das get_post_metaÄquivalent im Gutenberg-Artikel.

Abrufen der Bilddetails in Gutemberg

Mit dem Beitragsobjekt können Sie die vorgestellte Medien-ID abrufen, die in der featured_mediaEigenschaft gespeichert ist.

Sie können getMedia(das WordPress Gutenberg-Äquivalent vonwp_get_attachment_image) verwenden, um die Eigenschaften für diesen Anhang abzurufen.

Die Gutenberg-Post-Schleife

Erweitern wir den vom Skript erstellten Block, über den @wordpress/create-blockich zuvor geschrieben habe, um ein Beispiel dafür, wie man das Äquivalent einer WP_Query-Schleife in Gutenberg erstellt.

Zuerst müssen wir die select()Funktion aus wp-data importieren. Wir können dies tun, indem wir entweder auf das NPM-Modul verweisen:

import { select } from '@wordpress/data;

Oder mit dem wpObjekt:

const { select } = wp.data;

Wir werden uns an die im erstellten Block verwendeten Praktiken halten und das NPM-Modul und die @wordpress/dataMethode verwenden.

Hier ist eine grundlegende Implementierung des Äquivalents einer WP_Query-Schleife in Gutenberg.

Ausgewählte Bilder

Beachten Sie, dass Beitragsbilder für die letzten beiden Posts festgelegt werden müssen, damit dieses Beispiel richtig funktioniert.

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

Beachten Sie die Verwendung von withSelectzum Vorladen der Daten vor den Blockladevorgängen. Sie können mehr über withSelect erfahren, indem Sie die Gutenberg-Dokumentation lesen.

Der obige Code gibt das folgende (sehr einfache) Beispiel einer Artikelliste und der zugehörigen Miniaturansichten im Editor aus:

Beispiel Post Loop in Gutenberg.

Verwenden der REST-API

Wenn Sie benutzerdefinierte Daten über die REST-API erhalten möchten, sehen Sie sich meinen Beitrag zur Verwendung der REST-API mit dem WordPress-Block-Editor (Gutenberg) an .