WordPress için Gutenberg’in arkasındaki teknolojiye hakim olmak için kaynaklar
WordPress ile birlikte geliştiricilerin karşılaşması gereken en büyük zorluklardan biri, yeni blok düzenleyicinin arkasındaki yeni programlama paradigmasına uyum sağlamak için bilgilerimizi geri dönüştürmektir. Gutenberg ile ilgili ana değişiklik, kullanılan yeni bir teknoloji yığınıdır. Genellikle WordPress geliştiricileri, JavaScript’te yazılmış küçük parçalarla özellikle PHP kullanarak eklentiler yaparlar. Şimdi ana araç JavaScript’tir ve PHP’yi yalnızca eklenti yapıları ve temaları yapmak için bir temel olarak bırakır. Bunun doğru olmadığını ve PHP’nin WordPress’te hala uzun bir yolculuğu olduğunu düşünebilirsiniz. Seni bunun için suçlamıyorum, çünkü değişimin kabul edilmesi her zaman zor. Ancak bence yanılıyorsun. JavaScript artık WordPress’in geleceği değil, bugün. Ve pozisyonunuzu korumak istiyorsanız, hemen hızlandırmalısınız.
JavaScript’i derinlemesine öğrenin, Matt’in dediği gibi … Neyse ki, JavaScript’i derinlemesine öğrenmemiz gerektiğinde ısrar etseler bile, bence öyle değil. Herhangi bir öğretici tarafından öğretilebilecek bazı minimum şeyleri bilmek fazlasıyla yeterlidir. Tüm bu makalede açıklayacağım kaynaklar sayesinde Gutenberg’i hızlı bir şekilde geliştirmeye başlamak için ihtiyacınız olan diğer tüm şeyleri öğrenebilirsiniz. JavaScript’i Öğrenin Yeni programlama dilini öğrendiğinizde, bilmeniz gereken ilk şey sözdizimini anlamaktır. Sadece bu şekilde programlamaya başlayabilirsiniz. Bunu yaptıktan sonra, yapmaya başlayacak her şeye sahipsiniz.
JavaScript 30: Bu ücretsiz kursta Wes Boss ile 30 gün boyunca her gün zorluklar yaratırken öğrenin.
JavaScript’e yeniden giriş: Mozilla’daki insanlar tarafından JavaScript’e kısa bir giriş.
Kediler için JavaScript: Belirli kedi mizahına dokunarak JavaScript hakkında bir başka giriş.
Exateris.io: JavaScript’te egzersiz yapabileceğiniz ve çözümlerinizi değerlendirmek için mentorlara yükleyebileceğiniz ücretsiz web.
JSBOOOKS: Kitaplarla öğrenmeyi tercih edenlerden biriyseniz, burada ücretsiz olarak birçok kitabınız var.
Tersine, JavaScript’i kullanma deneyiminiz varsa, ileri fonksiyon kavramlarını, vaatlerle eşzamansız yürütmeleri ve asenkron / beklemeyi inceleyerek bilginizi genişletin ve kısaca hepsi ESNEXT ile ilgilidir.
Bir günlük JavaScript eğitimi, WordPress blok düzenleyicisinin üzerinde geliştirmeniz gereken şeyle ilgili tüm konularda kolayca hareket etmek için temel bilgi elde etmek için fazlasıyla yeterli olmalıdır. JavaScript’e ek olarak Reaksiyon ve Redux’u öğrenin, WordPress Block Düzenleyicisini geliştirmek için React ve Redux hakkında belirli bir fikriniz olmalıdır. Herkesin size söyleyeceği şey bu, ama gerçek böyle değil. Reaction veya reaksiyon fikrine sahip olmadan Gutenberg için geliştirebilirsiniz. Tabii ki, nasıl çalıştığını ve kullanımını biliyorsanız, daha iyi olacak. Tepki ve her şeyden önce, kaçınamayacağınız şey, JSX’in sözdiziminin, kullanacağımız reaksiyonda öğeler yapmak için nasıl çalıştığını bilmektir. Arayüzü tanımlamak için bileşenimizi tanımlamak için (ister Gutenberg bloğu ister editörde ekran olsun). Ürün ve alışveriş listesi bileşenleri için arayüzü tanımlamak istediğinizi ve ardından Gutenberg bloğunda kullanmak istediğinizi düşünün. Standart bir gösterimle, Gutenberg tarafından sağlanan wp.element.createelement () işlevini kullanarak aşağıdaki şekilde yapacaksı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 aşağıdaki gibidir:
JSX’i kullanmak, kodun okunması çok daha basit ve daha kolay olduğu için bileşenleri yazma ve yeniden kullanma basitleştirir. Gördüğünüz gibi, önceki örnekte, sadece JSX ile nasıl başa çıkılacağını bilerek ve Süper Güçle HTML gibi kullanacağını bilerek, reaksiyon fikrine sahip olmadan bir reaksiyon bileşeni yaptık. Ayrıca, Gutenberg’deki bileşenleri de kullanabilirsiniz. Resmi belgelere de bağlı olan bu sanatçıda görebilirsiniz. Sadece bir sorun var. JSX gösterimi nihayet herhangi bir tarayıcı tarafından yorumlanabilecek sıradan bir koda dönüşmesi için kodu Babylon ile değiştirmeniz gerekir. Ancak, bu bir drama değildir, çünkü webpack kullanarak otomatik olarak yapabilirsiniz.
Redux Başvurunuzun durumunu korumak için Redux’u duymuş olabilirsiniz. Bu, JavaScript uygulamasında durumu depolamak ve yönetmek için bir araçtır. Bir kez daha, nasıl kullanacağınızı öğrenmekle ilgileniyorsanız, bu Wes BOS videosunu tavsiye ederim, ancak gerek yok. Kendi veri depolamanızı yapmanız gerekiyorsa, bunu Redux ile yapmayacaksınız, ancak Gutenberg’de bulunan @wordPress/veri paketini kullanacaksınız. Bu paket Redux’u dahili olarak kullanıyor, ancak önemli değil. Ayrıca, en azından erken aşamalarda ihtiyaç duyamayabileceğiniz komplekslerin kullanım vakaları hakkında konuşuyoruz. Şimdilik unut.
NPM, Webpack, Babel, Postcss ve ESLINT JavaScript ve React ve JSX’in temel kavramlarına ek olarak, WordPress’te zaten var olan yeni dönemler için, geliştirici görevlerinizin daha basit ve çok otomatik olması için aşağıdaki teknolojiyi bilmeniz gerekir:
NPM: JavaScript için Bağımlılık Yöneticisi. NPM yüklemesi yaparak ihtiyacınız olan bağımlılığı belirleyin ve yükleyin.
WebPack: JavaScript İndir. Başlangıçta yapılandırmak kolay değildir, ancak bir kez aldıktan sonra, JavaScript dosyalarını yönetmeyi kolaylaştırır: transpilation, minifikasyon …
Babylon: JavaScript derleyicisi bugün bu dilin sözdiziminin bir sonraki sürümünü kullanabilmek için.
Postcss: Tıpkı Babylon gibi, ancak CSS stil sayfanız için.
ESLINT: Kod yazarken kaçınabilmeniz için JavaScript ve Stil Hatası kullanımını algılama.
Burada bu teknolojinin çoğundan bahsettim. Ancak, yakında gerçek durumlarda kullanabilmeniz için bir WordPress geliştirme projesine nasıl entegre olacağını açıklayacağım başka bir makale yazacağım.
Gutenberg için yeni bir blok nasıl yapılır, hadi en önemli bölüme girelim: WordPress editörü için yeni bir blok yapmaya başlamak için neye ihtiyacımız var. Kendi bloğunuzu yapmaya başlamanız gereken ilk şey, wp.blocks.registerblockType () işlevinde ustalaşmaktır. Bu işlevin en eksiksiz belgelerini Gutenberg’in resmi rehberinde bulacaksınız. Bu işlevin bağımsız değişkeni, benzersiz olması gereken bloğun adına sahip bir dizedir ve en önemli parçanın kaydet ve düzenleme bloğu işlevi olduğu bir blok yapılandırmasına sahip nesne. Bu makalede size kısaca açıkladım.
Bu çok karmaşık görünüyorsa, Create-Guten-Block adlı bir Ahmad Awais araç seti kullanmaya başlayabilirsiniz.Bu, ilk bloğunuzu oluşturmak için gereken tüm bağımlılıklara sahip bir klasör yapısı oluşturur.Bunu aşağıdaki videoda kullanma öğreticisini görebilirsiniz: Son olarak, bu hala çok karmaşık görünüyorsa, son seçeneğiniz mevcuttur.Elbette gelişmiş özel alan eklentisini biliyorsunuz (ACF olarak da bilinen kısaltıldı).Bu eklenti, JavaScript’i bilmeden Gutenberg için bir blok oluşturmanıza izin verecektir.Ama sana açıklamayacağım, Mauricio Gelfes’in bunu yapmasına izin vereceğim.Bu konunun sunumunu, WordPress.tv’de (İspanyolca’da) zaten sahip olduğunuz 2019 Zaragoza WordCamp’te kontrol edin:
