Kuidas muuta pistikprogramm Gutenbergiga ühilduvaks: 2. osa (külgriba API)

Kuidas muuta pistikprogramm Gutenbergiga ühilduvaks: 2. osa (külgriba API)

Kuidas muuta pistikprogramm Gutenbergiga ühilduvaks: 2. osa (külgriba API)
СОДЕРЖАНИЕ
02 июня 2020

Kui proovite pistikprogrammi Gutenbergiga ühilduvaks muuta, on teil paar võimalust, mida võiksite / peaksite kasutama – sõltuvalt sellest, mida teie pistikprogramm teeb ja kuidas see kasutajale oma funktsioone edastab.


Selle miniseeria esimeses osas uurisime Gutenbergi Block API-d – just seda vajab Gutenbergi ühilduvuse osas enamus pistikprogramme. Seekord uurime veel ühte Gutenbergi pusle tükki – Gutenbergi külgriba API.

Kiire selgitus veendumaks, et oleme samal lehel:

  • Gutenbergi Block API on väga ulatuslik ja võimaldab teil ehitada peaaegu kõike plokkidena, kuid mõnikord ei piisa sellest.
  • Külgriba API seevastu võimaldab pistikprogrammidel registreerida külgriba, kus nad saavad kasutada oma funktsioone plokkidest kaugemal. Külgriba sarnaneb Block Inspectoriga.

Muutke oma pistikprogramm ühilduvaks Gutenbergi - külgriba API-ga

Näiteks on kasutusel Gutenbergi külgriba API, mida näitas Yoast SEO:

Gutenbergi külgriba API

Kust saate külgriba API-d kasutada??

Töötasime hiljuti oma pistikprogrammi loomise nimel – WP toote ülevaade – Gutenbergi jaoks valmis. WP Product Review kasutas postitusse ülevaatuse andmete lisamiseks metavälju ja me ei saanud mitmesugustest tagurpidi ühilduvusega seotud põhjustel blokeerida. Seetõttu kasutasime külgriba API-d.

WP tooteülevaate integreerime Gutenbergi toimetajasse järgmiselt:WP tooteülevaade Gutenberg

Kui kasutajad näitavad, et postitus on ülevaade külgriba lülitusega, saavad nad külgriba suvanditest konfigureerida kõike oma ülevaatuskasti kohta.

WP tooteülevaade on üks näiteid, kus külgriba API võib olla kasulik. Veel üks suurepärane näide on Viska maha pistikprogramm, mis võimaldab kasutajatel külgriba abil sisestada laos pilte Unsplashist ja Giphyst.

Selles postituses tutvun teile, kuidas rakendada mõnda sarnast ja muuta teie pistikprogramm Gutenbergi ühilduvaks külgriba API kaudu.

Metakastid on Gutenbergi jaoks vaikimisi valmis, kuid mitte päris

Alustame metaboksidest. Võtame pistikprogrammi, mis kasutab lihtsat metaboksi, et toimetaja ekraanil kasutajale mõnda funktsiooni pakkuda.

See võib klassikalises redaktoris välja näha järgmine:

Metaboks klassikalises redigeerijas

Sellise metaboksi loomiseks võite kasutada järgmist koodi – see on saadaval ka kataloogis Tere, Gutenberg hoidla:

/ **
* Registreeri Tere Gutenbert Meta Box
* /
funktsioon hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Tere Gutenbergi metaboksi tagasihelistamine
* /
funktsioon hello_gutenberg_metabox_callback ($ post) {
$ väärtus = saada_post_meta ($ postitus->ID, ‘_hello_gutenberg_field’, tõsi);
?>
<?php _e (‘Mis su nimi on?’, ‘hello-gutenberg’) ?>

<?php
}

/ **
* Salvesta Tere Gutenbergi metaboks
* /
funktsioon hello_gutenberg_save_postdata ($ post_id) {
if (array_key_exists (‘hello_gutenberg_field’, $ _POST))) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

Seega tuleb siin esitada järgmine küsimus:

Kas peame selle Gutenbergi ühilduvaks muutma?

Siinkohal peaksime kaaluma endalt küsimist, mis on Gutenbergiga ühilduv. Näiteks kui kasutate seda just Gutenbergis olevat metaboksi ilma selles muudatusi tegemata, siis see ikkagi töötab.

Kui räägime Gutenbergi ühilduvusest, siis ei räägi me pelgalt Gutenbergi keskkonnas töötavast pluginast, vaid pluginast, mis töötab * nagu Gutenberg *.

"Miks?" – sa küsiksid. Lihtsalt, kasutajad, kes hakkavad WordPressi kasutama pärast seda, kui Gutenberg on vaikimisi redigeerija, leiavad vanad viisid, kuidas olla vastupidine intuitsioonile. Lisaks ootavad nad redaktoris kõige jaoks Gutenbergi-laadsemat stiili.

Kui te ei paku kasutajatele pärismaist tunnet, otsivad nad kindlasti alternatiive, mis Gutenbergiga paremini sobivad.

Lõpuks, laske meil käed mõne koodiga määrida!

Külgriba API kasutamise alustamine

Me alustame Gutenbergis külgriba kodeerimist, et lisada meie metaväli. Võite jätkata Gutenbergi katlaplaat hoidla lähtepunktina.

Gutenbergi jaoks oma metaboksi ettevalmistamine

Enne alustamist peame kõigepealt ütlema Gutenbergile, et me ei kasuta oma metaboksi Gutenbergis. Saate seda teha, edastades argumendi __back_compat_meta_box funktsioonile add_meta_box, näiteks nii:

/ **
* Registreeri Tere Gutenbergi metaboks
* /
funktsioon hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, array (
‘__back_compat_meta_box’ => vale,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Gutenbergi käsiraamatus on rohkem üksikasju selle kohta, kuidas saate PHP-metakarpide Gutenbergi teisaldamisega hakkama saada (siin).

See tagab, et meie vanu PHP metakaste ei kuvata enam Gutenbergis. Nüüd peame oma metavälja ka Gutenbergi jaoks valmis tegema, lisades selle WordPress REST API-le. Metavälja registreerimiseks REST API-s saate lisada järgmise koodi:

/ **
* Registreeri Tere Gutenbergi metavälja puhata API
* /
funktsioon hello_gutenberg_register_meta () {
register_meta (
‘post’, ‘_hello_gutenberg_field’, array (
‘tüüp’ => ‘nöör’,
‘üksik’ => tõsi,
‘show_in_rest’ => tõsi,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

See lisab väljale _hello_gutenberg_field meta objekt REST API-s.

See funktsioon teeb ainult meie väärtuse kuvamise REST API-s. Nüüd peame lisama ka meetodi oma metavälja värskendamiseks REST API abil.

Järgmine kood lisab meie kohandatud marsruudi WordPress REST API-le, mis saab olema / tere-gutenberg / v1 / värskenda-meta /:

/ **
* Registreeri Tere Gutenbergi metaboks puhke API-le
* /
funktsioon hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘tere-gutenberg / v1’, ‘/ update-meta’, massiiv (
‘meetodid’ => ‘POST’,
‘tagasihelistamine’ => ‘hello_gutenberg_update_callback’,
‘args’ => massiiv (
‘id’ => massiiv (
‘sanitize_callback’ => ‘absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Tere Gutenberg REST API tagasihelistamine Gutenbergile
* /
funktsioon hello_gutenberg_update_callback ($ andmed) {
tagasi update_post_meta ($ data [‘id’], $ data [‘võti’], $ data [‘väärtus’]);
}

Seda REST API marsruuti kasutatakse meie metavälja muutmiseks Gutenbergi külgribalt. Lisateavet WordPress REST API ja selle kohta saate registreerige kohandatud marsruute siit.

Samamoodi, kui soovite teada saada, mis on WordPress REST API ja kuidas seda alustada, saate lugeda meie ajaveebi postitust: WordPress REST API: Mis see on ja kuidas seda kasutama hakata.

Külgribaploki lisamine Gutenbergile

Alustame külgriba koodiga alates Gutenbergi katlaplaat:

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

const {Fragment} = wp.element;

const {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const Komponent = () => (

{__ (‘Gutenbergi katlaplaat’)}

{ __( ‘Tere, Maailm!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
ikoon: ‘administraatori sait’,
renderdama: komponent,
});

See lisab Gutenbergi redaktorisse väga lihtsa külgriba. Me võtame selle lähtepunktina ja ehitame sellele oma projekti.

Näitekood on pärit meie Gutenbergi katlaplaadi hoidlast ja selle tulemusel peame asendama kõik "Gutenbergi katlaplaat" koos "Tere, Gutenberg".

Kasutatud komponendid

Kuigi meie külgriba juba impordib paljusid komponente, vajame veel. Koodi ülemise osa saate asendada järgmisega:

/ **
* Sisemised plokkide teegid
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.com komponendid;

const {
Komponent,
Fragment
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Õppige kiiresti tundma kõiki meie imporditud komponente.

  1. Nagu eelmises artiklis arutatud, __ komponenti kasutatakse meie teksti tõlkimiseks.
  2. PluginSidebar komponenti kasutatakse meie külgriba lisamiseks Gutenbergi.
  3. PluginSidebarMoreMenuItem kasutatakse nupu lisamiseks Gutenbergi menüüsse, mis lülitab külgriba nähtavuse.
  4. PanelBody komponenti kasutatakse paneeli lisamiseks meie külgribale.
  5. TextControl kasutatakse meie sisestusvälja jaoks.
  6. Pärast seda importisime Komponent ja Fragment komponendid. Mõlemad on Reakti komponendid, mida kasutame oma külgribal.
    • Fragmendi komponenti kasutatakse laste nimekirja rühmitamiseks ilma DOM-i täiendavaid sõlmi lisamata. Peame oma koodis kasutama fragmenti Fragment, kuna JSX ei võimalda meil olla rohkem kui üks vanesõlm.
  7. koosVali on kõrgema järgu komponent. Kõrgema järgu komponentide õppimiseks soovitame teil lugeda see dokumentatsioon.
  8. Ja lõpuks, me impordime registerPlugin, mis sarnaneb eelmises artiklis kasutatud registerBlockType’iga. Blokeeringu registreerimise asemel registreerib registerPlugin teie pistikprogrammi.

Juhtelementide lisamine

Siiani on meie külgriba vaid komponendi funktsioon, kuid kuna me kasutame Reacti elutsüklimeetodeid, muudame selle Reaxi komponendiks, näiteks nii:

klass Hello_Gutenberg laiendab komponenti {
renderdama () {
tagasi (

{__ (‘Tere Gutenberg’)}

{ __( ‘Tere, Maailm!’ ) }

)
}
}

registerPlugin (‘tere-gutenberg’, {
ikoon: ‘administraatori sait’,
renderdamine: Tere_Gutenberg,
});

See peaks panema teie külgriba töötama lihtsa tekstiga.

Nüüd lisame meie välja külgribale. See peaks meie komponendi välja nägema järgmine:

klass Hello_Gutenberg laiendab komponenti {
renderdama () {
tagasi (

{__ (‘Tere Gutenberg’)}

)
}
}

Esiteks oleme määratlenud lähteseisundi, mis on põhimõtteliselt meie metavälja võti ja väärtus. Pärast seda kasutame praeguse postituse andmete hankimiseks apiFetchi.

Andme praeguse postituse ID-ga üle muutujaga $ {this.props.postId}. Jõuame selle juurde hiljem tagasi.

Kui andmed on toodud, värskendame oma olekut REST API väärtusega.

Lähme tagasi postId muutuja juurde. Me ei tea praegu oma praeguse postituse ID-d, seetõttu kasutame seda kõrgema järgu komponenti SelectSelect abil, näiteks:

const HOC = withSelect ((valige) => {
const {getCurrentPostId} = vali (‘tuum / toimetaja’);
tagastama {
postId: getCurrentPostId (),
};
}) (Tere_Gutenberg);

registerPlugin (‘tere-gutenberg’, {
ikoon: ‘administraatori sait’,
renderdama: HOC,
});

See edastab meie praeguse postituse ID-d kui postId muutuja. Nüüd saate käitada vanemat postitust ja meie Gutenbergi külgriba kuvab teie metavälja väärtuse.

Värskendage metaväärtust

Nüüd peame lubama oma külgribal värskendada ka metaväärtust. Sarnaselt üksikasjade toomisega kasutame ka wp.apiRequest utiliit.

Iga kord, kui meie oleku väärtus muutub, värskendame seda REST API-ga. Selleks peame kõigepealt lisama oma TextControli onChange’i sündmuse, näiteks järgmiselt:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector