Kaip papildinį suderinti su „Gutenberg“: 2 dalis (šoninės juostos API)

Jei bandote padaryti savo papildinį suderinamą su „Gutenberg“, turite keletą būdų, kuriuos galite pasirinkti / turėtumėte pasirinkti – atsižvelgiant į tai, ką jūsų įskiepis daro ir kaip jis vartotojui teikia savo funkcijas.


Pirmoje šios mini serijos dalyje mes ištyrėme „Gutenberg Block API“ – štai ko labiausiai reikia papildiniams, kalbant apie „Gutenberg“ suderinamumą. Šį kartą panagrinėsime dar vieną Gutenbergo dėlionės kūrinį – „Gutenberg“ šoninės juostos API.

Trumpas paaiškinimas, kad įsitikintume, jog esame tame pačiame puslapyje:

  • „Gutenberg“ blokuojama API yra labai plati ir leidžia kurti beveik viską kaip blokus, tačiau kartais to nepakanka.
  • Kita vertus, šoninės juostos API leidžia įskiepiams užregistruoti šoninę juostą, kur jie gali naudotis savo funkcionalumu už blokų ribų. Šoninė juosta yra panaši į „Block Inspector“.

Padarykite savo papildinį suderinamą su „Gutenberg“ - šoninės juostos API

Pavyzdžiui, naudojama „Gutenberg Sidebar“ API, kaip parodė „Yoast SEO“:

„Gutenberg Sidebar“ API

Kur galite naudoti šoninės juostos API?

Neseniai dirbome kurdami papildinį – WP produkto apžvalga – pasiruošęs Gutenbergas. „WP Product Review“ naudojo meta laukus, kad prie įrašo pridėtų apžvalgos duomenis, ir mes negalėjome paversti bloku dėl įvairių atgalinio suderinamumo priežasčių. Taigi mes naudojome šoninės juostos API.

Štai kaip mes įtraukėme „WP Product Review“ į „Gutenberg“ redaktorių:WP produkto apžvalga „Gutenberg“

Kai vartotojai nurodo, kad įrašas yra peržiūra su šoninės juostos perjungimu, jie galės sukonfigūruoti viską apie savo apžvalgos lauką iš šoninės juostos parinkčių.

„WP Product Review“ yra vienas iš pavyzdžių, kai „Sidebar“ API gali būti naudinga. Kitas puikus pavyzdys yra Mesk papildinys, kuris leidžia vartotojams įterpti akcijų vaizdus iš „Unsplash“ ir „Giphy“ naudojant šoninę juostą.

Šiame įraše aptarsiu, kaip įgyvendinti kažką panašaus ir padaryti jūsų papildinį „Gutenberg“ suderinamą per šoninės juostos API..

Meta dėžutės yra tarsi paruoštos „Gutenberg“ pagal nutylėjimą, bet ne visai

Pradėkime nuo meta langelių. Paimkime papildinį, kuris naudoja paprastą meta laukelį, norėdamas vartotojui suteikti kai kurias funkcijas redaktoriaus ekrane.

Klasikiniame redaktoriuje tai gali atrodyti taip:

Meta Box klasikiniame redaktoriuje

Norėdami sukurti tokį meta laukelį, galite naudoti šį kodą – jis taip pat galimas Sveiki, Gutenberg saugykla:

/ **
* Užsiregistruokite „Hello Gutenbert Meta Box“
* /
funkcija 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’);

/ **
* Sveiki, „Gutenberg Metabox“ atgalinis ryšys
* /
funkcija hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, tiesa);
?>
<?php _e (‘Koks tavo vardas?’, ‘hello-gutenberg’) ?>

<?php
}

/ **
* Išsaugokite „Hello Gutenberg Metabox“
* /
funkcija 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 (‘įrašyti_postą’, ‘labas_gutenberg_save_postdata’);

Taigi čia reikia užduoti klausimą:

Ar pirmiausia turime tai suderinti su „Gutenberg“??

Dabar turėtume apsvarstyti klausimą, kas yra suderinamas su Gutenbergu. Pvz., Jei naudosite šią meta dėžutę „Gutenberg“ nepadarę jokių pakeitimų, ji vis tiek veiks.

Tačiau kai mes kalbame apie „Gutenberg“ suderinamumą, mes kalbame ne tik apie papildinį, veikiantį „Gutenberg“ aplinkoje, bet ir apie papildinį, veikiantį * kaip „Gutenberg“ *..

"Kodėl?" – tu paprašytum. Paprasčiau, vartotojai, kurie pradės naudoti „WordPress“ po to, kai Gutenbergas yra numatytasis redaktorius, suras senus būdus, kaip prieštaringus. Be to, jie tikėsis labiau į Genbergo stilių primenančio stiliaus viskam.

Jei nesuteiksite vartotojams prigimties jausmo, jie tikrai ieškos alternatyvų, kurios geriau derėtų su „Gutenberg“.

Galiausiai, nešvarinkime rankas su kokiu nors kodu!

Darbo su „Sidebar“ API pradžia

Mes pradėsime koduoti šoninę juostą Gutenberge, kad būtų įtrauktas mūsų meta laukas. Galite tęsti naudojimą Gutenbergo katilinė kapinynas kaip atskaitos taškas.

Pasiruoškite savo meta dėžutę Gutenbergui

Prieš pradėdami, pirmiausia turime pasakyti Gutenberg, kad mes nenaudosime savo meta dėžutės Gutenberge. Tai galite padaryti perėję argumentą __back_compat_meta_box į funkciją add_meta_box, pvz .:

/ **
* Užsiregistruokite „Hello Gutenberg Metabox“
* /
funkcija hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, masyvas (
‘__back_compat_meta_box’ => melagingas,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

„Gutenberg“ vadove yra daugiau informacijos apie tai, kaip galite perkelti PHP meta dėžutes į Gutenberg (čia).

Tai užtikrins, kad senosios PHP meta dėžutės nebebus rodomos Gutenberge. Dabar mes taip pat turime paruošti savo „meta“ lauką „Gutenberg“, pridėdami jį prie „WordPress REST“ API. Norėdami įregistruoti meta lauką REST API, galite pridėti šį kodą:

/ **
* Užsiregistruokite „Hello Gutenberg Meta Field to Rest“ API
* /
funkcija hello_gutenberg_register_meta () {
registracijos_meta (
‘post’, ‘_hello_gutenberg_field’, masyvas (
‘tipas’ => ‘styga’,
‘vienas’ => tiesa,
‘show_in_rest’ => tiesa,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Tai pridės _hello_gutenberg_field prie meta objektas REST API.

Ši funkcija tik atliks savo vertę REST API. Dabar mes taip pat turime pridėti metodą, kaip atnaujinti savo meta lauką, naudodami REST API.

Šis kodas pridės mūsų pasirinktinį maršrutą į „WordPress REST API“, koks bus / labas-gutenberg / v1 / atnaujinti-meta /:

/ **
* Užsiregistruokite „Hello Gutenberg Metabox to Rest“ API
* /
funkcija hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, masyvas (
‘metodai’ => „POST“,
‘atgalinis’ => „hello_gutenberg_update_callback“,
‘args’ => masyvas (
‘id’ => masyvas (
‘sanitize_callback’ => ‘absentas’,
),
),
)
);
}
add_action (‘poilsio_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Sveiki, „Gutenberg REST“ API atšaukimas „Gutenberg“
* /
funkcija hello_gutenberg_update_callback ($ duomenys) {
return update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

Šis REST API maršrutas bus naudojamas modifikuoti mūsų meta lauką iš Gutenbergo šoninės juostos. Galite sužinoti daugiau apie „WordPress REST“ API ir kaip tai padaryti registruokite pasirinktinius maršrutus iš čia.

Panašiai, jei norite sužinoti, kas yra „WordPress REST“ API ir kaip pradėti, galite perskaityti mūsų tinklaraščio įrašą: „WordPress REST“ API: kas tai yra ir kaip pradėti naudotis juo.

Pridedant šoninės juostos bloką prie „Gutenberg“

Pradėkime nuo šoninės juostos kodo nuo Gutenbergo katilinė:

/ **
* Vidinės blokų bibliotekos
* /
const {__} = wp.i18n;

const {Fragment} = wp.elementas;

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

const {registerPlugin} = wp.plugins;

const Komponentas = () => (

{__ (‘Gutenberg katilinė’)}

{ __( ‘Labas pasauli!’ ) }

);

registerPlugin („gutenberg-boilerplate“, {
piktograma: „admin-site“,
atvaizdavimas: komponentas,
});

Tai įterps labai paprastą šoninę juostą į „Gutenberg“ redaktorių. Mes tai laikysime atskaitos tašku ir parengsime savo projektą.

Kodo pavyzdys yra iš mūsų „Gutenberg Boilerplate“ saugyklos, todėl turime pakeisti visus "Gutenbergo katilinė" su "Sveiki, Gutenberg".

Naudoti komponentai

Nors mūsų šoninė juosta jau importuoja daugybę komponentų, mums reikės daugiau. Viršutinę kodo dalį galite pakeisti taip:

/ **
* Vidinės blokų bibliotekos
* /

const {__} = wp.i18n;

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

const {
„PanelBody“,
„TextControl“
} = wp.com komponentai;

const {
Komponentas,
Fragmentas
} = wp.elementas;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Greitai sužinokime apie visus komponentus, kuriuos importavome.

  1. Kaip aptarta ankstesniame straipsnyje, __ komponentas naudojamas norint mūsų tekstą išversti.
  2. „PluginSidebar“ komponentas naudojamas norint pridėti mūsų šoninę juostą prie „Gutenberg“.
  3. „PluginSidebarMoreMenuItem“ naudojamas norint pridėti mygtuką prie „Gutenberg“ meniu, kuris perjungia šoninės juostos matomumą.
  4. „PanelBody“ komponentas naudojamas norint pridėti skydelį prie mūsų šoninės juostos.
  5. „TextControl“ yra naudojamas mūsų įvesties laukui.
  6. Po to mes importavome Komponentas ir Fragmentas komponentai. Jie abu yra „React“ komponentai, kuriuos naudojame savo šoninėje juostoje.
    • „Fragment“ komponentas yra naudojamas vaikų sąrašų grupavimui, nepridedant papildomų mazgų prie DOM. Savo kode turime naudoti komponentą „Fragment“, nes „JSX“ neleidžia turėti daugiau nei vieno pirminio mazgo.
  7. suPasirinkti yra aukštesnės eilės komponentas. Norėdami sužinoti, kas yra aukštesnės eilės komponentai, rekomenduoju perskaityti ši dokumentacija.
  8. Galiausiai mes importuojame registerPlugin, kuris yra panašus į registerBlockType, kurį naudojome ankstesniame straipsnyje. Užuot registravę bloką, registerPlugin užregistruoja jūsų papildinį.

Valdymo elementų pridėjimas

Kol kas mūsų šoninė juosta yra tik komponento funkcija, tačiau kadangi mes naudosime „React“ gyvavimo ciklo metodus, paversime jį „React“ komponentu, pavyzdžiui:

klasė Hello_Gutenberg išplečia komponentą {
pateikti () {
grįžti (

{__ (‘Sveiki, Gutenberg’)}

{ __( ‘Labas pasauli!’ ) }

)
}
}

registerPlugin („hello-gutenberg“, {
piktograma: „admin-site“,
pateikimas: Sveiki_Gutenbergas,
});

Tai turėtų priversti jūsų šoninę juostą dirbti su paprastu tekstu.

Dabar pridėkime mūsų lauką prie šoninės juostos. Tai turėtų padaryti mūsų komponentą tokį:

klasė Hello_Gutenberg išplečia komponentą {
pateikti () {
grįžti (

{__ (‘Sveiki, Gutenberg’)}

)
}
}

Pirmiausia mes apibrėžėme pradinę būseną, kuri iš esmės yra pagrindinė ir mūsų meta lauko vertė. Po to mes naudojame apiFetch, kad gautume duomenis iš dabartinio įrašo.

Mes perduodame dabartinio įrašo ID su kintamuoju $ {this.props.postId}. Vėliau grįšime prie šio punkto.

Gavę duomenis, mes atnaujiname savo būseną, naudodami REST API vertę.

Dabar grįžkime prie „postId“ kintamojo. Šiuo metu nežinome dabartinio įrašo ID, todėl tam naudojame „withEelect“ aukštesnės eilės komponentą:

const HOC = withSelect ((pasirinkti) => {
const {getCurrentPostId} = pasirinkti (‘core / editor’);
grįžti {
postId: getCurrentPostId (),
};
}) (Sveiki_Gutenbergas);

registerPlugin („hello-gutenberg“, {
piktograma: „admin-site“,
pateikti: HOC,
});

Tai perduos dabartinio įrašo kaip „postId“ kintamojo ID. Dabar galite paleisti senesnį įrašą, o mūsų „Gutenberg“ šoninėje juostoje bus rodoma jūsų meta lauko vertė.

Atnaujinkite meta vertę

Dabar turime leisti savo šoninėje juostoje atnaujinti ir meta vertę. Panašiai kaip ir informacijos gavimas, mes naudosime wp.apiRequest naudingumas.

Kiekvieną kartą, kai pasikeis mūsų būsenos vertė, mes ją atnaujinsime naudodami REST API. Tam pirmiausia turime pridėti „onChange“ įvykį prie „TextControl“, pavyzdžiui:

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