Gutenberg editörü için bir blok oluşturun

Bu modülde, Gutenberg editörü için kolay bir şekilde nasıl bir blok yapacağınızı göstereceğiz. Bloğu doğrudan değiştirebileceğiniz dinamik bir kısa kod olarak değerlendirebilirsiniz. Özellikle, bu makalede size bir eklenti olarak metinle bir resim bloğunun nasıl yapılacağını göstereceğiz, böylece bloklar için bir eklenti modülü oluşturabilirsiniz. Başlamadan önce size bu editörden biraz bahsedeceğiz. Gutenberg, WordPress Tinymce editörünü WordPress 5.0’daki varsayılan WordPress editörü olarak değiştiren yeni WordPress blok düzenleyicisi için projenin adıdır. Yeni WordPress editörü bir blok tanıttı ve bloklar şeklinde içerik yapmak için tamamen farklı bir yaklaşım getirdi (bu nedenle ad …). Blok kaydı için Gutenberg’in ana belgelerini burada kontrol edebilirsiniz.
Burada yapacağımız ilk şey, bir ImageWittTblock sınıfına sahip bir PHP dosyası oluşturmaktır ve sınıfta uygun stile sahip yeni bir blok tanımlayacağız. Daha iyi bir kod okuma ve dolayısıyla genellikle istediğimiz şekilde sınıf kullanıyoruz. Bu işlevi Init kancasında dediğiniz sınıf yerine işlevi de kullanabilirsiniz.
‘Blok-Snrip ile Image’,
‘Editor_style’ => ‘Blok-blok-goba editör ile görüntü’,
‘Stil’ => ‘Text-Block-Fretend Style ile Image’,
));
}
}
ImageWittTBlock :: get_instance ();
}
İlk olarak iki belirlenmiş yöntemi __Construct () ve statik get_instance () yöntemi yaptık, bu yöntemi get_instance () ‘nin bu sınıfın yeni bir örneğini yaptığı ve __construct () yöntemini çağırdığı sınıfı başlatmak için kullanıyoruz. __Construct () yönteminde, başlatma sırasında hangi yöntemi arayacağımızı belirleriz ve bizim durumumuzda Register_asasset ve Register_Block. Kayıt varlığı (işlev) yöntemi Gutenberg editöründe ve için kullanılacak CSS ve JavaScript dosyalarını kaydeder. Bu blok öğesi için ön uç sayfası için ön uç sayfası için ön uç sayfası. İlk blok.js, en önemli dosyadır. İçinde tüm mantık bloklarını ve işlevselliği yapacağız. Gutenberg editöründeki engelleme kuvveti ve ön uç sayfası için editör stilini ve ön uç kuvvet komut dosyasını kullanabilirsiniz. Şimdi Block.js dosyasından başlayacağız.
(işlev (blok, editör, bileşen, i18n, element) {
var el = element.CreateElement;
Var registerBlockType = block.registerBlockType;
var richText = editor.richtext;
Var blockControls = editor.blockControls;
var hizalamaToolBar = editor.alignmentToolbar;
var mediaUpload = editor.mediaUpload;
Var inspectorControls = editor.InspectorControls;
var textControl = component.textControl;
RegisterBlockType (‘İlk-Gutenberg-Block/Image-With-Text-Block’, {{
Başlık: i18n .__ (‘Metinli Resim’, ‘Blok-Gutenberg’),
Açıklama: i18n .__ (‘Metin bölümleri ile görüntüleri görüntülemek için özel blok’, ‘Block-gutenberg-pertama-i’),
simge: ‘id’,
Kategori: ‘Genel’,
Öznitellikler: {
Medya Kimliği: {
Numara giriniz’
},
Mediaurl: {
Tür: ‘Halat’,
Kaynak: ‘öznitelik’,
Seçmenler: ‘IMG’, Nitelikler: ‘SRC’
},
Başlık: {
Metin yaz’,
Seçmenler: ‘H3′
},
Metin: {
Metin yaz’,
Seçmenler: ‘P’
},
EKLENTİ: {
Metin yaz’
},
Buttonurl: {
Tür: ‘URL’
},
Hizalama: {
Tür: ‘Halat’,
Varsayılan: ‘Orta’
}
},
Düzenleme: işlev (sahne) {
var öznitelik = props.atttribes;
Var onSelectiAmage = function (medya) {
geri pervaneler.setatributes ({
MediaUrl: Media.Url,
MediaID: Media.id
})
};
dönüş [
EL (BlockControls, {Key: ‘Kontrol’},
El (‘div’, {
ClassName: ‘Bileşenler-Toolbar’
},
El (medya yükleme, {
OnSelect: OnSelectTimage,
Tür: ‘resim’,
Render: işlev (obj) {
geri el (bileşenler.Button, {
ClassName: ‘Bileşenler-Kontrole-Tool-Toolbar__Control’,
Onclick: obj.open
},
EL (‘SVG’, {className: ‘dashicon dashicons-edit’, genişlik: ’20’, yükseklik: ’20’},
EL (‘Yol’, {D: ‘M2.25 1H15.5C.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25h2.25c1.56 19 1 18.44 1 17.75v2.25c1 1.56 1.56 1.56 1.56 1 2.25 1ZM17 17V3H3V14H14ZM10 6C0-1.1-.9-2S-2S-2 .9-2 ​​2 .9 2 2 2-.9 2-2ZM3 5S0-6 3-6V10C0 .55-.45 1 1 -1 1H5C-.55 0-1-.45-1-11-1V8C2 0 3 4 3 4S1-3 3-3 3 2 3 2Z ‘})
));
}
})
),
EL (Tesviye Aletlerinin Masresi, {
Değer: Öznitelikler.
Onchange: function (newalignment) {
Props.setatttribes ({Harmony: newalignment})
}
})
),
EL (MeclismorControls, {Key: ‘Müfettiş’},
el (bileşenler.Panelbody, {
Başlık: i18n .__ (‘Blok İçerik’, ‘Block-Gutenberg Me’),
ClassName: ‘İçeriği Bloket’,
Başlangıç: Doğru
},
El (‘P’, {}, i18n .__ (‘Bloğunuza özel bir meta seçeneği ekleyin’, ‘ilk-gutenberg-blok’), el (metin kontrolü, {
Metin yaz’,
Etiket: i18n .__ (‘Düğme Metni’, ‘Block-Gutenberg-First’),
Değer: öznitelik.Buttontext,
Onchange: function (newButtonxt) {
Props.setatttribes ({buttonxt: newButtonText})
}
}),
El (metin kontrolü, {
Tür: ‘url’,
Etiket: i18n .__ (‘URL düğmesi’, ‘Block-Gutenberg-First’),
Değer: öznitelik.ButtonUrl,
Onchange: function (newButtonUrl) {
Props.setatttribes ({buttonurl: newButtonUrl})
}
})
)
),
El (‘div’, {
ClassName: props.className,
Stil: {textalign: tectribute.alignment}
},
El (‘div’, {
ClassName: ‘Images-Block-i’
},
El (medya yükleme, {
OnSelect: OnSelectTimage,
Tür: ‘resim’,
Değer: öznitelik.mediaid,
Render: işlev (obj) {
geri el (bileşenler.Button, {
ClassName: attribute.mediaId? ‘Image-Button’: ‘Düğme Boşluğu’,
Onclick: obj.open
},
! Attributes.mediaid? i18n .__ (‘resim yükleme’, ‘blok-gutenberg önce bana’): el (‘img’, {src: attribute.mediaurl})
)
}
})
),
El (‘div’, {
ClassName: ‘Blok-i içeriği’
},
El (zengin metin, {
Anahtar: ‘Düzenlenebilir’,
Etiket Adı: ‘H3’,
ClassName: ‘Blok-i başlık’,
Yer tutucu: i18n .__ (‘Başlık Metni’, ‘Blok-Gutenberg-Pertama-i’),
Keepplaceholderonfocus: Doğru,
Değer: Öznitelik. Başlık,
Onchange: işlev (yeni başlık) {
Props.setatttribes ({başlık: newtitle})
}
}),
El (zengin metin, {
Anahtar: ‘Düzenlenebilir’,
Etiket Adı: ‘P’,
ClassName: ‘Blok-sia-metin’,
Yer tutucu: i18n .__ (‘metin’, ‘Block-gutenberg önce ME’), Keepplaceholderfocus: True,
Değer: öznitelik.teeks,
Onchange: işlev (yeni metin) {
Props.setatttribes ({text: newtext})
}
}),
El (‘düğme’, {
ClassName: ‘Block-Button-i’,
Href: attribute.buttonurl
}, attribute.buttontext)
)
)
];
},
Kaydet: işlev (sahne) {
var öznitelik = props.atttribes;
dönüş (
El (‘div’, {
ClassName: props.className,
Stil: {textalign: tectribute.alignment}
},
El (‘div’, {
ClassName: ‘Images-Block-i’
},
El (‘img’, {
Src: tectribute.mediaurl
})
),
El (‘div’, {
ClassName: ‘Blok-i içeriği’
},
el (richtext.concent, {
Etiket Adı: ‘H3’,
ClassName: ‘Blok-i başlık’,
Değer: Öznitelik. Başlık
}),
el (richtext.concent, {
Etiket Adı: ‘P’,
ClassName: ‘Blok-sia-metin’,
Değer: attribute.teeks
}),
El (‘düğme’, {
ClassName: ‘Block-Button-i’,
Href: attribute.buttonurl
}, attribute.buttontext)
)
)
)
}
})
}) (
window.wp.block,
window.wp.editor,
window.wp.components,
window.wp.i18n,
Window.wp.Element
);
Yukarıdaki kodda görebileceğiniz gibi, önce blokları, öğeleri, bileşenleri, editörleri ve uluslararasılaşma bileşenlerini içe aktarırız. WordPress, WP nesneleriyle varsayılan JavaScript pencere nesnesini genişlettiğinden ve nesnenin bloklarımız için yararlı olan ek nesnelere sahip olduğu için bunu yapabiliriz (window.wp.blocks, window.wp.editor, window.wp.components, window.wp. İ18n, pencere .wp.Element). Bloklarımızın yapısını ve bileşenlerini yapmak için kullanacağız.
Ortam yükleme ve düz metin bileşeni, yazarın resmini yüklemeye ve veritabanında saklanacak farklı metin girişleri almaya hizmet eder. Uygun blok seçeneğine sahip özel bir parça oluşturmak için InspectorControls ve TextControl bileşenlerini kullanacağız. Bu dosyadaki ana JavaScript işlevi RegisterBlockType’dir. Bu işlev bir blok kaydetti ve iki parametre aldılar. Birincisi bloğun adı. Bu adı eklentiniz için özel bir ad alanı ile başlatmalısınız. Bu, aynı adı taşıyan diğer bloklarla çatışmayı önlemek içindir. İkincisi, aşağıdaki özelliklere ve işlevlere sahip dizidir: Gutenberg editörüne yeni bir blok eklediğinizde görünecek bloğun başlığı.
Blok simgeleri bağlantı işaretinden alınacak. İsterseniz kendi SVG simgenizi de belirleyebilirsiniz.
Kategoriler – Slug Slug Blok kategorisi bloklar görünecektir. Bazı kategoriler şunlardır: Genel, biçimlendirme, düzen widget ve Sematan.
Anahtar Kelimeler – Dizi dizesi, etiketlere benzer şekilde blokları tasvir eder.
Depolanan veri açıklamaları içeren JavaScript nesneleri.
Düzenle – Gutenberg editöründeki bloklar için arayüzler sağlayan işlevler.
Kaydet – bloğun ön uçta nasıl oluşturulacağını açıklayan işlevler.
Gutenberg, benzer sözdizimi kullanılarak Gutenberg için yaptığımız reaksiyon ve bloklarla inşa edildi. Bloğun gelişimine başlamadan önce aşağıdaki şeyleri bilmek yararlıdır:
HTML sınıfı, React’teki gibi className ile değiştirilir.
Düzenleme ve Kaydet yöntemi, JavaScript XML anlamına gelen JSX’i geri yükler. Merak ediyorsanız, HTML etiketlerini ve içinde düz metin ve RichText gibi diğer bileşenleri kullanamadığınız sürece, JSX tam olarak HTML gibi bir sözdizimidir. SetAttributes yöntemleri SetState React’e benzer şekilde çalışır. Yaptığı şey, SetAttributes dediğinizde, güncellenmiş bloktaki veriler ve editördeki blok yenilenmiştir.
Block, React ile aynı işlevleri düzenleme ve kaydetme öğretim yardımcıları kullanır. Props nesneleri öznitelik nesneleri, yerleşim işlevleri ve diğer birçok veri içerir.
Artık Gutenberg’in farklı bölümlerini anladığımıza göre, blok seçeneklerimizi yapmaya devam edebiliriz, parametreler özniteliklerdir. Bizim durumumuzda, ek parametreler almak için her seçeneği görebileceğiniz için çeşitli seçenekler (MediaID, Mediaurl, Başlık, Metin, Düğme Metni, URL düğmesi ve seviye alma) yaptık.
Mediaurl: {
Tür: ‘Halat’,
Kaynak: ‘öznitelik’,
Seçmen: ‘IMG’,
Nitelikler: ‘SRC’
},
Bu kod, editörün işaretleme bloğunda bulunan görüntüden SRC özniteliğini çıkaracağını söyler. Başka bir anlamda, HTML etiketi SRC özniteliğinin bir dize değeri ile doldurulacağı bir IMG olacaktır. Burada kullanabileceğiniz birçok kombinasyon ve seçenek var. Ayrıca, bunun için her zaman ana belgeleri kontrol edebilirsiniz. Şimdi tüm öznitelikleri tanımladık, düzenleme işlevinin mantığını yapmaya devam edeceğiz. Düzenleme işlevi, editör bağlamında bloğunuzun yapısını açıklar. Bu, blok kullanıldığında editörün ne oluşturulacağını temsil eder. Nesnenin argümanı aracılığıyla aşağıdaki özelliği alma işlevi. İlk olarak tüm özellikleri yerel değişkenlerin özelliklerinde saklayacağız. Seçenek değerini değiştirmek için bu değişkeni kullanacağız. Ardından, ek bir değişken oluşturacağız ve bu değişken, kullanıcı Gutenberg düzenleyicisi aracılığıyla resim yüklediğinde görüntüler için ortam URL özniteliklerini ve kimliklerini ayarlayacak bir işlev olacaktır. Dönüş bölümünde, burada görebileceğiniz gibi tüm HTML yapısını (işaretleme) tanımlayacağız: el (‘div’, {{

ClassName: props.className,
Stil: {textalign: tectribute.alignment}
},
El (‘div’, {
ClassName: ‘Images-Block-i’
},
El (medya yükleme, {
OnSelect: OnSelectTimage,
Tür: ‘resim’,
Değer: öznitelik.mediaid,
Render: işlev (obj) {
geri el (bileşenler.Button, {
ClassName: attribute.mediaId? ‘Image-Button’: ‘Düğme Boşluğu’,
Onclick: obj.open
},
! Attributes.mediaid? i18n .__ (‘resim yükleme’, ‘blok-gutenberg önce bana’): el (‘img’, {src: attribute.mediaurl})
)
}
})
),
El (‘div’, {
ClassName: ‘Blok-i içeriği’
},
El (zengin metin, {
Anahtar: ‘Düzenlenebilir’,
Etiket Adı: ‘H3’,
ClassName: ‘Blok-i başlık’,
Yer tutucu: i18n .__ (‘Başlık Metni’, ‘Blok-Gutenberg-Pertama-i’),
Keepplaceholderonfocus: Doğru,
Değer: Öznitelik. Başlık,
Onchange: işlev (yeni başlık) {
Props.setatttribes ({başlık: newtitle})
}
}),
El (zengin metin, {
Anahtar: ‘Düzenlenebilir’,
Etiket Adı: ‘P’,
ClassName: ‘Blok-sia-metin’,
Yer tutucu: i18n .__ (‘Metin’, ‘Block-gutenberg önce’),
Keepplaceholderonfocus: Doğru,
Değer: öznitelik.teeks,
Onchange: işlev (yeni metin) {
Props.setatttribes ({text: newtext})
}
}),
El (‘düğme’, {
ClassName: ‘Block-Button-i’,
Href: attribute.buttonurl
}, attribute.buttontext)
)
)
Bu durumda metin-blok-blok-blok olan className ile bir div öğesi yapıyoruz. Değilse, bu WP-Block- artı blok adınız. Burası aynı zamanda hizalama için bir CSS hattı ayarladık. Sonra çocuğun unsurları olarak iki ek div öğesi ekleyeceğiz. Burada, ilk div öğesinde benim blok imajlı bir sınıf adı vardır. Bu öğede, kullanıcı tarafından yüklenen resimleri editör aracılığıyla yazdıracağız.
Burada öğeyi bir medya yüklemesine ayarladık. Bu öğenin birkaç niteliği vardır (onSelect, Tip, Değer ve Oluşturma). Birincisi, medya nesnesini OnSelect değişkenin işlevine devam edeceğimiz ve bu işlevin medya kimliği ve medya URL’si ile yeni bir nesneyi geri yükleyeceği anlamına gelir. İkincisi, öğenin bir görüntü olduğunu ve üçüncüsü, yüklediğimiz medya nesnelerinden medya kimliklerini toplar ve oluşturma işlevi, etiketin yükleme düğmesi olacağı ek HTML etiketleri yazdırır. İkinci Child’ın Div öğesi, başlık metnini, içerik metnini ve düğmeleri ayarlayabileceğiniz içerik bilgileri içindir. Birinci ve ikinci öğeler RichText ve düzenlenebilir öznitelik kilitleriyle belirlenir. Bu, metni doğrudan değiştirebileceğiniz anlamına gelir, bundan sorumlu işlev onchange. Bu işlev, yazılı metnin yeni bir değerini alır ve blok öğesinde değiştirir. Yararlı olabilecek diğer özellikler yer tutucu ve keepplaceholderfocus’tur. Bu öznitelik, giriş düzlemindeki bir yer tutucusuna benzer ve kullanıcıların nerede düzenleneceğini bilecek şekilde etiketi belirlemek için kullanılır. Üçüncü öğe, düğme özniteliğini (URL ve metin) özel bir blok seçeneğinden ayarladığımız HTML düğmesi etiketidir. Sorumlu parçalar:
EL (MeclismorControls, {Key: ‘Müfettiş’},
el (bileşenler.Panelbody, {
Başlık: i18n .__ (‘Blok İçerik’, ‘Block-Gutenberg Me’),
ClassName: ‘İçeriği Bloket’,
Başlangıç: Doğru
},
EL (‘P’, {}, i18n .__ (‘Bloğunuza özel bir meta seçeneği ekleyin’, ‘ilk-Gutenberg-Block’)),
El (metin kontrolü, {
Metin yaz’,
Etiket: i18n .__ (‘Düğme Metni’, ‘Block-Gutenberg-First’), Değer: Attribute.Buttontext,
Onchange: function (newButtonxt) {
Props.setatttribes ({buttonxt: newButtonText})
}
}),
El (metin kontrolü, {
Tür: ‘url’,
Etiket: i18n .__ (‘URL düğmesi’, ‘Block-Gutenberg-First’),
Değer: öznitelik.ButtonUrl,
Onchange: function (newButtonUrl) {
Props.setatttribes ({buttonurl: newButtonUrl})
}
})
)
)
Meta kutusunun bir parçası olarak düşünebileceğiniz, ancak sadece Gutenberg editörü için MeclppectorControls öğesini yapıyoruz. İçinde, bölümün, açıklamanın ve seçeneğin başlıklarını tanımlıyoruz. MeclisctorControls’un bazı bölümlerini yapmak istiyorsanız, bu öznitelik sizin için yararlı olacaktır: InitialOpen. Bununla, hangi parçaların varsayılanın ilk açıklığı olacağını belirleyebilirsiniz. Bölümde bir seçenek oluşturmak için, örneğin bir TextControl türüne bir öğe yapmanız gerekir (burada mevcut tüm alan türlerini bulabilirsiniz). Bizim durumumuzda, iki seçenek yaptık – düğme metni ve düğme URL’si. Bu seçeneği ek içerik oluşturmak için kullanacağız, bu durumda içerik metninin altındaki düğme öğesi. Gutenberg editöründeki sonuçlar şöyle görünecek:
Tasarruf işlevi, farklı özelliklerin nihai işaretlemeye nasıl birleştirilmesi gerektiğini tanımlar ve daha sonra Gutenberg tarafından Post_Concent’e dağıtılır. Çoğu blok için, mevduat getirilerinin değeri, bloğun sitede nasıl göründüğünü temsil eden bir WordPress öğesi şeklinde olmalıdır. Dinamik bloklar için, depolamanın dönüş değeri, yalnızca bloğu uygulayan eklenti devre dışı bırakıldıysa görüntülenecek olan blok içeriğinden önbelleğin bir kopyasını temsil edebilir. Veya, dinamik bloklar için sevkiyat içeriğinde işaretlemeyi depolamamak için null (boş) değerini döndürün, bunun, blok sitenin önünde görüntülendiğinde her zaman hesaplanmasını geciktirmek yerine.
Bu dosyada bu blok öğesi için CSS kuvvetini ayarlayacağız ve bu stil ön uç ve Gutenberg Editör sayfasına uygulanacaktır.
/* ============================================= ==== ===========================
Blok Stili – Başlat
============================================== ===== ==================== */
.WP-Block-Image-Text-Block {
Pozisyon: göreceli;
Ekran: Hat bloklarında;
Dikey-High: Yukarıda;
Genişlik:%100;