Kako napraviti dodatak kompatibilan s Gutenbergom: 2. dio (API bočne trake)

Ako svoj dodatak pokušavate učiniti kompatibilnim s Gutenbergom, imate nekoliko staza koje možete provesti / ovisno o tome što vaš dodatak radi i kako korisnicima pruža svoje značajke..


U prvom dijelu ove mini-serije istražili smo Gutenbergov Block API – što je većini dodataka potrebno u pogledu Gutenberške kompatibilnosti. Ovaj put ćemo istražiti još jedan dio Gutenbergove slagalice – API za bočnu traku Gutenberga.

Samo da bismo bili sigurni da se nalazimo na istoj stranici, brzo objašnjenje:

  • Gutenbergov Block API vrlo je opsežan i omogućava vam da izgradite gotovo sve kao blokove, ali, ponekad, nije dovoljno.
  • API bočne trake, s druge strane, dopušta da dodaci registriraju bočnu traku na kojoj mogu iskoristiti svoju funkcionalnost izvan blokova. Bočna traka slična je Block Inspector.

Učinite vaš dodatak kompatibilan s API-jem Gutenberga - bočne trake

Na primjer, Gutenberg API bočne trake u uporabi kako je pokazao Yoast SEO:

API bočne trake Gutenberg

Gdje možete koristiti API bočne trake?

Nedavno smo radili na stvaranju našeg dodatka – Pregled proizvoda WP-a – spremno za Gutenberg. WP Product Review koristio je meta polja za dodavanje podataka o recenziji u post i iz različitih razloga kompatibilnosti s unazad nismo mogli pretvoriti u blok. Stoga smo koristili API bočne trake.

Evo kako smo integrirali pregled WP proizvoda u Gutenbergov urednik:WP pregled proizvoda Gutenberg

Kad korisnici naznače da je post pregled s prebacivanjem bočne trake, moći će konfigurirati sve o svojem okviru za pregled putem opcija bočne trake.

WP Product Review jedan je od primjera gdje API Sidebar može biti koristan. Drugi sjajan primjer je Baci dodatak koji korisnicima omogućuje umetanje dionica iz Unsplasha i Giphyja pomoću bočne trake.

U ovom postu ću vas provesti kroz postupak implementacije nečeg sličnog i čineći vaš dodatak Gutenberg kompatibilan putem Sidebar API-ja.

Meta kutije su nekako spremne za Gutenberg prema zadanim postavkama, ali ne sasvim

Počnimo s meta okvirima. Uzmimo dodatak koji koristi jednostavan meta okvir da bi korisniku pružio neku funkciju na zaslonu uređivača.

Ovo može izgledati ovako u klasičnom uređivaču:

Meta okvir u klasičnom uređivaču

Sljedeći kôd možete koristiti za stvaranje takvog meta okvira – dostupan je i u Pozdrav Gutenberg repozitorij:

/ **
* Registrirajte se 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’);
}
dodavanje (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Pozdrav Gutenberg Metabox Povrat
* /
funkcija hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, istina);
?>
<?php _e (‘Kako se zoveš?’, ‘zdravo-gutenberg’) ?>

<?pHP
}

/ **
* Spremi Pozdrav Gutenberg Metabox
* /
funkcija hello_gutenberg_save_postdata ($ post_id) {
ako (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
dodavanje (‘save_post’, ‘hello_gutenberg_save_postdata’);

Pitanje je ovdje:

Moramo li to u prvom redu učiniti kompatibilnim s Gutenbergom?

U ovom trenutku, trebali bismo se zapitati što je Gutenberg-kompatibilan. Na primjer, ako koristite ovaj vrlo meta okvir u Gutenbergu, a da ga nije izvršio, i dalje će raditi.

Međutim, kada govorimo o kompatibilnosti s Gutenbergom, ne govorimo samo o dodatku koji radi u okruženju Gutenberga, već dodatak koji radi * poput Gutenberga *.

"Zašto?" – pitali biste. Jednostavno, korisnici koji će početi koristiti WordPress nakon što je Gutenberg zadani uređivač, pronaći će stare načine kako biti kontra intuitivan. Nadalje, očekivat će više Gutenbergov stil za sve u uredniku.

Ako korisnicima ne pružite izvorni osjećaj, sigurno će potražiti alternative koje će s Gutenbergom biti bolje.

Na kraju, neka nam ruke budu zaprljane nekim kodom!

Početak upotrebe API-ja bočne trake

Započet ćemo kodiranje naše bočne trake u Gutenbergu kako bi uključili i naše meta polje. Možete nastaviti s upotrebom Gutenberg kotlovska ploča skladište kao polazište.

Priprema meta meta okvira za Gutenberg

Prije nego što započnemo, prvo moramo reći Gutenbergu da nećemo koristiti svoj meta okvir u Gutenbergu. To možete učiniti tako da argumentu __back_compat_meta_box prebacite na funkciju add_meta_box, na primjer:

/ **
* Registrirajte se 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’, niz (
‘__back_compat_meta_box’ => lažan,
));
}
dodavanje (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Gutenberg priručnik sadrži više detalja o tome kako možete upravljati prijenosom PHP meta okvira u Gutenberg (ovdje).

Tako ćete osigurati da se naši stari PHP meta-okviri više ne pojavljuju u Gutenbergu. Sada također moramo pripremiti svoje meta polje za Gutenberg dodavanjem ga u WordPress REST API. Možete dodati sljedeći kôd za registraciju meta polja pomoću REST API-ja:

/ **
* Registrirajte se Hello Field Gutenberg Meta Field to Rest API
* /
funkcija hello_gutenberg_register_meta () {
register_meta (
‘post’, ‘_hello_gutenberg_field’, niz (
„Tip” => ‘niz’,
„” = pojedinačna> pravi,
” = show_in_rest> pravi,
)
);
}
dodavanje (‘init’, ‘hello_gutenberg_register_meta’);

Ovo će dodati _hello_gutenberg_field u polje meta objekta u REST API-ju.

Ova će funkcija obavljati samo posao prikazivanja naše vrijednosti u REST API-ju. Sada također moramo dodati metodu za ažuriranje našeg meta polja koristeći REST API.

Sljedeći kôd će dodati našu prilagođenu rutu u WordPress REST API, koji će biti / Halo-Gutenberg / V1 / update-meta /:

/ **
* Registrirajte se Hello Gutenberg Metabox u Rest API
* /
funkcija hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, niz (
‘metode’ => ‘POST’,
‘povratni poziv’ => ‘Hello_gutenberg_update_callback’,
‘args’ => array (
‘id’ => array (
‘sanitize_callback’ => ‘Absint’,
),
),
)
);
}
dodavanje (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Pozdrav Gutenberg REST API povratni poziv za Gutenberg
* /
funkcija hello_gutenberg_update_callback ($ podaci) {
vratiti update_post_meta ($ data [‘id’], $ data [‘ključ’], $ data [‘vrijednost’]);
}

Ova REST API ruta bit će korištena za izmjenu našeg meta polja s Gutenbergove bočne trake. Možete naučiti više o WordPress REST API-ju i kako to učiniti registrirajte rute odavde.

Slično tome, ako želite znati što je WordPress REST API i kako započeti, možete pročitati naš blog: WordPress REST API: Što je i kako započeti s korištenjem.

Dodavanje bloka bočne trake u Gutenberg

Krenimo s kodom bočne trake od Gutenberg kotlovska ploča:

/ **
* Unutarnji blok knjižnica
* /
const {__} = wp.i18n;

const {fragment} = wp.element;

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

const {registerPlugin} = wp.plugins;

const Component = () => (

{__ (‘Gutenbergova kotlovska ploča’)}

{ __( ‘Pozdrav svijete!’ ) }

);

registerPlugin (‘gutenberg-kotlovnica’, {
ikona: ‘web mjesto administratora’,
render: Komponenta,
});

Ovo će umetnuti vrlo jednostavnu bočnu traku u Gutenbergov urednik. To ćemo uzeti kao polaznu točku i na tome ćemo graditi svoj projekt.

Primjer koda potiče iz našeg Gutenbergovog spremišta kotlovskih ploča i kao rezultat toga moramo zamijeniti sve pojave "Gutenberg kotlovska ploča" s "Pozdrav Gutenberg".

Korištene komponente

Iako naša bočna traka već uvozi mnogo komponenti, trebat će nam još. Gornji dio koda možete zamijeniti slijedećim:

/ **
* Unutarnji blok knjižnica
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
sastavni dio,
Fragment
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Učimo brzo o svim komponentama koje smo uveli.

  1. Kao što je rečeno u prethodnom članku, __ komponenta koristi se za naš prijevod teksta.
  2. PluginSidebar komponenta koristi se za dodavanje naše bočne trake u Gutenberg.
  3. PluginSidebarMoreMenuItem upotrebljava se za dodavanje gumba izborniku Gutenberg, koji mijenja vidljivost bočne trake.
  4. PanelBody komponenta koristi se za dodavanje ploče na našu bočnu traku.
  5. TextControl koristi se za naše polje unosa.
  6. Nakon toga smo uvezli sastavni dio i Fragment komponente. Obje su komponente React koje koristimo na našoj bočnoj traci.
    • Komponenta Fragment koristi se za grupiranje popisa djece bez dodavanja dodatnih čvorova u DOM. Moramo koristiti komponentu Fragment u našem kodu jer nam JSX ne dozvoljava da imamo više od jednog roditeljskog čvora.
  7. withSelect je komponenta višeg reda. Da biste saznali što su komponente višeg reda, preporučujem vam da pročitate ova dokumentacija.
  8. I konačno, uvozimo registerPlugin, koji je sličan registerBlockType koji smo koristili u prethodnom članku. Umjesto da registrirate blok, registerPlugin registrira vaš dodatak.

Dodavanje kontrola

Do sada je naša bočna traka samo funkcija komponente, ali budući da ćemo koristiti metode Reacta u životnom ciklusu, pretvorit ćemo je u komponentu React, kao što je:

klasa Hello_Gutenberg proširuje komponentu {
render () {
povratak (

{__ (‘Pozdrav Gutenbergu’)}

{ __( ‘Pozdrav svijete!’ ) }

)
}
}

registerPlugin (‘hello-gutenberg’, {
ikona: ‘web mjesto administratora’,
render: Hello_Gutenberg,
});

Zbog toga bi vaša bočna traka trebala raditi s običnim tekstom.

Sada dodajmo naše polje bočnoj traci. Trebalo bi da naša komponenta izgleda ovako:

klasa Hello_Gutenberg proširuje komponentu {
render () {
povratak (

{__ (‘Pozdrav Gutenbergu’)}

)
}
}

Prvo smo definirali početno stanje, koje je u osnovi ključ i vrijednost našeg meta polja. Nakon toga koristimo apiFetch za prikupljanje podataka iz našeg trenutnog posta.

Prosljeđujemo ID našeg trenutnog posta s varijablom $ {this.props.postId}. Na to ćemo se pitanje vratiti kasnije.

Nakon dohvaćanja podataka ažuriramo stanje s vrijednosti iz REST API-ja.

Vratimo se varijabli PostId. Trenutno ne znamo ID našeg trenutnog posta pa za to koristimo komponentu s odabirom višeg reda, poput ove:

const HOC = withSelect ((odabir) => {
const {getCurrentPostId} = select (‘core / editor’);
povratak {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘hello-gutenberg’, {
ikona: ‘web mjesto administratora’,
render: HOC,
});

Time će se proslijediti ID našeg trenutnog posta kao varijabla PostId. Sada možete pokrenuti stariju objavu, a naša bočna traka u Gutenbergu prikazat će vrijednost vašeg meta polja.

Ažurirajte meta vrijednost

Sada moramo omogućiti našoj bočnoj traci da ažurira i meta vrijednost. Slično kao i dohvaćanju detalja, upotrijebit ćemo the wp.apiRequest korisnost.

Svaki put kada se promijeni vrijednost naše države, mi ćemo je ažurirati REST API-jem. Za ovo prvo moramo dodati onChange događaj u naš TextControl, ovako:

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