Gutenberg üçün Pluginizi necə uyğunlaşdırmaq olar: Hissə 1 (Blok API)

"Plaginim var," deyir sənə, "bunu Qutenberqə necə hazır edirəm?"


Hekayə düzdür; Gutenberg, növbəti böyük buraxılışda nüvəyə birləşdiriləcək olan WordPress-də yeni redaktor təcrübəsidir. Bununla ayaqlaşmayan bir çox plugin köhnələcək. Bu, çox gec olmamışdan əvvəl Gutenberg üçün plagininizi uyğunlaşdırmağınızı vacib edir.

Kim təsir etdi?

Demək olar ki, bütün pluginlər poçt redaktoru ilə əlaqəsi olanlar Gutenberg tərəfindən təsirlənəcəkdir. Məsələn, plagininiz TinyMCE-də bir düyməni əlavə edərsə, sonra redaktorda qısa kod yerləşdirmək; pis xəbər; bunun sonu olacaq.
Pluginizi Gutenberg üçün uyğunlaşdırın: Hissə 1 (Blok API)

"Pluginlərimi Gutenberg üçün uyğunlaşdırmalıyam??"

Beləliklə, Gutenberg üçün hansı plaginləri yeniləməyə ehtiyac var? İşləyən hər hansı bir plugin:

  • Xüsusi metabokslar
  • Qısamüddətli kodlar
  • TinyMCE düymələri
  • və ya ümumiyyətlə hər hansı bir redaktor xüsusiyyəti

Bəzi plaginlər hələ sadə metaboks əlavə edən bir plugin kimi Gutenberg ilə işləsə də, istifadəçiləriniz üçün asan bir təcrübə olmayacaq.

Qısaldılmış kodlar da əvvəlki kimi işləməyə davam edəcək, ancaq redaktorda düz mətn node olacaq, Gutenberg üçün bütün şifrə kodlarını blok blok UI izləyəcək və istifadəçilər üçün istifadə etmək daha asan olacaq.

Bəli, istifadəçilər Gutenberg təcrübəsi üçün hazırlanmış plaginlərə üstünlük verəcəklər. Arxada qalacaqları isə rəqib plaginlə əvəz olunacaq.

Yalnız bir fikir vermək üçün istifadəçinin standart köhnə redaktor təcrübəsinin bizim plaginlə necə göründüyünə dair bir nümunə. (a), və sonra Qutenberqdə göründüyü kimi (b) – bunun üçün optimallaşdırılmış plagin ilə.

(b)Feedzy RSS Feeds - bir plugin Gutenberg hazırdır

Qorxma! Pluginlərinizi Gutenberg-ə hazır vəziyyətə gətirməyə kömək etmək üçün buradayıq. Plugininizi Gutenbergə birləşdirməyin bir çox yolu var, bu plaqonun necə işlədiyindən asılı olaraq bu məqalədə müzakirə edəcəyik.

Əvvəlcədən bilmək lazım olan şeylər Gutenberg React-də yazılmışdır. Gutenberg plaginləri JavaScript-də kodlanır, bu da yalnız PHP-də kod işləyən inkişaf etdiricilər üçün kobud bir keçid ola bilər. Gutenberg üçün plaginlər düzəltmək üçün React haqqında biliklərə ehtiyacınız olmasa da, bir az JavaScript anlayışına ehtiyacınız olacaq. Əvvəllər React və JSX üzərində işləmisinizsə, bu sizin üçün oxşar əsaslar olacaq.

Kifayət qədər deyil Gutenberg üçün rəsmi sənədlər, onun Github anbarında inkişaf etdiricilər üçün çox sayda dəyərli məlumatlar var. Gutenberg’in inkişafını dərindən öyrənmək istəyirsinizsə, Gutenberg’in GitHub anbarında baş verən hər şeyə diqqətlə baxmalısınız, çünki layihə həqiqətən sürətlə gedir və işlər hər gün dəyişir..

Gutenberg üçün plugininizi necə uyğunlaşdırmaq olar

Gutenberg-in API, Block API, Shortcode API və daha çox kimi redaktoru genişləndirməyin bir çox yolu ilə təmin edir. Hansı API istifadə edəcəyimiz, hansı plagin qurduğumuzdan asılıdır.

Plugin sadə bir şifrə kodlu bir plagindirsə, Block API redaktor üçün gözəl bir blok etmək üçün istifadə edilə bilər. Plugininiz bir blokun kifayət etmədiyi kompleks metabokslardan istifadə edərsə, Sidebar API-dən istifadə edə bilərik.

Ayrıca, NodeJS, NPM, webpack və ESNext kimi JavaScript inkişaf etdirmə vasitələrinin müasir bir yığını istifadə edəcəyik. Sizə nümunə faylları təqdim edəcəyik, buna görə inkişaf mühitinizi qurmaqdan narahat olmaq lazım deyil.

Bu yazıda baxacağıq Blok API istifadə edərək plugininizi Gutenberg-ə uyğun necə etmək olar. Digər üsullara (Side Panel API, Yayım Paneli, Vəziyyət Barı) daxil olacağıq & oxşar API) lazım olduqda ikinci hissədə.

Bütün qeyd olunan nümunələri içərisində tapa bilərsiniz bu GitHub depo.

Gutenberg inkişaf mühiti

Gutenberg üçün inkişaf, NPM, veb paket, Babel və JSX kimi alətlər dəstini quraşdırmağı tələb edir. Bu çox vaxt və səy tələb edir, buna görə də sizin üçün mühiti hazırladıq.

Gutenberg qazanxanası, minimal Gutenberg inkişaf quraşdırma və nümunələri olan bir plagindir. Bu bir blok və yan panel nümunəsini ehtiva edir. Xüsusi blokunuza yaymaq üçün istifadə edə bilərsiniz.

Gutenberg qazanxanası

Çəngəl və ya klon edə bilərsiniz Gutenberg Boilerplate anbarı sizə / wp-content / plugins / və inkişaf mühitiniz kimi istifadə edin.

Bundan sonra işə başlamaq üçün NodeJS-ni maşınınıza quraşdırmalısınız. Gutenberg Boilerplate qovluğuna gedin və npm quraşdırmasını işə salın

Bu andan, inkişaf prosesində istifadə edəcəyiniz üç əmri bilməlisiniz:

  • npm quraşdırma – Layihəni klonlaşdırdığınız zaman layihə asılılıqlarını quraşdırın.
  • npm run dev – İnkişaf zamanı kod tərtib edin. Bunu bir dəfə işə salmalısınız və dəyişiklikləri izləməyə davam edəcək.
  • npm run build – İnkişaf prosesi bitdikdən sonra optimallaşdırılmış bir quruluş üçün kod tərtib edin.

Blok API

Bloklar Gutenberg-in əsas elementidir, blok əsaslı bir redaktordur. Block API, Gutenberg üçün bloklar hazırlamağa imkan verir. Əsas HTML, şifrə kodlarını göstərə biləcək bloklar edə bilərsiniz və ya, məsələn, son yazılarınızı göstərmək üçün dinamik bloklar edə bilərsiniz.

Mövcud bir plaginə əsaslanan proses

Nümunəmizdə, Gutenberg blokuna bir tıkla Tweet qısa kodunu qəbul edəcəyik. Bu Tweet üçün qısa düymə mətninizlə bir Tweet qutusu və mətni tweet etmək üçün bir düymə verir. Bunun kimi:

Tweet Layout üçün vurun

Qısayol kodumuz belə bir şeyə bənzəyir:

[clicktotweet tweet ="Göstəriləcək mətn" tweetsent ="Tvitasiya ediləcək mətn" düymə ="Tvit" tema ="klikləyin tweet"]

Qısayol kodumuz dörd parametrə malikdir:

  • tweet: Saytınızda görünən mətn.
  • tweetsent: Twitter’ə gedən mətn.
  • düymə: Tweet düyməsinin mətni.
  • tema: ya kliklə to tweet vurun və ya qutu mövzusu olaraq tweet-alt düyməsini basın.

Blut API ilə Gutenberg üçün uyğunluq

Gutenberg ilə əlaqəli iki yol var, ya HTML-ni ön tərəfə göstərə bilərik, ya da Qutenberg blokundan istifadə edərək qısa kodu ön cəbhəyə göstərə bilərik. Bu yazı üçün sonuncunu edəcəyik.

Bütün kod mövcuddur Salam GitHub-dakı Gutenberg plagin depo. Pluginin hərəkətdə olduğunu görmək və ya kodu dəyişdirmək üçün depo klonlaşdıra bilərsiniz.

Gutenberg üçün skript / üslub

Əvvəlcə yazılarımızı və üslublarımızı enqueue_block_assets istifadə edərək Gutenberg redaktoruna həvalə etməliyik:

/ **
* Enqueue ön sonu və redaktoru JavaScript və CSS
* /
hello_gutenberg_scriptts funksiyası () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Dəstləşdirilmiş blok JS faylını enqueue
wp_enqueue_script (
‘salam-gutenberg-blok-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-bloklar’, ‘wp-redaktor’, ‘wp-komponentlər’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Enqueue ön və redaktor blok üslubları
wp_enqueue_style (
‘salam-gutenberg-blok-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Blok redaktoru çəngəlinə çəngəl skriptləri funksiyası
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scriptts’);

Blokumuzda istifadə edəcəyimiz skriptimizə dörd bağlantı əlavə etdik. Əvvəlcə bu asılılıqlar haqqında məlumat verək:

wp-i18n Gutenberg-in beynəlmiləlləşmə funksiyalarının versiyasıdır __ (). wp-bloklar blokunuzu qeyd edən registerBlockType funksiyası üçün istifadə olunur. Blokumuzdakı müxtəlif komponentlər üçün wp-redaktor və wp-komponentləri skriptlərindən istifadə edirik.

İndi aktivlərinizi qiymətləndirdik, blokumuzu içimizə yazmağa başlaya bilərik /src/block.js fayl.

İdxal asılılığı

Gutenberg qazanxanasından istifadə edirsinizsə onda sizin blok.js fayl Gutenberg üçün eklentlər qurmaq üçün istifadə edə biləcəyiniz əsas blok quruluşuna sahib olmalıdır:

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

const {registerBlockType} = wp.blocks;

/ **
* Qeyd bloku
* /
default olaraq qeydiyyatı qeyd etmə siyahısıBlockType (‘gutenberg-қазан
// Blok adı
başlıq: __ (‘Gutenberg Boilerplate’),
// Blokun təsviri
təsvir: __ (‘Nümunə blok.’),
// Blok Kateqoriya
kateqoriya: ‘ümumi’,
// Blok nişanı
simge: ‘admin-sayt’,
// Blok açar sözlər
açar sözlər: [
__ (‘Qazan plitəsi’),
__ (‘Salam Dünya’),
__ (‘Misal’),
],
atributları: {
},
// Redaktə interfeysinin təyin edilməsi
redaktə: rekvizit => {
qayıt (

{__ (‘Salam Geri’)}

);
},
// Ön interfeysin müəyyənləşdirilməsi
qazanc: rekvizit => {
qayıt (

{__ (‘Salam Frontend’)}

);
},
});

Kodumuzu real vaxtda tərtib etməyə başlamaq üçün npm run dev işlədə bilərsiniz.

Birincisi, yuxarıdakı blok üçün lazım olan bütün komponentləri və kitabxanaları idxal edəcəyik:

/ **
* Blokdan asılılıqlar
* /

‘sinif adları’ dan sinif adlarını idxal etmək;

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

const {registerBlockType} = wp.blocks;

const {
RichText,
Müfəttiş nəzarətçiləri,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Daşicon,
Alətlər paneli,
Düymə,
Tooltip,
} = wp.componentləri;

İlk idxal sinif adları kodumuzda çox siniflərdən istifadə etmək üçün npm istifadə edərək quraşdırdığımız, JSX elementlərdə çox siniflərə icazə vermədiyi üçün.

Onları istifadə etdiyimiz zaman idxal etdiyimiz digər komponentlər haqqında məlumat alacağıq.

Atributları müəyyənləşdirin

İndi Qutenberg blokumuz üçün qısamüddətli kod kimi eyni zamanda dörd atributu təyin edəcəyik:

atributları: {
tweet: {
növü: ‘string’,
},
tweetsent: {
növü: ‘string’,
},
düymə: {
növü: ‘string’,
default: __ (‘Tweet’),
},
tema: {
növü: ‘boolean’,
default: yanlış,
},
},

Gördüyünüz kimi, bütün atributlar qısa kodumuzla eynidır. Bütün atributlarda Gutenberg’ə məlumat tipini izah edən bir tip açar var. Sətir, nömrə, boolean istifadə edə bilərsiniz & qəbul edilən növlər kimi obyekt.

Bəzi atributlar da standart bir dəyəri ehtiva edir. Atributlar, həmçinin nümunəmizdə istifadə etməyəcəyimiz mənbə və seçicilər kimi digər xüsusiyyətlərə də sahib ola bilərsiniz. burada onlar haqqında daha çox məlumat əldə edin.

Interfeysi düzəldin

İndi ekranımız olan blokumuzun redaktə interfeysini quracağıq – istifadəçilər Gutenberg-də bloku redaktə edərkən görəcəklər.

Əsas fikir əldə etmək üçün əvvəlcə blokumuzu sərtləşdirə və kodumuzdakı aşağıdakı sahəni əvəz etməklə qura bilərik:

// Redaktə interfeysinin təyin edilməsi
redaktə: rekvizit => {
qayıt (

{__ (‘Salam Geri’)}

);
},

Aşağıdakı kodla:

// Redaktə interfeysinin təyin edilməsi
redaktə: rekvizit => {
qayıt [

Balqabaq və pinqvinlər

Tvit

];
},

Bu, son nəticəmiz barədə bir fikir verməlidir. Bu kimi bir şey görünəcək:

Gutenberg üçün plaginlər

Blokun ilk elementi tweet mətn sahəsidir. Gutenberg’in başlıq blokuna bənzər bir düzəldilə bilən mətn sahəsi ilə əvəz edəcəyik.

İstifadə edəcəyik RichText əvvəlcədən idxal etdiyimiz komponent, sabit kodlu mətnimizi əvəz etmək üçün.

RichText komponentimizin beş arqumenti var. format bir sətrdir, çünki qısaca kodumuzu elementləri ön tərəfdə göstərmək üçün istifadə edəcəyik. Atributumuzda bir selektor istifadə etmək istəsəydik, onda format bir sıra olardı.

RichText’in qalın və itiv kimi bir sıra formatlama variantları var, bunları formatlaşdırma boş bir massivi ötürərək əldən verdik..

yerdəyişmə sahəsində heç bir mətn olmadıqda doldurucu mətndir və dəyişiklik hadisəsi baş verdikdə onChange onChangeTweet funksiyasını işə salacaq..

Nəhayət, dəyər əvvəllər təyin etdiyimiz tweet atributundan götürüləcək sahəmizin dəyəri olacaqdır.

RichText sahəmizi təyin etdikdən sonra mətn sahəsində dəyər dəyişdikdə işə başlayacaqChangeTweet funksiyasını qurmalıyıq..

// Redaktə interfeysinin təyin edilməsi
redaktə: rekvizit => {
const onChangeTweet = dəyər => {
props.setAttributes ({tweet: value});
};
qayıt [
…kodun qalan hissəsi

RichText sahəsinin dəyərini istifadə edənChangeTweet funksiyasına keçirik props.setAtributes tweet atributunun dəyərini yeniləmə funksiyası.

Blokunuzu istifadə edərkən Gutenberg-in gücünü indi görəcəksiniz.

Qutenberqdəki RichField

Zəhmli deyil??

Blok müfəttişi

Gutenberg üçün eklentlər qurarkən, hər dəfə eklentləriniz üçün seçim panelləri hazırlamaq üçün təkərləri yenidən ixtira etmək lazım deyil. Gutenberg, blokun fərdiləşməsinə icazə vermək üçün sadələşdirilmiş bir yol təqdim edir və hər bir istifadəçinin daxili UI nümunələri ilə ardıcıl təcrübəyə sahib olmasını təmin edir..

RichText komponentinə bənzər şəkildə, InspectorControls komponenti blok seçildikdə bir yan çubuğu əlavə edir. Bu kimi bir şey:

Gutenberg müfəttişi nəzarəti

Müfəttiş ərazimizə bir mətn və mətn daxil etmə sahəsini əlavə etmək üçün TextareaControl və TextControl istifadə edəcəyik..

Qayıdış bəyanatınıza aşağıdakı kodu əlavə edəcəyik:

!! props.isSelektifli && (

),

müfəttiş yalnız blok seçildikdə göründüyünə əmin olmaq üçün seçilmiş çeklər.

RichareTə bənzər TextareaControl və TextControl komponentləri bir dəyəri və onChange metoduna malikdir.

Yeni dəyişiklikləri qəbul etmək üçün blok ekranınızın kodunu da dəyişdirməliyik. Bizim vəziyyətimizdə yalnız Düymə Mətn linkinə əlavə ediləcəyi üçün blokumuza Button Text əlavə etməliyik, buna görə də onu geridə göstərməyimiz lazım deyil.

Başlanğıc kodumuzdakı giperhavatı aşağıdakılarla əvəz edə bilərsiniz:


{props.attributes.button}

Əvvəldə qeyd edildiyi kimi, hiperlinki kodumuzdan çıxardırıq, çünki arxada göstərməyə ehtiyac yoxdur. Bu, blokumuzu belə görünməyə məcbur edəcək:

Gutenberg, Tweet müfəttiş idarələrini basın

Blok müfəttişi blokunuz üçün güclü vasitə ola bilər. Plugininizdə redaktor sahəsi üçün çox mürəkkəb olan inkişaf etmiş seçimlər varsa, onları Müfəttiş bölgəsinə qoya bilərsiniz.

Sonrakı hissədə JavaScript hissəsini bitirmək üçün blokumuza son bir seçim əlavə edəcəyik.

Blok alətlər paneli

Blok Toolbar, blokumuza daha çox seçim əlavə etmək üçün istifadə edə biləcəyimiz başqa bir əvvəlcədən qurulmuş UI komponentidir. Seçdiyiniz zaman blokunuzun üstündə görünəcək. Misal:

Gutenberg Blok alətlər paneli

İdeal olaraq, Blok Alətlər Çubuğunda blokunuzun əsas idarəetmə elementləri olmalıdır. Ancaq bu mübahisəlidir və blokunuzdan asılıdır.

Alternativ üsluba nəzarət etmək üçün Block Toolbar sahəsindən istifadə edəcəyik.

Blok müfəttişinə bənzər, Block Toolbar-ı blokumuza əlavə etmək üçün aşağıdakı kodu qaytardığımız ifadəyə əlavə etməliyik

!! props.isSelektifli && (

),

Blokumuza bir alət çubuğu əlavə etmək üçün BlockControls və Toolbar komponentlərindən istifadə edirik. Block müfəttişinə bənzər şəkildə, props.isSelected alətlər çubuğumuzun yalnız blokumuza diqqət yetirdiyimiz zaman görünməsini təmin edir.

Nəzarətimiz üçün Tooltip və Button komponentlərindən də istifadə edirik. Daha çox kontekst vermək üçün nəzarət üzərində hover olduqda alət çubuğunun olduğundan əmin olmaq üçün Tooltip komponenti Button komponentinə sarılmışdır..

Düymə komponenti məqalədə əvvəllər idxal etdiyimiz sinif adları modulundan istifadə edir. Nəzarətimizə üç sinif vermək üçün sinif adları funksiyasından istifadə etdik. Üçüncü sinif, aktivdir, yalnız mövzu atributumuzun dəyəri doğrulduqda görünür.

Onun onChange funksiyası mövzu atributunu doğru / yalana dəyişdirir. Sonda, Dashicon komponentləri nəzarətimiz üçün bir simge göstərmək üçün istifadə olunur.

Dəyişikliklərlə işləmək üçün blok kodumuzu da dəyişdirməliyik. Aşağıdakı sətri əvəz etməliyik:

İlə:

Mövzu atributunun doğru və ya yanlış olub olmadığını yoxlayırıq və müvafiq olaraq blokumuza bir sinif təyin edirik.

İndi blokunuz bir şeyə bənzəməlidir:

Tweet alətlər panelinə vurun

Gutenberg blokumuzun JavaScript tərəfini bitirdik. Faylın bütün mənbə kodunu tapa bilərsiniz burada.

İndi server tərəfindəki çıxışa baxaraq blokumuzu bitirəcəyik.

Server tərəfində göstərmə

Gutenberg, ön tərəfdəki bloklarınızı göstərmək üçün server tərəfi göstərmələrdən istifadə etməyə imkan verir. Bu server tərəfi göstərmə bizə qısa kodlar üçün bloklar yaratmağımızı təmin edir.

Əvvəlcə qənaət metodumuzu aşağıdakı kodu ilə əvəz etməklə nullu qaytarmaq üçün edəcəyik:

// Ön interfeysin müəyyənləşdirilməsi
yadda saxla() {
// PHP-də göstərilməsi
geri qayıtmaq;
},

Blok tipimizi PHP-də qeyd etmək üçün register_block_type PHP funksiyasından istifadə edəcəyik:

əgər (function_exists (‘register_block_type’)) {
// Çəngəl serverə göstərilən geri çağırış
Qeyd_block_type (
‘salam-gutenberg / to tweet to tweet’, [
‘render_callback’ => ‘salam_gutenberg_block_callback’,
‘atributları’ => serial (
‘tweet’ => serial (
‘növü’ => ‘string’,
),
‘tweetsent’ => serial (
‘növü’ => ‘string’,
),
‘düymə’ => serial (
‘növü’ => ‘string’,
‘default’ => ‘Tweet’,
),
‘tema’ => serial (
‘növü’ => ‘boolean’,
‘default’ => yalan,
),
),
]
);
}

Qeyd_block_type funksiyamız. Əvvəlcə blok adımızı bir sıra arqumentlərlə birlikdə ötürürük.

Birinci arqument, server tərəfində göstərilməsi üçün hello_gutenberg_block_callback funksiyasına zəng edən render_callback funksiyasıdır.

Çağırışdan sonra geri göndərmə funksiyasında istifadə etdiyimiz blok.js faylına bənzər bir sıra kimi atributları ötürürük..

Bizim göstərilən geri çağırış funksiyası bu kimi görünür:

hello_gutenberg_block_callback ($ attr) funksiyası {
çıxarış ($ attr);
əgər (isset ($ tweet)) {
$ theme = ($ theme === doğrudur? ‘klikləyin – tweet-alt’: ‘klikləyin – tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" düymə ="% s" tema ="% s"] ‘;
return sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}
}

Bütün atributları çıxarırıq və sonra qısa kodumuzda geri qaytarırıq. Qutenberg üçün qısamüddətli pluginlərinizi uyğunlaşdırmaq üçün lazım olan bütün bunlardır.

Bu məqalədə istifadə olunan bütün kodları bunda tapa bilərsiniz salam-gutenberg depo.

Növbəti hissədə, Sidebar API də daxil olmaqla Gutenberg üçün mövcud pluginləri uyğunlaşdırmağın digər yollarını nəzərdən keçirəcəyik..

Gutenberg üçün plugininizi necə uyğunlaşdıracağınıza dair hər hansı bir sualınız varsa, şərhlərdə onlardan soruşun!

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

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