WordPress için Gutenberg'in Arkasındaki Teknolojilerde Ustalaşmak için Kaynaklar

Geliştiricilerin WordPress ile yüzleşmesi gereken en büyük zorluklardan biri, yeni blok düzenleyicinin arkasındaki yeni programlama paradigmasına uyum sağlamak için bilgimizi geri dönüştürmektir. Gutenberg'deki ana değişiklik, kullanılan yeni teknoloji yığınıdır. Genellikle bir WordPress geliştiricisi, eklentileri çoğunlukla PHP kullanarak, JavaScript ile yazılmış küçük parçalarla oluşturur. Şimdi anahtar araç JavaScript'tir ve PHP'yi eklentilerin ve temaların yapısını oluşturmak için yalnızca bir temel olarak bırakır.

Durumun böyle olmadığını ve PHP'nin WordPress'te hala uzun bir yolculuğu olduğunu düşünebilirsiniz. Bunun için seni suçlamıyorum, çünkü değişiklikleri kabul etmek her zaman zordur. Ancak bence yanılıyorsunuz. JavaScript artık WordPress'in geleceği değil, bugünüdür. Ve konumunuzu korumak istiyorsanız, hemen şimdi hızlanmanız gerekecek.

Neyse ki, JavaScript'i derinlemesine öğrenmemiz konusunda ısrar etseler de, durumun böyle olmadığını düşünüyorum. Herhangi bir öğreticinin size öğretebileceği bazı minimumları bilmek fazlasıyla yeterlidir. Bu makale boyunca anlatacağım kaynaklar sayesinde Gutenberg'i geliştirmeye başlamak için ihtiyaç duyacağınız diğer her şeyi çabucak öğrenebilirsiniz.

JavaScript öğrenin

Yeni bir programlama dili öğrendiğinizde, bilmeniz gereken ilk şey sözdizimini anlamaktır. Ancak bu şekilde onunla programlamaya başlayabilirsiniz. Bunu yaptığınızda, yaratmaya başlamak için her şeye hazırsınız.

Daha önce JavaScript ile hiçbir şey yapmadıysanız, başlamanıza yardımcı olacak farklı biçimlerdeki bazı öğreticiler şunlardır:

• JavaScript Language Basics: Zac Gordon'dan video formatında ücretsiz kurs.
• JavaScript 30: Bu ücretsiz kursta Wes Bos ile 30 gün boyunca her gün bir meydan okuma yaparak öğrenin.
• JavaScript'e yeniden giriş: Mozilla'dakiler tarafından JavaScript'e kısa bir giriş.
• Kediler için JavaScript: Kedi mizahının belirli dokunuşlarıyla JavaScript'e başka bir giriş.
• Exercism.io: JavaScript'te alıştırmalar yapabileceğiniz ve bir akıl hocasının değerlendirmesi için çözümünüzü yükleyebileceğiniz ücretsiz web.
• JSBooks: Kitaplarla öğrenmeyi tercih edenlerdenseniz, burada birçoğunu ücretsiz olarak bulabilirsiniz.

Tersine, JavaScript kullanma konusunda biraz deneyiminiz varsa, işlevler, söz ve eşzamansız / bekleme ile eşzamansız yürütme ve kısacası ESNext ile ilgili her şey hakkında gelişmiş kavramları inceleyerek bilginizi genişletin.

Bir günlük JavaScript eğitimi ile, WordPress blok düzenleyicisinin üzerinde geliştirmeniz gerekenlerle ilgili her şeyde kolaylıkla hareket etmek için temel bilgileri edinmek için fazlasıyla yeterli olmalıdır.

React ve Redux öğrenin

JavaScript'e ek olarak, WordPress blok düzenleyicide geliştirmek için belirli React ve Redux kavramlarına sahip olmanız gerekir.

Bunu herkes size söyleyecektir, ama gerçek şu ki, böyle değil. React veya Redux hakkında hiçbir fikriniz olmadan Gutenberg için geliştirme yapabilirsiniz. Tabii ki, nasıl çalıştıklarını ve ne için kullanıldıklarını biliyorsanız, o zaman bu daha iyi olur.

React ve hepsinden önemlisi JSX

Kaçınamayacağınız şey, JSX sözdiziminin React içinde, bileşenlerimizin arayüzünü tanımlamak için kullanacağımız öğeler oluşturmak için nasıl çalıştığını bilmektir (bunlar Gutenberg blokları veya düzenleyici içindeki görünümler olsun).

Product ve ShoppingList bileşenleri için arayüz tanımlamak ve ardından bunları bir Gutenberg bloğunda kullanmak istediğinizi hayal edin. Standart gösterimde, bunu Gutenberg tarafından sağlanan wp.element.createElement() işlevini kullanarak aşağıdaki şekilde yaparsınız:

Öte yandan, HTML'ye benzer bir gösterimden başka bir şey olmayan render() yönteminde JSX kullanıyorsanız, sahip olduğunuz şey şudur:

JSX kullanmak, kod çok daha basit ve okunması daha kolay olduğu için bileşenleri yazmayı ve yeniden kullanmayı kolaylaştırır. Gördüğünüz gibi, önceki örnekte, React hakkında hiçbir fikre sahip olmadan, yalnızca JSX'in nasıl kullanılacağını bilerek ve onu süper güçlere sahip HTML gibi kullanarak React bileşenleri oluşturuyoruz. Ayrıca Gutenberg'deki mevcut bileşenleri de kullanabilirsiniz. Bunları resmi belgelere de bağlı olan bu görüntüleyicide görebilirsiniz.

Yalnız bir sorun var! JSX gösteriminin herhangi bir tarayıcının yorumlayabileceği normal koda dönüşmesi için Babil ile kodu aktarmanız gerekecek. Ancak, WebPack kullanarak otomatik olarak yapabileceğiniz için bu bir drama değildir.

Başvurunuzun Durumunu Korumak için Redux

Öte yandan, muhtemelen Redux'u duymuşsunuzdur. JavaScript uygulamalarında durumu kaydetmek ve yönetmek için bir araçtır. Yine, nasıl kullanılacağını öğrenmekle ilgileniyorsanız, bu Wes Bos videolarını tavsiye ederim, ancak bu gerekli de değil.

Kendi veri deponuzu oluşturma ihtiyacınız olsaydı, bunu Redux ile yapmazdınız, ancak Gutenberg'de bulunan @wordpress/data paketini kullanırdınız. Bu paket Redux'u dahili olarak kullanır, ancak bunun bir önemi yoktur. Ayrıca, en azından başlangıç ​​aşamasında muhtemelen ihtiyacınız olmayan karmaşık bir kullanım durumundan bahsediyoruz. O yüzden şimdilik unut gitsin.

NPM, WebPack, Babel, PostCSS ve ESLint

JavaScript'e ve temel React ve JSX kavramlarına ek olarak, WordPress'te zaten mevcut olan yeni çağ için geliştirici görevlerinizin çok daha basit ve yüksek düzeyde otomatik olması için aşağıdaki teknolojileri bilmeniz gerekecek:

• NPM: JavaScript için bağımlılık yöneticisi. Sadece ihtiyacınız olan bağımlılıkları tanımlayın ve npm install yaparak kurun.
• WebPack: JavaScript paketleyici. Başlangıçta yapılandırmak kolay değildir, ancak bir kez sahip olduğunuzda, JavaScript dosyalarını yönetme işini kolaylaştırır: aktarma, küçültme…
• Babel: Bu dilin sonraki sürümlerinin sözdizimini bugün kullanabilmek için JavaScript derleyicisi.
• PostCSS: Babel ile aynı, ancak CSS stil sayfalarınız için.
• ESLint: JavaScript kullanımını ve stil hatalarını algılar, böylece kod yazarken bunlardan kaçınabilirsiniz.

Bu teknolojilerin çoğu hakkında burada zaten konuştum. Ancak, onları gerçek bir durumda kullanabilmeniz için bir WordPress geliştirme projesine nasıl entegre edeceğimi açıklayacağım yakında başka bir makale yazacağım.

Gutenberg İçin Yeni Bloklar Nasıl Oluşturulur

Şimdi en önemli kısma geçelim: WordPress editörü için yeni bloklar oluşturmaya başlamak için neye ihtiyacımız var.

Kendi bloklarınızı oluşturmaya başlamak için ihtiyacınız olan ilk şey, wp.blocks.registerBlockType() işlevinde ustalaşmaktır. Bu işlevle ilgili en eksiksiz belgeleri resmi Gutenberg kılavuzunda bulacaksınız.

Bu işlevin argümanları, benzersiz olması gereken blok adına sahip bir dize ve en önemli kısımların bloğun save ve edit işlevleri olduğu, bloğun konfigürasyonuna sahip bir nesnedir. Bunu zaten bu yazıda size kısaca açıkladım.

Bu çok karmaşık görünüyorsa, create-guten-block adlı Ahmad Awais araç setini kullanmaya başlayabilirsiniz. Bu, ilk bloğunuzu oluşturmak için gerekli tüm bağımlılıklara sahip bir klasör yapısı oluşturur. Aşağıdaki videoda kullanımı hakkında bir eğitim görebilirsiniz:

Son olarak, bu hala çok karmaşık görünüyorsa, son bir seçeneğiniz var. Elbette Gelişmiş Özel Alanlar eklentisini (kısaca ACF olarak da bilinir) biliyorsunuzdur. Pekala, bu eklenti JavaScript hakkında hiçbir fikriniz olmadan Gutenberg için bloklar oluşturmanıza izin verecek.

Ama bunu sana açıklamayacağım, Mauricio Gelves'in yapmasına izin vereceğim. WordPress.tv'de (İspanyolca) zaten sahip olduğunuz WordCamp Zaragoza 2019'da bu konuyla ilgili sunumunu kontrol edin:

WordPress'te Blok Düzenleyici Nasıl Genişletilir

Yeni bloklar oluşturmanın yanı sıra Gutenberg ile yapabileceğiniz birçok başka şey var. Örneğin, düzenleyicinin sağ tarafına istediğiniz her şeyi içeren bir seçenekler paneli eklemek için Gutenberg içinde bir eklenti oluşturabilirsiniz. Bununla ilgili en iyi şey, resmi WordPress belgelerinin, orada yapabileceklerinize dair somut örnekler içeren bu eksiksiz öğreticiyi içermesidir.

Buna ek olarak, mevcut bloklara yeni stiller ekleyerek, bloklara daha fazla özel ayar ekleyerek, blokları kaldırarak veya gizleyerek veya editörde sahip olabileceğiniz blok kategorilerini filtreleyerek WordPress düzenleyicisini genişletebilirsiniz.

Burada bulacağınız geliştiriciler ve tasarımcılar için Gutenberg el kitabında bulunan resmi belgelere bir göz atmanızı tavsiye ederim. Sakin olun çünkü çok fazla bilgi var ve bu elinizdeki en iyi kaynaklardan biri.

Unsplash'ta Christian Fregnan'ın öne çıkan görseli .