Kuinka tehdä laajennuksesi yhteensopivaksi Gutenbergin kanssa: Osa 2 (sivupalkin sovellusliittymä)

Jos yrität tehdä laajennuksesi yhteensopivaksi Gutenbergin kanssa, sinulla on pari polkua, jotka voit / pitäisi käyttää – riippuen siitä, mitä laajennus tekee ja kuinka se toimittaa ominaisuudet käyttäjälle.


Tämän minisarjan ensimmäisessä osassa tutkimme Gutenbergin Block-sovellusliittymää – jota useimmat liitännäiset tarvitsevat Gutenbergin yhteensopivuuden kannalta. Tällä kertaa tutkimme toista kappaletta Gutenbergin palapelissä – Gutenbergin sivupalkin sovellusliittymä.

Vain varmistaaksemme, että olemme samalla sivulla, nopea selitys:

  • Gutenbergin Block-sovellusliittymä on erittäin laaja ja antaa sinun rakentaa melkein kaiken lohkoina, mutta toisinaan se ei riitä.
  • Sivupalkin sovellusliittymä puolestaan ​​sallii laajennusten rekisteröidä sivupalkin, jossa ne voivat viedä toiminnallisuutensa lohkojen ulkopuolelle. Sivupalkki on samanlainen kuin Block Inspector.

Tee laajennuksestasi yhteensopiva Gutenberg - Sidebar API -sovelluksen kanssa

Esimerkiksi käytössä oleva Gutenberg Sidebar API, kuten Yoast SEO on osoittanut:

Gutenberg Sidebar API

Missä voit käyttää sivupalkin sovellusliittymää?

Työskentelimme äskettäin laajennuksen tekemisessä – WP-tuotekatsaus – valmis Gutenbergiin. WP-tuotekatsauksessa käytettiin metakenttiä lisätietoja arvosteluun viestiin, emmekä voineet muuttua lohkoksi erilaisista taaksepäin sopivista syistä. Käytimme siis sivupalkin sovellusliittymää.

Näin integroimme WP-tuotekatsauksen Gutenbergin toimittajaan:WP-tuotekatsaus Gutenberg

Kun käyttäjät ilmoittavat, että viesti on arvostelu sivupalkin vaihtamalla, he voivat määrittää kaiken tarkistusruudustaan ​​sivupalkin vaihtoehdoista.

WP-tuotekatsaus on yksi esimerkkejä, joissa sivupalkin sovellusliittymä voi olla hyödyllinen. Toinen hieno esimerkki on Pudota se plugin, jonka avulla käyttäjät voivat lisätä osakekuvia Unsplashista ja Giphystä sivupalkin avulla.

Tässä postituksessa opastan sinua toteuttamaan jotain vastaavaa ja tekemään Gutenbergin liitännäisosastostasi Sidebar API: n kautta.

Metarasiat ovat tavallaan valmiita Gutenbergiin oletuksena, mutta ei aivan

Aloitetaan metalaatikoilla. Otetaanpa plugin, joka käyttää yksinkertaista meta-ruutua toimittamaan joitain toimintoja käyttäjälle editorin näytössä.

Tämä voi näyttää seuraavalta Classic Editorissa:

Meta laatikko Classic Editorissa

Voit luoda seuraavan koodin luodaksesi tällaisen metakotelon – se on myös saatavana Hei Gutenberg tietovaraston:

/ **
* Rekisteröidy Hei Gutenbert Meta Box
* /
toiminto 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’);

/ **
* Hei Gutenberg Metabox-soittopyyntö
* /
toiminto hello_gutenberg_metabox_callback ($ post) {
$ arvo = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, tosi);
?>
<?php _e (‘Mikä nimesi on?’, ‘hello-gutenberg’) ?>

<?php
}

/ **
* Tallenna Hello Gutenberg Metabox
* /
toiminto 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’);

Joten kysymys on tässä:

Onko meidän ensinnäkin tehtävä tästä Gutenbergin kanssa yhteensopiva?

Tässä vaiheessa meidän on harkittava kysyä itseltämme, mikä on Gutenbergin kanssa yhteensopiva. Esimerkiksi, jos käytät tätä hyvin metakenttää Gutenbergissä tekemättä siihen muutoksia, se toimii silti.

Kun puhumme Gutenbergin yhteensopivuudesta, emme puhu pelkästään Gutenberg-ympäristössä toimivasta laajennuksesta, vaan pluginista, joka toimii * kuten Gutenberg *.

"Miksi?" – sinä kysyisit. Yksinkertaisesti, käyttäjät, jotka alkavat käyttää WordPressiä sen jälkeen, kun Gutenberg on oletuseditori, löytävät vanhoja tapoja olla intuitiivisia. Lisäksi he odottavat Gutenbergin kaltaisempaa tyyliä kaikesta editorissa.

Jos et tarjoa käyttäjille alkuperäistä tunnetta, he etsivät varmasti vaihtoehtoja, jotka toimivat paremmin Gutenbergin kanssa.

Viimeinkin saadaan kätemme likaantuneeksi jollain koodilla!

Sivupalkin sovellusliittymän käytön aloittaminen

Alamme koodata sivupalkkiamme Gutenbergissa sisällyttääksemme metakenttämme. Voit jatkaa Gutenbergin kattilalevy arkisto lähtökohtana.

Metakotelon valmistelu Gutenbergiin

Ennen kuin aloitamme, meidän on ensin kerrottava Gutenbergille, ettemme käytä metalaatikkoamme Gutenbergissa. Voit tehdä sen siirtämällä __back_compat_meta_box-argumentin add_meta_box-toimintoon, kuten näin:

/ **
* Rekisteröidy Hei Gutenberg Metabox
* /
toiminto 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’ => väärä,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Gutenbergin käsikirjassa on lisätietoja siitä, kuinka voit käsitellä PHP-metalaatikoiden siirtämistä Gutenbergiin (tässä).

Tämä varmistaa, että vanhat PHP-metakotelot eivät enää näy Gutenbergissä. Nyt meidän on myös valmistettava metakenttä valmiiksi Gutenbergiin lisäämällä se WordPress REST -sovellusliittymään. Voit lisätä seuraavan koodin rekisteröidaksesi metakentän REST API: lla:

/ **
* Rekisteröi Hello Gutenbergin metakentän lepo-sovellusliittymä
* /
toiminto hello_gutenberg_register_meta () {
register_meta (
‘post’, ‘_hello_gutenberg_field’, array (
‘Tyyppi’ => ‘String’,
‘Yksi’ => totta,
‘Show_in_rest’ => totta,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Tämä lisää _hello_gutenberg_field-kenttään meta objekti REST API: ssa.

Tämä toiminto suorittaa vain arvon näyttämisen REST-sovellusliittymässä. Nyt meidän on myös lisättävä menetelmä päivittää metakenttämme REST-sovellusliittymällä.

Seuraava koodi lisää mukautetun reitin WordPress REST -sovellusliittymään, joka tulee olemaan / Hei-Gutenberg / V1 / update-meta /:

/ **
* Rekisteröi Hello Gutenberg Metabox to Rest API
* /
toiminto hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, taulukko (
‘menetelmät’ => ‘LÄHETTÄÄ’,
‘takaisinsoitto’ => ‘Hello_gutenberg_update_callback’,
‘args’ => array (
‘id’ => array (
‘sanitize_callback’ => ‘Absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Hei Gutenberg REST API -soittopyyntö Gutenbergille
* /
toiminto hello_gutenberg_update_callback ($ data) {
palauta update_post_meta ($ data [‘id’], $ data [‘avain’], $ data [‘arvo’]);
}

Tätä REST API -reittiä käytetään metakentän modifiointiin Gutenbergin sivupalkista. Voit oppia lisää WordPress REST -sovellusliittymästä ja kuinka rekisteröi mukautettuja reittejä täältä.

Samoin, jos haluat tietää, mikä WordPress REST -sovellusliittymä on ja miten pääset alkuun, voit lukea blogi-viestimme: WordPress REST -sovellusliittymä: Mikä se on ja kuinka aloittaa sen käyttö.

Sivupalkin lohkon lisääminen Gutenbergiin

Aloitetaan sivupalkkikoodilla Gutenbergin kattilalevy:

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

const {Fragment} = wp.elementti;

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

const {registerPlugin} = wp.plugins;

const Komponentti = () => (

{__ (‘Gutenbergin kattilalevy’)}

{ __( ‘Hei maailma!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
kuvake: ‘admin-site’,
render: Komponentti,
});

Tämä lisää hyvin yksinkertaisen sivupalkin Gutenberg-editoriin. Otamme tämän lähtökohtana ja rakennamme projektillemme sen perusteella.

Esimerkkikoodi on Gutenberg Boilerplate -varastostamme, ja sen seurauksena meidän on korvattava kaikki "Gutenbergin kattilalevy" kanssa "Hei Gutenberg".

Käytetyt komponentit

Vaikka sivupalkimme tuo jo monia komponentteja, tarvitsemme lisää. Voit korvata koodin yläosan seuraavalla:

/ **
* Sisäiset lohkokirjastot
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.com-komponentit;

const {
komponentti,
Kappale
} = wp.elementti;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Oppitaan nopeasti kaikista tuomistamme komponenteista.

  1. Kuten edellisessä artikkelissa keskusteltiin, __ komponenttia käytetään tekstin kääntämiseen.
  2. PluginSidebar komponenttia käytetään lisäämään sivupalkki Gutenbergiin.
  3. PluginSidebarMoreMenuItem käytetään lisäämään painike Gutenberg-valikkoon, joka vaihtaa sivupalkin näkyvyyttä.
  4. PanelBody komponenttia käytetään paneelin lisäämiseen sivupalkkiimme.
  5. TextControl käytetään syöttökenttään.
  6. Sen jälkeen tuomme komponentti ja Kappale komponentteja. Molemmat ovat React-komponentteja, joita käytämme sivupalkissamme.
    • Fragmentti-komponenttia käytetään lasten ryhmittelemiseen lisäämättä lisäsolmuja DOM: iin. Meidän on käytettävä Fragment-osaa koodissamme, koska JSX ei salli meillä olevan useampaa kuin yhtä emo-solmua.
  7. withSelect on korkeamman asteen komponentti. Suosittelen, että opit lukemaan korkeamman asteen komponentit tämä dokumentaatio.
  8. Ja lopuksi tuomme registerPlugin, joka on samanlainen kuin edellisessä artikkelissa käyttämämme registerBlockType. Lohkon rekisteröinnin sijaan registerPlugin rekisteröi laajennuksen.

Ohjainten lisääminen

Toistaiseksi sivupalkimme on vain komponentti-toiminto, mutta koska käytämme Reaktin elinkaarimenetelmiä, muutamme siitä Reakt-komponentin, kuten:

luokka Hello_Gutenberg laajentaa komponenttia {
tehdä () {
palata (

{__ (‘Hei Gutenberg’)}

{ __( ‘Hei maailma!’ ) }

)
}
}

registerPlugin (‘hello-gutenberg’, {
kuvake: ‘admin-site’,
renderöinti: Hei_Gutenberg,
});

Tämän pitäisi tehdä sivupalkistasi toimimaan selkeän tekstin kanssa.

Nyt lisätään kenttä sivupalkkiin. Sen pitäisi saada komponentistamme näyttämään tältä:

luokka Hello_Gutenberg laajentaa komponenttia {
tehdä () {
palata (

{__ (‘Hei Gutenberg’)}

)
}
}

Ensinnäkin, olemme määritelleet alkutilan, joka on pohjimmiltaan metakentän avain ja arvo. Sen jälkeen haemme tietoja nykyisestä viestistämme apiFetchillä.

Lähetämme nykyisen viestimme tunnuksen $ {this.props.postId} -muuttujalla. Palaamme tähän kohtaan myöhemmin.

Kun tiedot on haettu, päivitämme tilamme arvoon REST-sovellusliittymästämme.

Palatkaamme nyt postId-muuttujaan. Emme tällä hetkellä tiedä nykyisen viestimme tunnusta, joten käytämme tätä varten korkeamman tilauksen komponenttia withSelect, kuten tämä:

const HOC = withValitse ((valitse) => {
const {getCurrentPostId} = valitse (‘ydin / toimittaja’);
palauta {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘hello-gutenberg’, {
kuvake: ‘admin-site’,
tehdä: HOC,
});

Tämä välittää nykyisen viestimme tunnuksen postId-muuttujana. Nyt voit suorittaa vanhemman viestin, ja Gutenbergin sivupalkissamme näkyy metakentän arvo.

Päivitä meta-arvo

Nyt meidän on sallittava sivupalkimme päivittää myös meta-arvo. Samoin kuin yksityiskohtien noutaminen, käytämme wp.apiRequest apuohjelma.

Aina kun tilamme arvo muuttuu, päivitämme sen REST API: lla. Tätä varten meidän on ensin lisättävä onChange-tapahtuma TextControliin, kuten tämä:

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