Sådan gør du dit plugin kompatibelt med Gutenberg: Del 2 (Sidebar API)

Hvis du prøver at gøre dit plugin kompatibelt med Gutenberg, har du et par stier, som du kan / bør gå – afhængigt af hvad dit plugin gør, og hvordan det leverer dets funktioner til brugeren.


I den første del af denne miniserie udforskede vi Gutenbergs Block API – hvilket er, hvad de fleste plugins har brug for med hensyn til Gutenberg-kompatibilitet. Denne gang skal vi udforske et andet stykke af Gutenberg-puslespillet – Gutenbergs sidebar API.

Bare for at sikre, at vi er på den samme side, en hurtig forklaring:

  • Gutenbergs Block API er meget omfattende og giver dig mulighed for at opbygge næsten alt som blokke, men til tider er det ikke nok.
  • Sidebar API tillader på den anden side plugins at registrere en sidebar, hvor de kan tage deres funktionalitet ud over blokke. Sidepanelet svarer til Block Inspector.

Gør dit plugin kompatibelt med Gutenberg - Sidebar API

F.eks. Gutenberg Sidebar API i brug som demonstreret af Yoast SEO:

Gutenberg Sidebar API

Hvor kan du bruge Sidebar API?

Vi har for nylig arbejdet på at lave vores plugin – WP-produktanmeldelse – klar til Gutenberg. WP Product Review anvendte metafelter til at tilføje gennemgangsdata til indlægget, og vi kunne ikke forvandle sig til en blokering af forskellige bagudkompatibilitetsårsager. Derfor brugte vi Sidebar API.

Her integreres WP Product Review i Gutenberg-editoren:WP Produktanmeldelse Gutenberg

Når brugere angiver, at indlægget er en anmeldelse med en sidepanel til at skifte, vil de være i stand til at konfigurere alt om deres gennemgangsfelt fra indstillingerne for sidefelt.

WP-produktanmeldelse er et af eksemplerne, hvor sidebjælke-API kan være nyttigt. Et andet godt eksempel er Drop det plugin, som giver brugerne mulighed for at indsætte stockbilleder fra Unsplash og Giphy ved hjælp af sidebjælken.

I dette indlæg vil jeg lede dig gennem processen med at implementere noget lignende og gøre dit plugin Gutenberg-kompatibelt gennem Sidebar API.

Metakasser er slags klar til Gutenberg som standard, men ikke helt

Lad os starte med metakasser. Lad os tage et plugin, der bruger en simpel metakasse til at levere en vis funktionalitet til brugeren på redigeringsskærmen.

Dette kan se ud som i Classic Editor:

Meta Box i Classic Editor

Du kan bruge følgende kode til at oprette en sådan metakasse – den er også tilgængelig i Hej Gutenberg repository:

/ **
* Registrer Hello Gutenbert Meta Box
* /
funktion hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hallo-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Hej Gutenberg Metabox tilbagekald
* /
funktion hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, sandt);
?>
<?php _e (‘Hvad hedder du?’, ‘hallo-gutenberg’) ?>

<?php
}

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

Så det spørgsmål, der skal stilles her, er:

Skal vi gøre denne Gutenberg-kompatibel i første omgang?

På dette tidspunkt bør vi overveje at spørge os selv, hvad Gutenberg-kompatibel er. For eksempel, hvis du bruger netop denne metakasse i Gutenberg uden at foretage nogen ændringer i den, fungerer den stadig.

Men når vi taler om Gutenberg-kompatibilitet, taler vi ikke kun om plugin, der fungerer i Gutenberg-miljøet, men plugin fungerer * som Gutenberg *.

"Hvorfor?" – ville du spørge. Brugere, der vil begynde at bruge WordPress, efter at Gutenberg er standardredigeringsprogrammet, finder ganske enkelt de gamle måder at være imødegående. Desuden forventer de en mere Gutenberg-lignende stil til alt i redaktøren.

Hvis du ikke giver brugerne et oprindeligt præg, vil de helt sikkert kigge efter alternativer, der fungerer bedre med Gutenberg.

Endelig, lad os få vores hænder beskidte med nogle kode!

Kom godt i gang med Sidebar API

Vi vil starte kodning af vores Sidebar i Gutenberg for at inkludere vores metafelt. Du kan fortsætte med at bruge Gutenberg Kedelplade depot som udgangspunkt.

Gør din metakasse klar til Gutenberg

Før vi starter, skal vi først fortælle Gutenberg, at vi ikke bruger vores metakasse i Gutenberg. Du kan gøre det ved at overføre argumentet __back_compat_meta_box til funktionen add_meta_box, som sådan:

/ **
* Registrer Hello Gutenberg Metabox
* /
funktion hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hallo-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, matrix (
‘__back_compat_meta_box’ => falsk,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Gutenberg Håndbog har flere detaljer om, hvordan du kan håndtere porting af PHP metakasser til Gutenberg (her).

Dette vil sikre dig, at vores gamle PHP-metakasser ikke længere vises i Gutenberg. Nu skal vi også gøre vores metafelt klar til Gutenberg ved at tilføje det til WordPress REST API. Du kan tilføje følgende kode for at registrere metafeltet med REST API:

/ **
* Registrer Hello Gutenberg Meta Field til Rest API
* /
funktion hello_gutenberg_register_meta () {
register_meta (
‘post’, ‘_hello_gutenberg_field’, matrix (
‘Type’ => ‘snor’,
‘single’ => rigtigt,
‘show_in_rest’ => rigtigt,
)
);
}
add_action (‘init’, ‘hallo_gutenberg_register_meta’);

Dette tilføjer _hello_gutenberg_field til meta objekt i REST API.

Denne funktion udfører kun jobbet med at vise vores værdi i REST API. Nu skal vi også tilføje en metode til at opdatere vores metafelt ved hjælp af REST API.

Følgende kode tilføjer vores brugerdefinerede rute til WordPress REST API, som vil være / Goddag-Gutenberg / v1 / update-meta /:

/ **
* Registrer Hello Gutenberg Metabox til Rest API
* /
funktion hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, matrix (
‘metoder’ => ‘STOLPE’,
‘callback’ => ‘Hello_gutenberg_update_callback’,
‘args’ => array (
‘id’ => array (
‘sanitize_callback’ => ‘Absint’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Hej Gutenberg REST API callback til Gutenberg
* /
funktion hello_gutenberg_update_callback ($ data) {
return update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

Denne REST API-rute vil blive brugt til at ændre vores metafelt fra Gutenberg-sidefeltet. Du kan lære mere om WordPress REST API og hvordan du gør det registrere tilpassede ruter herfra.

På samme måde, hvis du vil vide, hvad WordPress REST API er, og hvordan man kommer i gang, kan du læse vores blogindlæg: WordPress REST API: Hvad det er, og hvordan man kommer i gang med at bruge det.

Tilføjelse af en sidebar blok til Gutenberg

Lad os starte med sidepanelkoden fra Gutenberg Kedelplade:

/ **
* Interne blokbiblioteker
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

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

const {registerPlugin} = wp.plugins;

const Komponent = () => (

{__ (‘Gutenberg Boilerplate’)}

{ __( ‘Hej Verden!’ ) }

);

registerPlugin (‘gutenberg-kedelplade’, {
ikon: ‘admin-site’,
render: Komponent,
});

Dette vil indsætte en meget simpel sidepanel til Gutenberg-redaktøren. Vi tager dette som udgangspunkt og bygger vores projekt på det.

Eksempelkoden er fra vores Gutenberg Boilerplate-lager, og som et resultat er vi nødt til at erstatte alle forekomster af "Gutenberg Kedelplade" med "Hej Gutenberg".

Brugte komponenter

Mens vores sidepanel allerede importerer mange komponenter, har vi brug for mere. Du kan erstatte den øverste del af koden med følgende:

/ **
* Interne blokbiblioteker
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
Komponent,
Fragment
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Lad os hurtigt lære om alle de komponenter, vi har importeret.

  1. Som omtalt i den foregående artikel, __ komponent bruges til at gøre vores tekst oversættelig.
  2. Det PluginSidebar komponent bruges til at tilføje vores sidepanel til Gutenberg.
  3. PluginSidebarMoreMenuItem bruges til at føje en knap til Gutenberg-menuen, der skifter sidepanelens synlighed.
  4. Det PanelBody komponent bruges til at tilføje et panel til vores sidebjælke.
  5. TextControl bruges til vores input felt.
  6. Derefter importerede vi Komponent og Fragment komponenter. Begge er React-komponenter, som vi bruger i vores sidepanel.
    • Fragmentkomponenten bruges til at gruppere en liste over børn uden at tilføje ekstra noder til DOM. Vi er nødt til at bruge Fragment-komponenten i vores kode, da JSX ikke tillader os at have mere end en overordnet knude.
  7. withSelect er en højere ordens komponent. For at lære, hvad komponenter af højere orden er, anbefaler jeg, at du læser denne dokumentation.
  8. Og til sidst importerer vi registerPlugin, hvilket ligner registerBlockType, som vi brugte i den forrige artikel. I stedet for at registrere en blok, registrerer registerPlugin dit plugin.

Tilføjelse af kontroller

Indtil videre er vores sidepanel kun en komponentfunktion, men da vi bruger Reacts livscyklusmetoder, vil vi forvandle det til en React-komponent som sådan:

klasse Hello_Gutenberg udvider komponent {
render () {
Vend tilbage (

{__ (‘Hej Gutenberg’)}

{ __( ‘Hej Verden!’ ) }

)
}
}

registerPlugin (‘hej-gutenberg’, {
ikon: ‘admin-site’,
gengivelse: Hello_Gutenberg,
});

Dette skal få din sidepanel til at fungere med almindelig tekst.

Lad os nu tilføje vores felt til sidebjælken. Det skal få vores komponent til at se sådan ud:

klasse Hello_Gutenberg udvider komponent {
render () {
Vend tilbage (

{__ (‘Hej Gutenberg’)}

)
}
}

Først har vi defineret en starttilstand, der dybest set er nøglen og værdien af ​​vores metafelt. Derefter bruger vi apiFetch til at hente dataene fra vores nuværende indlæg.

Vi videregiver ID for vores nuværende indlæg med variablen $ {this.props.postId}. Vi kommer tilbage til dette punkt senere.

Når dataene er hentet, opdaterer vi vores tilstand med værdien fra vores REST API.

Lad os nu vende tilbage til postId-variablen. Vi kender i øjeblikket ikke ID’et for vores nuværende indlæg, så vi bruger den medVælg komponent med højere orden som denne:

const HOC = withSelect ((vælg) => {
const {getCurrentPostId} = vælg (‘core / editor’);
Vend tilbage {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘hej-gutenberg’, {
ikon: ‘admin-site’,
render: HOC,
});

Dette vil videregive ID’et for vores nuværende indlæg som en postId-variabel. Nu kan du køre et ældre indlæg, og vores Gutenberg-sidefelt viser værdien af ​​dit metafelt.

Opdater metaværdien

Nu skal vi tillade, at vores sidepanel også opdaterer metaværdien. Ligesom at hente detaljerne, bruger vi wp.apiRequest nytte.

Hver gang værdien af ​​vores tilstand ændres, opdaterer vi den med REST API. For dette skal vi først tilføje en onChange-begivenhed til vores TextControl, sådan:

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