PHP:n käyttäminen lohkon renderöimiseen WordPress-editorissa (Gutenberg)

Kun luot lohkon WordPressin lohkoeditorissa (Gutenberg), olet todennäköisesti käyttänyt JavaScriptiä lohkon muuntamiseen viestisi sisältöön. Tässä oppaassa aiomme tarkastella PHP:n käyttöä lohkon hahmontamiseen luoden niin sanotun "dynaamisen lohkon".

Aiomme pitää asian yksinkertaisena tässä oppaassa ja laajentaa sitä, mitä olemme jo rakentaneet WordPress Gutenberg -laajennusoppaassamme. Dynaamiset lohkot ovat kuitenkin erittäin hyödyllisiä monimutkaisempien tietojen esittämiseen lohkossa, kuten jälkisilmukassa.

Edellytykset

• Tutustu WordPress Gutenbergin lisäosien luomiseen

Luo PHP dynaamiselle lohkolle

Jos et ole vielä tehnyt niin, suorita WordPress Gutenberg -laajennusoppaan vaiheet, jotta sinulla on muokattava RichText-alue.

Lisää seuraava PHP laajennukseen (tässä esimerkissä wholesome-plugin.php) korvaamalla koodilohko, joka alkaa 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',
  ]
);

Attribuutit

Ensimmäinen asia, jonka huomaat, on, että olemme määrittäneet tämän tiedoston attribuutit uudelleen, ja ne ovat samat kuin ne, jotka määritimme /src/index.jstiedostossa edellisessä oppaassamme.

Syy, miksi meidän on tehtävä tämä, on, että tulostemme voi käyttää määritetyyppejä ja niiden oletussisältöä.

Renderöi takaisinsoitto

Yllä olevassa koodissa olemme lisänneet funktioon myös render_callbackargumentin register_block_type. Tämä käsittelee lohkon lähdön ja korvaa tiedoston savefunktion /src/index.js.

Toiminto render_callbackottaa kaksi parametria. Nämä ovat:

• $attributes— tämä vastaanottaa määritteet, jotka attributesmääritimme sekä tämän funktion argumentissa että /src/index.jstiedostossa
• $content— tämä vastaanottaa kaiken, mikä on tallennettu tiedoston savemenetelmällä. /src/save.jsTämä on kätevää, jos renderöimme InnerBlocks, jota ei muuten siirretä PHP-renderöintimenetelmään.

Tässä esimerkissä olemme käyttäneet anonyymiä funktiota funktiolle render_callback, mutta olisimme voineet helposti välittää viittauksen johonkin funktioon ja määrittää sen muualle.

Huomaa, että meillä ei ole mahdollisuutta käyttää PHP render_callbackin rekvisiitta, joten meidän on täytynyt lisätä manuaalisesti HTML-luokka tagiin, jotta tyylimme <p>toimivat edelleen (teoriassa voisimme hyödyntää $contentparametria ja tehdä vähän löytää ja korvata temppuja, jos halusimme niitä, mutta se on jotain toista ohjetta varten).

Poista JavaScript-tallennusmenetelmä

Kuten aiemmin mainittiin $content, funktion parametri render_callbacktallentaa JavaScript- savemenetelmän tulosteen, mutta huomaa, että emme käytä tätä koodissamme.

/src/index.jsKorvaa tiedostossa savemenetelmä seuraavalla:

Tämä käskee tallennustapaa palauttamaan mitään.

Poista savetuonti

Samalla kun olemme siinä, poista myös seuraava rivi kohteesta /src/index.js:

import save from './save';

Voit nyt myös poistaa /src/save.jstiedoston.

Pluginin kääntäminen

Avaa pääte, varmista, että olet laajennuksen juurihakemistossa ja suorita seuraava komento:

Käsikirjoitus kootaan. Jos sinulla on virheitä, päätteen pitäisi ilmoittaa sinulle, mitä ne ovat.

Käytä dynaamista lohkoa

Sinun pitäisi nyt pystyä lisäämään lohko sivulle, muokata sen sisältöä ja tarkastella sitä etuosassa.

Dynaaminen lohko toiminnassa

Tässä perusesimerkissä lohko näyttää ja käyttäytyy samalla tavalla kuin jos olisit käyttänyt JavaScript-renderöintimenetelmää.

• Tutustu sisäkkäisten alilohkojen luomiseen InnerBlockskomponentin avulla
• Tutustu Gutenberg-attribuuttien tallentamiseen post-metakenttinä