Node.js ile Gutenberg dışındaki WordPress bloklarıyla nasıl çalışılır

WordPress blok düzenleyicisi, bu platformla nasıl içerik oluşturduğumuzla ilgili her şeyi değiştiriyor. WordPress'in yeni sürümlerinin bloklarla ilgili getirdiği birçok yenilik var ve gelecekte daha gidilecek çok yol var.

Bu nedenle, bir geliştirme platformu olarak WordPress ile çalışan geliştiriciler, bloklarla çalışırken giderek daha rahat hissetmelidir. Ancak PHP'den JavaScript tabanlı teknolojilere geçiş yapmak zor olabilir.

Her neyse, becerilerinizi güncellemelisiniz ve yeni WordPress geliştirme yığınından korkmamalısınız. Bununla ne kadar erken rahat edersek, yenilik yapmak için o kadar çok fırsatımız olacak.

Bugün, WordPress editörünün içinde olmak zorunda kalmadan Gutenberg bloklarıyla nasıl çalışabileceğimizi göreceğiz. Niye ya? Birkaç nedenden dolayı…

İlk ve en bariz olanı, yapabildiğimizdir. Bir süredir, Gutenberg editöründeki çekirdek blokların tanımı ayrı bir kod paketi olarak mevcuttu. Bu, NPM paket yöneticisi sayesinde bunları WordPress dışında kullanabileceğimiz anlamına gelir.

Ek olarak, blokları yönetmek ve onlarla çalışmak için bir dizi fonksiyon vardır. Ve ayrıca kendi paketlerinde bulunurlar. Bu nedenle, standart WordPress bloklarıyla çalışmak istiyorsak, projemizde sadece bu iki paketi bağımlılık olarak içe aktarmamız gerekiyor.

Bunu başarmak için projemiz için bir klasör oluşturmalı, proje verileriyle bir package.json dosyası oluşturmak için npm init çalıştırmalı ve ardından bu iki bağımlılığı yüklemek için aşağıdaki komutu çalıştırmalıyız:

 npm install @wordpress/block-library @wordpress/blocks

Bir sonraki adım, yürütmek istediğimiz kodla bir index.js dosyası oluşturmaktır. Bu kod, sunucularda çalışan bir JavaScript çeşidi olan Node.js'de yazılmıştır. Bugünkü örnek için index.js içeriği aşağıdaki gibi olabilir:

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

Önceki kodda görünen ilk iki ifade, bağımlılıkları içe aktarmak için require ifadelerdir. Daha önce de söylediğim gibi, standart WordPress blok tanımını içe aktarmak istiyoruz. Bunu require('@wordpress/block-library') ile yapıyoruz. Bu paketten sadece registerCoreBlocks fonksiyonunu import etmek istediğimiz için, eşitlik sembolünün sol tarafında o fonksiyonu yok ediyoruz.

Aynı şekilde @wordpress/blocks paketini de bağımlılık olarak içe aktarıyoruz. Bu paket, bloklarla çalışma işlevlerine sahip olan pakettir. Pakette tanımlanmış birçok fonksiyon vardır (bunlara burada sahipsiniz), ancak bu örnekte, yalnızca createBlock yeni bloklar oluşturmasını ve bunları bir WordPress gönderisinin içeriğine kaydedebileceğimiz dizelere dönüştürmek için serialize getirmesini istiyoruz.

Bağımlılıkları içe aktardığımıza göre, bunları kullanabilmemiz için standart WordPress blok türlerinin tanımını yükleyen registerCoreBlocks işlevini çağırıyoruz. O andan itibaren bloklar oluşturabiliriz, createBlock işlevini parametre olarak çağırdığımızda, oluşturmak istediğimiz blok tipinin adını ve öznitelikleri ile bir nesneyi çağırdığımızda görebileceğiniz gibi.

Önceki örnekte bir paragraf bloğu oluşturacağız, bu yüzden 'core/paragraph' adını geçiyoruz ve öznitelikler nesnesinin içine, oluşturulacak paragrafın content anahtarının içinde bir dize olarak iletiyoruz.

Son olarak, yeni oluşturduğumuz bloğu ileterek serialize işlevini çağırırız. Sonuç olarak console.log işleviyle çıktısını alabileceğimiz bir dizgemiz olacak.

Şimdi terminalde node index.js yazarak yukarıdaki kodu çalıştırabiliriz. Bunu yaparsak, aşağıdakiler olur:

Yürütmede bir hata var! Bunun nedeni, tanımlı olmayan window değişkenine sahip olmamız gerektiğidir. Ama bu değişken nedir ve neden buna ihtiyacımız var?

Pencere, tarayıcının tarayıcı penceresinin kendisini tanımladığı ve temsil ettiği bir JavaScript nesnesidir. Kodu terminalimizde yürüttüğümüz için (veya üretimde, bir sunucuda çalışıyorsa), söz konusu değişkene sahip bir tarayıcımız yok. Bu, WordPress bloklarını bir tarayıcının dışında kullanamayacağımız anlamına mı geliyor? Tabii ki olmaz!

Node.js, kodumuzu bir tarayıcı ortamında çalıştırdığımızı simüle etmemize izin veren birkaç pakete sahiptir. Bu durumda tarayıcı-env paketini kullanacağız. WordPress paketleriyle daha önce yaptığımız gibi kurmamız gerekiyor:

 npm install browser-env

index.js dosyamızda browser-env bağımlılığını içe aktarmak için yeni bir require eklememiz gerekiyor. Ama aynı zamanda, gerekli matchMedia yöntemiyle gelmediği için window nesnesini “düzeltmeliyiz”. Aşağıdaki kodu kopyalayıp index.js dosyasının başına eklerseniz sorun çözülür:

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

Şimdi kodu tekrar çalıştırabilirsiniz ve başarısız olmadığını ve createBlock işlevini kullanarak az önce oluşturduğumuz paragraf bloğunun metinsel temsilini döndürdüğünü göreceksiniz:

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

Bu GitHub deposundaki tüm kodlara sahipsiniz. Editörün dışından gelen bloklarla çalışma olanakları çok büyük. Bloklar oluşturabilir, klonlayabilir, farklı türde bir bloğa dönüştürebilir ve çok daha fazlasını yapabilirsiniz.

WordPress düzenleyicisinin dışındaki bloklarla çalışabilmek, WordPress'imizin içeriğini değiştirmemize ve onlarla her yerden çalışmamıza olanak tanır. Bu, geliştiriciler için henüz keşfetmeye başladığımız muazzam olanaklar dünyasının kapılarını açıyor.

Biz Nelio'da zaten bu olanaklardan yararlanıyoruz. Yakında çok ilginç bulacağınızı umduğunuz yeni bir hizmeti kullanıma sunacağız. Önümüzdeki haftalarda yayınlayacağımız haberler için bizi takip etmeye devam edin?

Unsplash'ta Kelly Sikkema'nın öne çıkan resmi .