WordPress eklentinizde Gutenberg’den bileşenleri tekrar reaksiyona koyun
Birkaç gün önce David, React’i tanıtan dört blog gönderisini tamamladı. Orada size WordPress’te kullanıcı arayüzünü kolayca yapmak için reaksiyona nasıl başlayacağınızı açıkladı. Özellikle, bu yazı dizisinin 2. bölümünde David, bir geliştirme ortamının nasıl hazırlanacağını ve basit bir reaksiyon bileşeninin nasıl yapılacağını açıkladı. Bugün, kendi reaksiyon bileşenlerinizi yapmanın yanı sıra, mevcut bileşenleri yeniden kullanmanın çok iyi bir fikir olduğunu göreceğiz.
Tekerleğin yeniden bulılması mantıklı değildir. WordPress arayüzünüzde sağlanan reaksiyon bileşenini yeniden kullanmak için Gutenberg ile yapılan mevcut çalışmadan yararlanın.Gutenberg WordPress’te göründüğünden, JavaScript ve React Framework WordPress geliştirme yığınının önemli bir parçası olmuştur. Bu yüzden bu teknolojiye alışkın değilseniz, mümkün olan en kısa sürede öğrenmelisiniz. Yaptık ve React kullanarak premium eklentimizi tamamen kodladık. Bu, React bileşeni ile zaten sahip olduğumuz tüm kullanıcı arayüzlerinin dönüşümünü ima eder.
Programcı tekerlekleri tekrar bulamamalı ve yazılım geliştirme dünyasında, daha az her zaman daha fazla, bugün WordPress’te reaksiyon bileşenlerini nasıl tepki vereceğimizi göreceğiz. WordPress WordPress’te bulunan reaksiyon bileşeni, @WordPress/Bileşenleri Gutenberg paketi aracılığıyla gelişiminizde yeniden kullanabileceğiniz 80’den fazla reaksiyon bileşeni sağlar: React Gutenberg bileşenlerinin listesi, gelişiminizde yeniden kullanım için çok eksiksiz ve kullanışlıdır. Gutenberg Projesi GitheB’de bulacağınız her bileşen klasöründe, her bir bileşenden ve CSS stilinden bir JavaScript kaynak kodunuz ve nasıl ve ne zaman kullanılacağını öğrenmek için belgeleriniz var. Arayüzü React, düğmeyi tanımlamak için düğmeyi ve buttongroup’u vurgulamak iyidir. CheckBoxControl, InputControl, Sayı Kontrolü, Radyocontrol, RangeControl, SelectControl veya TextControl gibi alanlar ve seçenekler için tüm denetleyiciler. Hatta sekme veya popover arayüzleri için tabpanel ve yüzer diyalog için sermaye. Ve daha fazlası … Bu bileşeni en başından beri geliştirmemiz gerekiyorsa, elbette yeni React arayüzünü şimdi premium eklentimizden programlayacağız. Yeniden kullanma bileşenlerini kullanmak, zaman kazanmak için bir geliştirici olarak yapabileceğiniz en iyi şeydir. Ve Gutenberg tarafından WordPress için sağlanan eklentiniz için mükemmeldir.
WordPress React Bileşenleri Nasıl Yeniden Kullanılır React’te geliştirilen arayüzde bir düğme kullanmak istediğinizi hayal edin. Gutenberg’deki bileşenler sayesinde, düğme bileşenini aşağıdaki örnekte gördüğünüz gibi doğrudan kullanabilirsiniz:/** * WordPress bağımlılıkları */@wordpress/bileşenler ‘den {button}; Varsayılan işlevi dışa aktarma myComponent () {return beni tıklayın! ; } Bir düğme için Gutenberg bileşenini kullanmanız ve bunun yerine etiketini doğrudan kullanmanız gerekmediğini merak ediyor olabilirsiniz. Ve haklı olacaksın.
Ancak, aldığınız Gutenberg düğmesini kullanarak düğmeniz, WordPress arayüzündeki diğer düğmelerle aynı CSS kuvvetine sahiptir. Ayrıca, bileşenler ve stil güncellenirse, WordPress’in hemen hemen her yeni sürümünde olan bir geliştirici olarak hiçbir şey yapmanıza gerek yok. Gutenberg düğmesini güncelleme sorumluluğu sizin değildir. Kendi düğmenizi kullanırsanız, bu korumanız gereken bir şeydir. Gutenberg’deki düğme bileşeninde Gaya CSS belirlenir. Mevcut Gutenberg bileşenini yeniden kullanmak için, yalnızca bu bileşenin orada olup olmadığını kontrol etmeniz ve @wordpress/bileşenler paketi aracılığıyla kodunuza aktarmanız gerekir. Yukarıdaki kod görüntülerinde görebileceğiniz gibi, bu paketin düğme bileşenlerini içe aktardık. Paketin projenizde mevcut olması için, terminalde NPM Install @WordPress/Components komutunu kullanarak yüklemeniz gerekir. Ancak bu David tarafından görevinde açıklandı, bu yüzden bunu tekrar tartışmayacağım.
Hatırlamanız gereken şey, bu bileşenin WordPress stilini alabilmesi için, WP_ENQUEUE_STYLE PHP işleviyle WordPress’te sıraya girdiğinizde WP bileşenlerini CSS stil bağımlılıkları olarak ayarlamanızdır. İhtiyaçlarınız Gutenberg tarafından sağlanan reaksiyon bileşeni kapsamında değilse, tekerlekleri tekrar bulmayın ve bunları kullanmayın. Mevcut bileşenleri kullanmanın faydaları kendi bileşenlerinizi kullanmaktan çok daha fazladır. React Gutenberg Bileşen Hikayesi Kitabı Gutenberg’den yeni şeylerden biri GitHub’da bulabileceğimiz bir hikaye kitabı. Storybook, bileşenleri ayrı ayrı geliştirmek ve görmek için kum kutuları sağlayan açık kaynaklı bir araçtır. WordPress durumunda, bu, bileşenler için bir belge olarak işlev görür, diğerleri arasında. Gutenberg hikaye kitabı. Gutenberg Hikayesi Kitabı’nda yer alan çeşitli seçenekler arasında Block Editor’u Playground menüsünden deneme olanağına sahibiz. Ancak en ilginç seçenek, Gutenberg bileşen belgelerini görebilmektir. Tek yapmanız gereken Bileşenler menüsünü açmak ve orada @wordpress/bileşenler paketi aracılığıyla WordPress tarafından sağlanan bileşenlerin bir listesini bulacaksınız. Her React bileşenini keşfedebilir ve tam JavaScript kodu ile kullanım örneklerini görebilirsiniz. Örneğin, aşağıdaki ekran görüntülerinde, düğmenin sahip olabileceği farklı özelliklere sahip düğme bileşenlerinin örneklerini görürsünüz. Ardından, hikaye sekmesinde eksiksiz bir örnek kaynak kodunuz var: Gutenberg hikaye kitabı, dahil edilen reaksiyon bileşenlerini keşfetmenizi ve nasıl tekrar kullanılacağını görmenizi sağlar. Ek olarak, bazı bileşenler bileşen özelliklerini değiştirmek ve arayüzde neden olan değişikliklerin önizlemesine bakın. Bu bileşenlerden biri, metin düzlemi eklemek için kullanılan TextControl’dur. Aşağıdaki ekran görüntülerinde, Bileşen etiketini gizlemek veya etiket metnini ve yardımını değiştirmek için farklı bir seçeneğe sahip düğme sekmesini görüyoruz. Böylece bileşenlerin değişim ve React arabirimimizde nasıl kullanmak istediğimize karar vererek nasıl görüleceğini görebiliriz: Gutenberg’in hikaye kitabındaki sekme düğmeleri, görselleştirme üzerindeki etkiyi görmek için bileşen özellikleriyle oynamanıza olanak tanır. Paketin tüm bileşenleri @wordpress/bileşenleri hikaye kitabında tam belgelere sahip değildir, bu nedenle Gutenberg’deki React bileşeninin durumunun en son sürümünü görmek için Github’daki bileşen paket bölümüne gitmeniz gerekir. Ancak, Gutenberg Story kitabı belgeleri bittiğinde, geliştirici için daha ilginç hale gelecektir. WordPress’te bu tür belgelere sahip olmak bir lüks. Yararlılığı tartışmanın dışındadır. WordPress’inizin geliştirilmesi için React Gutenberg bileşeni tarafından sağlanabilecek her şeyi gördünüz. Kendi tekerleklerinizi yeniden keşfetmek ve kendi temel bileşenlerinizi geliştirmek yerine, diğer WordPress arayüzleriyle tutarlılık elde etmek ve zaman geliştirme ve bakımından tasarruf etmek için önce React Gutenberg bileşenine bakın. Yeniden Kullanım Yazılımı, bir WordPress geliştiricisi olarak daha verimli olmanın anahtarıdır.
