Kuinka mukauttaa laajennusta Gutenbergiin: Osa 1 (Block API)

"Minulla on plugin," sanot sinä, "Kuinka teen siitä Gutenbergin-valmis?"


Tarina on suoraviivainen; Gutenberg on WordPressin uusi toimittajakokemus, joka sulautetaan ytimeen seuraavassa suuressa julkaisussa. Paljon laajennuksia, jotka eivät pysy tässä vanhenee. Tämän vuoksi on välttämätöntä mukauttaa laajennuksesi Gutenbergiin ennen kuin on liian myöhäistä.

Kuka vaikuttaa?

Lähes kaikki laajennukset Gutenberg vaikuttaa asiaan, jolla on mitään tekemistä postitoimittajan kanssa. Esimerkiksi, jos laajennuksesi lisää painikkeen TinyMCE-sovellukseen asettaaksesi lyhytkoodin editoriin, huonot uutiset; se on sen loppu.
Muuta laajennustasi Gutenbergiin: Osa 1 (Estä API)

"Pitääkö minun mukauttaa laajennuksiani Gutenbergiin?"

Joten mitä laajennuksia on päivitettävä Gutenbergille? Kaikki laajennukset, jotka toimivat:

  • Muokatut metalaatikot
  • lyhytkoodit
  • TinyMCE-painikkeet
  • tai minkä tahansa muokkausominaisuuden

Vaikka jotkut laajennukset toimivat edelleen Gutenbergin kanssa, kuten esimerkiksi yksinkertainen metaboxia lisäävä laajennus, se ei ole yhtä sujuva kokemus käyttäjillesi.

Jopa lyhytkoodit toimivat kuten ennenkin, mutta se on vain tekstimuotoinen editorissa, kun taas kaikki Gutenbergin lyhytkoodiliitännät seuraavat sen lohkon käyttöliittymää ja ovat käyttäjien helpompaa käyttää.

Joten kyllä, käyttäjät mieluummin laajennuksia, jotka on suunniteltu Gutenberg-kokemusta. Ja ne, jotka jäävät jäljelle, korvataan kilpailijan laajennuksella.

Antaakseni vain idean, tässä on esimerkki siitä, miltä käyttäjän tavallinen vanhan toimittajan kokemus näyttää meidän lisäosalla (A), ja miltä se näyttää Gutenbergiltä (B) – laajennuksella, joka on optimoitu sille.

(B)Feedzy RSS-syötteet - plugin Gutenberg-valmis

Älä pelkää! Olemme täällä auttamassa sinua tekemään laajennuksistasi Gutenberg-valmis. Laajennuksen integroimiseen Gutenbergiin on monia tapoja riippuen pluginisi toimivuudesta, josta aiomme keskustella tässä artikkelissa.

Asiat, jotka kannattaa tietää etukäteenGutenberg on kirjoitettu Reakt-sivulla. Ja Gutenbergin laajennukset on koodattu JavaScriptiin, mikä voi myös olla karkea siirtymä kehittäjille, jotka koodittavat vain PHP: ssä. Vaikka sinun ei tarvitse olla tietoa Reaktista tehdäksesi Gutenbergin laajennuksia, tarvitset JavaScriptin perustiedot. Jos olet aiemmin työskennellyt Reaktin ja JSX: n parissa, se on sinulle samanlainen peruste.

Vaikka siellä ei ole tarpeeksi Gutenbergin viralliset asiakirjat, sen Github-arkistossa on paljon arvokasta tietoa kehittäjille. Jos haluat oppia Gutenbergin kehitystä syvällisesti, sinun on pidettävä silmäsi avoimena kaikelle, mikä tapahtuu Gutenbergin GitHub-arkistossa, koska projekti etenee todella nopeasti ja asiat muuttuvat joka päivä.

Kuinka muokata laajennustasi Gutenbergiin

Gutenbergin sovellusliittymä tarjoaa meille monia tapoja laajentaa editoria, kuten Estä sovellusliittymä, Lyhytkoodisovellusliittymä ja muut. Minkä sovellusliittymän käyttö riippuu siitä, minkä tyyppistä laajennusta me rakennamme.

Jos liitännäinen on yksinkertainen lyhytkoodinen laajennus, Block API -sovelluksella voidaan tehdä kaunis lohko editorille. Mutta jos laajennuksesi käyttää monimutkaisia ​​metalaatikoita, joissa lohko ei riitä, voimme käyttää sivupalkin sovellusliittymää.

Käytämme myös nykyaikaista pinoa JavaScriptin kehitystyökaluja, kuten NodeJS, NPM, webpack ja ESNext. Tarjoamme sinulle esimerkitiedostoja, joten sinun ei tarvitse huolehtia kehitysympäristön määrittämisestä.

Tässä viestissä tarkastelemme kuinka tehdä laajennuksesta Gutenberg-yhteensopiva käyttämällä Block API -sovellusta. Tutkitaan muita menetelmiä (sivupalkin sovellusliittymä, julkaisupaneeli, tilarivi & samanlaiset sovellusliittymät) tarvittaessa osassa toinen.

Löydät kaikki mainitut esimerkit tämä GitHub-arkisto.

Gutenbergin kehitysympäristö

Gutenbergiin kehittäminen edellyttää, että asennat joukon työkaluja, kuten NPM, webpack, Babel ja JSX. Se vie paljon aikaa ja vaivaa, joten olemme laatineet ympäristön sinulle.

Gutenberg Boilerplate on laajennus, jolla on vähän Gutenbergin kehitysasetuksia ja esimerkkejä. Se sisältää yhden lohkon ja sivupalkkiesimerkin. Voit käyttää tätä laajentaaksesi mukautettuun lohkoosi.

Gutenbergin kattilalevy

Voit haarukkaa tai kloonata Gutenbergin kattilalevyvarasto sinun / Wp-content / plugins / ja käytä sitä kehitysympäristössäsi.

Sen jälkeen sinun on asennettava NodeJS koneellesi aloittamiseksi. Siirry Gutenbergin kattilan levyt -kansioon ja suorita asennus npm: ssä

Tästä eteenpäin sinun on tiedettävä kolme komentoa, joita käytät kehitysprosessin aikana:

  • npm install – Asenna projekti riippuvuudet, kun kloonaat projekti.
  • npm run dev – Käännä koodi kehitysprosessin aikana. Sinun on suoritettava tämä kerran, ja se seuraa muutoksia jatkuvasti.
  • npm run build – Käännä koodi optimoitua rakennusta varten, kun kehitysprosessi on valmis.

Estä sovellusliittymä

Lohkot ovat Gutenbergin perustavanlaatuinen elementti, joka on lohkopohjainen toimittaja. Block API antaa sinun tehdä lohkoja Gutenbergille. Voit luoda lohkoja, jotka voivat tuottaa HTML-HTML-koodia, lyhytkoodeja, tai jopa tehdä dynaamisia lohkoja esimerkiksi viimeisimpien viestien näyttämiseksi.

Prosessi perustuu olemassa olevaan laajennukseen

Esimerkissämme hyväksymme Click to Tweet -koodin Gutenbergin lohkoon. Tämä napsauttamalla twiitti -koodin avulla voit luoda twiittiruudun, jossa on teksti, ja painikkeen, jolla voit twiittiä tekstiä. Kuten tämä:

Napsauta Tweet-asettelua

Lyhytkoodimme näyttää noin:

[napsautusweet tweet ="Näytettävä teksti" tweetsent ="Twiittoitava teksti" näppäin ="piipittää" teema ="click-to-titityy"]

Lyhytkoodillamme on neljä parametria:

  • tweet: Sivustollesi ilmestyvä teksti.
  • tweetsent: Teksti, joka menee Twitteriin.
  • painike: Tweet-painikkeen teksti.
  • teema: Valitse joko napsauttamalla twiitti tai napsauta napsauttamalla-twiitti-alt laatikkoteemana.

Gutenbergin laajennusten mukauttaminen Block API: lla

Gutenbergin suhteen on kaksi tapaa toimia, joko joko muokata HTML käyttöliittymään tai käyttää Gutenberg-lohkoamme lyhytkoodin tuottamiseen käyttöliittymään. Tätä artikkelia varten teemme jälkimmäisen.

Kaikki koodi on saatavilla kielellä Hei Gutenberg-laajennusten arkisto GitHubissa. Voit kloonata arkiston nähdäksesi laajennuksen toiminnassa tai muokataksesi koodia.

Enqueque skriptit / tyylit Gutenberg

Ensinnäkin, meidän on vallattava skriptit ja tyylit Gutenbergin toimittajaan käyttämällä enqueue_block_assets:

/ **
* Enqueque käyttöliittymä ja toimittaja JavaScript ja CSS
* /
toiminto hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Enquee Bund Block JS-tiedosto
wp_enqueue_script (
‘Hello-Gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-lohkot’, ‘wp-editori’, ‘wp-komponentit’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Enqueen etu- ja toimittajalohkojen tyylit
wp_enqueue_style (
‘Hello-Gutenberg-block-CSS’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Hook-skriptit toimivat lohkoeditorin koukuksi
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Olemme lisänneet komentosarjaamme neljä riippuvuutta, joita käytämme lohkossamme. Otetaan ensin nämä riippuvuudet:

wp-i18n on Gutenbergin versio kansainvälistymistoiminnoista, kuten __ (). wp-lohkoja käytetään registerBlockType-toimintoon, joka rekisteröi lohkosi. Käytämme wp-editoria ja wp-components-skriptejä lohkon eri komponentteihin.

Nyt kun olemme haastaneet omaisuutesi, voimme alkaa kirjoittaa estoamme /src/block.js tiedosto.

Riippuvuuksien tuominen

Jos käytät Gutenbergin boilerilevyä, sinun block.js tiedostolla tulisi olla peruslohkorakenne, jota voit käyttää Gutenbergin laajennusten luomiseen:

/ **
* Sisäiset lohkokirjastot
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.locks;

/ **
* Rekisteröintilohko
* /
vie oletusarvo registerBlockType (‘gutenberg-boilerplate / block’, {
// Estä otsikko
otsikko: __ (‘Gutenberg Boilerplate’),
// Estä kuvaus
kuvaus: __ (‘Esimerkkilohko.’),
// Estä luokka
luokka: ‘yleinen’,
// Estä kuvake
kuvake: ‘admin-site’,
// Estä avainsanat
avainsanat: [
__ (‘Kattilalevy’),
__( ‘Hei maailma’ ),
__ (‘Esimerkki’),
],
määritteet: {
},
// Muokkausrajapinnan määritteleminen
muokkaa: rekvisiitta => {
palata (

{__ (‘Hello Backend’)}

);
},
// Käyttöliittymän määritteleminen
tallenna: rekvisiitta => {
palata (

{__ (‘Hello Frontend’)}

);
},
});

Voit suorittaa npm run dev aloittaaksesi koodin kokoamisen reaaliajassa.

Ensin tuomme kaikki komponentit ja kirjastot, joita tarvitsemme yläosassa olevaan lohkoon:

/ **
* Estä riippuvuudet
* /

Tuo luokanimet luokkien nimistä;

/ **
* Sisäiset lohkokirjastot
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.locks;

const {
richtext,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
toolbar,
nappi,
tooltip,
} = wp.com-komponentit;

Ensimmäinen tuonti classnames jonka asensimme npm: llä useiden luokkien käyttämiseksi koodissamme, koska JSX ei salli useita luokkia elementeissä.

Opimme muista komponenteista, jotka olemme tuoneet käyttäessämme niitä.

Määritä määritteet

Nyt määrittelemme Gutenberg-lohkollemme neljä ominaisuutta, samoin kuin lyhytkoodimme:

määritteet: {
twiitti: {
tyyppi: ‘merkkijono’,
},
tweetsent: {
tyyppi: ‘merkkijono’,
},
-painike: {
tyyppi: ‘merkkijono’,
oletus: __ (‘Tweet’),
},
teema: {
tyyppi: ‘boolean’,
oletus: väärä,
},
},

Kuten huomaat, kaikki määritteet ovat samat kuin lyhytkoodimme. Kaikilla määritteillä on tyyppiavain, joka kertoo Gutenbergille sen tietotyypin. Voit käyttää merkkijonoa, numeroa, loogista & objekti hyväksytyinä tyyppeinä.

Jotkut määritteistä sisältävät myös oletusarvon. Attribuutteilla voi olla myös muita ominaisuuksia, kuten lähde ja valitsimet, joita emme käytä esimerkissämme, mutta voit Lisätietoja heistä täällä.

Muokkaa käyttöliittymää

Nyt rakennamme lohkon muokattavaa käyttöliittymää, joka on näyttö – käyttäjät näkevät sen muokkaamalla lohkoa Gutenbergissa.

Perusajatuksen saamiseksi voimme ensin kovakoodata lohkomme ja rakentaa siihen korvaavan seuraavan alueen koodissamme:

// Muokkausrajapinnan määritteleminen
muokkaa: rekvisiitta => {
palata (

{__ (‘Hello Backend’)}

);
},

Seuraavalla koodilla:

// Muokkausrajapinnan määritteleminen
muokkaa: rekvisiitta => {
palata [

Kurpitsa ja pingviinit

piipittää

];
},

Tämän pitäisi antaa sinulle käsitys lopputuloksestamme. Se näyttää tältä:

Gutenbergin laajennukset

Lohkon ensimmäinen elementti on tweet-tekstialue. Korvaamme sen muokattavalla tekstikentällä, joka on samanlainen kuin Gutenbergin otsikkolohko.

Käytämme richtext komponentti, jonka olemme aiemmin tuoneet korvaamaan koodatun tekstin.

RichText-komponentillamme on viisi argumenttia. muoto on merkkijono, koska aiomme käyttää lyhyekoodiamme elementtien näyttämiseen käyttöliittymässä. Jos halusimme käyttää valitsinta attribuutissamme, muoto olisi ollut taulukko.

RichTextillä on oletuksena joitain muotoiluvaihtoehtoja, kuten lihavoitu ja kursivoitu, jotka olemme poistaneet käytöstä lähettämällä tyhjän taulukon formatingControls argumentissa.

paikkamerkki on paikkamerkkiteksti, kun kentässä ei ole tekstiä, ja onChange käynnistää onChangeTweet-toiminnon, kun muutostapahtuma tapahtuu.

Lopuksi arvo on kentän arvo, joka otetaan aikaisemmin määrittelemästä tweet-määritteestä.

Kun olemme määritellyt RichText-alueemme, meidän on rakennettava onChangeTweet-toiminto, joka käynnistyy, kun arvo muuttuu tekstikentässä.

// Muokkausrajapinnan määritteleminen
muokkaa: rekvisiitta => {
const onChangeTweet = arvo => {
props.setAttributes ({tweet: value});
};
palata [
…muu koodi

Lähetämme RichText-kentän arvon onChangeTweet-toiminnolle, joka käyttää props.setAttributes toiminto, jolla päivitetään tweet-ominaisuuden arvo.

Näet Gutenbergin voiman nyt, kun käytät estääsi.

RichField Gutenbergissä

Eikö se ole mahtavaa?

Estä tarkastaja

Kun rakennat Gutenbergin liitännäisiä, sinun ei tarvitse keksiä pyörää joka kerta tehdäksesi lisäosien paneeleja. Gutenberg tarjoaa meille yksinkertaistetun tavan sallia lohkojen mukauttaminen ja varmistaa, että jokaisella käyttäjällä on johdonmukainen kokemus sisäänrakennetuista käyttöliittymäkuvioista.

Samoin kuin RichText-komponentti, InspectorControls-komponentti lisää sivupalkin, kun lohko on valittu. Jotain tällaista:

Gutenbergin tarkastajan valvonta

Käytämme TextareaControlia ja TextControlia myös tekstialue- ja tekstinsyöttökentän lisäämiseen tarkastaja-alueellemme.

Lisäämme seuraavan koodin palautusilmoitukseen:

!! props.isSelected && (

),

props.isValitut tarkastukset varmistaaksesi, että tarkastaja ilmestyy vain, kun lohko on valittu.

TextareaControl- ja TextControl-komponenteilla, samoin kuin RichTextillä, on arvo ja onChange-menetelmä.

Meidän on myös muutettava lohkonäytön koodi uusien muutosten huomioon ottamiseksi. Meidän tapauksessamme meidän on lisättävä vain painoteksti lohkoomme, koska Tweet-teksti lisätään linkkiin, joten meidän ei tarvitse näyttää sitä taustaohjelmassamme.

Voit korvata hyperlinkin alkukoodissamme seuraavilla:


{props.attributes.button}

Kuten aiemmin mainittiin, poistamme hyperlinkin koodistamme, koska meidän ei tarvitse näyttää sitä taustaohjelmassa. Tämä tekee lohkomme näyttämään niin:

Gutenberg Klikkaa Tweet Tweet Tarkastaja

Lohkon tarkastaja voi olla tehokas työkalu lohkoosi. Jos laajennuksellasi on lisäasetuksia, jotka ovat liian monimutkaisia ​​editorialueelle, voit laittaa ne Tarkastaja-alueelle.

Lisäämme viimeisen vaihtoehdon lohkoomme JavaScriptin osan loppuun saattamiseksi seuraavassa osassa.

Estä työkalurivi

Estä-työkalupalkki on toinen valmiiksi rakennettu käyttöliittymäkomponentti, jota voimme käyttää lisätäksesi muita vaihtoehtoja estoomme. Se tulee esteen yläpuolelle, kun valitset sen. Esimerkki:

Gutenbergin estämistyökalurivi

Ihannetapauksessa Estä-työkalurivin tulisi sisältää estosi ensisijaiset hallintalaitteet, ja Inspector isännöi toissijaisia ​​säätimiä. Se on kuitenkin kiistanalaista ja riippuu esteestäsi.

Käytämme Estä työkalupalkki-aluetta isännöimään vaihtoehtoista tyyliohjaustamme.

Samanlainen kuin Block Inspector, meidän on lisättävä seuraava koodi palautuslausuntoomme lisätäksesi Block Toolbar blokkiimme:

!! props.isSelected && (

),

Käytämme BlockControls- ja Toolbar-komponentteja lisätäksesi työkalurivin lohkoomme. Samanlainen kuin Block Inspector, props.isSelected varmistaa, että työkalurivimme näkyy vain, kun keskitymme lohkoomme.

Käytämme myös ohjaustyökaluja Tooltip ja Button. Tooltip-komponentti on kääritty Button-komponentin ympärille varmistaaksesi, että työkaluvihje on, kun hiiri ohjaimen päälle antaa sinulle enemmän kontekstia.

Painikekomponentti käyttää luokanimet-moduulia, jonka olemme tuoneet aiemmin artikkelissa. Käytimme luokanimitoimintoa antaaksemme kolme luokkaa ohjauksellemme. Kolmas luokka, on aktiivinen, ilmestyy vasta, kun teemaominaisuuden arvo on totta.

Sen onChange-toiminto vaihtaa teemaominaisuuden true / false. Loppujen lopuksi Dashicon-komponentteja käytetään osoittamaan ohjainta varten tarkoitettu kuvake.

Meidän on myös muutettava lohkokoodiamme, jotta se toimii muutosten kanssa. Meidän on korvattava seuraava rivi:

Kanssa:

Tarkistamme, onko teemaattribuutti tosi vai epätosi, ja osoitamme luokan lohkoomme vastaavasti.

Nyt estosi tulisi näyttää tällaiselta:

Napsauta Tweet-työkalupalkkia

Olemme valmistaneet JavaScriptin puoleisen osan Gutenberg-lohkostamme. Löydät tiedoston koko lähdekoodin tässä.

Nyt viimeistelemme lohkomme käsittelemällä palvelinpuolen lähtöä.

Palvelinpuolen renderointi

Gutenberg antaa sinun käyttää palvelinpuolen renderointia lohkojen näyttämiseen käyttöliittymässä. Tämä palvelinpuolen renderöinti antaa meille mahdollisuuden luoda lohkoja lyhyitä koodeja varten.

Ensin tehdään tallennusmenetelmämme palauttaa nolla korvaamalla se seuraavalla koodilla:

// Käyttöliittymän määritteleminen
Tallentaa() {
// Renderöinti PHP: ssä
palauta nolla;
},

Käytämme register_block_type PHP -toimintoa estääksemme tyyppimme PHP: ssä:

if (function_exists (‘register_block_type’)) {
// Koukupalvelinpuolen renderöinti renderöintiin
register_block_type (
“hei-gutenberg / napsauta-tweet”, [
‘render_callback’ => ‘Hello_gutenberg_block_callback’,
‘määritteet’ => array (
‘tweet’ => array (
‘tyyppi’ => ‘String’,
),
‘tweetsent’ => array (
‘tyyppi’ => ‘String’,
),
‘-Painiketta’ => array (
‘Tyyppi’ => ‘String’,
‘oletus’ => ‘Tweet’,
),
‘teema’ => array (
‘Tyyppi’ => ‘Boolean’,
‘oletus’ => väärä,
),
),
]
);
}

Rekisterimme_blokkityyppitoiminto. Lähetämme sille ensin lohkonimemme yhdessä joukon argumentteja.

Ensimmäinen argumentti on render_callback-toiminto, joka kutsuu hello_gutenberg_block_callback-toimintoomme palvelinpuolen renderointiin.

Render-soittopyynnön jälkeen välitämme attribuutit taulukkona, joka on samanlainen kuin block.js-tiedosto, jota käytämme render-callback-toiminnossa.

Render-soitto-ominaisuutemme näyttää tältä:

toiminto hello_gutenberg_block_callback ($ attr) {
ote ($ attr);
if (isset ($ tweet)) {
$ teema = ($ teema === totta? ‘napsauta tweet-alt’: ‘napsauta tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" näppäin ="% s" teema ="% s"] “;
paluu sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ -painike, $ teema);
}
}

Puramme kaikki määritteet ja palautamme sen sitten lyhyeen koodiin. Se on kaikki, mitä tarvitaan lyhytkoodiliitosten mukauttamiseen Gutenbergiin.

Löydät kaikki tässä artikkelissa käytetyt koodit tästä hei-Gutenberg säilytyspaikka.

Seuraavassa osassa tarkastellaan muita tapoja mukauttaa olemassa olevia laajennuksia Gutenbergiin, mukaan lukien sivupalkin sovellusliittymä.

Jos sinulla on kysyttävää laajennuksen mukauttamisesta Gutenbergiin, kysy heiltä kommentit!

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map