@wordpress/scripts kullanarak Gutenberg Editörüne Düğme Nasıl Eklenir

Yaklaşık bir buçuk yıl önce Antonio, eklentilerimizi yeni WordPress blok düzenleyicisine uyarlarken karşılaştığımız zorluklardan birini açıklayan bu blog gönderisini yazdı. Eğitiminin sonucu şuna benziyordu:

Neyse ki ya da ne yazık ki Gutenberg bu bir buçuk yılda çok değişti. Geliştirme yığını genişliyor ve gelişiyor ve eklenti ve tema geliştiricileri yeni teknolojileri benimsemek ve uyarlamak zorunda kaldı. Ve aynı zamanda deneyimlerimiz hakkında yazan ve öğrendiklerimizi paylaşan bizler, güncel kalabilmeniz için eğitimlerimizi güncellemeye "zorlandı". Ama bundan mutluyuz!

Birkaç hafta önce, okuyucularımızdan biri olan Ivan, Antonio'nun eğitimine yardım isteyen bir yorum bıraktı. Görünüşe göre Antonio'nun eklentisini uygulayamadı. Ve dürüst olmak gerekirse, bu beni şaşırtmadı çünkü son zamanlarda işler çok değişti. Bu nedenle, Ivan'a ve bizi okuyan ve WordPress hakkında öğrenmeye devam etmek isteyen herkese yardımcı olmak için, WordPress'in bize sunduğu tüm yeni araçlardan yararlanarak Gutenberg blok düzenleyicisine nasıl düğme ekleneceğine ilişkin öğreticiyi yeniden oluşturalım!

Eklenti oluştur

Yapmamız gereken ilk şey bir WordPress eklentisi oluşturmak. Bu oldukça basit. Temel olarak, tek yapmamız gereken wp-content/plugins içinde eklentimize vermek istediğimiz adla (örneğin gutenberg-button ) bir klasör oluşturmak ve bunun içinde aynı ada ve .php uzantısı Ardından eklenti dosyanıza aşağıdaki kodu yazın:

Şimdi önceki snippet'in ne yaptığına daha yakından bakalım:

• İlk önce bir <?php etiketi açıyoruz. Burada sürpriz yok.
• Ardından, bu ana dosyaya çok satırlı bir yorum ekliyoruz. Yorum, "Anahtar / Değer" çiftlerine sahip birkaç satır içerir. Örneğin, eklentinin adını ( Plugin Name ), sürümünü ( Version ) veya yazarın adını ( Author ) nasıl belirttiğimizi görüyoruz. Tüm bu bilgiler daha sonra WordPress içindeki Eklentiler bölümünde görünecektir.
• Son olarak, bazı ortak kodlar ekliyoruz:
  • bir namespace belirleriz (burada ad alanlarından bahsetmiştik),
  • dosya çalışırsa WordPress'in bir parçası olarak çalıştırıldığından emin oluruz ve
  • eklenti hakkında bazı sabitler tanımlıyoruz (bu daha sonra yardımcı olacaktır).

Tüm bunları yaptıktan sonra, WordPress'imizin Eklentiler ekranına gidersek, Gutenberg Düğmesinin orada olduğunu göreceğiz:

etkinleştiriyoruz ve… işte! Elbette, hiçbir şey yapmayacak, ama zaten orada.

JavaScript eklentisi geliştirme

Günümüzde, WordPress geliştiricilerinin JavaScript konusunda yetkin olması gerekiyor. Gutenberg'in çekirdekte olmasının sonuçlarından biri de bu sanırım. Ve bu eğitim bir istisna değildir.

Ortamın hazırlanması

Gutenberg arayüzüne yeni bir buton eklemek istiyorsak bu özelliği JavaScript ile kodlamalıyız. Öyleyse eklentimizde JavaScript geliştirme ortamını hazırlayalım. Bunu yapmak için komut satırınızdan aşağıdaki komutu çalıştırmanız yeterlidir (bunu yaparken wp-content/plugins/gutenberg-button olduğunuzdan emin olun):

 npm init

ve talimatları izleyin:

 This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gutenberg-button) version: (1.0.0) description: Adding a formatting button in Gutenberg. entry point: (index.js) ...

Bu işlemin sonucu bir package.json dosyasıdır. Birkaç dakika içinde göreceğiniz gibi, bu dosya gelecekte son derece yardımcı olacaktır.

Bu yazının başlığında zaten açıkladığım gibi, eklentimizi oluşturmak için @wordpress/scripts kullanacağız. Öyleyse, aşağıdaki komutu çalıştırarak bunu bir bağımlılık olarak ekleyelim:

 npm install --save-dev @wordpress/scripts

Bu komut, eklentimizin içinde ( node_modules altında) bir dizi bağımlılığı indirecek ve package.json değiştirecek, böylece @wordpress/scripts scripts'in artık bir geliştirme bağımlılığı olduğu açık.

Bu paketin belgelerine bir göz atarsanız, derlemek, sözdizimini doğrulamak, kodu biçimlendirmek vb. için birçok komut dosyası içerdiğini göreceksiniz:

 { "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "format:js": "wp-scripts format-js", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:md:docs": "wp-scripts lint-md-docs", "lint:md:js": "wp-scripts lint-md-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "packages-update": "wp-scripts packages-update", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

öyleyse package.json dosyamızı "scripts" bölümü önerilen tüm komutları içerecek şekilde düzenleyelim.

Her şeyin çalıştığı nasıl doğrulanır…

Projenizin kök dizininde bir src klasörü oluşturalım ve içine bir index.js dosyası ekleyelim. Bu, eklentimizin ana JavaScript dosyası olacak ve tüm kodunuzu içerecek (ana dosya src/index.js olduğu sürece kodu istediğiniz gibi düzenleyebilirsiniz).

Aşağıdaki index.js ifadesini ekleyerek işlerin beklendiği gibi çalışıp çalışmadığını deneyelim:

 console.log( 'Hi!' );

ve projeyi npm run build kullanarak inşa etmek. Bu, kodunuzu bir tarayıcının çalıştırabileceği bir şeye aktaracak (aslında şu anda gerekli değildi, ancak sadece birkaç dakika içinde olacak) ve bir build klasörü içinde yeni bir komut dosyası oluşturacaktır.

Şimdi tek yapmamız gereken WordPress'e bu betiğin var olduğunu söylemek, böylece onu yükleyebilir. Bunu yapmak için eklentinizin ana dosyasını ( gutenberg-button.php ) açın ve sonuna aşağıdaki satırları ekleyin:

 function enqueue_script() { wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', [], GUTENBERG_BUTTON_VERSION ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

Dikkat ederseniz, WordPress'e yeni komut /build/index.js bir blok düzenleyici kaynağı olarak kuyruğa almasını söylediğimizi göreceksiniz. Bu şekilde, bir kullanıcı blok düzenleyiciye eriştiğinde, komut dosyamız düzenleyicinin içereceği varlıkların bir parçası olacaktır.

Öyleyse şunu kontrol edelim. WordPress Kontrol Panelinize gidin, bir gönderiyi düzenleyin ve tarayıcınızın JavaScript konsoluna bakın. İşler beklendiği gibi gittiyse, "Merhaba!" konsolda yazılı:

Gutenberg'e bir düğme eklemek için öğreticimizi çoğaltma

Pekala, şimdi JavaScript kodunu yazabileceğimizi ve npm run build edebileceğimizi gördük, Antonio'nun öğreticisini kopyalamanın zamanı geldi. Ve bu, sevgili okuyucu, son derece basittir.

src/index.js dosyasını açın ve önceki console.log ifadesini aşağıdakiyle değiştirin:

Gördüğünüz gibi, bu, Antonio'nun birkaç ay önce yazdığı kodun neredeyse aynısı. Temel fark, Gutenberg'in işlevlerine ve bileşenlerine erişmek için artık wp global değişkenini kullanmamamızdır; bunun yerine artık import ifadelerine güveniyoruz. Ama onun dışında hemen hemen aynı.

Kodu yazdıktan sonra, npm run build ve hepsi bu kadar! Artık Gutenberg'de düğmeniz var:

Bir metin seçip düğmeye tıklayarak çalıştığından emin olalım:

ve işte burada, metnin tekrar konsolda göründüğünü görüyoruz!

Bağımlılıklar hakkında son bir not…

build klasörünün içine bir göz atarsanız, @wordpress/scripts scripts'in yalnızca bir index.js dosyası oluşturmadığını, aynı zamanda bir index.asset.php dosyasına sahip olduğunu görürsünüz. Bu dosya, iki özelliğe sahip küçük bir nesne tanımlar:

• eklentimiz için gerekli olan bağımlılıkların listesi (yani, WordPress komut dosyaları)
• yapı versiyonu

Komut dosyasının düzgün çalışacağından emin olmak istiyorsak, komut dosyamızı WordPress'te kuyruğa alırken bu özelliklerin her ikisini de kullanabiliriz (ve kullanmalıyız). Bunu yapmak için gutenberg-button.php geri dönün ve aşağıda gösterildiği gibi değiştirin:

 function enqueue_script() { $asset = include GUTENBERG_BUTTON_PATH . '/build/index.asset.php'; wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', $asset['dependencies'], $asset['version'] ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

Nesneyi bir include ifadesi kullanarak index.asset.php içine yükleyin ve sahip olduğumuz bağımlılıklar listesini ( [] ) gerçek bağımlılıklarla değiştirin ve eklenti sürümü olarak yapı numarasını kullanın.

Sonuçlar

Gerçekten kullanışlı WordPress eklentileri oluşturmak zordur. JavaScript'in nasıl çalıştığını iyi anlamalı ve WordPress'in sahip olduğu tüm kaynaklara aşina olmalısınız. Ancak @wordpress/scripts paketi sayesinde JavaScript geliştirme ortamını hazırlamak ve WordPress içinde çalışabilen bir JavaScript eklentisi oluşturmak hiç olmadığı kadar kolay.

Umarım bugünkü yazımı beğenmişsinizdir. Ve her zaman olduğu gibi, herhangi bir noktada takılırsanız veya sorularınız olursa lütfen yorum bırakın, size yardımcı olalım.

Oh ve bu arada, işte projeye bir bağlantı, dilerseniz indirilmeye ve test edilmeye hazır. Sadece projeyi klonlayın, npm install , npm run build edin ve bir şans verin!

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