React bileşenlerini Gutenberg ile paylaşmak

Gutenberg WordPress bloğuna dayanan yeni editör yakında WordPress’te bulunacak. Kimse Gutenberg’in nerede kullanılacağını belirlemese de, bu yeniden kullanım için iyi tasarlanmıştır, bu çok iyidir, çünkü eklenti geliştiricileri artık bu bileşeni diğer arayüzlerde, WordPress yöneticisinde kullanabilirler. Gutenberg ekibi şu anda NPM modülüne geri kullanılması muhtemel birçok kodu taşıyor olduğundan, WordPress’te olmasa da, React uygulamasındaki Gutenberg bileşenini kullanmayı çok kolaylaştırıyor. Bu yazıda tartışacağım WordPress’deyse, Gutenberg bileşenlerini veya yardımcı programlarını projenize aktarmanın tek yolu bu değildir.
Bu yazı, React bileşeninin Gutenberg bloğu, React tarafından desteklenen WP-Admin Gutenberg olmayan ekran ve React uygulaması arasındaki nasıl paylaşılacağını gösterecektir. Bu, eklentimi caldera formları gutenberg dostu hale getirmek ve React’te birçok kullanıcı arayüzünü yeniden yazmak için yaptığım çalışmaya dayanıyor. Gutenberg modülünü Gutenberg kod taban kapsamına getirin, örneğin düzenleyicinin yapıldığı UI bileşeni için durum yönetimi için “veriler” veya “bileşenler” gibi çeşitli modüllere ayrılır. Bu desen, her modül yüksek seviyeli bir dizin olduğu için kod tabanında gezinmeye yardımcı olur. Ayrıca bize modülleri veya bileşenleri nasıl içe aktaracağımızı anlatmaya yardımcı olur. Örneğin, SelectControl bileşenini kullanmak istiyorsak, – wp.components.sectControl bileşen modülü üzerinden erişiriz.
Bu modüllere erişmek için üç seçeneğe bakalım. Birincisi bir webpack gerektirmez. Diğer ikisinin webpacklere ihtiyacı var veya diğer birkaç bina sistemine uyarlanacak. Global WP kullanılarak tüm Gutenberg kütüphanelerine “WP” nin küresel kapsamı ile erişilebilir. Bu, bileşenleri kapsam içine eklemenin en basit yolunun Global WP dosyasına erişmek olduğu anlamına gelir. Varlıklar wp_enqueue_script kullanılarak yönetilirse ve komut dosyası için doğru bağımlılığı belirlerseniz, bu iyi çalışır. Bu örnekte, WordPress oluşturma işlevi, Create öğesine WP’den erişilir: işte bu. Komut dosyasına sorarken “öğeleri” bağımlılık olarak ayarlarsanız, JS blok dosyasında veya WordPress’te herhangi bir yerde çalışmak. WP’yi harici bir webpack olarak kullanmak Gutenberg kaynağını görüyorsanız ve bu iyi bir okuma, bunun gibi webpack ithalatlarını göreceksiniz
Bu aslında WP.Element Global’e erişmekle aynıdır. Gutenberg, her giriş noktası ve paket için harici bir webpack hazırlar. Bu, geleneksel WordPress ve daha modern bir webpack sunan iyi bir modeldir. Eklentinizde bir takma ad olarak hareket etmek için benzer bir webpack ayarlayabilirsiniz. WordCamp görüşmelerim için örnek bir kod olarak bir uyarı mesajı için bir blok eklentisi yaptım. Webpack yapılandırması bazı Gutenberg paket ayarları için harici vardır.
Daha sonra Element modülünü aynı sözdizimi Gutenberg ve Gutenberg belgelerinin kullanımı ile içe aktarabilirsiniz.
Bu yazıda daha önce söylediğim gibi NPM kullanarak, Gutenberg modülü NPM JavaScript Bağımlılık Yönetim Sistemi aracılığıyla kurulabilir veya kurulacaktır. WordPress paketini WordPress eklentisine yüklerseniz, geliştirmeye bağımlılık olarak yüklemeniz gerekebilir. Bu şekilde webpack ithalatlarını kullanabilirsiniz, testlerinizde modüller işlevini sağlayabilirsiniz, ancak üretim sürümünüze modül eklemeyin. WordPress’te bağımlılık wp_enqueue_scripts kullanılarak yayınlanır. WordPress ortamı için gelişmezseniz, bu öneriyi açın. Örneğin, WordPress öğesi modülünü WordPress eklentisine yüklemek için:
Veya WordPress ortamının dışında kullanım için yüklemek için:
Ardından, bağımlılık kapsamına getirmek için webpack ile içe aktarın:
Bu son birkaç örnekle aynı. Mesele bu. Kod çizgisi, herhangi bir bağlam-gutenberg bloklarında, diğer WP-admin ekranlarında, WordPress ortamı dışında kullanılan uygulamalar ve biraz daha dikkatli testlerle işlev görür. Global durumu kullanarak WP Global WordPress’i yönetin. Her şeyi karmaşık hale getirir, ancak Gutenberg tarafından WP Global değişkenlerinin kullanımı, bir WordPress geliştiricisi olarak sahip olduğumuz en kolay yönetilen küresel durumdur. Öngörülemeyen küresel koşullar ve bu sorunu nasıl çözdüğüm için yaşadığım bazı sorunlara bakalım.
WordPress eklentisindeki WP-Admin Gutenberg olmayan ekran için, bir WordPress Babel ön ayarını kullanmak benim için çok makul. Bu Babil yapılandırmasını oldukça basit hale getiriyor:
{
“Ön ayar”: [“@wordpress/varsayılan”]
} Yapılan bir şey, JSX’i derlemek için WordPress öğesini kullanmaktır. Global değişken WP.Element düzenlendiği sürece bu iyidir. Gutenberg ekranında. Bileşenleriniz ithalat reaksiyonu varsa bu bir sorun olabilir. Gutenberg bloğumla bileşenleri paylaşan WP-Admin ekranı için React bileşenini kullanırken bu sorunu yaşadım. @WordPress/Element NPM’de olmadığında, Gutenberg’in yaptığı şeyi yapıyor – WP.Element’i tanımlayın React.Element Bu deşarj edilebilecek bir çözüm değil, başarılı. Yukarıda açıkladığım gibi @wordpress/element kullanmak için bu kodu yeniden düzenleyeceğim. Ancak, bu, React ve WordPress kodunu birlikte tutan herkes için bir sorun olabilir. Testte, React kullanmanın iyi nedenlerinden biri jesttir. Jest’i seviyorum. Jest, şimdiye kadar kullandığım en kolay test aracıdır. Bu jest hakkında bir öğretici değil, ancak Gutenberg ve diğer reaksiyon uygulamaları arasında paylaşılan bileşenler için test ayarlarını tartışmak istiyorum. Caldera formlarında jest kullandığımız için WP.Element’in tanımlandığından emin olmalıyız. Şu anda testlerimizdeki hataları önlemek için Gutenberg’den kopyalanan Shim kullanıyoruz. İşte burada:
global.wp = {
Kısa kod: {
},
API Parat: {
}
};
Object.defineProperty (global.wp, ‘element’, {
Get: () => İhtiyaç (‘React’),,
}); Tanıdık görünüyor, değil mi? WordPress’in yaptığı aynı şey. Aslında, NPM’de son zamanlarda yayınlanan bir modül var, bunun için tekrarlanabilecek basit bir çözüm sunuyor. @WordPress organizasyonu kapsamında NPM’de yayınlananları izleyin.
Jest’e ayarları kullanmasını söylemeliyiz. Aşağıda Package.json: React ve WordPress’e eklemek için eksiksiz bir jest ayarıdır. React ve Vuejs arasında seçim hakkında biraz yazdım. Gutenberg’den önce Vuejs takımındaydım. Bununla birlikte, Gutenberg’in gelişimini incelemek, reaksiyona dalmamı ve genellikle reaksiyon bileşeni için kullanılan şablon dili olan JSX hakkında olumsuz orijinal görüşümü yeniden değerlendirmemi gerektiriyor.
Gutenberg’i geliştirmek için React’i bilmenize gerek yok, ama bu çok yararlı. Ayrıca React kullanmanız gerekmez. Vue bileşenine statü sağlamak için Gutenberg’i kullanarak UI bloğu için VUE’yi kullandım. Bu oldukça havalı, ancak bu, Webpack paketinizde Vue’yi depolamak ve tepki vermek için birçok iyi neden gerektirecek ve her iki çerçeveyi de düşünmesi gereken gereksiz bir komplikasyon katmanıdır. Vue ve React durumunu çok farklı yönetin, böylece hem kuralların hem de şablon dilinden farklı sözdizimlerinin korunması zihinsel olarak dağılmıyor.
WordPress verileri ile Redux Durum Yönetimi (-benzeri), bu yüzden Vue’yu gerçekten seviyorum, ancak WordPress beni JSX’i yeniden gözden geçirdi ve WordPress eklentisinde nasıl çok iyi kullanılabileceğini gördükten sonra React’te satıldım. Vue ile beni inciten bir şey devlet yönetimi. Önerilen durum yönetimi çözümünün Vuex’in çok fazla kaynağı gerektirdiğini ve küresel statü etkili bir şekilde oluşturmadan bileşenlerle entegre edilmesinin zor olduğunu hissediyorum. Bir hata yapabilirim, ama Vuex beni asla tıklamıyor. React uygulamasındaki statü yönetimi için standart olan Redux, benim için Vuex’ten çok daha makul. #2’nin nedeni bu, tepki vermem için. WordPress şimdi Gutenberg için yukarıdaki soyutlama kullandığından, Vue ve React kullanarak pratik görünmüyor. Gutenberg ile ne kadar çok entegre olursak, en basit çözüm o kadar çok reaksiyon. Ayrıca, React + Redux yardımıyla kapları ve sunum bileşenlerini kullanma modelinin sorunun ayrı kalmasını ve birim testinin basit kalmasını nasıl seviyorum. Gutenberg’deki Redux soyutlaması, NPM’de @wordpress/data olarak mevcut olan Redux’u daha basit hale getirir. “Mağaza” nı kaydederek

@WordPress/Data ile eylemler ve azaltma bağlantılıdır ve değişikliklere abone olmak, verileri seçmek, yangın talebi yapmak ve enjeksiyon durumu için yüksek seviyeli bileşenler vardır.Tork için son yazımda, WordPress ile Redux için devlet yönetiminin temellerini tartıştım.Örnek kodu üzerinde çalıştığım Caldera Forms İşlemci Kullanıcı Arayüzü kitaplığından alınmıştır.Bu, Editör Post’ta, başka bir WP-Admin ekranında ve WordPress ortamının dışında çalışması gereken bir kullanım örneğidir, çünkü Caldera Forms Pro bir Laravel ve düğüm uygulamasıdır.Örneğin, herhangi bir durum yönetimi olmadan tüm UI işlemcisini özetleyen sunumların bileşenleri.
Bu bileşenden “kontrollü” den bahsedebiliriz. Durumun farkında değildi, durum diğer birkaç sistem tarafından tamamen kontrol edildi. Bu bileşen, mağazadaki verilere erişebilmesi için daha yüksek bir Wlident bileşenine “sarılacaktır”. Bu bileşen, UI oluşturan bileşenler için bir kaptır. Sorumluluk, konteyner özelliğini kullanarak bir kullanıcı arayüzünü türev bileşenlerle derlemektir. Ne tür bir pervane bir bileşen olduğunu tepki vermek için bir pervane türleri kütüphanesi kullandığımı unutmayın. Bunu yapmayı seviyorum. Prop tipi kullanmak, akış veya türün akışını veya türünü öğrenmek ve ayarlamak zorunda kalmadan reaksiyon bileşeni için güçlü bir yazım sağlar. Birkaç projede akışlar kullanıyorum, ancak çoğu fikrim, sahne türü doğrulama için fazlasıyla yeterli. Prop-türleri hakkında gerçekten sevdiğim şey, kurallara uymazsam, anlık görüntü jest testimin çalışmayacağını ve başarısız olduğunda neden oldukları hataların bana hangi bileşenlerin yanlış sahne ve nerede geçtiğini söyleyeceğidir. Bu sunum bileşeni, depolamadan veri alabilmesi ve sunum bileşenine sağlayabilmesi için yüksek dereceli bileşenle (hoc) “sarılır”. Ayrıca mağazaya değişiklikler göndermemiz gerekiyor. Bunu, bileşenleri hoc withdispatch ile sararak yapıyoruz:
Durumdan seçim yapabilen ve durum değişiklikleri gönderebilen tamamen sarılmış bileşenler aşağıdadır:
Redux ve dükkan arasında bir bağlantı yoktur. Sarma bileşeninin tek bir sorumluluğa sahip olduğu bağlantı kuralları, sadece sınıfa aktarılan bir argüman olan bileşen sahnelerine göre tanımlanır. Sunum bileşeni, Proprite’ı değiştirme işleyicisi işleviyle geçirir ve çağırır. Yapılan, farklı bileşenlerin sorumluluğudur. Değişikliklerin bileşenlerinin ve kontrol fonksiyonlarının kamu yangını aynı kaldığı sürece, bileşenlerde veya işlevlerde bu sorumlulukla herhangi bir değişiklik meydana gelebilir. Jest ile birim testi bu değişikliği tespit eder. Jest ile reaksiyonu test etmek istemiyoruz. Bileşenlerimizin doğru sahne olup olmadığını test etmek istiyoruz ve bir değişiklik işleyicisi varsa, doğru verileri etkinleştirecek ve yayarlar. Jest’in iyi bir anlık görüntü test aracı var. Bu araç bileşenleri oluşturur ve JSON olarak saklar. Daha sonra gelecekte, anlık görüntüler yeniden yapılır ve kaydedilmiş anlık görüntülerle karşılaştırılır. Her değişiklik ve test başarısız. Bu tip test başarısız olduğunda, bileşenlere veya çocuklarından birine farklı sahne aktarıldığını gösterir. Bu kasıtlı olabilir ve sorun değil, yeni bir anlık görüntü kaydedebilirsiniz. Ya da bileşenlerinizin birbirine bağlanma şeklinin istenmeyen bir şekilde değiştiği ve regresyon hatasının tanıtıldığı anlamına gelir. Burada lüks bir şey yok. Webpack ithalatını hazırlayın ve kullanın, gerektiğinde bağımlılıkları yükleyin. NPM kullanmayı ve React’i geliştirmek için kullanmayı öğrendiyseniz, bunu nasıl yapacağınızı biliyorsunuz. WordPress’in modern web uygulamaları gibi daha çok çalışmaya başladığını görmek eğlencelidir. Dux çok.