useEntityProp zum Verändern von Beitrags- oder Seitenattributen verwenden

Der Hook useEntityProp kann verwendet werden, um Attribute von Inhalten wie Seiten und Beiträgen zu verändern. Bisher hatte ich den nur genau so eingesetzt wie in einem Doku-Code-Beispiel, aber vorhin habe ich mir die Funktion etwas genauer angeschaut und hatte einen kleinen 🤯-Moment, als ich verstanden habe, wie der Hook funktioniert.

Meine Ausgangslage von der Dokumentation

In dem Block-Editor-Handbuch gibt es ein Tutorial zur Erstellung eines Blocks, der Metadaten verändert. In diesem Tutorial wird useEntityProp verwendet, um einen Metawert zu aktualisieren, wenn der Inhalt des Textfelds im Block verändert wird. Der dafür wichtige Code aus dem Tutorial sieht leicht abgewandelt so aus:

const [ meta, setMeta ] = useEntityProp( 'postType', 'page', 'meta' ); const metaFieldValue = meta[ 'myguten_meta_block_field' ]; function updateMetaValue( newValue ) { setMeta( { ...meta, myguten_meta_block_field: newValue } ); }
Code-Sprache: JavaScript (javascript)

Mein Stand bis vor ein paar Stunden war: okay, useEntityProp kann genutzt werden, um die Metawerte des aktuellen Inhalts zu holen und liefert auch noch die Möglichkeit mit, das zu aktualisieren. Cool. In dem Beispiel wird in meta ein Array mit den Metawerten der Seite gespeichert, und in setMeta() eine Funktion, die in updateMetaValue() nach Änderung des Textfeldes genutzt wird, um den Metawert myguten_meta_block_field zu aktualisieren.

Was die Funktion noch kann

Aber useEntityProp kann noch mehr, allerdings taucht der Hook in Dokumentations-Material nur in diesem Tutorial auf, also habe ich mich ins Gutenberg-Repo begeben und mir den Code der Funktion angeschaut. Der Funktionskommentar für useEntityProp lautet wie folgt:

»Hook that returns the value and a setter for the specified property of the nearest provided entity of the specified type.«

Funktionskommentar für useEntityProp im Gutenberg-Repo.

Okay, das war – zumindest für mich – erst mal nur so semi-hilfreich. Inzwischen ist es aber klarer: Entity ist in unserem Fall, da wir 'postType' als ersten Parameter und den Inhaltstyp 'page' als zweiten übergeben haben, ein Seiten-Objekt mit den Attributen einer Seite, wie Titel, Slug und Metadaten – so wie es in der REST-API für eine einzelne Seite angezeigt wird. Der dritte Parameter meta ist dann der Schlüssel aus dem Objekt, den wir bearbeiten möchten. Wenn als vierter Parameter keine ID an useEntityProp übergeben wird, dann holt es sich die ID aus dem Kontext, in unserem Fall die des aktuell bearbeiteten Inhalts.

Rückgabewert ist ein Array aus dem aktuellen Wert des Attributs (bei meta ein Array der Metawerte) und eine Funktion, mit der der Wert verändert werden kann. Wenn wir zum Beispiel programmatisch den Titel der gerade angezeigten Seite verändern wollen, können wir in der edit-Funktion eines Gutenberg-Blocks folgenden Code schreiben:

import { useEntityProp } from '@wordpress/core-data'; // […] // The following is part of the edit function const [ title, setTitle ] = useEntityProp( 'postType', 'page', 'title' ); setTitle( 'Test!!!' );
Code-Sprache: JavaScript (javascript)

Das Beispiel ist natürlich etwas sinnlos, da es den Titel der Seite auf »Test!!!« ändert, sobald der Block eingebaut ist. Aber es soll ja nur die Funktionsweise von useEntityProp verdeutlichen. Statt meta haben wir nun title übergeben und bekommen dadurch in title den aktuellen Titel der Seite und mit setTitle() die Funktion, um ihn zu ändern.

Auf gleiche Weise könnte zum Beispiel auch das Beitragsbild und der Slug geändert werden:

const [ feautredMedia, setFeatured ] = useEntityProp( 'postType', 'page', 'featured_media' ); setFeatured( 29 ); const [ slug, setSlug ] = useEntityProp( 'postType', 'page', 'slug' ); setSlug( 'beispiel-slug' );
Code-Sprache: JavaScript (javascript)

Das könnte ich mir zum Beispiel gut als Teil einer Checkliste vor der Veröffentlichung vorstellen, die im Block-Editor angezeigt wird. Ich nutze zwar keine Beitragsbilder, vergesse aber regelmäßig, den Slug eines Beitrags vor Veröffentlichung zu kürzen. In der Checkliste könnte ich mir den aktuellen Slug in einem Textfeld anzeigen lassen und ihn bei Bedarf direkt anpassen, bevor ich den Beitrag veröffentliche.

12 Reaktionen zu »useEntityProp zum Verändern von Beitrags- oder Seitenattributen verwenden«

      1. Ich fuchse mich gerade ein in Gutenberg-Kram. Finde die Dokumentation viel zu knapp und lerne nach und nach, dass die meisten Code-Beispiele schon wieder veraltet sind.

        Ich kann also (vermutich für einfach Dinge) `useEntityProp` statt `useSelect` und `useDispatch` verwenden, ja?

        Bin gespannt, werde ich direkt mal austesten.

        Je kurzer der Code um so weniger fühle ich mich überfordert - woooho.

        Danke fürs Teilen!

        1. Hi Sebastian,

          gerne, freut mich, dass es hilfreich ist 🙂

          »Ich kann also (vermutich für einfach Dinge) `useEntityProp` statt `useSelect` und `useDispatch` verwenden, ja?«

          Ja, genau.

    1. Hi Marc,

      mit veraltet bezieht er sich denke ich hierauf: https://make.wordpress.org/core/2020/03/02/general-block-editor-api-updates/

      Das veraltete ist aber nicht, dass man aus Blöcken Metawerte verändert, sondern dass man als source für ein Block-Attribut (also einen Eintrag in dem attributes-Objekt der block.json) als source den Wert meta (ich glaube so hieß es) angibt. In dem Make-Beitrag ist als neuer Weg ja das mit useEntityProp() genannt, also ich würde das an deiner Stelle einfach nutzen 🙂

      LG
      Florian

  1. Unglaublich gut 👌
    Wusste nicht, dass ich auch andere Daten wie du oben angemerkt hast, bspw. FeaturedMedia, ändern kann. So bin ich in der Lage meinen Block umzuschreiben und muss dabei nicht mehr auf PHP setzen.

    Man lernt nie aus!
    Danke dir 🙏

Reposts

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert