PHP kasutamine ploki renderdamiseks WordPressi redaktoris (Gutenberg)

WordPressi plokiredaktoris (Gutenberg) ploki loomisel kasutasite tõenäoliselt JavaScripti, et muuta see ploki oma postituse sisuks. Selles juhendis vaatleme PHP kasutamist ploki renderdamiseks, luues nn dünaamilise ploki.

Me hoiame selle selles juhendis lihtsana ja laiendame seda, mida oleme oma WordPressi Gutenbergi pistikprogrammi juhendis juba koostanud. Dünaamilised plokid on aga ülikasulikud keerulisema teabe esitamiseks plokis, näiteks postitsüklis.

Eeldused

• Olge tuttav WordPressi Gutenbergi pistikprogrammide loomisega

Looge dünaamilise ploki jaoks PHP

Kui te pole seda veel teinud, täitke WordPressi Gutenbergi pistikprogrammi juhendi juhised, et teil oleks redigeeritav RichTexti ala.

Lisage oma pistikprogrammi järgmine PHP (selles näites wholesome-plugin.php), asendades koodiploki, mis algab tähega 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',
  ]
);

Atribuudid

Esimene asi, mida märkate, on see, et oleme selle faili atribuudid uuesti määratlenud ja need on samad, mis /src/index.jseelmises juhendis failis määratlesime.

Põhjus, miks me seda tegema peame, on see, et meie väljund pääseks juurde atribuuditüüpidele ja nende vaikesisule.

Renderda tagasihelistamine

Ülaltoodud koodis oleme funktsioonile lisanud ka render_callbackargumendi register_block_type. See käsitleb ploki väljundit, asendades savefunktsiooni /src/index.jsfailis.

Funktsioonil render_callbackon kaks parameetrit. Need on:

• $attributes— see võtab vastu atribuudid, mille me määratlesime nii attributesselle funktsiooni argumendis kui ka /src/index.jsfailis
• $content— see võtab vastu kõik, mis on failis oleva savemeetodi abil /src/save.jssalvestatud. See on mugav, kui renderdame InnerBlocks, mis muidu ei läheks PHP-renderdusmeetodisse.

Selles näites kasutasime funktsiooni jaoks anonüümset funktsiooni render_callback, kuid oleksime võinud selle asemel lihtsalt lisada viite funktsioonile ja määratleda selle mujal.

Pange tähele, et meil ei ole võimalik PHP render_callback rekvisiite juurde pääseda, seega pidime HTML-klassi käsitsi <p>märgendisse lisama, et meie stiilid ikka töötaksid (teoreetiliselt võiksime $contentparameetrit ära kasutada ja natuke teha trikkide leidmise ja asendamise kohta, kui me neid tahtsime, kuid see on midagi teise juhendi jaoks).

Eemaldage JavaScripti salvestamise meetod

Nagu eelnevalt mainitud $content, salvestab funktsiooni parameeter render_callbackJavaScripti meetodi väljundi save, kuid pange tähele, et me ei kasuta seda oma koodis.

Failis /src/index.jsasendage savemeetod järgmisega:

See käsib salvestusmeetodil mitte midagi tagastada.

Eemaldage saveimport

Sel ajal, kui oleme selle juures, eemaldage ka järgmine rida /src/index.js:

import save from './save';

Nüüd saate ka /src/save.jsfaili kustutada.

Plugina kompileerimine

Avage terminal, veenduge, et olete oma pistikprogrammi juurkataloogis ja käivitage järgmine käsk:

Skript kompileeritakse. Kui teil on vigu, peaks terminal teid teavitama, mis need on.

Kasutage dünaamilist plokki

Nüüd peaksite saama ploki lehele sisestada, selle sisu redigeerida ja esiosas vaadata.

Dünaamiline plokk tegevuses

Selles põhinäites näeb plokk välja ja käitub samamoodi nagu oleksite kasutanud JavaScripti renderdusmeetodit.

• Vaadake komponendiga pesastatud alamplokkide loomistInnerBlocks
• Uurige Gutenbergi atribuutide salvestamist post-meta väljadena