Gutenberg'den React Bileşenlerini WordPress Eklentilerinizde Yeniden Kullanın

Birkaç gün önce David, React'i tanıtan dört blog yazısı serisini tamamladı. Orada, WordPress'te kolayca kullanıcı arayüzleri oluşturmak için React'e nasıl başlayacağınızı açıkladı. Spesifik olarak, bu gönderi dizisinin 2. bölümünde David, geliştirme ortamının nasıl hazırlanacağını ve basit bir React bileşeninin nasıl oluşturulacağını açıkladı. Bugün kendi React bileşenlerinizi oluşturmanın yanı sıra mevcut bileşenleri yeniden kullanmanın çok iyi bir fikir olduğunu göreceğiz.

Gutenberg, WordPress'te göründüğünden beri, JavaScript ve React çerçevesi, WordPress geliştirme yığınının önemli bir parçası haline geldi. Bu nedenle bu teknolojilere alışkın değilseniz bir an önce öğrenmelisiniz. Bunu yaptık ve premium eklentilerimizi React kullanarak tamamen yeniden kodladık. Bu, React bileşenleriyle zaten sahip olduğumuz tüm kullanıcı arayüzlerini dönüştürmek anlamına geliyordu.

Programcılar tekerleği yeniden icat etmemeli ve yazılım geliştirme dünyasında daha az her zaman daha fazla olduğu için, bugün WordPress'te mevcut React bileşenlerini nasıl yeniden kullanacağımızı göreceğiz.

WordPress'te Bulunan React Bileşenleri

WordPress, Gutenberg'in @wordpress/components paketi aracılığıyla geliştirmenizde yeniden kullanabileceğiniz 80'den fazla React bileşeni sağlar:

Burada Gutenberg projesinin Github'ında bulacağınız bileşen klasörlerinin her birinde, her bileşenin JavaScript kaynak kodunun yanı sıra CSS stillerine ve bunları nasıl ve ne zaman kullanacağınızı bilmek için belgelere sahipsiniz.

Nelio'da yeni React arayüzlerimiz için kullandığımız bileşenler arasında, düğmeleri tanımlamak için Button ve ButtonGroup vurgulamaya değer. CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl veya TextControl gibi alanlar ve seçenekler için tüm kontrolörler. Hatta sekmeli arayüzler için TabPanel veya kayan diyaloglar için Popover ve Modal . Ve daha birçoğu var…

Bu bileşenleri sıfırdan geliştirmek zorunda kalsaydık, kesinlikle şu anda premium eklentilerimizin yeni React arayüzlerini programlıyor olurduk. Bir geliştirici olarak zamandan tasarruf etmek için yapabileceğiniz en iyi şey, mevcut bileşenleri yeniden kullanmaktır. Ve Gutenberg tarafından WordPress için sağlananlar, eklentileriniz için mükemmeldir.

WordPress React Bileşenleri Nasıl Yeniden Kullanılır

React'te geliştirilen arayüzünüzde bir buton kullanmak istediğinizi hayal edin. Gutenberg'deki mevcut bileşenler sayesinde, aşağıdaki örnekte görebileceğiniz gibi, Button bileşenini doğrudan kullanabilirsiniz:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

Bir düğme için Gutenberg bileşenini kullanmanız gerekmediğini ve bunun yerine doğrudan bir <button> etiketi kullanmanız gerekmediğini merak ediyor olabilirsiniz. Ve haklı olurdun.

Ancak Gutenberg Button kullanarak, düğmenizin WordPress arayüzündeki diğer düğmelerle aynı CSS stiline sahip olmasını sağlarsınız. Ayrıca, bileşen ve stilleri güncellenirse, WordPress'in hemen hemen her yeni sürümünde olan bir şey, geliştirici olarak hiçbir şey yapmanız gerekmeyecektir. Gutenberg Button güncelleme sorumluluğu size ait değildir. Kendi düğmenizi kullandıysanız, bu, ilgilenmeniz gereken bir şeydir.

Mevcut bir Gutenberg bileşenini yeniden kullanmak için, bu bileşenin var olup olmadığını kontrol etmeniz ve @wordpress/components paketi aracılığıyla kodunuza aktarmanız yeterlidir. Yukarıdaki kod parçacığında görebileceğiniz gibi, bu paketten Button bileşenini içe aktardık. Paketin projenizde kullanılabilmesi için, onu terminalde npm install @wordpress/components komutunu kullanarak yüklemeniz gerekir. Ancak bu, David tarafından yazılarında zaten açıklanmıştı, bu yüzden bunu tekrar ele almayacağım.

Aklınızda bulundurmanız gereken şey, bu bileşenlerin WordPress stillerini alması için wp-components , WordPress'te PHP işlevi wp_enqueue_style ile kuyruğa aldığınızda, CSS stil dosyanızın bir bağımlılığı olarak ayarlamanız gerektiğidir.

İhtiyaçlarınız Gutenberg tarafından sağlanan React bileşenleri tarafından karşılanmadıkça, tekerleği yeniden icat etmeyin ve kullanmayın. Mevcut bileşenleri yeniden kullanmanın faydaları, kendi bileşenlerinizi kullanmaktan çok daha fazladır.

Gutenberg'in Tepki Bileşenleri Öykü Kitabı

Gutenberg'in yeniliklerinden biri de Github'da bulabileceğimiz Storybook. Storybook, bileşenleri ayrı ayrı geliştirmek ve görüntülemek için bir sanal alan sağlayan açık kaynaklı bir araçtır. WordPress söz konusu olduğunda, diğer şeylerin yanı sıra bileşenler için belge görevi görür.

Gutenberg Storybook'ta yer alan çeşitli seçenekler arasında Playground menüsü aracılığıyla blok düzenleyiciyi deneme imkanımız var. Ancak en ilginç seçenek, Gutenberg bileşenlerinin belgelerini dostane bir şekilde görebilmektir.

Bileşenler menüsünü açmanız yeterlidir ve orada WordPress'in @wordpress/components paketi aracılığıyla sağladığı bileşenlerin listesini bulacaksınız. Her bir React bileşenini keşfedebilir ve tam JavaScript koduyla kullanım örneklerini görebilirsiniz.

Örneğin, aşağıdaki ekran görüntüsünde, düğmelerin sahip olabileceği farklı özelliklere sahip Button bileşeninin örneklerini görüyorsunuz. Ardından, Öykü sekmesinde tam örneğin kaynak koduna sahipsiniz:

Ek olarak, bazı belirli bileşenler, bileşenin özelliklerini değiştirmek ve arabiriminde neden oldukları değişiklikleri önizlemek için Düğmeler sekmesindeki seçenekler içerir.

Bu bileşenlerden biri, metin alanı eklemek için kullanılan TextControl . Aşağıdaki ekran görüntüsünde, bileşenin etiketini gizlemek veya hem etiketin hem de yardımın metinlerini değiştirmek için farklı seçeneklere sahip Düğme sekmesini görüyoruz. Böylece bileşenin değişikliklerle nasıl görüneceğini görebilir ve onu React arayüzlerimizde nasıl kullanmak istediğimize karar verebiliriz:

@wordpress/components paketinin tüm bileşenlerinin Öykü Kitabında eksiksiz bir belgeleri yoktur, bu nedenle Gutenberg'deki React bileşenlerinin durumunun en son sürümünü görmek için Github'daki bileşen paketi bölümüne gitmeniz gerekir.

Bununla birlikte, Gutenberg Öykü Kitabı dokümantasyonu tamamlandığında, geliştiriciler için giderek daha ilginç hale gelecektir. WordPress'te bu tür belgelere sahip olmak bir lüks. Faydası tartışılmaz.

Gutenberg'in React bileşenlerinin WordPress geliştirmeleriniz için sağlayabileceği her şeyi zaten gördünüz. Tekerleği yeniden icat etmek ve kendi temel bileşenlerinizi geliştirmek yerine, WordPress arayüzünün geri kalanıyla tutarlılık sağlamak ve geliştirme ve bakım zamanından tasarruf etmek için önce Gutenberg'in React bileşenlerine bakın. Yazılımı yeniden kullanmak, WordPress geliştiricileri olarak daha verimli olmanın anahtarıdır.

Unsplash'ta Morning Brew tarafından öne çıkan görsel.