Eklentinizi Gutenberg ile Nasıl Uyumlu Yapabilirsiniz: Bölüm 2 (Kenar Çubuğu API)

Eklentinizi Gutenberg ile uyumlu hale getirmeye çalışırsanız, eklentinizin ne yaptığına ve eklentinin özelliklerini kullanıcıya nasıl sağladığına güvenebileceğiniz/güvenmeniz gereken birkaç yolunuz vardır. Bu mini-seri’nin ilk bölümünde, Gutenberg uyumluluğu açısından en çok ihtiyaç duyulan eklentileri Gutenberg Block API-APIS’i keşfediyoruz. Bu kez, Gutenberg Bulmaca’nın diğer kısımlarını-Gutenberg tarafının ateşini keşfedeceğiz. Sadece aynı sayfada olduğumuzdan emin olmak için kısa bir açıklama:
Gutenberg’den ateş ateşi çok geniştir ve neredeyse her şeyi bir blok olarak inşa etmenizi sağlar, ancak bazen yeterli değildir.
Yangın kenar çubuğu ise eklentinin, işlevlerini blok dışına alabilecekleri kenar çubuğunu kaydetmesine izin verir. Kenar çubuğu Blok Müfettişine benzer.

#Gutenberg ile uyumlu bir #WordPress eklentisi nasıl yapılır – #API Kenar Çubuğu
Tweet için tıklayın
Örneğin, Gutenberg yan bıçakları Yoast SEO tarafından gösterildiği gibi kullanılır:

API kenar çubuğunu nerede kullanabilirsiniz? Son zamanlarda Plugin-WP ürünümüzü Gutenberg için hazır hale getirmek için çalıştık. WP Ürün İncelemeleri Gönderiye inceleme verileri eklemek için Meta alanını kullanır ve uyumluluk çekilmesinin çeşitli nedenleriyle bloklara dönüştüremeyiz. Bu nedenle bir kenar çubuğu ateşi kullanıyoruz.
Bu, klasik düzenleyicinin eklenti bloğudur:

WP ürün incelemesini Gutenberg editörüne entegre etme şeklimiz budur:

Kullanıcı, yayının yan çubuk anahtarı ile bir inceleme olduğunu gösterdiğinde, inceleme kutuları hakkında her şeyi yan çubuk seçeneklerinden yapılandırabilecektir.
WP ürün incelemesi, yangın kenar çubuğunun yararlı olabileceği bir örnektir. Bir başka harika örnek, kullanıcıların yan çubuğu kullanarak Fllash ve Giphy’den stok görüntülerine girmesine izin veren Drop It eklentisidir. Bu yazıda, benzer bir şey uygulama ve eklentinizi kenar çubuğu API’sı üzerinden Gutenberg ile uyumlu hale getirme sürecinde size rehberlik edeceğim.
Meta kutusu varsayılan olarak Gutenberg için biraz hazırdır, ancak meta kutusuyla başlayalım. Editör ekranındaki kullanıcılara bazı işlevsellik sağlamak için basit bir meta kutusu kullanan bir eklenti alalım.
Bu, klasik editörde aşağıdaki gibi görülebilir:
Bunun gibi bir meta kutusu oluşturmak için aşağıdaki kodu kullanabilirsiniz – bu kod Hello Gutenberg deposunda da mevcuttur:

/**
* Halo Gutenbert meta kutusunun listesi
*/
Hello_gutenberg_add_meta_box () işlevi ()
Add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Halo meta gutenberg kutusu’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
Add_action (‘add_meta_kotak’, ‘hello_gutenberg_bolus_meta_kotak’);
/**
* Metabox Halo Gutenberg’in dönüş çağrısı
*/
Hello_gutenberg_metabox_callback işlevi ($ post) {
$ value = get_post_meta ($ post-> id, ‘_hello_gutenberg_field’, true);
?>
<? Php _e ('adınız nedir?', 'Hello-gutenberg'?
<giriş türü = "metin" name = "hello_gutenberg_field" değer = "” />
false,
));
}
Add_action (‘add_meta_kotak’, ‘hello_gutenberg_bolus_meta_kotak’);
Gutenberg El Kitabı, Porting PHP meta kutusunu Gutenberg’e (burada) nasıl ele alabileceğiniz hakkında daha fazla ayrıntıya sahiptir.
Bu, eski PHP meta kutumuzun Gutenberg’de tekrar görünmemesini sağlayacaktır. Şimdi meta alanımızı WordPress Rest API’sına ekleyerek Gutenberg için hazır hale getirmemiz gerekiyor. Meta alanını yangın istirahati ile kaydetmek için aşağıdaki kodu ekleyebilirsiniz: /**
* Yangını dinlendirmek için merhaba gutenberg meta alanını kaydedin
*/
Hello_gutenberg_register_meta () işlevi ()
List_meta (
‘Post’, ‘_hello_gutenberg_field’, çizgi (
‘type’ => ‘String’,
‘Bekar’ => doğru,
‘show_in_rest’ => doğru,
)
);
}
Add_action (‘init’, ‘hello_gutenberg_register_meta’); Bu, API REST’deki Meta nesnesine _hello_gutenberg_field ekleyecektir. Bu işlev yalnızca API REST’de değerini görüntüleme görevini yerine getirecektir. Şimdi de dinlenme ateşi kullandığımız meta alanını güncellemek için bir yöntem eklememiz gerekiyor. Aşağıdaki kod, özel yolumuzu WordPress Rest API’ya ekleyecektir, yani/Hello-Gutenberg/V1/Update-Meta/:
/**
* Yangını dinlendirmek için merhaba gutenberg Metabox’u kaydedin
*/
Hello_gutenberg_api_posts_meta_field () işlevi {)
list_rest_route (
‘Halo-Gutenberg/V1’, ‘/Update-Meta’, dizi (
‘Yöntem’ => ‘yazı’,
‘dönüş çağrısı’ => ‘hello_gutenberg_update_pangilan back’,
‘Args’ => dizi (
‘id’ => dizi (
‘sendize_callback’ => ‘ab ”
),
),
)
);
}
Add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);
/**
* Hello Gutenberg REST API Gutenberg için geri arama
*/
Hello_gutenberg_update_callback işlevi ($ data) {
return update_post_meta ($ data [‘id’], $ data [‘tuş’], $ data [‘değer’]);
}
Bu restoran dinlenme rotası, Meta alanımızı Gutenberg Yan Bar’dan değiştirmek için kullanılacaktır. WordPress Rest API ve buradan özel bir rota nasıl kaydedileceği hakkında daha fazla bilgi edinebilirsiniz.
Aynı şekilde, WordPress API dinlenmesinin ne olduğunu ve nasıl başlayacağınızı bilmek istiyorsanız, blog yazımızı okuyabilirsiniz: WordPress Rest API: Nedir ve nasıl kullanmaya başlayacağınız.
Yukarı git
Gutenberg’e yan bıçakları eklemek Gutenberg Boilerplate’den kenar çubuğu kodu ile başlayalım:
/**
* Dahili blok kütüphanesi
*/
const {__} = wp.i18n; const {fragment} = wp.Element;
devamlı {
eklenti yan bıçakları,
Pluginbilah bir aynadır,
} = wp.ititpost;
const {registerPlugin} = wp.plugins;
const bileşeni = () => (

{__ (‘Gutenberg Bolarplate’)}

{__ (‘Merhaba dünya!’)}

);
RegisterPlugin (‘Gutenberg-Boilerplate’, {
Simge: ‘Yönetici sitesi’,
Render: Bileşenler,
});
Bu, Gutenberg editörüne çok basit bir yan çubuk ekleyecektir. Bunu bir başlangıç noktası olarak alacağız ve projemizi üzerinde oluşturacağız.
Örnek kodu Gutenberg Boilerplate depomuzdan geliyor ve sonuç olarak “Gutenberg Bolarplate” in tüm görünümünü “Hello Gutenberg” ile değiştirmemiz gerekiyor. Kenar çubuğumuz birçok bileşeni içe aktarırken kullanılan bileşenler, daha fazlasına ihtiyacımız olacak. Kodun üst kısmını aşağıdakilerle değiştirebilirsiniz:
/**
* Dahili blok kütüphanesi
*/
const {__} = wp.i18n;

devamlı {
eklenti yan bıçakları,
Pluginbilah aynı
} = wp.ititpost;
devamlı {
Panel gövdesi,
Metin kontrolü
} = wp.components;
devamlı {
Bileşen,
Fraksiyon
} = wp.emenment;
const {seçim ile} = wp.data;
const {registerPlugin} = wp.plugins; İthal ettiğimiz tüm bileşenler hakkında hızlı bir şekilde öğrenelim.
Önceki makalede tartışıldığı gibi, metnimizi tercüme etmek için __ bileşeni kullanılır. Plugintidebar bileşenleri kenar çubuğumuzu Gutenberg’e eklemek için kullanılır.
Gutenberg menüsüne, yan çubuğun görünürlüğünü değiştiren düğmeler eklemek için PluginIdBarmoremenuitem kullanılır.
Panel Bileşenleri kenar çubuğumuza paneller eklemek için kullanılır.
TextControl giriş alanımız için kullanılır.
Bundan sonra, bileşeni ve fragman bileşenlerini içe aktarırız. Her ikisi de kenar çubuğumuzda kullandığımız reaksiyon bileşenleridir.
Parça bileşeni, DOM’a ek düğümler eklemeden türev listesini gruplandırmak için kullanılır. JSX, birden fazla ana düğüme sahip olmamıza izin vermediği için kodumuzda parça bileşenini kullanmamız gerekiyor.
WithSelect yüksek seviyeli bir bileşendir. Yüksek seviyeli bir bileşenin ne olduğunu öğrenmek için bu belgeyi okumanızı öneririm.
Ve son olarak, önceki makalede kullandığımız RegisterBlockType’a benzer olan RegistersPlugin’i içe aktarıyoruz. Bir bloğu kaydetmek yerine, RegisterLlugin eklentinizi kaydetti.
Şimdiye kadar kontrol eklemek kenar çubuğumuz sadece bir bileşen işlevidir, ancak React Life döngüsü yöntemini kullanacağımız için, onu bir reaksiyon bileşenine dönüştüreceğiz, örneğin:
Sınıf Hello_gutenberg Genişleyen Bileşenler {
Render () {
dönüş (

{__ (‘Halo Gutenberg’)}

{__ (‘Merhaba dünya!’)}

)
}
}
RegisterPlugin (‘Halo-Gutenberg’, {
Simge: ‘Yönetici sitesi’,
Render: hello_gutenberg,
});
Bu, yan bıçaklarınızı sıradan metinle işlev görür. Şimdi alanımızı yan çubuğa ekleyelim. Bileşenlerimizi şöyle göstermelidir:
Sınıf Hello_gutenberg Genişleyen Bileşenler {
Render () {
dönüş (

{__ (‘Halo Gutenberg’)}

)
}
}
Bu, şu anda hiçbir şey yapmayacak olan yan tarafa basit bir giriş düzlemi ekleyecektir. Şimdi kalan iki görevimiz var:
Meta Alan Değerimizi Göster.
Yan çubuktan meta alan değerini güncellemeye izin verin.
Meta değerini görüntüle Meta verileri almak için wp.apifetch kullanacağız. Apifetch, bir restoran talebi yapmamızı sağlayan bir kamu hizmeti kütüphanesidir. React bileşen yapıcısımızda Apifetch’i şöyle kullanacağız:
Sınıf Hello_gutenberg Genişleyen Bileşenler {
yapıcı () {
süper (… argüman);
this.status = {
Anahtar: ‘_hello_gutenberg_field’,

Puan: ”,
}
wp.apifetch ({yol: `/wp/v2/direkler/$ {this.props.postid}`, yöntem: ‘al’).
(veri) => {
this.setstate ({
Değer: data.meta._hello_gutenberg_field
});
verileri geri yükle;
},
(yanlış) => {
yanlış geri;}
);
}
Render () {
dönüş (

{__ (‘Halo Gutenberg’)}

)
}
}
İlk olarak, temel olarak meta alanımızın anahtarı ve değeri olan başlangıç durumu tanımladık. Bundan sonra, mevcut yayınımızdan veri almak için Apifetch’i kullandık. Geçerli posta kimliğimize $ {this.props.postid} değişkeniyle devam ediyoruz. Bu noktaya daha sonra tekrar döneceğiz. Veriler alındıktan sonra durumumuzu restoranımızın değeri ile güncelliyoruz. Şimdi PostID değişkenine dönelim. Şu anda mevcut yayınımızın kimliğini bilmiyoruz, bu yüzden bunun gibi yüksek seviyeli WithSelect bileşenleri kullanıyoruz:
Const hoc = withSelect ((seç) => {
const {getCurrentPostid} = SEÇ (‘Core/Editor’);
dönüş {
Postid: getCurrentPostid (),
};
}) (Hello_gutenberg);
RegisterPlugin (‘Halo-Gutenberg’, {
Simge: ‘Yönetici sitesi’,
Render: hoc,
});
Bu, PostID değişkeni olarak mevcut gönderme kimliğimize devam edecektir. Artık eski yayınları çalıştırabilirsiniz ve Gutenberg yan çubuğu meta alanınızın değerini görüntüleyecektir. Meta değerini güncelleyin Şimdi kenar çubuğumuzun meta değeri güncellemesine izin vermemiz gerekiyor. Ayrıntıları almaya benzer şekilde, wp.apirequest yardımcı programını kullanacağız. Durum değeriniz her değiştiğinde, yangın dinlenmesi ile güncelleyeceğiz. Bunun için, ilk olarak metinControl’ize onchange olayları eklememiz gerekiyor: {
this.setstate ({
Puan
});
}}
/> Ve sonra restoran isteklerimizi göndermek için GetDeriveStateFromProps’un yaşam döngüsü yöntemini kullanacağız. Aşağıdaki kodu yapıcınızın altına ekleyebilirsiniz:
Statik GetDeriveDstateFromProps (Nextphrops, State) {
wp.apirequest ({yol: `/hello-gutenberg/v1/update-meta? id = $ {nextphrops.postid}`, yöntem: ‘post’, veri: durum}).
(veri) => {
verileri geri yükle;
},
(yanlış) => {
yanlış geri;
}
);
}
Bu, sahadan her değiştirdiğimizde meta alanımızı güncelleyecektir. Şimdi bu yaklaşımla ilgili sorunu göreceksiniz. Meta değerleri, meta değeri her değiştirdiğinizde güncellenecek, bu yaklaşımda iki sorun vardır:
Gönderiyi güncellememeye karar verseniz bile verileriniz kaydedilecektir.
Bu, HTTP çağrılarını çok sık yapacaktır, bu da ideal değildir.
Veriler yalnızca yayınları kaydettiğinizde veya yayınladığınızda kaydedilebilir. Bunun için, gönderinin ne zaman saklandığını öğrenmek için yüksek seviyeli bir bileşen kullanabiliriz. HOC işlevimizi aşağıdaki kodla değiştirebilirsiniz: const hoc = withSelect ((seç, {forceissave}) => {constant {constant {
getCurrentpostid,
saklıyor,
Ispublishingpost,
Automatispos’un kazancıdır,
} = SELECT (‘Core/Editor’);
dönüş {
Postid: getCurrentPostid (),
Isaving: Forceissave || IsavingPost (),
Isautosavave: IsautosavingPost (),
ISPublishing: IsPublishingPost (),,
};
}) (Hello_gutenberg); Bu bize yayınlarımızın depolanıp yayınlanmadığını kontrol etmek için kullanabileceğimiz bazı değişkenler verecektir. Bu durumu gönderimizin istek işlevine eklememiz gerekiyor:
Statik GetDeriveDstateFromProps (Nextphrops, State) {
if ((nextphrops.ispublishing || nextphrops.issave) &&! Nextphrops.isautosving) {
wp.apirequest ({yol: `/hello-gutenberg/v1/update-meta? id = $ {nextphrops.postid}`, yöntem: ‘post’, veri: durum}).
(veri) => {
verileri geri yükle;
},
(yanlış) => {
yanlış geri;
}
);
}
}
Şimdi meta değeri yalnızca yayınları depoladığımızda, güncellediğimiz veya yayınladığımızda güncellenecektir. İşte burada! Kenar çubuğunuz şimdi bitti ve eklentinizi Gutenberg ile nasıl uyumlu hale getireceğinizi öğrendiniz! Çalıştığından emin olmak için bloğunuzu test edebilirsiniz. Değilse, lütfen yanıtınızı aşağıdaki yorumlar bölümünde bırakın, size yardımcı olmaya çalışacağım.
Yukarı git
Bir yangın kenar çubuğu ile bitirdikten sonra ne olacak?Merhaba Gutenberg deposunda tamamlanan örnekleri bulabilirsiniz.Bir sorun bulursanız, bir sorun açmaktan çekinmeyin.Bir kez daha, bu Gutenberg tarafının aleviyle ne olabileceğinin küçük bir örneğidir.Gutenberg ve ateşle yapabileceğiniz birçok olağanüstü şey var.Daha fazla okuma: Acemi Geliştiriciler için Gutenberg Eğitimi
Yeni WordPress Block Düzenleyicisi Nasıl Kullanılır – Guutpress Guutpress Guentenberg
Gutenberg bileşeniyle bir “eklenti seçeneği sayfası” oluşturun
Diğer API öğreticimize bakın: Google Haritalar JavaScript API Başlangıçları için API’yı Gutenberg ile elde etmek istediğiniz şey?Bize söyle.
#Gutenberg ile uyumlu bir #WordPress eklentisi nasıl yapılır – #API Kenar Çubuğu
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: