Używanie PHP do renderowania bloku w edytorze WordPress (Gutenberg)

Podczas tworzenia bloku w edytorze bloków WordPress (Gutenberg) prawdopodobnie używałeś JavaScript do renderowania bloku w treści swojego posta. W tym przewodniku przyjrzymy się wykorzystaniu PHP do renderowania bloku, tworząc tak zwany „blok dynamiczny".

Zamierzamy zachować prostotę w tym przewodniku i rozszerzymy to, co już zbudowaliśmy w naszym przewodniku po wtyczkach WordPress Gutenberg. Jednak bloki dynamiczne są bardzo przydatne do prezentowania bardziej złożonych informacji w bloku, takich jak pętla post.

Warunki wstępne

• Zapoznaj się z tworzeniem wtyczek do WordPress Gutenberg

Utwórz PHP dla bloku dynamicznego

Jeśli jeszcze tego nie zrobiłeś, wykonaj czynności opisane w przewodniku po wtyczkach WordPress Gutenberg, aby mieć edytowalny obszar RichText.

Dodaj następujący kod PHP do swojej wtyczki (w tym przykładzie wholesome-plugin.php), zastępując blok kodu zaczynający się od register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Atrybuty

Pierwszą rzeczą, którą zauważysz, jest to, że przedefiniowaliśmy atrybuty w tym pliku i są one takie same, jak te, które zdefiniowaliśmy w /src/index.jspliku w naszym poprzednim przewodniku.

Powodem, dla którego musimy to zrobić, jest to, aby nasze dane wyjściowe mogły uzyskać dostęp do typów atrybutów i ich domyślnej zawartości.

Renderuj wywołanie zwrotne

W powyższym kodzie dodaliśmy również argument render_callbackdo register_block_typefunkcji. Obsługuje wyjście bloku, zastępując savefunkcję w /src/index.jspliku.

Funkcja render_callbackprzyjmuje dwa parametry. To są:

• $attributes— otrzymuje atrybuty, które zdefiniowaliśmy zarówno w attributesargumencie tej funkcji, jak i w /src/index.jspliku
• $content— otrzymuje wszystko, co zostało zapisane za pomocą savemetody w /src/save.jspliku. Jest to przydatne, jeśli renderujemy InnerBlocks, które w przeciwnym razie nie zostałyby przekazane do metody renderowania PHP.

W tym przykładzie użyliśmy funkcji anonimowej dla render_callback, ale moglibyśmy po prostu przekazać tutaj odwołanie do funkcji i zdefiniować to w innym miejscu.

Zauważ, że nie mamy możliwości dostępu do właściwości w PHP render_callback, więc musieliśmy ręcznie dodać klasę HTML do <p>tagu, aby nasze style nadal działały (teoretycznie moglibyśmy wykorzystać $contentparametr i trochę popracować znajdowania i zastępowania sztuczek, jeśli chcieliśmy, ale to coś dla innego przewodnika).

Usuń metodę zapisu JavaScript

Jak wcześniej wspomniano, $contentparametr render_callbackfunkcji przechowuje dane wyjściowe savemetody JavaScript, ale zauważ, że nie używamy tego w naszym kodzie.

W pliku /src/index.jszastąp savemetodę następującą:

To mówi metodzie save, aby nic nie zwracała.

Usuń saveimport

Skoro już przy tym jesteśmy, usuń również następującą linię z /src/index.js:

import save from './save';

Możesz teraz również usunąć /src/save.jsplik.

Kompilacja wtyczki

Otwórz terminal, upewnij się, że jesteś w katalogu głównym swojej wtyczki i uruchom następujące polecenie:

Skrypt się skompiluje. Jeśli masz jakieś błędy, terminal powinien cię poinformować o tym, czym one są.

Użyj bloku dynamicznego

Powinieneś teraz być w stanie wstawić blok na stronę, edytować jego zawartość i wyświetlić go na interfejsie.

Dynamiczny blok w akcji

W tym podstawowym przykładzie blok będzie wyglądał i zachowywał się tak samo, jakbyś użył metody renderowania JavaScript.

• Spójrz na tworzenie zagnieżdżonych bloków podrzędnych za pomocą InnerBlockskomponentu
• Poznaj przechowywanie atrybutów Gutenberga jako pól meta post