Plugininizi Gutenberg ilə uyğunlaşdırmaq üçün necə: Part 2 (Yan panel)

Plugininizi Gutenberg ilə uyğunlaşdırmağa çalışırsınızsa, əldə edə biləcəyiniz bir neçə yol var – plaginizin nə etdiyindən və xüsusiyyətlərini istifadəçiyə necə təqdim etməsindən asılı olaraq.


Bu mini seriyanın ilk hissəsində Gutenberg-in Blok API-ni araşdırdıq – bu ən çox plugin-in Gutenberg uyğunluğu baxımından ehtiyac duyduğu şeydir. Bu dəfə Gutenberg tapmacasının başqa bir parçasını araşdıracağıq – Gutenberg-in Sidebar API.

Eyni səhifədə olduğumuzdan əmin olmaq üçün tez bir izahat verin:

  • Gutenberg-in Blok API çox genişdir və demək olar ki, hər şeyi blok şəklində qurmağa imkan verir, lakin bəzən bu kifayət deyil.
  • Side Panel API, digər tərəfdən, eklentilərə bloklardan kənarda funksiyalarını götürə bildikləri bir paneli qeyd etməyə imkan verir. Yan panel Block müfəttişinə bənzəyir.

Plugininizi Gutenberg - Sidebar API ilə uyğunlaşdırın

Məsələn, Yoast SEO tərəfindən nümayiş etdirilən Gutenberg Sidebar API:

Gutenberg Sidebar API

Sidebar API-ni harada istifadə edə bilərsiniz?

Bu yaxınlarda plaginlərimizi hazırlamışıq – WP məhsula baxış – Qutenberq üçün hazırdır. WP Product Review yazıya nəzərdən keçirmə məlumatlarını əlavə etmək üçün meta sahələrindən istifadə etdi və müxtəlif geriyə uyğunluq səbəbləri ilə bloka çevrilə bilmədik. Beləliklə, biz Sidebar API istifadə etdik.

WP Product Review-ni Gutenberg redaktoruna necə inteqrasiya etdik:WP Product Review Gutenberg

İstifadəçilər yazının bir kənar panel dəyişdirilməsi ilə nəzərdən keçirildiyini bildirdikdə, baxış paneli ilə əlaqəli hər şeyi yan çubuğun seçimlərindən konfiqurasiya edə biləcəklər.

WP Product Review, Sidebar API-nin faydalı ola biləcəyi nümunələrdən biridir. Başqa bir böyük nümunə Buraxın istifadəçilərə yan çubuğu istifadə edərək Unsplash və Giphy-dən səhm şəkillərini daxil etməyə imkan verən plugin.

Bu yazıda mən bənzər bir şeyi həyata keçirmək və plagininizi Sidebar API vasitəsilə uyğunlaşdırma prosesi ilə tanış olacağam.

Meta qutuları standart olaraq Qutenberq üçün hazırdır, lakin kifayət qədər deyil

Meta qutularından başlayaq. Redaktor ekranında istifadəçiyə bəzi funksiyaları çatdırmaq üçün sadə bir meta qutusundan istifadə edən bir plagin götürək.

Klassik redaktorda aşağıdakı kimi görünə bilər:

Klassik redaktorda Meta qutusu

Belə bir meta qutusu yaratmaq üçün aşağıdakı koddan istifadə edə bilərsiniz – bu da mövcuddur Salam Qutenberq depo:

/ **
* Salam Gutenbert Meta Box qeydiyyatı
* /
funksiya salam_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Salam Gutenberg Meta Box’, ‘salam-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Salam Gutenberg Metabox Çağırış
* /
hello_gutenberg_metabox_callback funksiyası ($ post) {
$ value = get_post_meta ($ yazı->ID, ‘_hello_gutenberg_field’, əsl);
?>
<?php _e (‘Adın nədir?’, ‘salam-gutenberg’) ?>

<?php
}

/ **
* Salam Gutenberg Metabox’u qeyd edin
* /
hello_gutenberg_save_postdata funksiyası ($ post_id) {
əgər (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’);

Beləliklə, burada veriləcək sual:

Bu Gutenberg’i ilk növbədə uyğun etmək məcburiyyətindəyikmi??

Bu anda özümüzdən Gutenberg-in uyğun olduğunu soruşmağı düşünməliyik. Məsələn, Gutenberg-dəki bu çox meta qutusundan heç bir dəyişiklik etmədən istifadə etsəniz, yenə də işləyəcəkdir.

Ancaq Gutenberg uyğunluğu haqqında danışarkən, yalnız Gutenberg mühitində işləyən plagin haqqında deyil, Gutenberg * kimi işləyən plugin haqqında danışırıq..

"Niyə?" – soruşardınız. Qutenberqin standart redaktoru olduqdan sonra WordPress-dən istifadə etməyə başlayacaq istifadəçilər əks-intuitiv olmağın köhnə yollarını tapacaqlar. Bundan əlavə, redaktordakı hər şey üçün daha Gutenbergə bənzər bir üslub gözləyəcəklər.

İstifadəçilərə doğma bir hiss təqdim etmirsinizsə, şübhəsiz ki, Gutenberg ilə daha yaxşı işləyəcək alternativlər axtaracaqlar.

Nəhayət, bir kodla əllərimizi çirkləndirək!

Sidebar API ilə başlamaq

Meta sahəmizi daxil etmək üçün Gutenberg-də Sidebarımızı kodlaşdırmağa başlayacağıq. İstifadə etməyə davam edə bilərsiniz Gutenberg qazanxanası bir başlanğıc nöqtəsi kimi depo.

Meta qutunuzu Gutenberg üçün hazırlamaq

Başlamazdan əvvəl ilk olaraq Gutenbergə bildirməliyik ki, Gutenbergdəki meta qutumuzdan istifadə etməyəcəyik. Bunu __back_compat_meta_box arqumentini add_meta_box funksiyasına ötürməklə edə bilərsiniz, məsələn:

/ **
* Gutenberg Metabox Salam Qeydiyyatı
* /
funksiya salam_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Salam Gutenberg Meta Box’, ‘salam-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, serial (
‘__back_compat_meta_box’ => yalan,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Gutenberg Handbook, PHP meta qutularını Gutenberg-ə köçürməyi necə idarə edə biləcəyinizə dair daha çox məlumat əldə etmişdir (burada).

Bu, köhnə PHP meta qutularımızın artıq Gutenberg-də görünməyəcəyinə əmin olacaqdır. İndi biz də meta sahəmizi WordPress REST API-yə əlavə edərək Gutenberg üçün hazır vəziyyətə gətirməliyik. Meta sahəsini REST API ilə qeydiyyata almaq üçün aşağıdakı kodu əlavə edə bilərsiniz:

/ **
* Salam Gutenberg Meta Sahəsini API-də istirahət edin
* /
funksiya hello_gutenberg_register_meta () {
qeyd_meta (
‘yazı’, ‘_hello_gutenberg_field’, serial (
‘növü’ => ‘string’,
‘tək’ => doğru,
‘show_in_rest’ => doğru,
)
);
}
add_action (‘tashabb’, ‘hello_gutenberg_register_meta’);

Bu, _hello_gutenberg_field’i əlavə edəcəkdir meta REST API obyekt.

Bu funksiya yalnız REST API-də dəyərimizi göstərmək işini aparacaqdır. İndi REST API istifadə edərək meta sahəmizi yeniləmək üçün bir üsul da əlavə etməliyik.

Aşağıdakı kod, WordPress REST API-ə xüsusi yolumuzu əlavə edəcəkdir / salam-gutenberg / v1 / yeniləmə-meta /:

/ **
* Salam Gutenberg Metabox-u API-də qeyd edin
* /
funksiya salam_gutenberg_api_posts_meta_field () {
Qeyd_rest_route (
‘salam-gutenberg / v1’, ‘/ update-meta’, serial (
‘metodlar’ => ‘POST’,
‘geri zəng’ => ‘salam_gutenberg_update_callback’,
‘args’ => serial (
‘id’ => serial (
‘sanitize_callback’ => ‘absint’,
),
),
)
);
}
add_action (‘istirahət_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Salam Gutenberg REST API Zəng Gutenberg üçün
* /
hello_gutenberg_update_callback funksiyası ($ data) {
return_post_meta qayıt ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

Bu REST API marşrutu, metan sahəmizi Gutenberg yan panelindən dəyişdirmək üçün istifadə ediləcəkdir. WordPress REST API və necə olacağı haqqında daha çox məlumat əldə edə bilərsiniz buradan xüsusi marşrutları qeyd edin.

Eynilə, WordPress REST API-nin nə olduğunu və necə başlamaq lazım olduğunu bilmək istəyirsinizsə, blogumuzun yazılarını oxuya bilərsiniz: WordPress REST API: nədir və bundan istifadə etməyə necə başlamaq lazımdır.

Gutenberg-ə bir yan panel əlavə olunur

Yan paneldən başlayaq Gutenberg qazanxanası:

/ **
* Daxili blok kitabxanalar
* /
const {__} = wp.i18n;

const {Parça} = wp.element;

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

const {registerPlugin} = wp.plugins;

const Komponent = () => (

{__ (‘Gutenberg qazanxanası’)}

{__ (‘Salam Dünya!’)}

);

registerPlugin (‘gutenberg-qazanplate’, {
simge: ‘admin-sayt’,
göstər: Komponent,
});

Bu, Gutenberg redaktoruna çox sadə bir panel əlavə edəcəkdir. Bunu başlanğıc nöqtəsi kimi götürüb layihəmizi quracağıq.

Nümunə kodu Gutenberg Boilerplate anbarındandır və nəticədə bütün hadisələri əvəz etməliyik "Gutenberg qazanxanası" ilə "Salam Qutenberq".

İstifadə olunmuş komponentlər

Yan çubuğumuz çox sayda komponent idxal etsə də, daha çox şeyə ehtiyacımız olacaq. Kodun yuxarı hissəsini aşağıdakılarla əvəz edə bilərsiniz:

/ **
* Daxili blok kitabxanalar
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.componentləri;

const {
Komponent,
Parça
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

İdxal etdiyimiz bütün komponentləri tez bir zamanda öyrənək.

  1. Əvvəlki məqalədə müzakirə edildiyi kimi __ komponent mətnimizi tərcümə etmək üçün istifadə olunur.
  2. The PluginSidebar komponentimiz Gutenberg-ə yan çubuğumuzu əlavə etmək üçün istifadə olunur.
  3. PluginSidebarMoreMenuItem Qutenberq menyusuna bir düyməni əlavə etmək üçün istifadə olunur, bu da panelin görmə qabiliyyətini dəyişir.
  4. The PanelBody komponent yan panelimizə bir panel əlavə etmək üçün istifadə olunur.
  5. TextControl giriş sahəmiz üçün istifadə olunur.
  6. Bundan sonra idxal etdik KomponentParça komponentləri. Onların ikisi də bizim yan çubuğumuzda istifadə etdiyimiz reaksiya komponentləridir.
    • Fraqment komponenti DOM-a əlavə qovşaqlar əlavə etmədən uşaqların siyahısını qruplaşdırmaq üçün istifadə olunur. Kodumuzda Fragment komponentindən istifadə etməliyik, çünki JSX birdən çox ana node olmağa imkan vermir.
  7. ilə seçin daha yüksək sifarişli bir komponentdir. Daha yüksək sifarişli komponentlərin nə olduğunu öyrənmək üçün oxumağı məsləhət görürəm bu sənəd.
  8. Və nəhayət, idxal edirik qeydPlugin, əvvəlki məqalədə istifadə etdiyimiz registerBlockType-a bənzərdir. Bloku qeyd etmək əvəzinə, RegisterPlugin plagininizi qeyd edir.

Nəzarət əlavə olunur

İndiyə qədər bizim yan çubuğunuz yalnız bir Komponent funksiyasıdır, amma React-in həyat dövrü metodlarından istifadə edəcəyimiz üçün onu React komponentinə çevirəcəyik, məsələn:

sinif Hello_Gutenberg Komponenti genişləndirir {
göstər () {
qayıt (

{__ (‘Salam Qutenberq’)}

{__ (‘Salam Dünya!’)}

)
}
}

registerPlugin (‘salam-gutenberg’, {
simge: ‘admin-sayt’,
göstər: Salam_Gutenberg,
});

Bu, yan çubuğunuzu düz mətnlə işləməlidir.

İndi sahəmizi yan çubuğa əlavə edək. Komponentimizi bu kimi görünməlidir:

sinif Hello_Gutenberg Komponenti genişləndirir {
göstər () {
qayıt (

{__ (‘Salam Qutenberq’)}

)
}
}

Birincisi, əsas olaraq meta sahəmizin açarı və dəyəri olan ilkin vəziyyəti müəyyən etdik. Bundan sonra, hazırkı yazıdan məlumatları aparmaq üçün apiFetch istifadə edirik.

Hazırki yazılarımızın şəxsiyyətini $ {this.props.postId} dəyişən ilə ötürürük. Daha sonra bu nöqtəyə qayıdaq.

Verilənlər alındıqdan sonra REST API dəyərimizlə dövlətimizi yeniləyirik.

İndi postId dəyişəninə qayıdaq. Hal-hazırda hazırkı postumuzun şəxsiyyətini bilmirik, bunun üçün yuxarıdan yuxarı sifarişli komponenti istifadə edirik:

const HOC = ilə seçin ((seçin) => {
const {getCurrentPostId} = seçin (‘core / redaktor’);
qayıt {
postId: getCurrentPostId (),
};
}) (Salam_Gutenberg);

registerPlugin (‘salam-gutenberg’, {
simge: ‘admin-sayt’,
göstər: HOC,
});

Bu postId dəyişən kimi cari yazımızın şəxsiyyətini verəcəkdir. İndi daha köhnə bir yazı işlədə bilərsiniz və Gutenberg yan panelimiz meta sahənizin dəyərini göstərəcəkdir.

Meta dəyərini yeniləyin

İndi yan çubuğumuzun meta dəyərini də yeniləməsinə icazə verməliyik. Detalları əldə etmək kimi, biz də istifadə edəcəyik wp.apiRequest yardım.

Hər dəfə dövlətimizin dəyəri dəyişdikdə, onu REST API ilə yeniləyəcəyik. Bunun üçün əvvəlcə TextControl-a onChange hadisəsi əlavə etməliyik:

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