Başlayanlar üçün Gutenberg Tutorial: İlk Blok Pluginizi yaradın

Gutenberg yeni başlayanlar üçün dərs vəsaiti


2020-ci ildə WordPress üçün bir şey inkişaf etdirməyi düşünürsənsə, Gutenbergə məhəl qoymamaq sadəcə seçim deyil. Pluginlər və mövzular hamısı Gutenberg ilə gözəl əməkdaşlıq etməli və istifadəçinin WordPress tablosunda görə biləcəyi hər şeyə uyğun bir istifadəçi təcrübəsi təqdim etməlidir. Xüsusilə Gutenberg hazırda WordPress-in ayrılmaz hissəsidir – sadəcə blok redaktoru adlandırılır.

Gutenberg-dən başlamaq bu qədər sadə deyil. Bir neçə il əvvəl Notepaddan başqa heç bir şey istifadə etmədən keyfiyyətli bir WordPress plugin yaza bilsəniz, proses indi daha sərtləşdi.

Gutenberg WordPress REST API, JavaScript və React kimi texnologiyalardan istifadə edir. Beləliklə, Gutenberg ilə işləmək üçün plaginlər və mövzular üçün yeni tələblər lazım idi.

Yaxşı xəbər budur ki, bu gün bütün bunları danışacağıq! Bu yazı ilk dəfə Gutenberg üçün bir plugin yaratmaq istəyən yeni başlayanlar üçün Gutenberg dərsidir.

Əsasən Gutenberg üçün bir plagin yaratmağın müxtəlif aspektlərinə diqqət yetiririk – inkişaf mühitini qurmaq, əsas plagin və bloklarla işləmə bəzi nüansları yaratmaq.

1. Gutenberg inkişaf mühitinizi qurun

Gutenberg inkişafından başlamaq üçün JavaScript və React haqqında bir sıra əsas biliklərə ehtiyacınız var. Burada bir WordPress geliştiricisi üçün JavaScript təlimidir. Bundan əlavə, Gutenberg-dəki əlavə paketlər, npm-də bir NodeJS paket menecerinin istifadəsinə ehtiyac ola bilər.

Quraşdırıcılardan istifadə edərək Windows və ya MacOS-da NodeJS-in ən son sabit versiyasını quraşdıra bilərsiniz rəsmi saytda. Linux serveriniz varsa, mənbə kodunu tərtib edə və ya müvafiq paket menecerindən (apt və yum kimi) istifadə edə bilərsiniz. Məsələn, Ubuntu istifadə edirsinizsə, terminaldakı aşağıdakı əmrləri işlədin.

sudo apt yeniləmə
sudo apt nodejs npm quraşdırın

Quraşdırma uğurla başa çatdıqdan sonra NodeJS versiyasını yoxlamaq üçün aşağıdakı əmri işlədə bilərsiniz.

nodejs – çevrilmə

Bu qutuları vurduqdan sonra test WordPress veb saytınızı hazırkı Gutenberg plagininin (bağımsız plagin) və ya hətta onun inkişaf versiyasının nümunəsi ilə qurmaq yaxşı bir fikirdir – əldə edə bilərsiniz GitHub-dan.

⚠️ Qeyd; Gutenberg indi WordPress-də qurulsa da, bu versiya ən son deyil. Gutenberg-in inkişafı hələ də ayrı-ayrılıqda baş verir və yeni olanlar ilk növbədə Gutenberg bağımsız plagininə daxil edilir. Əsl Gutenberg versiyası, WordPress 5.0 daxil edildiyi gündən bəri hər hansı bir əsas yeniləmə almamışdır. Həmişə Gutenberg-in ən son versiyası üzərində işləmək istəyirsən, çünki bu, işinizi gələcəkdə sübut etmək üçün daha yaxşı bir şans verir və yaradılışınızın sonradan WordPress nüvəsinə gələn hər şeylə uyğunlaşacağına əmin olmağınızdır..

Başqa bir qeyddə, əsas Gutenberg plagininə töhfə vermək istəyirsinizsə, depo var töhfə qaydaları yerli mühitinizi necə qurmaq və nəzərdən keçirmək üçün dəyişiklikləri necə qurmaq barədə.

�� Nəhayət, mövcud pluginlərinizi Gutenberg-ə uyğunlaşdırmaq istəsəniz, buna necə nail olmağınız barədə ətraflı təlimat: 1-ci hissə və 2-ci hissə.

Gutenberg ilə əməkdaşlıq etməyə hazır olan bir şablon plagin qovluğu ilə başlamaq üçün istifadə etməyi düşünə bilərsiniz Gutenberg qazan plaginidir. Belə bir həll əsas faylı quruluşa kömək edir, beləliklə plaginin tərkibinə diqqət edə bilərsiniz. Qazan qabını istifadə etmək üçün plagini yükləyin və quraşdırın buradan (zip). Qazan plagininin quraşdırılması və aktivləşdirilməsi, bu dərslikdə araşdıracağımız nümunə bloklarını aktivləşdirir. Hər blokun kodunu qazan qovluğunun plugin yerindəki müvafiq qovluğundan tapa bilərsiniz.

2. İlkin konfiqurasiya

Yalnız sizə xatırlatmaq üçün, Gutenberg, standart TinyMCE redaktoru kətan üçün əvəz olan bloklar anlayışını təqdim edir. Bəzi hallarda, bloklar, həmçinin müxtəlif yollarla WordPress məzmununa əlavə etmək üçün istifadə olunan eklentlərin qısa kodlarını və digər əlavə məzmun elementlərini əvəz edə bilər.

Gutenberg üçün bina qurmaqla maraqlanırsınızsa, ən çox yayılmış yanaşma yeni bloklar yaradan və istifadəçiyə təqdim edən bir plagin qurmaqdır. Bu Gutenberg dərsliyində edəcəyimiz şey budur.

Aşağıdakı hissələr prosesi başdan sona qədər təsvir edir.

Quracağımız xüsusi plagin, tənzimlənə bilən müəyyən bir fon ilə bir mesaj yazdırır. Sadəcə bir nümunə qurmaq, ancaq burada təqdim olunan prinsipləri götür və öz mürəkkəb plaginlərinizə tətbiq edə bilərsiniz.

Belə bir plugin qurma əsasları tanış olmalıdır. WordPress-in plaginlər qovluğunda yeni bir qovluq yaratmağa başlayın. Bunun içərisində dörd fayl yerləşdirəcəyik:

  • index.php – Bu fayl yeni Gutenberg bloku haqqında metadata malikdir.
  • block.js – Bu JavaScript faylı xüsusi Gutenberg blokunu qeyd edir.
  • editor.css – Bu faylda redaktor üçün üslublar var.
  • style.css – Bu fayl blokun ön ucu üçün üslubları ehtiva edir.

Siyahıdakı ilk iki fayl blokun qeydiyyata alınmasına diqqət yetirir, sonrakı iki sənəd isə blok elementlərinin vizual üslublarını müəyyənləşdirir.

3. Blokun qeydiyyatı

Gutenberg üçün bir bloku qeydiyyatdan keçirmək üçün bu addımda iki şeyi geniş şəkildə əhatə edəcəyik:

  • plagin metadatasını WordPress-in PHP mühərriki ilə qeyd etmək,
  • bloku Gutenberg-in işlədiyi React çərçivəsində qeydiyyata alır.

İndex.php faylı blokun və redaktorun enqueue aktivlərini ehtiva edir.

  • Əvvəlcə add_action vasitəsilə xüsusi funksiyaları qeyd edin.
  • Sonra, wp_enqueue_style və wp_enqueue_script funksiyalarından istifadə edərək blok və redaktor üçün JavaScript və CSS fayllarının yolunu sadalayan funksiyaları təyin edin..

Bunu aşağıdakı PHP kodu vasitəsilə ümumiləşdirək:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

funksiya gb_block_01_basic_editor_assets () {
// Skriptlər.
wp_enqueue_script (
‘gb-blok-01-əsas’,
plugins_url (‘block.js’, __FILE__),
serial (‘wp-bloklar’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Üslublar.
wp_enqueue_style (
‘gb-blok-01-əsas-redaktor’,
plugins_url (‘redaktor.css’, __FILE__),
array (‘wp-edit-bloklar’),
filemtime (plugin_dir_path (__FILE__). ‘redaktor.css’)
);
}

Bu əsas redaktor üçün mənbələri müəyyənləşdirir. Blok üçün yalnız CSS faylı lazımdır, bu da wp_enqueue_style funksiyası ilə təyin olunur.

Block.js faylı Gutenberg redaktorundakı blokun xüsusiyyətlərini təsvir edir. Aşağıdakı atributları və xüsusiyyətləri müəyyənləşdiririk:

  • başlıq – Blokun adı
  • icon – Blok üçün göstəriləcək bir simge; hər hansı bir nişanı seçə bilərsiniz bu dashicons toplusu
  • kateqoriya – Blokun mənsub olduğu qrup. Bloklar qruplarına misaldır "ümumi," "formatlaşdırma," "yerləşdirmək."
  • edit – DOM elementini qaytaran JavaScript funksiyası. Xüsusi bir paraqraf DOM elementini yaratmaq üçün wp.element.createElement funksiyasından istifadə edirik, p, orada xüsusi mətn yazılmışdır. Gutenberg, bir istifadəçi bloku redaktordan tıkladığında bu mülkü istifadə edir.

(funksiya () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
başlıq: __ (‘GB Basic’, ‘GB’),
simge: ‘qalxan-alt’,
kateqoriya: ‘ümumi’,

redaktə: funksiya (rekvizitlər) {
wp.element.createElement qayıt (
‘p’,
{className: props.className},
‘Salam Dünya! – redaktordan (01 Əsas Blok). ‘
);
},

});
}) ();

Eynilə, blok ön tərəfdən seçildiyi zaman istifadə edilən bir əmanət yarada bilərsiniz.

Yuxarıdakı kodda p elementinin sinif adını, prop.className ilə müəyyənləşdirdik, bu da wp-blokdan başlayaraq blok adı ilə başlayan sinif adını yaradacaqdır. Bu Gutenberg təliminin növbəti hissəsində bu sinfin üslublarını müəyyənləşdiririk.

4. Blokun özəlləşdirilməsi

Əvvəlki hissədə müzakirə edildiyi kimi, bu təlimatdakı növbəti addım blok elementlərinin xüsusiyyətlərini müəyyənləşdirməkdir. Bir fon rəngini, mətn rəngini və haşiyəsini təyin edək.

.wp-block-gb-basic-01 {
rəng: # 000;
fon: mistyrose;
haşiyə: 0.2rem bərk qırmızı;
}

CSS sənədlərinin yerində, siz də SCSS faylları əlavə edə və Node ilə tərtib edə bilərsiniz. Bundan əlavə, burada Gutenberg elementlərinin üslubu üzrə bir dərslik CSS tövsiyələrindən.

İlk Gutenberg dərslərinizin nəticələri

Nəhayət, yaratdığımız bloku sınamağa hazırıq. Gutenberg plagini işə salınsa, başına keçin + simge və yeni blokun orada olub olmadığını yoxlayın.

yeni Gutenberg bloku

Bundan sonra, bloku klikləsəniz, yuxarıdan gələn mesajın arxa rəngi və CSS faylından bir haşiyə ilə göründüyünü görəcəksiniz:

fəaliyyətdə blok

Nəticə

İlk Gutenberg dərslərinizin sonuna gəlirik. Ümid edirəm bu faydalı oldu. Düzdür, burada qurduğumuz çox mürəkkəb deyil, ancaq Gutenberg ilə işləyərkən əsas strukturlar və növbəti plaginlərinizi necə planlaşdırmağınız barədə fikir verməlidir..

Əvvəlcə Gutenberg inkişaf mühitinin qurulması üçün addımları müzakirə etdik. Sonra, daha da inkişafa kömək etmək üçün bir qazan plitəsi plagini təqdim etdik. Sonra, müzakirə mərkəzi yeni blokun qeydiyyatı və tərtibində müxtəlif addımlara keçdi.

Ümid edirəm ki, bu Gutenberg təlimatı ilk Gutenberg plagininizi yaratmağınızda sizə kömək etdi!

Hər hansı bir sualınız varsa, aşağıdakı şərhlərdə atəş edin.

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