Gutenberg Editörüne Düğme Nasıl Eklenir

Bazıları tarafından nefret edilen ve birçokları tarafından sevilen yeni WordPress blok düzenleyicisinin sizi kayıtsız bırakmadığı açıktır. Bir aydan fazla bir süredir bizimle birlikte ve daha fazla eklenti ve tema onunla uyumlu.

Bir eklenti geliştiricisi olarak şunu söylemeliyim ki ürünlerimizi Gutenberg'e uyarlamak birkaç günde yapılabilecek bir şey değil. Nelio'da, eklentilerimizin aynı işlevlerini önemli bir değişiklik olmadan sürdürebilmek için uzun süredir yeni blok düzenleyicinin evrimini ve gelişimini takip ediyoruz.

Nelio İçeriğini Gutenberg'e uyarlamanın kilit noktalarından biri, TinyMCE (klasik düzenleyici) ile yaptığımız şeyi yapmaya devam etmek için metin bloklarına düğmeler ekleme yeteneğiydi. Nelio Content'in en ilginç özelliklerinden birinin, doğrudan sosyal ağlarınızda paylaşmak için içerikteki ifadeleri seçmenize veya işaretlemenize izin vermesi olduğunu ve ardından algoritmamızın en alakalı olanı seçip bir dizi oluşturacağını hatırlatırım. otomatik promosyon mesajları. Bu yazımda size daha önce anlatmıştım.

TinyMCE'ye ek düğmeler eklemek için WordPress oldukça eksiksiz bir belgeye sahiptir. Ama bunu Gutenberg'de nasıl yaparız? WordPress'te zengin metin bloklarına nasıl düğme ekleriz?

Bu işlevselliği korumanın, yalnızca müşterilerimiz için değil, aynı zamanda kendimiz için de Nelio İçeriği gibi kaliteli bir ürün sağlamaya devam etmenin anahtarı olduğu açıktır, çünkü biz de Gutenberg'deki cümle vurgulama işlevini kullanmakla ilgileniyoruz.

Bu nedenle Ocak 2018'de (neredeyse bir yıl önce, bu yazıyı yayınlarken) Gutenberg projesinin GitHub'ında sorunu açıklayan ve yardım isteyen bir konu açmaya karar verdim. Orada, seçilen metinle bu tür bloklarda çalışmak için Gutenberg'in metin bloklarına düğme ekleme olasılığını sordum.

Sorunun gelişimi olumluydu ve sonunda Gutenberg'in Format Türleri sayesinde bu tür işlevsellik eklendi. Dökümantasyon hala oldukça zayıf olduğu için (bu yazıyı yazarken), blok düzenleyicinin metin bloklarına nasıl özel bir düğme ekleneceğini açıklayacağım, böylece zamanınızı boşa harcamazsınız ve daha kolay bir zamanınız olur. Bende.

Düzenleyiciye bir düğme ekleyen tüm eklenti kodlarını bu GitHub deposunda bulacaksınız. Oldukça basit olmasına rağmen, bu projenin en önemli kısımlarını daha ayrıntılı olarak açıklayacağım.

Anahtar proje dosyası /src/js/gutenberg.js ve aşağıda sahip olduğunuz dosyadır:

registerFormatType işlevi, WordPress çekirdeğine özeldir ve eylemi tetikleyen düğmeyle birlikte yeni bir biçim türü eklemenize izin veren işlevdir. Bir ad ( 'nelio/button' ) ve bağımsız değişkenlerle birlikte bir JavaScript nesnesini parametre olarak iletirsiniz. Bu argümanlar arasında, bizim durumumuzda bloğa koymak istediğimiz düğme olacak olan React Element döndüren edit yöntemine sahipsiniz.

Bu düğme bir RichTextToolbarButton , burada tanımlı bulabileceğiniz Gutenberg düzenleyicisinin bir React bileşeninden başka bir şey değildir. Bu bileşenin bir simgeye (bu durumda Nelio'nun logosuna sahip bir SVG dosyasıdır), düğmenin başlığına ve düğme tıklandığında yürütülecek bir işleve ihtiyacı vardır. Bu işlev, seçilen metnin tarayıcı konsolunda alındığı ve yazdırıldığı doTheJob işlevini çağırarak sona erer. Seçilen metni işlemek istediğiniz herhangi bir JavaScript kodunu ekleyebileceğiniz yer burasıdır.

RichTextToolbarButton'un simge özelliğinde, SVG yerine WordPress Dashicon adıyla bir dize koyabilirsiniz. SVG'nin çalışması için, SVG dosyalarını React öğelerine dönüştüren svg-react-loader paketini kullandığımızı unutmayın; bu, bu React bileşenlerinin ihtiyaç duyduğu şeydir.

Kod, anlaşılmasını kolaylaştırmak için ES6+ sözdizimini kullanır, ancak çalışması için onu Babel ile işlemeniz gerekir ve bunun için web paketinde şu yapılandırmaya sahibiz:

Önceki web paketi yapılandırma dosyasının her satırının ne için olduğu hakkında ayrıntılara girmeyeceğim, ancak bakarsanız, SVG dosyaları için svg-react-loader ve JavaScript'i işlemek ve dönüştürmek için babel-loader kullandığımızı göreceksiniz. herhangi bir tarayıcıda çalışan koda dönüştürün. Bu yazıda tüm bu modern teknolojiler hakkında zaten konuştum.

Sonuç, /dist/js içinde görünen gutenberg.js JavaScript dosyasıdır. Şimdi yapmamız gereken, (her zaman olduğu gibi) wp_enqueue_script kullanarak bu dosyayı WordPress düzenleme ekranına yüklemek:

Komut dosyasının enqueue_block_editor_assets kancasında kuyruğa alındığını unutmayın; bu, komut dosyasının yalnızca WordPress blok düzenleyicisi kullanıldığında yükleneceğini bize garanti edendir.

Kodu denemek istiyorsanız GitHub projesini indirin ve klasörü /wp-content/plugins içindeki WordPress'inize taşıyın. Orada bir terminal açın ve npm install çalıştırın. Her şeyin çalışması ve kodumuzun gerektirdiği gerekli bağımlılıkları dahil edebilmeniz için NodeJS'nin kurulu olması gerekir.

Bağımlılıklara sahip olduğunuzda, son kodu oluşturmak için terminalde npm run build (JavaScript'i işleme vb.). Artık WordPress'inize gidebilir ve yeni eklediğimiz eklentiyi etkinleştirebilirsiniz.

Düzenlemek için bir gönderiyi açtığınızda, metin bloklarında yeni düğmenin göründüğünü göreceksiniz. Metnin bir parçasını seçer ve düğmeye tıklarsanız, seçilen metnin tarayıcı konsolunda göründüğünü göreceksiniz. Yukarıdaki kodda gördüğümüz gibi olmasını beklediğimiz şey buydu.

Daha Fazlasını Bilmek İçin…

Bu, bir metin bloğuna bir düğmenin nasıl yerleştirileceğinin yalnızca minimum bir örneğidir. Düğmeye tıkladığınızda seçilen metnin değiştirilmesini istiyorsanız, farklı, daha karmaşık biçimlerde birkaç düğmenin eklendiği bu eklentinin kodunu incelemenizi tavsiye ederim.

Öte yandan konuya daha da derine inmek isteyenler için, Gutenberg'in varsayılan arayüzünü farklı ek öğeler ekleyerek değiştiren GhostKit eklentisinin koduna bakmanızı tavsiye ederim. Aynı zamanda çok iyi yapılandırılmış ve anlaşılması kolay bir koddur.

Bir noktada, bu Gutenberg özelliklerinin tüm yönlerini kapsayan resmi ve ayrıntılı bir belgeye sahip olacağız, ancak şimdilik, WordPress blok düzenleyicisinin bu tür değişikliklerini nasıl uygulayacağımızı öğrenmek için kodu okumamız gerekiyor. İyi şanlar!

Unsplash'ta Ashim D'Silva'nın öne çıkan görseli.