Gutenberg editörüne düğmeler nasıl eklenir

Nelio içeriğiyle paylaşılacak cümleleri vurgulamak ana özelliklerden biridir. Bunu klasik bir editörle bu şekilde yaptığınızdır. Tinymce’deki ek düğmeye girmek için WordPress’in tam belgeleri vardır. Ama bunu Gutenberg’de nasıl yapacağız? WordPress’te zengin bir metin bloğuna nasıl bir düğme eklerim? Bu işlevin sürdürülmesinin, sadece müşterilerimiz için değil kendimiz için Nelio içeriği gibi kaliteli ürünleri sağlamaya devam etmenin anahtarı olduğu açıktır, çünkü Gutenberg’de cümle cümlelerinin cümlesini kullanmakla da ilgileniyoruz. Github’da sorunu açıklayan ve Ocak 2018’de (neredeyse bir yıl önce, bu yazıyı yayınlarken) yardım isteyen bir sorun açmaya karar verdim. Orada, blokta seçilen metinle çalışmak için Gutenberg metin bloğuna düğmeler ekleme olasılığını istedim. Sorunun evrimi olumludur ve sonunda Gutenberg formatının türü sayesinde bu tür işlevsellik eklenir. Dokümantasyon hala çok kötü olduğundan (bu yazıyı yazdığımda), blok metin düzenleyicisi bloğuna nasıl özel bir düğme ekleyeceğimi açıklayacağım, böylece zaman kaybetmez ve benden daha kolay zamanınız olmaz.
Bu GitHub deposunda düzenleyiciye düğmeler ekleyen tüm eklenti kodunu bulacaksınız. Oldukça basit olmasına rağmen, bu projenin en önemli kısmını daha ayrıntılı olarak açıklayacağım. Ana proje dosyası,/src/js/gutenberg.js’de bulacağınız şeydir ve aşağıda sahip olduğunuz şeydir:
WordPress Core için özel kayıt formatType işlevi ve eylemi tetikleyen düğmelerle birlikte yeni biçim türleri eklemenizi sağlayan bir işlevdir. Parametre olarak bağımsız değişkenlerle adları (‘nelio/button’) ve javascript nesnelerini verirsiniz. Bu argümanlar arasında, bizim durumumuzda blokta yerleştirmek istediğimiz düğme olacak React öğelerinden biri olan düzenleme yöntemine sahipsiniz. Burada tanımlanan bulabilirsiniz. Bu bileşen bir simge (bu durumda Nelio logosuna sahip SVG dosyası), düğmenin başlığı ve düğmeye tıklandığında gerçekleştirilecek işlev gerektirir. Bu işlev nihayet seçilen metnin bir tarayıcı konsoluna alındığı ve yazdırıldığı Dothejob işlevini çağırır. Seçilen metni işlemek istediğiniz JavaScript kodunu ekleyebileceğiniz bir yerdir.
RichTextToolbarbutton Icon özniteliğinde, SVG yerine Dashicon WordPress adıyla bir dize koyabilirsiniz. SVG’nin çalışması için, SVG dosyalarını bu reaksiyon bileşeninin ihtiyaç duyduğu React öğelerine dönüştüren SVG-React-Loader paketini kullandığımızı unutmayın.
Kod, anlaşılmasını kolaylaştırmak için ES6+ Sözdizimi kullanıyor, ancak işlevini sağlamak için Babylon ile işlemelisiniz ve bunun için bu yapılandırmayı Webpack’te var:

Önceki webpack yapılandırma dosyasının her satırını ayrıntılı olarak açıklamayacağım, ancak görürseniz, JavaScript’i işlemek ve bir işlevi işlemek için SVG ve BABEL-Loader dosyaları için SVG-React-Yükleyicileri kullandığımızı göreceksiniz. tarayıcı herhangi bir. Bu yazıdaki tüm bu modern teknoloji hakkında konuştum. Sonuç, /dist /js’de görünen JavaScript gutenberg.js dosyasıdır. Şimdi tek yapmamız gereken bu dosyayı WordPress Düzenleme ekranına yüklemek, (her zamanki gibi) WP_ENQUEUE_SCRIPT kullanın: Komut dosyasının yalnızca WordPress blok düzenleyici kullanıldığında yayınlanmasını sağlayan enqueue_block_ededor_assets kancasında teslim edildiğini unutmayın. Kodu denemek istiyorsanız, GitHub projesini indirin ve klasörü /WP-Concent /Eklentileri içindeki WordPress’inize taşıyın. Orada, terminali açın ve NPM kurulumunu çalıştırın. Nodejs’i her şeyin çalışması ve kodumuzun ihtiyaç duyduğu bağımlılıkları içerebilmesi için yüklemelisiniz. Bir bağımlılığınız olduğunda, bir son kod üretmek için terminalde NPM Run derlemesini çalıştırın (JavaScript vb. İşlem). Şimdi WordPress’inizi açabilir ve yeni eklediğimiz eklentiyi etkinleştirebilirsiniz.
Gutenberg’deki zengin metin bloğuna eklediğimiz özel düğme. Düzenlenecek bir yayını açtığınızda, metin bloğunda yeni bir düğme görünür. Metin parçasını seçer ve düğmeyi tıklarsanız, seçilen metnin tarayıcı konsolunda göründüğünü görürsünüz. Yukarıdaki kodda gördüğümüz gibi olmasını beklediğimiz şey budur. Daha fazla bilgi edinmek için … Bu, düğmenin metin bloğuna nasıl yerleştirileceğine dair minimum bir örnektir. Düğmeyi tıkladığınızda seçilen metnin değiştirilmesini istiyorsanız, farklı ve daha karmaşık formatlara sahip bazı düğmelerin eklendiği bu eklenti kodunu incelemenizi öneririm. Öte yandan, daha derine inmek isteyenler için Konu, farklı ek öğeler ekleyerek varsayılan Gutenberg arayüzünü değiştiren GhostKit eklentisi kodunu görmenizi öneririm. Bu aynı zamanda yapılandırılmış bir koddur ve anlaşılması kolaydır. Bir noktada, bu Gutenberg özelliğinin tüm yönlerini içeren resmi ve ayrıntılı belgelere sahip olacağız, ancak şimdilik bu tür WordPress blok düzenleyicisinin nasıl uygulanacağını öğrenmek için kodu okumalıyız. İyi şanlar! Ashim d’ilva tarafından Üstün Görüntü Unplash.