Använda PHP för att rendera ett block i WordPress Editor (Gutenberg)

När du skapar ett block i WordPress Block Editor (Gutenberg) har du sannolikt använt JavaScript för att återge blocket till innehållet i ditt inlägg. I den här guiden kommer vi att titta på hur vi använder PHP för att rendera blocket och skapa det som kallas ett "Dynamiskt block".

Vi kommer att hålla det enkelt i den här guiden och utöka det vi redan har byggt i vår WordPress Gutenberg-pluginguide. Men dynamiska block är mycket användbara för att presentera mer komplex information i ett block, till exempel en postloop.

Förutsättningar

• Var bekant med att skapa plugins för WordPress Gutenberg

Skapa PHP för det dynamiska blocket

Om du inte redan har gjort det, slutför du stegen i WordPress Gutenberg-pluginguiden, så att du har ett redigerbart RichText-område.

Lägg till följande PHP i din plugin (i det här exemplet wholesome-plugin.php), ersätt kodblocket som börjar med 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',
  ]
);

Attribut

Det första du kommer att märka är att vi har omdefinierat attributen i den här filen, och de är desamma som de vi definierade i /src/index.jsfilen i vår tidigare guide.

Anledningen till att vi behöver göra detta är så att vår utdata kan komma åt attributtyperna och deras standardinnehåll.

Gör återuppringning

I koden ovan har vi även lagt till argumentet render_callbacktill register_block_typefunktionen. Detta hanterar utdata från blocket och ersätter savefunktionen i /src/index.jsfilen.

Funktionen render_callbacktar två parametrar. Dessa är:

• $attributes— detta tar emot attributen vi definierade i både attributesargumentet för denna funktion och de i /src/index.jsfilen
• $content— denna tar emot allt som har sparats via savemetoden i /src/save.jsfilen. Detta är praktiskt om vi renderar InnerBlocks, som annars inte skulle överföras till PHP-renderingsmetoden.

I det här exemplet har vi använt en anonym funktion för render_callback, men vi kunde ganska enkelt ha skickat in en referens till en funktion här istället och definierat denna på annat håll.

Observera att vi inte har möjlighet att komma åt rekvisita i PHP render_callback, så vi har varit tvungna att manuellt lägga till HTML-klassen i <p>taggen så att våra stilar fortfarande fungerar (i teorin skulle vi kunna dra nytta av $contentparametern och göra lite hitta och ersätta knep om vi ville ha dem, men det är något för en annan guide).

Ta bort JavaScript-sparametoden

Som tidigare nämnts lagrar $contentparametern för render_callbackfunktionen utdata från JavaScript- savemetoden, men observera att vi inte använder detta i vår kod.

I filen /src/index.jsersätt savemetoden med följande:

Detta säger åt sparmetoden att inte returnera något.

Ta bort saveimporten

Medan vi håller på, ta också bort följande rad från /src/index.js:

import save from './save';

Du kan nu också ta bort /src/save.jsfilen.

Kompilera plugin

Öppna terminalen, se till att du är i rotkatalogen för ditt plugin och kör följande kommando:

Skriptet kommer att kompileras. Om du har några fel bör terminalen göra dig medveten om vad de är.

Använd det dynamiska blocket

Du bör nu kunna infoga blocket på en sida, redigera dess innehåll och se det i användargränssnittet.

Det dynamiska blocket i aktion

I det här grundläggande exemplet kommer blocket att se ut och bete sig på samma sätt som om du hade använt en JavaScript-renderingsmetod.

• Ta en titt på att skapa kapslade underordnade block med InnerBlockskomponenten
• Utforska hur du lagrar Gutenberg-attribut som post-metafält