Gutenbergi pistikprogrammi kohandamine: 1. osa (blokeeri API)

"Mul on pistikprogramm," ütleb sulle, "kuidas ma selle Gutenbergi-valmis saan?"


Lugu on sirgjooneline; Gutenberg on WordPressi uus toimetajakogemus, mis ühendatakse tuumiks järgmisel suurel väljaandel. Paljud pistikprogrammid, mis sellega sammu ei pea vananeb. Seetõttu on oluline, et kohandaksite oma pistikprogrammi Gutenbergi jaoks enne, kui on liiga hilja.

Keda mõjutab?

Peaaegu kõik pistikprogrammid Gutenberg mõjutab neid, kellel on postitoimetajaga mingit pistmist. Näiteks kui teie pistikprogramm lisab nupu rakenduses TinyMCE, et seejärel paigutada redaktorisse lühikood, halvad uudised; see saab olema selle lõpp.
Kohandage oma pistikprogrammi Gutenbergi jaoks: 1. osa (blokeeri API)

"Kas ma pean oma pluginaid kohandama Gutenbergi jaoks?"

Milliseid pistikprogramme tuleb Gutenbergi jaoks värskendada? Kõik pistikprogrammid, mis töötavad koos:

  • Kohandatud metaboksid
  • Lühikoodid
  • TinyMCE nupud
  • või üldse redaktorifunktsiooni

Ehkki mõned pluginad töötavad endiselt Gutenbergiga, näiteks pluginaga, mis lisab näiteks lihtsa metaboksi, ei ole see teie kasutajatele sama sujuv kogemus..

Isegi lühikoodid töötavad nagu varem, kuid see on lihtsalt redaktori lihttekstisõlm, samas kui kõik Gutenbergi lühikoodide pluginad järgivad selle blokeeritud kasutajaliidest ja on kasutajatel hõlpsam kasutada.

Nii et jah, kasutajad eelistavad pluginaid, mis on loodud Gutenbergi kogemuse järgi. Ja need, kes jäävad maha, asendatakse konkurendi pistikprogrammiga.

Ainult teile idee saamiseks on siin näide, kuidas näeb välja kasutaja tavaline vanade redigeerijate kogemus meie pistikprogrammiga a), ja mis see siis Gutenbergis välja näeb (b) – selle jaoks optimeeritud pistikprogrammiga.

(b)Feedzy RSS-kanalid - pistikprogramm, mis on Gutenbergi jaoks valmis

Ära karda! Oleme siin, et aidata teil oma pistikprogrammide Gutenbergi valmimisel. Teie pistikprogrammi Gutenbergi integreerimiseks on palju viise, sõltuvalt teie pistikprogrammi toimimisest, mida me selles artiklis arutame.

Eelnevalt teadmist väärt asjadGutenberg on kirjutatud Reaktis. Ja Gutenbergi pistikprogrammid on kodeeritud JavaScripti, mis võib olla ka töötlemata üleminek arendajatele, kes kodeerivad ainult PHP-d. Gutenbergi pistikprogrammide tegemiseks ei pea te teadma Reacti teadmisi, kuid teil on vaja JavaScripti põhiteadmisi. Kui olete varem töötanud Reakti ja JSX-i kallal, siis on see teie jaoks sarnane põhjus.

Kuigi sellest pole piisavalt Gutenbergi ametlik dokumentatsioon, selle Githubi hoidlas on arendajatele palju väärtuslikku teavet. Kui soovite Gutenbergi arengut sügavuti õppida, peate hoidma silmad lahti kõigel, mis Gutenbergi GitHubi hoidlas toimub, sest projekt liigub tõesti kiiresti ja asjad muutuvad iga päev.

Kuidas kohandada oma pistikprogrammi Gutenbergi jaoks

Gutenbergi API pakub redigeerija laiendamiseks palju võimalusi, näiteks Blokeeri API, Shortcode API ja palju muud. Millist API-d kasutada, sõltub sellest, millist pistikprogrammi me ehitame.

Kui teie pistikprogramm on lihtne lühikoodiga pistikprogramm, siis saab blokeerimise API abil redaktorile ilusa ploki teha. Kuid kui teie pistikprogramm kasutab keerukaid metabokse, kus plokist ei piisa, võime kasutada külgriba API-d.

Samuti hakkame kasutama kaasaegseid JavaScripti arendusriistade virna, nagu NodeJS, NPM, webpack ja ESNext. Pakume teile näidisfaile, nii et te ei pea muretsema oma arengukeskkonna seadistamise pärast.

Selles postituses vaatame lähemalt kuidas muuta oma pistikprogramm Gutenbergi ühilduvaks blokeerimise API abil. Tutvume muude meetoditega (külgriba API, avaldamispaneel, olekuriba & sarnased API-d) vajadusel teises osas.

Kõik mainitud näited leiate siit see GitHubi hoidla.

Gutenbergi arengukeskkond

Gutenbergi jaoks arendamiseks peate installima hulga tööriistu, näiteks NPM, webpack, Babel ja JSX. See võtab palju aega ja vaeva, nii et oleme keskkonna teile ette valmistanud.

Gutenbergi katlaplaat on plugin, millel on minimaalne Gutenbergi arendusseadistus ja näited. See sisaldab ühte ploki ja külgriba näidet. Selle abil saate laiendada oma kohandatud plokki.

Gutenbergi katlaplaat

Võite kahvli või kloonida Gutenbergi katlamajade hoidla omale / wp-content / plugins / ja kasutada seda oma arengukeskkonnana.

Pärast seda peate alustamiseks oma arvutisse installima NodeJS. Liikuge kausta Gutenberg Boilerplate ja käivitage npm install

Sellest hetkest alates peate teadma kolme käsku, mida arendusprotsessis kasutate:

  • npm install – projekti kloonimisel projekti sõltuvuste installimine.
  • npm run dev – kompileerige kood arendusprotsessi ajal. Peate selle korra käivitama ja see jälgib muutusi pidevalt.
  • npm run build – kompileerige kood optimeeritud ehitamiseks, kui arendusprotsess on lõppenud.

Blokeeri API

Plokid on Gutenbergi põhielement, see on plokkidel põhinev toimetaja. Blokeeri API võimaldab teil Gutenbergi jaoks plokke teha. Saate teha plokke, mis muudavad HTML-i põhiliseks, lühikoode või isegi dünaamilisi plokke, et kuvada näiteks teie uusimaid postitusi.

Protsess põhineb olemasoleval pistikprogrammil

Meie näites võtame Gutenbergi ploki jaoks kasutusele Click to Tweet lühikoodi. See klõpsamise Tweet lühikood muudab teie tekstiga Tweet-lahtri ja nupu selle teksti säutitamiseks. Nagu nii:

Klõpsake Tweet Tweet paigutus

Meie lühikood näeb välja umbes selline:

[klõpsamisvaates säuts ="Kuvatav tekst" tweetsent ="Tweetida olev tekst" nupp ="Tweet" teema ="kliki säutsu"]

Meie lühikoodil on neli parameetrit:

  • säuts: teie saidil kuvatav tekst.
  • tweetsent: Twitterisse minev tekst.
  • nupp: Tweet nupu tekst.
  • teema: kasti teemaks klõpsamine piiksumiseks või klõpsamine piiksumiseks-alt.

Gutenbergi pistikprogrammide kohandamine Block API-ga

Gutenbergiga saab seda teha kahel viisil: kas HTML-i saab renderdada esiküljele või saame kasutada oma Gutenbergi plokki, et renderdada lühikood esiotsa. Selle artikli jaoks teeme viimast.

Kõik kood on saadaval keeles Tere Gutenbergi pistikprogrammide hoidlast GitHubis. Pistikprogrammi nägemiseks või koodi muutmiseks saate hoidla kloonida.

Valmista Gutenbergi skriptid / stiilid

Esiteks peame oma skriptid ja stiilid valjendama Gutenbergi redigeerijale, kasutades enqueue_block_assets:

/ **
* Enqueque esiotsa ja toimetaja JavaScripti ja CSS
* /
funktsioon hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Valmista komplekteeritud JS-fail
wp_enqueue_script (
‘tere-gutenberg-blokeeri-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-plokid’, ‘wp-toimetaja’, ‘wp-komponendid’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Vali esi- ja toimetajaplokkide stiilid
wp_enqueue_style (
‘tere-gutenbergi-plokk-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Hook-skriptid funktsiooni blokeerija konksu
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Oleme oma skripti lisanud neli sõltuvust, mida me oma plokis kasutame. Tutvume kõigepealt nende sõltuvustega:

wp-i18n on Gutenbergi versioon rahvusvahelistumise funktsioonidest, näiteks __ (). wp-blocks kasutatakse funktsiooni registerBlockType jaoks, mis registreerib teie ploki. Kasutame blokis erinevate komponentide skripte wp-editor ja wp-components.

Nüüd, kui oleme teie vara vallutanud, saame hakata oma blokki kirjutama /src/block.js faili.

Sõltuvuste importimine

Kui kasutate Gutenbergi katlaplaati, siis teie block.js failil peaks olema põhiline plokkistruktuur, mida saate kasutada Gutenbergi pistikprogrammide loomiseks:

/ **
* Sisemised plokkide teegid
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Registreeri plokk
* /
eksporti vaikimisi registerBlockType (‘gutenberg-boilerplate / block’, {
// Blokeeri pealkiri
pealkiri: __ (‘Gutenbergi katlaplaat’),
// Blokeeri kirjeldus
kirjeldus: __ (‘Näiteplokk.’),
// Blokeeri kategooria
kategooria: ‘tavaline’,
// Blokeerimise ikoon
ikoon: ‘administraatori sait’,
// Märksõnade blokeerimine
märksõnad: [
__ (‘katlaplaat’),
__( ‘Tere, Maailm’ ),
__ (‘näide’),
],
atribuudid: {
},
// Redigeerimisliidese määratlemine
muuda: rekvisiidid => {
tagasi (

{__ (‘Tere taustaprogramm’)}

);
},
// Kasutajaliidese määratlemine
salvesta: rekvisiidid => {
tagasi (

{__ (‘Tere Frontend’)}

);
},
});

Meie koodi reaalajas kompileerimise alustamiseks võite käivitada npm run dev.

Esiteks impordime kõik komponendid ja teegid, mida vajame ülaosas oleva bloki jaoks:

/ **
* Blokeeri sõltuvused
* /

klassinimede importimine klassinimedest;

/ **
* Sisemised plokkide teegid
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

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

const {
PanelBody,
TextareaControl,
TextControl,
Dašikon,
Tööriistariba,
Nupp,
Tööriistavihje,
} = wp.com komponendid;

Esimene import klassinimed mille paigaldasime koodis mitmete klasside kasutamiseks npm abil, kuna JSX ei luba elementide puhul mitut klassi.

Saame teada teistest komponentidest, mille oleme nende kasutamisel importinud.

Määrake atribuudid

Nüüd määratleme meie Gutenbergi ploki neli atribuuti, sama nagu meie lühikood:

atribuudid: {
säutsu: {
tüüp: ‘string’,
},
tweetsent: {
tüüp: ‘string’,
},
nupp: {
tüüp: ‘string’,
vaikimisi: __ (‘Tweet’),
},
teema: {
tüüp: ‘boolean’,
vaikimisi: vale,
},
},

Nagu näete, on kõik atribuudid samad, mis meie lühikoodil. Kõigil atribuutidel on tüüpvõti, mis ütleb Gutenbergile selle andmetüübi. Võite kasutada stringi, arvu, loogikat & objekt aktsepteeritud tüüpidena.

Mõni atribuut sisaldab ka vaikeväärtust. Atribuutidel võib olla ka muid atribuute, nagu näiteks allikas ja selektorid, mida me oma näites ei kasuta, kuid võite nende kohta lisateavet leiate siit.

Redigeeri liidest

Nüüd ehitame oma bloki redigeerimisliidese, mis on kuvar – kasutajad näevad seda Gutenbergis oleva bloki redigeerimisel.

Põhiidee saamiseks saame esmalt oma bloki kõvasti koodi kodeerida ja sellele tuginedes asendada oma koodis järgmine ala:

// Redigeerimisliidese määratlemine
muuda: rekvisiidid => {
tagasi (

{__ (‘Tere taustaprogramm’)}

);
},

Järgmise koodiga:

// Redigeerimisliidese määratlemine
muuda: rekvisiidid => {
tagasi [

Kõrvitsad ja pingviinid

Tweet

];
},

See peaks andma teile ettekujutuse meie lõpptulemusest. See näeb välja umbes selline:

Gutenbergi pistikprogrammid

Ploki esimene element on säutsu tekstiala. Asendame selle muudetava tekstiväljaga, mis sarnaneb Gutenbergi pealkirjaplokiga.

Me kasutame RichText komponent, mille varem importisime oma kodeeritud teksti asendamiseks.

Meie RichText komponendil on viis argumenti. vorming on string, kuna me kasutame oma lühinumbrit elementide kuvamiseks kasutajaliideses. Kui me tahaksime oma atribuudis kasutada valijat, oleks vorming olnud massiiv.

RichTextil on vaikimisi mõned vorminguvõimalused, näiteks paks ja kaldkiri, mille oleme keelanud vormindadesControlsi argumendis tühja massiivi..

kohahoidja on kohahoidja tekst, kui väljal pole teksti, ja onChange käivitab muutussündmuse toimingu onChangeTweet.

Lõpuks on väärtus meie välja väärtus, mis võetakse tweeti atribuudist, mille me varem määratlesime.

Kui oleme oma RichText ala määratlenud, peame üles ehitama onChangeTweet funktsiooni, mis käivitub, kui väärtus meie tekstiväljal muutub.

// Redigeerimisliidese määratlemine
muuda: rekvisiidid => {
const onChangeTweet = väärtus => {
props.setAttributes ({säutsu: väärtus});
};
tagasi [
…ülejäänud kood

Nihutame RichText välja väärtuse onChangeTweet funktsioonile, mis kasutab props.setAttributes funktsioon säutsu atribuudi väärtuse värskendamiseks.

Gutenbergi jõudu näete nüüd, kui kasutate oma blokki.

RichField Gutenbergis

Kas pole vinge?

Blokeeri inspektor

Gutenbergi pistikprogrammide ehitamisel ei pea te pluginate lisapaneelide tegemiseks ratast iga kord leiutama. Gutenberg pakub meile lihtsustatud viisi blokeerimise kohandamiseks ja tagab, et igal kasutajal oleks sisseehitatud kasutajaliidese mustritega järjepidev kogemus..

Sarnaselt komponendile RichText lisab komponent InspectorControls külgriba, kui plokk on valitud. Midagi sellist:

Gutenbergi inspektor kontrollib

Kasutame TextareaControli ja TextControli abil ka tekstiala ja tekstisisestusvälja lisamist meie inspektorite alale.

Lisame teie tagastusavaldusele järgmise koodi:

!! rekvisiidid.valitud && (

),

props.isValitud kontrollid veendumaks, et inspektor ilmub ainult siis, kui plokk on valitud.

Sarnaselt RichText-iga on TextareaControlil ja TextControl-il väärtus ja onChange-meetod.

Uute muudatuste tegemiseks peame muutma ka teie blokeeringu kuva koodi. Meie puhul peame oma blokki lisama ainult nuputeksti, kuna lingile lisatakse Tweet tekst, nii et me ei pea seda oma taustprogrammis näitama.

Meie algkoodis saab hüperlingi asendada järgmisega:


{props.attributes.button}

Nagu varem mainitud, eemaldame oma koodist hüperlingi, kuna me ei pea seda taustaprogrammis näitama. See teeb meie bloki välja nii:

Gutenberg klõpsake nuppu Tweet Inspector Controls

Plokiinspektor võib olla teie bloki tugev vahend. Kui teie pistikprogrammil on täpsemad suvandid, mis on toimetaja jaoks liiga keerulised, saate need panna alale Inspektor.

Järgmises jaotises JavaScripti osa lõpetamiseks lisame oma plokki veel ühe viimase valiku.

Blokeeri tööriistariba

Blokeerimise tööriistariba on veel üks eelmonteeritud kasutajaliidese komponent, mida saame kasutada oma blokki lisavõimaluste lisamiseks. Kui valite selle, kuvatakse see teie bloki kohal. Näide:

Gutenbergi blokeerimise tööriistariba

Ideaalis peaks blokeerimise tööriistariba sisaldama teie bloki peamisi juhtelemente, kusjuures inspektor majutab sekundaarseid juhtelemente. See on aga vaieldav ja sõltub teie blokeeringust.

Kasutame alternatiivse stiilikontrolli hostimiseks ala Blokeeri tööriistariba.

Sarnaselt plokiinspektoriga peame blokeerimise tööriistariba lisamiseks meie tagasisaatmisse lisama järgmise koodi:

!! rekvisiidid.valitud && (

),

Tööriistariba lisamiseks meie plokki kasutame BlockControlsi ja tööriistariba komponente. Sarnaselt plokiinspektoriga tagab ka props.isSelected, et meie tööriistariba ilmub ainult siis, kui keskendume oma blokile.

Kontrollimiseks kasutame ka tööriistavihje ja nuppe. Tööriistavihje komponent on ümbritsetud nupukomponendiga, et veenduda, et juhtnupu kohal hõljumisel on tööriistavihje, et anda teile rohkem konteksti.

Nupukomponent kasutab klassinimede moodulit, mille oleme artiklis varem importinud. Kolme klassi juhtimiseks andsime funktsiooni klassinimed. Kolmas klass, aktiivne, ilmub alles siis, kui meie teema atribuudi väärtus on tõene.

Selle funktsioon onChange lülitab teema atribuudi väärtuseks true / false. Lõpuks kasutatakse Dashiconi komponente ikooni kuvamiseks meie juhtimiseks.

Samuti peame muutma oma blokeerimiskoodi, et see muudatustega töötaks. Peame asendama järgmise rea:

Koos:

Kontrollime, kas teema atribuut on tõene või vale, ja määrame vastavalt klassile meie ploki.

Nüüd peaks teie blokk välja nägema umbes selline:

Klõpsake Tweet'i tööriistariba

Oleme lõpetanud Gutenbergi ploki JavaScripti külje. Leiate faili kogu lähtekoodi siin.

Nüüd lõpetame oma blokeerimise serveripoolse väljundi käitlemisega.

Serveripoolne renderdamine

Gutenberg võimaldab teil kasutada serveripõhist renderdamist, et näidata oma blokeeringuid kasutajaliideses. See serveripoolne renderdamine võimaldab meil luua lühikoodide jaoks plokke.

Esiteks muudame nulli tagastamise salvestamismeetodi, asendades selle järgmise koodiga:

// Kasutajaliidese määratlemine
salvesta () {
// Renderdamine PHP-s
tagasi null;
},

Oma blokeeringutüübi registreerimiseks PHP-s kasutame funktsiooni register_block_type PHP:

if (funktsioon_eksisteerib (‘register_block_type’)) {
// Konversiserveri küljel renderdamine renderdamiseks tagasihelistamiseks
register_block_type (
‘tere-gutenberg / klõpsamine-piiksatus’, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘atribuudid’ => massiiv (
‘piiksuma’ => massiiv (
‘tüüp’ => ‘nöör’,
),
‘tweetsent’ => massiiv (
‘tüüp’ => ‘nöör’,
),
‘nupp’ => massiiv (
‘tüüp’ => ‘nöör’,
‘vaikeseade’ => ‘Piiksatus’,
),
‘teema’ => massiiv (
‘tüüp’ => ‘loogiline’,
‘vaikeseade’ => vale,
),
),
]
);
}

Meie register_block_type funktsioon. Esitame sellele oma ploki nime koos hulga argumentidega.

Esimene argument on funktsioon render_callback, mis kutsub meie serveri-poole renderdamise funktsiooni hello_gutenberg_block_callback.

Pärast renderdamise tagasihelistamist edastame atribuudid massiivina, sarnaselt failile block.js, mida kasutame renderdamise tagasihelistamise funktsioonis.

Meie renderdamise tagasihelistamise funktsioon näeb välja selline:

funktsioon hello_gutenberg_block_callback ($ attr) {
väljavõte ($ attr);
if (isset ($ piiksuma)) {
$ teema = ($ teema === tõsi? ‘klõps-piiksu-alt’: ‘klõpsamine-piiksumiseks’);
$ shortcode_string = ‘[clickktotweet tweet ="% s" tweetsent ="% s" nupp ="% s" teema ="% s"] ‘;
tagasta sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ nupp, $ teema);
}
}

Me kaevandame kõik atribuudid ja tagastame selle siis oma lühikese koodi sees. See on kõik, mida vajate, et kohandada oma lühikoodiga pistikprogramme Gutenbergi jaoks.

Siit leiate kogu artiklis kasutatud koodi tere-gutenberg hoidla.

Järgmises osas vaatleme teisi võimalusi olemasolevate Gutenbergi pistikprogrammide, sealhulgas külgriba API kohandamiseks.

Kui teil on küsimusi Gutenbergi pistikprogrammi kohandamise kohta, küsige neid kommentaarides!

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 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