Eklentinizi Gutenberg’e nasıl ayarlayabilirsiniz: Bölüm 1 (Block API)
“Bir eklentim var,” dedin, “Gutenberg için nasıl hazırlanabilirim?” Hikaye basittir; Gutenberg, WordPress’te bir sonraki büyük sürümde çekirdeğe birleştirilecek yeni bir editör deneyimidir. Bunu takip etmeyen birçok eklenti eski olacaktır. Bu, eklentinizi çok geç olmadan Gutenberg’e ayarlamanızı önemli hale getirir. Kim etkilendi? Editör Post ile ilgili olan hemen hemen tüm eklentiler Gutenberg’den etkilenecektir. Örneğin, eklentiniz Tinymce’ye düğmeler eklerse, editöre kısa bir kod koymak için kötü haber; Bunun sonu olacak.
#WordPress eklentinizi #Gutenberg: Block of Fire için nasıl uyarlayabilirsiniz #TutorialTweet için tıklayın
“Eklentimi Gutenberg’e ayarlamam gerekiyor mu?” Peki Gutenberg için hangi eklentinin güncellenmesi gerekiyor? İşleyen herhangi bir eklenti:
Özel Metabox
Kısa kod
Tinymce Düğmesi
veya herhangi bir editör özelliği
Eklentiniz yukarıdaki kategoriye dahil edilmişse, belki de bir özellik istek sistemi oluşturma zamanıdır, çünkü bazı eklentiler Gutenberg ile çalışmaya devam ederken, Basit Metabox ekleyen bir eklenti gibi, kullanıcılarınız kadar pürüzsüz olmayacaktır. deneyim.
Kısa kod bile eskisi gibi çalışmaya devam edecektir, ancak Gutenberg için tüm kısa kod eklentileri kullanıcı arayüzü bloğunu takip ederken ve kullanıcılar tarafından kullanımı daha kolay olacaktır. Yani evet, kullanıcılar Gutenberg’in deneyimi için yapılan eklentileri tercih edecekler. Ve geride kalanların yerini bir rakip eklentisi alacak. Sadece size bir illüstrasyon vermek için, eklentimizle (A) eski kullanıcının eski editör deneyiminin bir örneği ve daha sonra Gutenberg (B) ‘de görünüyor – eklenti onun için optimize edildi. (A)
(B) Korkma! Eklentinizi Gutenberg için hazır hale getirmenize yardımcı olmak için buradayız. Bu makalede tartışacağımız eklentinizin nasıl çalıştığına bağlı olarak eklentinizi Gutenberg’e entegre etmenin birçok yolu vardır. Önceden bilinmesi gereken şeyler
Gutenberg reaksiyona yazılmıştır. Ve Gutenberg eklentisi JavaScript’te kodlanmıştır, bu da sadece PHP’de kod yapan geliştiriciler için kaba bir geçiş olabilir. Gutenberg için eklenti yapmak için React hakkında bilgiye sahip olmanıza gerek olmasa da, JavaScript hakkında bazı temel anlayışa ihtiyacınız var. Daha önce React ve JSX’te çalıştıysanız, aynı neden sizin için geçerli olacaktır.
Gutenberg için yeterli resmi belge olmamasına rağmen, GitHub deposu geliştiriciler için çok değerli bilgilere sahiptir. Gutenberg’in gelişimini derinlemesine öğrenmek istiyorsanız, Github Gutenberg deposunda olan her şeye gözlerinizi açmaya devam etmelisiniz, çünkü bu proje çok hızlı hareket eder ve her şey her gün değişir.
Yukarı git
Eklentinizi Gutenberg API’sına nasıl uyarlanır Gutenberg, Block API, API kısa kodu ve daha fazlası gibi editörleri genişletmek için birçok yol sağlar. Kullanılacak ateşin yaptığımız eklenti türüne bağlıdır. Eklentiniz basit bir kısa kod eklentisiyse, yangın bloğu düzenleyici için güzel bir blok oluşturmak için kullanılabilir. Ancak eklentiniz bloğun yeterli olmadığı karmaşık bir metabox kullanıyorsa, yangın kenar çubuğu kullanabiliriz. Buna ek olarak, Nodejs, NPM, Web Pack ve ESNEXT gibi bir dizi modern JavaScript geliştirme araç kullanacağız. Size örnek bir dosya vereceğiz, bu nedenle geliştirme ortamınızı hazırlama konusunda endişelenmenize gerek yok. Bu yazıda, eklentinizi Block API’sını kullanarak Gutenberg ile nasıl uyumlu hale getireceğinizi göreceğiz. Gerekirse İkinci Bölümde diğer yöntemleri (Kenar Çubuğu API, Yayın Paneli, Durum Çubuğu ve Benzer API) gireceğiz.
Bu GitHub deposunda belirtilen tüm örnekleri bulabilirsiniz.
Yukarı git
Gutenberg’in Gutenberg için gelişmesi için geliştirme ortamı, NPM, Webpack, Babel ve JSX gibi birçok araç hazırlamanızı gerektirir. Çok zaman ve iş gerektiriyor, bu yüzden çevreyi sizin için hazırladık. Gutenberg Bolarplate, minimum ayar ve Gutenberg’in gelişimine sahip bir eklentidir. Bu blok ve kenar çubuğu örneği içerir. Bunu özel bloğunuza genişletmek için kullanabilirsiniz.
Gutenberg Boilerplate’i/WP-Content/Eklentileri/You Depository/Siz olarak klonlayabilir ve geliştirebilir ve geliştirme ortamınız olarak kullanabilirsiniz.
Bundan sonra, başlamak için motorunuza Nodejs takmanız gerekir. Gutenberg Bolarplate klasörüne gidin ve bundan sonra NPM yüklemesini çalıştırın, geliştirme işlemi sırasında kullanacağınız üç komutu bilmeniz gerekir: NPM Yükleme – Projeyi klonladığınızda proje bağımlılıklarını yükleyin. NPM Run Dev – Geliştirme işlemi sırasında kod derlemesi. Bunu bir kez çalıştırmanız gerekiyor ve bu değişiklikleri denetlemeye devam edecek.
NPM Run Build – Geliştirme işlemi tamamlandıktan sonra optimize edilen yapı için kod derlemesi.
Yukarı git
Blok blok blok Gutenberg’in temel unsurudur, blok tabanlı bir editör oldu. Block API, Gutenberg için bir blok yapmanızı sağlar. Temel HTML, kısa kodlar oluşturabilen veya hatta dinamik blokları görüntüleyebilecek bloklar oluşturabilirsiniz, örneğin en son yayınınız.
Proses Örneğimizdeki eklenti temelli, Gutenberg bloğuna tweet yapmak için kısa bir kod tıklaması kabul edeceğiz. Kısa Kod Bu tweet için tıklayın Metninizle bir tweet kutusu oluşturun ve metni tweetlemek için düğme. Bunun gibi:
Kısa kodumuz şuna benziyor: [ClickTotweet Tweet = “Görüntülenecek metin” Tweetcent = “Tweetlenecek metin” button = “tweet” tema = “Tıklamaya tıklayın”] Kısa kodumuzda dört parametre var:
Tweet: Sitenizde görünen metin.
TweetSent: Twitter’a giren metin. Düğme: Tweet düğmesi metni.
Tema: Kutunun teması olarak tweet’e tıklayın veya tweet’e tıklayın.
Eklentiyi Block API ile Gutenberg’e uyarlamak Gutenberg ile yapmanın iki yolu vardır, ister HTML’yi ön uca oluşturabiliriz veya kısa kodu ön uca oluşturmak için Gutenberg bloğunu kullanabiliriz. Bu makale için sonuncuyu yapacağız. Tüm kodlar GitHub’daki Hello Gutenberg eklenti deposunda mevcuttur. Eylem eklentilerini görmek veya kodu değiştirmek için depoları klonlayabilirsiniz. Komut dosyası/kuyruk ilk Gutenberg için, enqueue_block_assesset kullanarak komut dosyasını ve stili Gutenberg editörüne sıralamamız gerekiyor:
/**
* Enqueue Front End ve JavaScript ve CSS Editör
*/
Hello_gutenberg_scripts () işlevi {
$ blockpath = ‘/dist/block.js’;
$ StylePath = ‘/dist/block.css’;
// JS Block Dosyaları Bloğu Enqueue
wp_enqueue_script (
‘Hello-Gutenberg-Blok-JS’,
Plugins_url ($ blokpati, __file__),
[‘WP-I18N’, ‘WP-Blocks’, ‘WP-editör’, ‘WP-Components’],
Filemtime (Plugin_dir_Path (__ dosya__). $ Blockpath)
);
// ön uç ve blok kuvvet editörü enqueue
wp_enqueue_style (
‘Halo-Gutenberg-Blok-CSS’,
plugins_url ($ stylepath, __file__),
”,
Filemtime (Plugin_dir_path (__ dosya__). $ Stylekath)
);
}
// Komut dosyasının işlevini blok düzenleyiciyle ilişkilendirin
Add_action (‘enqueue_block_asses’, ‘hello_gutenberg_scripts’);
Komut dosyamıza bloğumuzda kullanacağımız dört bağımlılık ekledik. Önce bu bağımlılıkları öğrenelim:
WP-I18N, Gutenberg’in __ () gibi uluslararasılaşma versiyonunun bir fonksiyonudur. WP-blokları, bloğunuzu kaydeden RegisterBlockType kayıt işlevleri için kullanılır. Bloklarımızdaki çeşitli bileşenler için WP-editör komut dosyasını ve WP-bileşenlerini kullanıyoruz. Artık varlıklarınızı beklediğimize göre, bloklarımızı /src/block.js dosyalarında yazmaya başlayabiliriz. Gutenberg Boilerplate kullanıyorsanız, Block.js dosyanız Gutenberg için bir eklenti oluşturmak için kullanabileceğiniz temel bir blok yapısına sahip olmalıdır:/**
* Dahili blok kütüphanesi
*/
const {__} = wp.i18n;
const {registerBlockType} = wp.blocks;
/**
* Kayıt bloğunu
*/
Varsayılan RegisterBlockType (‘Gutenberg-Boilerplate/Block’, {
// Başlık Blok
Başlık: __ (‘Gutenberg Bolarplate’),
// Blok Açıklama
Açıklama: __ (‘Örnek blok.’),,
// blok kategorisi
Kategori: ‘Genel’,
// Blok simgesi
Simge: ‘Yönetici sitesi’,
// Anahtar kelime bloğu
Anahtar Kelimeler: [
__ (‘Basmakalıp’),
__( ‘Selam Dünya’ ),
__( ‘Örnek’ ),
],
Öznitellikler: {
},
// Düzenle arayüzünü tanımlayın
Düzenleme: sahne => {
dönüş (
{__ (‘halo arka uç’)}
);
},
// ön uç arabirimi tanımlar
Kaydet: sahne => {
dönüş (
{__ (‘Halo ön uç’)}
);
},
});
Kodumuzu gerçek zamanlı olarak derlemeye başlamak için NPM Run Dev çalıştırabilirsiniz.
İlk olarak, yukarıdaki blok için ihtiyacımız olan tüm bileşenleri ve kütüphaneleri içe aktaracağız: /**
* Bağımlılık Bloğu
*/
‘Sınıf Adları’ ndan sınıf adlarını içe aktarın;
/**
* Dahili blok kütüphanesi
*/
const {__} = wp.i18n;
const {registerBlockType} = wp.blocks;
devamlı {
Zengin metin, kontrol kontrolü,
Blok kontrolü,
} = wp.editor;
devamlı {
Panel gövdesi,
Metin alanının kontrolü,
Metin kontrolü,
imza,
Araç çubuğu,
Düğme,
Araç Tanımı,
} = wp.components; Kodumuzda birkaç sınıf kullanmak için NPM kullanarak yüklediğimiz ilk içe aktarma sınıfı adı, çünkü JSX öğelerde pek çok sınıfa izin vermedi. Kullanırken ithal ettiğimiz diğer bileşenleri öğreneceğiz. Özellikleri Belirleyin Şimdi Gutenberg bloğumuz için dört özellik tanımlayacağız, tıpkı kısa kodumuz gibi: {{{
Ciry: {
Tür: ‘Halat’,
},
Tweet gönderildi: {
Tür: ‘Halat’,
},
düğme: {
Tür: ‘Halat’,
Varsayılan: __ (‘tweet’),
},
Tema: {
Tür: ‘Boolean’,
Varsayılan: Yanlış,
},
}, Gördüğünüz gibi, tüm özellikler kısa kodumuzla aynıdır. Tüm öznitelikler, veri türünden Gutenberg’e söyleyen bir tür anahtar türü vardır. Alınan tür olarak dizeleri, sayıları, boolean ve nesneleri kullanabilirsiniz. Bazı özellikler ayrıca varsayılan değerler içerir. Öznitelikler, örneğimizde kullanmayacağımız kaynaklar ve seçmenler gibi başka mülklere de sahip olabilir, ancak burada daha fazla bilgi edinebilirsiniz. Arayüzü Düzenle Şimdi bir ekran olacak blok düzenleme arabirimimizi oluşturacağız – kullanıcılar Gutenberg’deki blokları düzenlerken görecekler.
Temel fikirleri elde etmek için önce sert blok kodlarımızı yapabilir ve kodumuzda aşağıdaki alanı değiştirerek oluşturabiliriz: // Düzenle Arayüzünü tanımlar
Düzenleme: sahne => {
dönüş (
{__ (‘halo arka uç’)}
);
}, Aşağıdaki kodla:
// Düzenle arayüzünü tanımlayın
Düzenleme: props => {back [
balkabağı ve penguenler
<a href = "https://twitter.com/intent/tweet
];
},
Bu size nihai sonucumuzun bir resmini verecektir.Bu şöyle görünecek:
Bloğun ilk öğesi tweet metin alanıdır.Gutenberg başlık bloğuna benzer şekilde düzenlenebilir metin alanlarıyla değiştireceğiz.Sabit kod metnimizi değiştirmek için daha önce içe aktardığımız RichText bileşenini kullanacağız.
<Zengin Metin
format = "String"
FormattingControls = {[]}
Yer tutucu = {__ ('tweet, tweet!')}
Onchange = {onchangetweet}
değer = {props.atttribes.tweet}
RichText bileşenimizin beş argümanı vardır. Biçim bir dize, çünkü ön uçtaki öğeleri görüntülemek için kısa bir kod kullanacağız. Seçmenleri özelliklerimizde kullanmak istiyorsak, format dizidir. RichText, biçimlendirme konut argümanında boş diziye devam ederek devre dışı bıraktığımız cesur ve italik gibi birkaç varsayılan biçimlendirme seçeneğine sahiptir. Placeholder, alanda metin olmadığında bir yer tutucu metindir ve ONCHANGE, olay değişikliği meydana geldiğinde onchangetweet işlevini tetikler. Son olarak, değer daha önce tanımladığımız tweet özniteliklerinden alınacak alan değeri olacaktır. RichText alanımızı tanımladıktan sonra, metin alanımızdaki değer değiştiğinde tetikleyecek bir OnChangeTweet işlevi oluşturmamız gerekir. // Düzenlenen arayüzü tanımlayın: props => {
Const onchangetweet = value => {
props.setatttribes ({tweet: değer});
};
dönüş [
… Diğer Kodlar RichText alanının değerini, Tweet öznitelik değerini güncellemek için destekleri kullanan Onchangetweet işlevine devam ediyoruz. Bloğunuzu kullanırken şimdi Gutenberg’in gücünü göreceksiniz.
Bu inanılmaz değil mi? Blok Müfettiş Gutenberg için bir eklenti yaparken, eklentiniz için her seçenek paneli yaptığınızda tekerlekleri yeniden keşfetmenize gerek yoktur. Gutenberg, engelleme ayarlamalarına izin vermek ve her kullanıcının varsayılan UI modeli ile tutarlı bir deneyime sahip olmasını sağlamak için basitleştirilmiş yollar sunar. RichText bileşenine benzer şekilde, CelppectorControls bileşeni, blok seçildiğinde yan çubuğu ekler. Bunun gibi bir şey:
Müfettiş alanımıza TextAea ve metin giriş alanları eklemek için TextarEControl ve TextControl’i de kullanacağız. İade ifadenize aşağıdaki kodu ekleyeceğiz: !! Sahne seçildi && (
<Control Areatex
Label = {__ ('tweet metin')}
değer = {props.atttribes.tweetSent}
Onchange = {onchangetweetSent}
),
Müfettişin yalnızca blok seçildiğinde göründüğünden emin olmak için destek. RichText’e benzer TextarEControl ve TextControl bileşenleri, değerlere ve yöntemlere sahiptir. Ayrıca yeni değişiklikleri karşılamak için blok ekran kodunuzu değiştirmemiz gerekiyor. Bizim durumumuzda, bloğumuza yalnızca bir düğme metni eklememiz gerekir, çünkü tweet metni bağlantıya eklenecektir, bu nedenle arka ucumuzda görüntülememiz gerekmez. İlk kodumuzdaki köprüleri aşağıdakilerle değiştirebilirsiniz:
{props.atttribes.button}
Daha önce de belirtildiği gibi, kodumuzdan köprüleri siliyoruz çünkü arka uçta görüntülememiz gerekmiyor. Bu, bloğumuzun şöyle görünmesini sağlayacaktır:
Blok müfettişi bloğunuz için güçlü bir araç olabilir. Eklentinizin editör alanı için çok karmaşık bir takip seçeneği varsa, müfettiş alanına koyabilirsiniz. Bir sonraki bölümdeki JavaScript bölümünü tamamlamak için bloğumuza son seçeneği ekleyeceğiz. Blok Araç Çubuğu Blok Araç Çubuğu, bloklarımıza daha fazla seçenek eklemek için kullanabileceğimiz başka bir ön inşa UI bileşenidir. Seçtiğinizde bloğunuzda görünecektir. Örnek: İdeal olarak, blok araç çubuğu, müfettiş ikincil kontrol göndererek bloğunuzun ana kontrolünü içermelidir. Ancak, tartışılabilir ve bloğunuza bağlıdır. Alternatif stil kontrolümüzü barındırmak için blok araç çubuğu alanını kullanacağız. Block Müfettişine benzer şekilde, blok araç çubuğunu bloğumuza eklemek için dönüş ifadesine aşağıdaki kodu eklememiz gerekir:
!! Sahne seçildi && (
<Düğme
İsim sınıfı = {class adı (
{‘aktif’: props.atttribes.theme},
)}
Onclick = {togggletema}
>
),
Bloğumuza araç çubuğu eklemek için BlockControls bileşenlerini ve araç çubuğunu kullanıyoruz. Block Müfettişine benzer şekilde, Props. Kontrolümüz için araç ipucu ve düğme bileşenlerini de kullanıyoruz. Araç ipucu bileşenleri, imleci size daha fazla bağlam sağlamak için kontrol edecek şekilde yönlendirdiğinizde araç ipucu olduğundan emin olmak için düğme bileşeninin etrafına sarılır. Düğme bileşeni, önceki makalede içe aktardığımız ClassNames modülünü kullanır. Kontrolümüze üç sınıf vermek için sınıf sınıflarını kullanıyoruz. Üçüncü sınıf, IS-aktif, yalnızca tema niteliklerimizin değeri doğru olduğunda görünür. Onchange işlevi tema özniteliklerini doğru/false olarak değiştirir. Sonunda, Dashicon bileşeni kontrolümüz için simgeleri görüntülemek için kullanılır. Ayrıca, blok kodumuzu değişimle çalışacak şekilde değiştirmeliyiz. Aşağıdaki satırı değiştirmemiz gerekiyor:
:
Tema özniteliklerinin doğru veya yanlış olup olmadığını kontrol ediyoruz ve sınıfımıza buna göre sınıfımıza ayarlıyoruz. Şimdi bloğunuz şöyle görünecek:
JavaScript’in tarafını Gutenberg bloğumuzdan tamamladık. Dosya kaynak kodunun tamamını burada bulabilirsiniz. Şimdi sunucu tarafı çıkışını işleyerek bloklarımızı tamamlayacağız. Gutenberg sunucu tarafı oluşturma, bloğunuzu ön uçta görüntülemek için sunucu tarafı oluşturmayı kullanmanızı sağlar. Sunucu tarafı oluşturma, kısa kod için bir blok oluşturmamızı sağlar. İlk olarak, null’u aşağıdaki kodla değiştirerek geri yüklemek için kaydetme yöntemimizi yapacağız: // ön uç arabirimini kaydet () {) {{) için tanımlar.
// PHP’de oluşturma
Geri sıfır;
}, Blok türümüzü PHP’ye kaydetmek için Register_Block_Type PHP işlevini kullanacağız:
if (function_exists (‘register_block_type’))) {
// Sunucu tarafı oluşturmayı bir oluşturma çağrısıyla ilişkilendirin
Register_block_type (
‘hello-gutenberg/tweet için tıklama’, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘öznitelik’ => dizi (
‘type’ => ‘String’,
),
‘Tweetsent’ => dizi (
‘type’ => ‘String’,
),
‘düğme’ => dizi (
‘type’ => ‘String’,
‘Varsayılan’ => ‘tweet’,
),
‘Tema’ => dizi (
‘Tip’ => ‘boolean’,
‘Varsayılan’ => false,
),
),
]
);
}
Register_block_type işlevimiz. Önce dizimizin adını, dizginin argümanlarıyla birlikte devam ettirdik. İlk argüman, sunucu tarafı oluşturma için hello_gutenberg_block_callback işlevimizi çağıran render_callback işlevidir. Oluşturma çağrımızdan sonra, oluşturma çağrımızın işlevinde kullandığımız Block.js dosyasına benzer şekilde özniteliklere devam ediyoruz. Oluşturma çağrımızın işlevi şöyle görünüyor: hello_gutenberg_block_callback ($ attr) {
Extract ($ attr);
if (isset ($ tweet)) {
$ tema = ($ tema === true?
$ shortcode_string = ‘[clickTotweet tweet = “%s” tweetcent = “%s” button = “%s” tema = “%s”];
return sprintf ($ Shortcode_String, $ tweet, $ tweetcent, $ button, $ tema);
}
}
Tüm öznitelikleri çıkarırız ve daha sonra bunları kısa kodumuza döndürürüz. Sadece kısa kod eklentilerinizi Gutenberg’e uyarlamak için gereklidir. Bu makalede kullanılan tüm kodları bu Hello-Gutenberg deposunda bulabilirsiniz.
Yukarı git
Bir sonraki bölümde, Fire kenar çubuğu da dahil olmak üzere mevcut eklentileri Gutenberg için uyarlamanın başka yollarını göreceğiz. Daha fazla okuma:
Acemi Geliştiriciler için Gutenberg Eğitimi
Gutenberg bileşeniyle bir “eklenti seçeneği sayfası” oluşturun
Diğer API öğreticimize bakın: Google Haritalar JavaScript API için API alın Gutenberg için eklentinizi nasıl uyarlayacağınız hakkında sorularınız varsa, lütfen yorumlarda sorun!
#WordPress eklentinizi #Gutenberg: Block of Fire için nasıl uyarlayabilirsiniz #Tutorial
Tweet için tıklayın
… WordPress sitenizi hızlandırmak için Flash kursumuza katılmayı unutmayın.Bazı basit iyileştirmelerle, yükleme süresini%50-80’e düşürebilirsiniz:
