Używanie pól Post Meta do przechowywania atrybutów w edytorze bloków WordPress (Gutenberg)

Kiedy rejestrujesz i przechowujesz atrybuty w edytorze bloków WordPress (Gutenberg), masz możliwość przechowywania ich jako post meta zamiast zwykłych atrybutów bloku.

Korzystając z tej metody, możesz mieć ustawienie w swoim bloku, które może kontrolować coś w szerokim zakresie lub w szablonie.

Ważna uwaga na temat renderowania atrybutów meta postu

Nie można renderować atrybutów meta postu przy użyciu metody zapisu JavaScript. Zespół Gutenberga podjął decyzję, aby temu zapobiec, ponieważ bloki, które renderują pola meta postu, można łatwo złamać, ponieważ meta postu zmienia się w innym miejscu w poście.

W tym przewodniku zamierzamy rozwinąć to, co już zbudowaliśmy w naszym przewodniku po wtyczkach WordPress Gutenberg, a także przewodniku po blokach dynamicznych.

Warunki wstępne

• Zapoznaj się z tworzeniem wtyczek do WordPress Gutenberg
• Poznaj dynamiczne bloki i renderowanie po stronie serwera

Rejestracja Post Meta w PHP

Zanim będziemy mogli użyć meta pola post w JavaScript, musimy upewnić się, że zarejestrowaliśmy je w PHP za pomocą register_metai że show_in_restargument został ustawiony na true.

Kontynuując przewodnik po blokach dynamicznych, otwórz główny plik PHP wtyczki (w tym przypadku wholesome-plugin.php) i dodaj następujący kod na końcu tego pliku po wszystkich innych funkcjach:

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_block_text',
        [
            'auth_callback' => '__return_true',
            'default'       => __( 'Wholesome Plugin – hello from the editor!', 'wholesome-plugin' ),
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Ten kod rejestruje pole meta wywoływane _wholesomecode_wholesome_plugin_block_textdla posttypu postu. Zapewnia również, że interfejs API REST może uzyskać dostęp do tego pola meta z show_in_restwartością ustawioną na true.

Przekazujemy również funkcję __return_truedo auth_callbackargumentu, aby upewnić się, że mamy uprawnienia dostępu do tego parametru. Gdybyśmy chcieli lepszego zabezpieczenia tego parametru, zmienilibyśmy to na funkcję niestandardową, która sprawdza określoną rolę użytkownika.

Rejestrowanie atrybutów Post Meta w JavaScript

Ponownie, kontynuując z poprzedniego przewodnika, otwórz /src/index.jsi zastąp attributesnastępującym:

attributes: {
  blockText: {
    meta: '_wholesomecode_wholesome_plugin_block_text',
    source: 'meta',
  },
},

Zamiast określać typ atrybutu i przypisywać wartość domyślną, zamiast tego definiujemy klucz meta, z którego będzie pochodził atrybut danych, i wskazujemy, że sourceatrybut to meta.

Jak wskazano w ostrzeżeniu na początku tego przewodnika, nie możesz uzyskać dostępu do atrybutów pola meta za pomocą savemetody JavaScript, więc skompiluj wtyczkę npm starti zobacz, jak możemy wyprowadzić meta.

Renderowanie postu Meta

Ponieważ zapisaliśmy nasz atrybut jako post meta, możemy to wypisać w dowolnym miejscu w WordPressie za pomocą get_post_meta(pod warunkiem, że mamy $post_id):

get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );

Kontynuując przewodnik po blokach dynamicznych, zobaczmy, jak możemy uzyskać dostęp do tego atrybutu po stronie serwera w PHP.

Meta nie jest dostępna za pośrednictwem $attributesparametru render_callback, ponieważ atrybuty meta postu nie przekazują swojej wartości do tego parametru, ale możemy uzyskać dostęp do $postobiektu globalnego, aby uzyskać identyfikator postu.

Mając to na uwadze, zaktualizujmy, register_block_typeaby wyprowadzić meta posta:

register_block_type(
  'wholesomecode/wholesome-plugin',
  array(
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      global $post;
      $block_text = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_block_text', true );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',) );

Zauważ, że nie musimy już rejestrować tego attributestutaj, ponieważ uzyskujemy dostęp tylko do pola post meta za pośrednictwem get_post_metafunkcji.

Korzystanie z bloku

Nie jest to najlepszy przypadek użycia tego rodzaju meta, jednak gdy używamy bloku, widzimy, że ponieważ przechowujemy atrybuty jako meta posta, jeśli zaktualizujemy atrybut w jednym bloku, aktualizuje on wszystkie bloki, ponieważ meta postu jest przechowywana w poście, a nie w pojedynczym bloku:

Opublikuj atrybuty meta w akcji

• Spójrz na tworzenie zagnieżdżonych bloków podrzędnych za pomocą InnerBlockskomponentu
• Skorzystaj z post meta w Gutenbergu, tworząc niestandardowe Meta Boxes w Gutenberg
• Zobacz, jak używać ustawień do przechowywania danych w tabeli opcji w Gutenberg