Özel Gutenberg Blokları Oluşturma: Kesin Blok Geliştirme Eğitimi

Birçok kişi Gutenberg blokları ve uygulamaları oluşturmaya başlamanın zorluklarından şikayet ediyor. Öğrenme eğrisi, özellikle geliştirme ortamını kurmanın ve yapılandırmanın zorluğundan dolayı diktir. Ek olarak, sağlam bir JavaScript, Node.js, React ve Redux bilgisi, bu oldukça karmaşık tarif için olmazsa olmaz malzemelerdir.

Resmi WordPress Blok Düzenleyici El Kitabı, geliştiricilere muazzam miktarda bilgi sağlar, ancak kendinizi bu ayrıntı denizinde kaybolmuş bulabilirsiniz.

Ve Gutenberg projesinin baş mimarı Matias Ventura'nın WP Tavern ile yaptığı röportajda bildirdiği şeyden bahsetmeye değer:

Bunu çabucak öğrenebilecek insanlar olsa da, bu hala insanlar için büyük bir engel. Bunun birkaç katmanı olduğunu düşünüyorum; dokümantasyon hem organizasyonda hem de sunumda daha iyi olabilir. Umarım orada çok daha fazlasını yapabiliriz.

Bunu akılda tutarak, okuyucularımızın Gutenberg blok geliştirmeye başlamasına yardımcı olmayı amaçlayan adım adım bir eğitim sağlamaya karar verdik.

Kulağa ilginç geliyor mu? Hadi dalalım!

Gutenberg Blok Geliştirme Ön Koşulları

Bu eğitim için gerekli olan tek beceri, iyi bir WordPress eklentisi geliştirme bilgisi ve en azından temel bir HTML, CSS, JavaScript ve React anlayışıdır.

Bu iddialı bir proje mi olacak? Bahse girerim öyle olacak!

Tamlık ve basitlik arasında doğru uzlaşmayı bulmak veya hangi konuların dahil edilip hangilerinin dışarıda bırakılacağına karar vermek kolay değildi.

Umarım orta ve ileri düzey okuyucular, React durumu, Redux deposu, yüksek dereceli bileşenler vb. gibi belirli kavramları derinlemesine incelemediğimiz için bizi affedecektir. Bu konular ek alan ve dikkat gerektirir ve blok geliştirmeye başlamak için muhtemelen çok ileri düzeydedir (bir React geliştiricisi değilseniz).

Aynı nedenle, dinamik bloklar ve meta kutular gibi Gutenberg blok geliştirme ile ilgili bazı daha ileri düzey konuları ele almayacağız.

Bu makalenin sonunda kazanacağınız bilgilerle hemen eğlenmeye ve üretken olmaya başlayabileceksiniz.

Blok oluşturmaya başladığınızda, becerilerinizi daha da geliştirmeye ve kendi başınıza daha da gelişmiş Gutenberg blokları oluşturmaya hazır olacaksınız.

Gutenberg Bloğu Nedir?

Aralık 2018'de ilk piyasaya sürülmesinden bu yana, blok düzenleyici her yönden büyük ölçüde iyileştirildi: daha güçlü API'ler, daha gelişmiş bir kullanıcı arayüzü, iyileştirilmiş kullanılabilirlik, bir ton yeni blok, Tam Site Düzenlemenin ilk uygulamaları ve çok daha fazlası .

Kısacası, Gutenberg hala yoğun bir geliştirme aşamasında olsa bile, uzun bir yol kat etti - ve bugün, blok düzenleyici güvenilir, işlevsel bir sayfa ve site oluşturucu olarak tam teşekküllü bir adaydır.

Bir geliştiricinin bakış açısından, Gutenberg, WordPress kullanıcılarının WordPress'te içerik oluşturmasına, düzenlemesine ve silmesine olanak tanıyan React tabanlı bir Tek Sayfa Uygulamasıdır (SPA). Ancak bu, geleneksel içerik düzenleyicinin gelişmiş bir sürümünü düşünmenizi sağlamamalıdır.

Bunu açıklığa kavuşturmak istiyoruz:

Gutenberg'de içerik, kullanıcıların gönderiler ve sayfalar veya tüm web sitelerini oluşturmak için kullanabilecekleri "tuğlalar" olan bloklara bölünmüştür.

Ama teknik olarak bir blok nedir?

WordPress'in tanımını seviyoruz:

“Blok”, birlikte oluşturulan, bir web sayfasının içeriğini veya düzenini oluşturan işaretleme birimlerini tanımlamak için kullanılan soyut terimdir. Bu fikir, bugün WordPress'te kısa kodlar, özel HTML ve gömülü keşif ile elde ettiğimiz kavramları tek bir tutarlı API ve kullanıcı deneyiminde birleştiriyor.

Başlıklar, paragraflar, sütunlar, resimler, galeriler ve kenar çubuğu panellerinden blok araç çubuğu kontrollerine kadar editörün arayüzünü oluşturan tüm öğeler React bileşenleridir.

Peki, React bileşenleri nelerdir? W3Schools aşağıdaki tanımı sağlar:

Bileşenler bağımsız ve yeniden kullanılabilir kod parçalarıdır. JavaScript işlevleriyle aynı amaca hizmet ederler, ancak yalıtılmış olarak çalışırlar ve bir render() işlevi aracılığıyla HTML döndürürler.

Gutenberg tarafından sağlanan düzenleme deneyimi, klasik WordPress düzenleyicisine kıyasla yeni olsa da, WordPress'in içerik parçalarınızı veritabanında saklama şekli hiç değişmiyor. Bunun nedeni, Gutenberg'in WordPress içinde çalışan ancak CMS'nin özünde çalışma şeklini değiştirmeyen bir uygulama olmasıdır.

Gutenberg ile oluşturulan gönderiler (ve buna gönderiler, sayfalar ve özel gönderi türleri dahildir), aynen klasik düzenleyicide olduğu gibi wp_posts tablosunda saklanır.

Ancak Gutenberg ile oluşturulan bir gönderide, Klasik Editör ile Gutenberg aracılığıyla oluşturulan gönderiler arasındaki temel farkı temsil eden tabloda ek bilgi parçaları bulacaksınız.

Bu bilgi parçaları HTML yorumlarına benzer ve belirli bir işlevi vardır: blokları sınırlama:

Blok sınırlayıcılar , WordPress'e ekranda hangi bloğun oluşturulacağını söyler. Ayrıca bir JSON nesnesindeki blok özellikleri için değerler sağlarlar. Bu aksesuarlar, bloğun ekranda nasıl oluşturulacağını belirler:

WordPress Geliştirme Ortamınızı Ayarlama

Modern bir JavaScript geliştirme ortamı kurmak, Webpack, React ve JSX, Babel, ESLint vb. gibi ileri teknolojiler hakkında sağlam bir bilgi birikimi gerektirir.

Korkutulmuş mu? Olma! WordPress topluluğu, karmaşık bir manuel yapılandırma sürecinden kaçınmanıza izin veren güçlü araçlar sağlayarak zaten kurtarmaya geldi.

İşleri basit tutmak için, bu makalede aktarmayı ele almayacağız (yine de blok geliştirmenin temellerini öğrendikten sonra kendinizi tanımanızı öneririz). Bunun yerine, birkaç dakika içinde modern bir JavaScript geliştirme ortamını hızlı ve kolay bir şekilde kurmak için kullanabileceğiniz iki alternatif araç tanıtacağız. Projeniz için en uygun olanı seçmek size kalmış.

Gutenberg blokları oluşturmak için bir JavaScript geliştirme ortamı kurmak, üç adımlı bir süreçtir:

1. Node.js ve npm'yi yükleyin
2. Geliştirme ortamını ayarlayın
3. Blok eklentisini kurun

Başlayalım.

1. Node.js ve npm'yi yükleyin

Geliştirme ortamınızı kurmadan ve ilk bloğunuzu kaydetmeden önce Node.js'yi ve Node paket yöneticisini (npm) kurmanız gerekir.

Node.js ve npm'yi birkaç farklı yolla yükleyebilirsiniz. Ancak önce, yazılımın makinenizde kurulu olup olmadığını kontrol etmek isteyebilirsiniz.

Bunu yapmak için terminali başlatın ve aşağıdaki komutu çalıştırın:

 node -v

Sonuç command not found ise, bilgisayarınızda Node.js kurulu değildir ve kuruluma devam edebilirsiniz.

Bu makale için, Düğüm Yükleyici olan en kolay kurulum seçeneğini seçtik. Tek yapmanız gereken işletim sisteminize uygun sürümü indirmek ve kurulum sihirbazını başlatmak:

Node.js'yi yükledikten sonra, terminalinizde node -v komutunu tekrar çalıştırın. npm paketine sahip olduğunuzu doğrulamak için npm -v komutunu da çalıştırabilirsiniz.

Artık aşağıdaki araçlarla donatıldınız:

• npx Node.js paketi çalıştırıcısı (belgelere bakın). Bu, ilk önce kurmadan bir npm komutunu çalıştırmanıza izin verir.
• npm Node.js paket yöneticisi (belgelere bakın). Bu, bağımlılıkları yüklemek ve komut dosyalarını çalıştırmak için kullanılır.

Bir sonraki adım, geliştirme ortamını kurmaktır.

2. Geliştirme Ortamınızı Kurun

Yerel makinenizde Node.js ve npm'nin en son sürümlerine sahip olduğunuzda, WordPress için bir geliştirme ortamına ihtiyacınız olacak.

DevKinsta gibi yerel bir geliştirme ortamı kullanabilir veya resmi WordPress aracını kullanabilirsiniz. Her iki seçeneğe de bir göz atalım.

Seçenek 1: Yerel Geliştirme Ortamı (DevKinsta)

Sadece birkaç tıklamayla, modern yerel WordPress geliştirme aracımız DevKinsta'yı kullanarak WordPress'i yerel olarak kurabilirsiniz. Veya MAMP veya XAMPP gibi farklı bir yerel geliştirme aracı seçebilirsiniz:

Seçenek 2: wp-env

Doğrudan komut satırından başlatabileceğiniz yerel bir WordPress geliştirme ortamı sağlayan resmi wp-env aracını da seçebilirsiniz. Noah Alen bunu şöyle tanımlıyor:

Yerel WordPress ortamları artık tek bir komut çalıştırmak kadar basit. wp-env , ağrısız yerel WordPress ortamları için sıfır yapılandırma aracıdır. Kullanıcıların zaman kaybetmeden WordPress'i hızlı bir şekilde başlatabilmeleri için seçenekler üzerinde kararlar sağlar. Aslında amaç, ister geliştirici, tasarımcı, yönetici veya başka biri olun, bu ortamları herkesin kolayca erişebileceği hale getirmektir.

Denemeye karar verirseniz, wp-env yüklemek minimum çaba gerektirir. Sadece şu adımları izleyin:

1. Adım: Docker ve Node.js Kurulumunu Onaylayın

Teknik gereksinimleri karşılamak için öncelikle bilgisayarınızda hem Docker hem de Node.js'nin kurulu olması gerekir. Bunun nedeni, wp-env bir WordPress web sitesini çalıştıran bir Docker örneği oluşturmasıdır. Kodda yapılan herhangi bir değişiklik, WordPress örneğine hemen yansıtılır.

Adım 2: Komut Satırından @wordpress/env yükleyin

Bilgisayarınızda çalışan Docker ve Node.js ile WordPress geliştirme ortamına geçebilir ve kurabilirsiniz.

wp-env global veya yerel olarak kurabilirsiniz. Bunu global olarak yapmak için, eklentiler dizini içinden aşağıdaki komutu çalıştırmanız gerekir (bununla ilgili daha fazla bilgi için aşağıdaki "Önemli" bildirim kutusunda):

 npm install -g @wordpress/env

Bunu parçalayalım:

• npm install paketi kurar.
• -g komutuna eklenen, belirtilen paketi global olarak yükler.
• @wordpress/env , kuracağınız pakettir.

wp-env başarıyla yüklendiğini doğrulamak için aşağıdaki komutu çalıştırın:

 wp-env --version

Geçerli wp-env sürümünü görmelisiniz, bu, artık eklentinizin klasöründen aşağıdaki komutu kullanarak ortamı başlatabileceğiniz anlamına gelir:

 wp-env start

Aşağıdaki adresi kullanarak WordPress kontrol paneline erişebilirsiniz:

• http://localhost:8888/wp-admin/

Varsayılan kimlik bilgileri aşağıdaki gibidir:

• kullanıcı adı: admin
• Şifre: password

Blok Eklentinizi Kurun

Şimdi üzerine inşa etmek için bir başlangıç ​​bloğu eklentisine ihtiyacınız var. Ancak, gerekli tüm dosya ve klasörlerle manuel olarak bir geliştirme bloğu eklentisi oluşturmak yerine, blok geliştirmeye başlamak için ihtiyacınız olan tüm dosya ve konfigürasyonları sağlayan bir geliştirme aracını çalıştırabilirsiniz.

Yine, seçim yapabileceğiniz birkaç seçeneğiniz var. Her birine bir göz atalım.

Seçenek 1: @wordpress/create-block ile bir Blok Eklentisi Kurma

@wordpress/create-block, Gutenberg blokları oluşturmak için resmi sıfır yapılandırma aracıdır:

Blok Oluştur, bir WordPress eklentisi için bir blok kaydetmek için bloklar oluşturmanın resmi olarak desteklenen bir yoludur. Konfigürasyon gerektirmeyen modern bir yapı kurulumu sunar. PHP, JS, CSS kodu ve projeyi başlatmak için ihtiyacınız olan her şeyi üretir.

Büyük ölçüde yarat-tepki-uygulamadan esinlenmiştir. @gaearon'a, tüm Facebook ekibine ve React topluluğuna büyük övgü.

Yerel ortamınız kurulup çalışır duruma geldiğinde, yalnızca npx @wordpress/create-block komutunu çalıştırarak bir başlangıç ​​bloğu oluşturabilirsiniz ve bu, eklenti iskelesini oluşturmak ve yeni bir blok kaydetmek için ihtiyacınız olan tüm dosya ve klasörleri sağlayacaktır. .

Nasıl çalıştığını görmek için bir test yapalım.

Komut Satırı aracınızdan /wp-content/plugins/ dizinine gidin ve aşağıdaki komutu çalıştırın:

 npx @wordpress/create-block my-first-block

Onaylamanız istendiğinde, devam etmek için y girin:

İşlem birkaç dakika sürer. Tamamlandığında, aşağıdaki yanıtı almalısınız:

Ve bu kadar!

Şimdi WordPress geliştirme ortamınızı başlatın ve WordPress panosundaki Eklentiler ekranına gidin. Eklenti listenize “İlk Bloğum” adlı yeni bir eklenti eklenmiş olmalıdır:

Gerekirse eklentiyi etkinleştirin, yeni bir blog yazısı oluşturun, blok yerleştiriciyi Widget'lar bölümüne kaydırın ve yeni bloğunuzu seçin:

Şimdi terminale geri dönün ve mevcut dizini my-first-block olarak değiştirin:

 cd my-first-block

Ardından aşağıdaki komutu çalıştırın:

 npm start

Bu, eklentiyi geliştirme modunda çalıştırmanızı sağlar. Üretim kodunu oluşturmak için aşağıdaki komutu kullanmalısınız:

 npm run build

Seçenek 2: create-guten-block ile bir Blok Eklentisi Kurma

create-guten-block , Gutenberg blokları oluşturmak için üçüncü taraf bir geliştirme aracıdır:

create-guten-block , React, webpack, ES6/7/8/Next, ESLint, Babel, vb.'yi yapılandırmadan birkaç dakika içinde WordPress Gutenberg blokları geliştirmek için sıfır yapılandırmalı geliştirme araç takımıdır (#0CJS).

Resmi create-block oluşturma aracı gibi, create-guten-block da create-tepki uygulamasına dayalıdır ve sorunsuz bir şekilde ilk blok eklentinizi oluşturmanıza yardımcı olabilir.

Araç seti, aşağıdakiler de dahil olmak üzere modern bir WordPress eklentisi oluşturmak için ihtiyacınız olan her şeyi sağlar:

• React, JSX ve ES6 sözdizimi desteği.
• sahne arkasında webpack geliştirme/üretim oluşturma süreci.
• Nesne yayma operatörü gibi ES6'nın ötesinde dil ekstraları.
• Otomatik ön ekli CSS, yani -webkit veya diğer öneklere ihtiyacınız yok.
• Kaynak haritalarla üretim için JS, CSS ve görüntüleri paketlemek için bir derleme komut dosyası.
• Yukarıdaki araçlar için tek bir bağımlılık cgb betikleri ile sorunsuz güncellemeler.

Aşağıdaki uyarıya dikkat edin:

Buradaki ödün, bu araçların belirli bir şekilde çalışmak üzere önceden yapılandırılmış olmasıdır. Projenizin daha fazla özelleştirmeye ihtiyacı varsa, onu "çıkarabilir" ve özelleştirebilirsiniz, ancak daha sonra bu yapılandırmayı korumanız gerekecektir.

Elinizde yerel bir WordPress web sitesi olduğunda, Komut Satırı aracınızı başlatın, kurulumunuzun /wp-content/plugins klasörüne gidin ve aşağıdaki komutu çalıştırın:

 npx create-guten-block my-first-block

Proje yapısı oluşturulurken ve bağımlılıklar indirilirken bir veya iki dakika beklemeniz gerekecek:

İşlem tamamlandığında aşağıdaki ekranı görmelisiniz:

Bu sonraki görüntü, Visual Studio Code'da çalışan terminal ile proje yapısını gösterir:

Şimdi WordPress kontrol panelinize geri dönün. Eklentiler ekranında yeni bir öğe listelenmelidir - bu benim ilk bloğum eklentisidir:

Eklentiyi etkinleştirin ve terminale geri dönün. Geçerli dizini my-first-block olarak değiştirin, ardından npm start :

 cd my-first-block npm start

Aşağıdaki yanıtı almalısınız:

Yine bu, eklentiyi geliştirme modunda çalıştırmanızı sağlar. Üretim kodunu oluşturmak için şunları kullanmalısınız:

 npm run build

Eklentiyi etkinleştirin ve yeni bir gönderi veya sayfa oluşturun, ardından bloklarınıza göz atın ve yepyeni Gutenberg bloğunuzu seçin:

Daha ayrıntılı bir genel bakış için veya hata olması durumunda, Ahmad Awais tarafından sağlanan belgelere bakın.

Başlangıç ​​Bloğu İskelesinin İzlenmesi

İki geliştirme aracından ( create-block veya create-guten-block ) hangisini seçerseniz seçin, artık bir blok eklentisi oluşturmak için başlangıç ​​noktası olarak kullanabileceğiniz bir blok iskeleniz var.

Ancak blok iskele tam olarak nedir?

Blok iskelesi, WordPress'in bir bloğu tanıması için ihtiyaç duyduğunuz destekleyici dizin yapısını tanımlayan kısa bir terimdir. Tipik olarak bu dizin, index.php , index.js , style.css ve diğerleri gibi dosyaları içerir - bunlar da register_block_type gibi çağrıları tutar.

Blok Düzenleyici El Kitabında kullanıldığı için resmi Blok Oluşturma geliştirme aracını seçtik. Ancak create-guten-block gibi bir üçüncü taraf aracı kullanmaya karar verseniz bile, deneyiminiz çok farklı olmayacak.

Bununla birlikte, create-block aracının derinliklerine inelim.

Create Block Dev-Tool'a Yakından Bakış

Yukarıda bahsettiğimiz gibi, Blok Oluştur, Gutenberg blokları oluşturmak için resmi komut satırı aracıdır. Terminalinizde @wordpress/create-block çalıştırılması, yeni bir blok türü kaydetmek için gereken PHP, JS ve SCSS dosyalarını ve kodunu oluşturur:

 npx @wordpress/create-block [options] [slug]

• [slug] (isteğe bağlı) — blok bilgisini atamak ve eklentiyi yüklemek için kullanılır
• [options] (isteğe bağlı) — mevcut seçenekler

Varsayılan olarak, bir ESNext şablonu atanır. Bu, JSX sözdiziminin eklenmesiyle JavaScript'in sonraki sürümünü alacağınız anlamına gelir.

Blok adını atlarsanız, komut etkileşimli modda çalışır ve dosyaları oluşturmadan önce çeşitli seçenekleri özelleştirmenize olanak tanır:

 npx @wordpress/create-block

Aşağıdaki resim, resmi Blok Oluştur aracıyla oluşturulan bir blok eklentisinin dosya yapısını göstermektedir:

Bununla birlikte, yeni blok eklentimizin ana dosya ve klasörlerini inceleyelim.

Eklenti Dosyası

Ana eklenti dosyasıyla bloğu sunucuya kaydedersiniz:

 /** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

register_block_type işlevi, blok.json dosyasında depolanan meta verileri kullanarak sunucuya bir blok türü kaydeder.

İşlev iki parametre alır:

• Ad alanı dahil blok türü adı veya block.json dosyasının bulunduğu klasörün yolu veya tam bir WP_Block_Type nesnesi
• Bir dizi blok tipi argüman

Yukarıdaki kodda, blok tipi argümanı __DIR__ sihirli sabiti tarafından sağlanır. Bu, block.json dosyasının eklentinin dosyasıyla aynı klasörde bulunduğu anlamına gelir.

package.json Dosyası

package.json dosyası, projeniz için JavaScript özelliklerini ve komut dosyalarını tanımlar. Burası proje bağımlılıklarınızı kurabileceğiniz yerdir.

Bu dosyanın ne anlama geldiğini daha iyi anlamak için favori kod düzenleyicinizle açın:

 { "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { "build": "wp-scripts build", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

scripts özelliği, npm run [cmd] kullanılarak bir paketin yaşam döngüsünde çeşitli zamanlarda çalıştırılan komutları içeren bir sözlüktür.

Bu yazıda aşağıdaki komutları kullanacağız:

• npm run build — (sıkıştırılmış) bir üretim yapısı oluşturun
• npm run start — (sıkıştırılmamış) bir geliştirme yapısı oluşturun

dependencies ve devDependencies , bir paket adını bir sürümle eşleyen iki nesnedir. üretimde dependencies gereklidir, devDependences ise yalnızca yerel geliştirme için gereklidir (daha fazlasını okuyun).

Tek varsayılan geliştirici bağımlılığı, "WordPress geliştirme için uyarlanmış yeniden kullanılabilir komut dosyaları koleksiyonu" olarak tanımlanan @wordpress/scripts paketidir.

blok.json Dosyası

WordPress 5.8'den başlayarak, block.json meta veri dosyası, blok türlerini kaydetmenin kurallı yoludur.

Block.json dosyasına sahip olmak, WordPress Eklentileri Dizini'nde gelişmiş performans ve daha iyi görünürlük dahil olmak üzere çeşitli avantajlar sağlar:

Performans açısından bakıldığında, temalar varlıkları geç yüklemeyi desteklediğinde, block.json'a kayıtlı blokların varlıkları kutudan çıkar çıkmaz optimize edilmiş olacaktır. style veya script özelliklerinde listelenen ön uç CSS ve JavaScript varlıkları, yalnızca blok sayfada mevcut olduğunda kuyruğa alınır, bu da sayfa boyutlarının küçülmesine neden olur.

@wordpress/create-block komutunu çalıştırmak aşağıdaki block.json dosyasını oluşturur:

 { "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

İşte varsayılan özelliklerin tam listesi:

• apiVersion — blok tarafından kullanılan API sürümü (geçerli sürüm 2)
• name — ad alanı içeren bir blok için benzersiz bir tanımlayıcı
• version — bir bloğun mevcut versiyonu
• title — bir blok için görünen başlık
• category — bir blok kategorisi
• icon — bir Dashicon bilgisi veya özel bir SVG simgesi
• description — blok denetçisinde görünen kısa bir açıklama
• supports — düzenleyicide kullanılan özellikleri kontrol etmek için bir dizi seçenek
• textdomain — eklenti metin alanı
• editorScript — editör komut dosyası tanımı
• editorStyle — editör stili tanımı
• style — bir blok için alternatif stiller sağlar

Yukarıda listelenen özelliklere ek olarak, bloğunuz tarafından depolanan veriler hakkında bilgi sağlayan bir attributes nesnesi tanımlayabilirsiniz (ve muhtemelen yapacaksınız). block.json'unuzda , anahtarın öznitelik adı olduğu ve değerin öznitelik tanımı olduğu anahtar/değer çiftlerinde istediğiniz sayıda öznitelik ayarlayabilirsiniz.

Aşağıdaki öznitelik tanımlarına bir göz atın:

 "attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

Makalenin ilerleyen kısımlarında block.json dosyasının derinliklerine ineceğiz, ancak block.json meta verileri ve nitelikleri hakkında daha ayrıntılı bilgi için Block Editor Handbook'a da göz atmak isteyebilirsiniz.

src Klasörü

src klasörü, geliştirmenin gerçekleştiği yerdir. Bu klasörde aşağıdaki dosyaları bulacaksınız:

• index.js
• edit.js
• save.js
• editör.scss
• stil.scss

index.js

index.js dosyası başlangıç ​​noktanızdır. Burada bağımlılıkları içe aktaracak ve blok türünü istemciye kaydedeceksiniz:

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

İlk ifade, registerBlockType işlevini @wordpress/blocks paketinden içe aktarır. Aşağıdaki içe aktarma ifadeleri, Edit ve save işlevleriyle birlikte stil sayfasını içe aktarır.

registerBlockType işlevi, bileşeni istemciye kaydeder. İşlev iki parametre alır: bir blok ad namespace/block-name (sunucuda kayıtlı olanla aynı) ve bir blok yapılandırma nesnesi.

Edit işlevi, blok düzenleyicide işlendiği gibi blok arayüzü sağlarken, save işlevi, seri hale getirilecek ve veritabanına kaydedilecek yapıyı sağlar (daha fazlasını okuyun).

edit.js

edit.js , blok yönetici arayüzünü oluşturacağınız yerdir:

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

İlk olarak, @wordpress/i18n paketinden (bu paket çeviri işlevlerinin bir JavaScript sürümünü içerir), useBlockProps React kancasından ve editor.scss dosyasından __ işlevini içe aktarır.

Ardından, React bileşenini dışa aktarır (içe aktarma ve dışa aktarma ifadeleri hakkında daha fazla bilgi edinin).

save.js

save.js dosyası, veritabanına kaydedilecek blok yapısını oluşturduğumuz yerdir:

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scss ve style.scss

Komut dosyalarının yanı sıra, src klasörlerinde iki SASS dosyası bulunur. editor.scss dosyası, düzenleyici bağlamında bloğa uygulanan stilleri içerirken style.scss dosyası, ön uçta görüntülenmek üzere bloğun stillerini içerir. Bu kılavuzun ikinci bölümünde bu dosyaların derinliklerine ineceğiz.

node_modules ve Klasörler oluşturun

node_modules klasörü, düğüm modüllerini ve bunların bağımlılıklarını içerir. Bu makalenin kapsamı dışında olduğu için düğüm paketlerine daha derine dalmayacağız, ancak bu makalede npm'nin paketleri nereye kurduğu hakkında daha fazla bilgi edinebilirsiniz.

build klasörü, derleme işleminden kaynaklanan JS ve CSS dosyalarını içerir. ESNext sözdiziminde ve JavaScript Yapı Kurulumu kılavuzlarında oluşturma sürecinin daha derinlerine inebilirsiniz.

Proje: İlk Gutenberg Bloğunuzu İnşa Etmek

Ellerimizi kirletme zamanı. Bu bölüm size Affiliate Block adlı bir CTA bloğu sağlayan bir eklentinin nasıl oluşturulacağını öğretecektir.

Blok, solda bir resim ve sağda bir metin paragrafı bulunan iki sütundan oluşacaktır. Metnin altına özelleştirilebilir bir bağlantıya sahip bir düğme yerleştirilecektir:

Bu sadece basit bir örnek, ancak Gutenberg blok geliştirmenin temellerini ele almamıza izin veriyor. Temelleri net bir şekilde anladıktan sonra, Blok Düzenleyici El Kitabı ve orada bulunan diğer geniş kaynakların yardımıyla devam edebilir ve daha karmaşık Gutenberg blokları oluşturabilirsiniz.

Yerel geliştirme ortamınızda çalışan en son WordPress sürümüne sahip olduğunuzu varsayarsak, buradan öğrenecekleriniz şunlardır:

• Başlangıç ​​Bloğu Eklentisi Nasıl Kurulur
• blok.json İş Başında
• Yerleşik Bileşenleri Kullanma: RichText Bileşeni
• Blok Araç Çubuğuna Kontroller Ekleme
• Blok Ayarları Kenar Çubuğunu Özelleştirme
• Harici Bağlantı Ekleme ve Özelleştirme
• Birden Fazla Blok Stili Ekleme
• InnerBlocks Bileşeni ile Yuvalama Blokları
• Ek İyileştirmeler

Hazır… hazırla… devam et!

Başlangıç ​​Bloğu Eklentisi Nasıl Kurulur

Komut satırı aracınızı başlatın ve /wp-content/plugins klasörüne gidin:

Şimdi, aşağıdaki komutu çalıştırın:

 npx @wordpress/create-block

Bu komut, etkileşimli modda bir bloğu kaydetmek için PHP, SCSS ve JS dosyalarını oluşturarak bloğunuz için gerekli verileri kolayca eklemenizi sağlar. Örneğimiz için aşağıdaki ayrıntıları kullanacağız:

• Blok sümüklü böcek : benim-bağlı-bloğum
• Dahili ad alanı : bağlı kuruluş eklentim
• Ekran başlığını engelle : Ortaklık bloğu
• Kısa blok açıklaması : Kinsta okuyucuları için örnek bir blok
• Dashicon : para
• Kategori adı : tasarım
• Eklenti yazarı : adınız
• Lisans : –
• Lisans metnine bağlantı : –
• Mevcut eklenti sürümü : 0.1.0

Eklentiyi ve tüm bağımlılıkları yüklemek birkaç dakika sürer. İşlem tamamlandığında aşağıdaki yanıtı göreceksiniz:

Şimdi, /wp-content/plugins klasöründen aşağıdaki komutu çalıştırın:

 cd my-affiliate-block

Son olarak, eklentinizin klasöründen (örneğimizde my-affiliate-block ) geliştirmeye aşağıdakilerle başlayabilirsiniz:

 npm start

Şimdi Affiliate Block eklentisini bulmak ve etkinleştirmek için Eklentiler ekranını açın:

Yeni bir gönderi oluşturun, blok yerleştiriciyi açın ve Tasarım kategorisine gidin. Ortaklık Bloğu eklemek için tıklayın:

blok.json İş Başında

Daha önce de belirttiğimiz gibi, sunucu tarafı blok kaydı ana .php dosyasında gerçekleşir. Ancak, .php dosyasındaki ayarları tanımlamayacağız. Bunun yerine, block.json dosyasını kullanacağız.

Bu nedenle, block.json'u tekrar açın ve varsayılan ayarlara daha yakından bakın:

 { "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

Komut Dosyaları ve Stiller

editorScript , editorStyle ve style özellikleri, ön uç ve arka uç komut dosyalarına ve stillerine göreli yollar sağlar.

Burada tanımlanan komut dosyalarını ve stilleri manuel olarak kaydetmeniz gerekmez, çünkü bunlar WordPress tarafından otomatik olarak kaydedilir ve sıraya alınır. Bunu kanıtlamak için tarayıcı denetçisini başlatın ve Ağ sekmesini açın:

Yukarıdaki resimden de görebileceğiniz gibi, build klasöründe bulunan index.js betiğimiz , herhangi bir PHP kodu eklemeye gerek kalmadan düzenli olarak kuyruğa alınmıştır.

Kullanıcı Arayüzü Etiketleri

title ve description özellikleri, düzenleyicide bloğu tanımlamak için gereken etiketleri sağlar:

anahtar kelimeler

Daha önce de belirttiğimiz gibi, özellikleri ve nitelikleri kullanarak blok ayarlarınızı doğru bir şekilde yapılandırabilirsiniz. Örneğin, kullanıcıların blokları aramasına yardımcı olmak için bir veya daha fazla keywords ekleyebilirsiniz:

 { "keywords": [ "kinsta", "affiliate", "money" ] }

If you now input “kinsta”, “affiliate” or “money” in the quick inserter, the editor will suggest you the Affiliate block:

yerelleştirme

If you are wondering how the localization of the strings in the JSON file happens, here is the answer:

In JavaScript, you can use now registerBlockTypeFromMetadata method from @wordpress/blocks package to register a block type using the metadata loaded from block.json file. All localized properties get automatically wrapped in _x (from @wordpress/i18n package) function calls similar to how it works in PHP with register_block_type_from_metadata . The only requirement is to set the textdomain property in the block.json file.

Here we are using the registerBlockType function instead of registerBlockTypeFromMetadata , as the latter has been deprecated since Gutenberg 10.7, but the mechanism is the same.

Using Built-In Components: The RichText Component

The elements that make up a Gutenberg block are React components, and you can access these components via the wp global variable. For example, try to type wp.editor into your browser's console. This will give you the full list of the components included in the wp.editor module.

Scroll through the list and guess what components are meant for by their names.

Similarly, you can check the list of components included in the wp.components module:

Now go back to the edit.js file and take a closer look at the script:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

Bu kod, basit, düzenlenemez metin içeren statik bir blok oluşturur. Ancak bazı şeyleri kolayca değiştirebiliriz:

Metni düzenlenebilir hale getirmek için, mevcut <p> etiketini, girdi içeriğini düzenlenebilir yapan bir bileşenle değiştirmeniz gerekir. Bunun için Gutenberg, yerleşik RichText bileşenini sağlar.

Bloğunuza yerleşik bir bileşen eklemek 5 adımlık bir işlemdir:

1. Gerekli bileşenleri bir WordPress paketinden içe aktarın
2. Karşılık gelen öğeleri JSX kodunuza dahil edin
3. Block.json dosyasında gerekli öznitelikleri tanımlayın
4. Olay işleyicilerini tanımlayın
5. Veri kaydet

Adım 1: Bir WordPress Paketinden Gerekli Bileşenleri İçe Aktarın

Şimdi edit.js dosyasını açın ve aşağıdaki import ifadesini değiştirin:

 import { useBlockProps } from '@wordpress/block-editor';

…ile:

 import { useBlockProps, RichText } from '@wordpress/block-editor';

Bu şekilde, useBlockProps işlevini ve RichText bileşenini @wordpress/block-editor paketinden içe aktarıyorsunuz.

kullanBlockProps

useBlockProps React kancası, bloğun sarmalayıcı öğesini işaretler:

API sürüm 2'yi kullanırken, bloğun sarmalayıcı öğesini işaretlemek için bloğun edit işlevindeki yeni useBlockProps kancasını kullanmanız gerekir. Kanca, blok davranışını etkinleştirmek için gereken öznitelikleri ve olay işleyicilerini ekler. Blok öğesine iletmek istediğiniz tüm nitelikler useBlockProps üzerinden geçirilmeli ve döndürülen değer öğeye yayılmalıdır.

Basitçe söylemek gerekirse, useBlockProps sarmalayıcı öğeye otomatik olarak nitelikler ve sınıflar atar (örneğimizdeki p öğesi):

useBlockProps öğesini kaldırırsanız, blok işlevine ve stiline erişimi olmayan basit bir metin dizeniz olur:

Daha sonra açıklayacağımız gibi, çıktıyı özelleştirmek için useBlockProps bir özellik nesnesi de iletebilirsiniz.

Zengin metin

RichText bileşeni, kullanıcıların içeriği düzenlemesine ve biçimlendirmesine olanak tanıyan, içeriği düzenlenebilir bir girdi sağlar.

GitHub'da belgelenen bileşeni gutenberg/packages/block-editor/src/components/rich-text/README.md adresinde bulabilirsiniz.

2. Adım: Karşılık Gelen Öğeleri JSX Kodunuza Dahil Edin

 ... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

Kodu satır satır yorumlayalım:

• tagName — düzenlenebilir HTML öğesinin etiket adı
• onChange — öğenin içeriği değiştiğinde çağrılan işlev
• allowedFormats — bir dizi izin verilen biçim. Varsayılan olarak, tüm biçimlere izin verilir
• value — düzenlenebilir hale getirmek için HTML dizesi
• placeholder — öğe boş olduğunda gösterilecek yer tutucu metin

3. Adım: block.json Dosyasında Gerekli Nitelikleri Tanımlayın

Öznitelikler, zengin içerik, arka plan rengi, URL'ler vb. gibi bir blok tarafından depolanan veriler hakkında bilgi sağlar.

Anahtarın öznitelik adı ve değerin öznitelik tanımı olduğu anahtar/değer çiftlerinde bir attributes nesnesi içinde isteğe bağlı sayıda öznitelik ayarlayabilirsiniz.

Şimdi block.json dosyasını açın ve aşağıdaki prop attributes ekleyin:

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

content özelliği, kullanıcı tarafından yazılan metni düzenlenebilir alana kaydetmeye izin verir:

• type , öznitelik tarafından depolanan verilerin türünü belirtir. Bir enum özelliği tanımlamadığınız sürece tür gereklidir.
• source , öznitelik değerinin gönderi içeriğinden nasıl çıkarılacağını tanımlar. Örneğimizde, HTML içeriğidir. Bir kaynak özelliği sağlamazsanız, verilerin blok sınırlayıcıda depolandığını unutmayın (daha fazlasını okuyun).
• selector , bir HTML etiketi veya sınıf adı veya kimlik özelliği gibi başka bir seçicidir.

Edit işlevine bir özellik nesnesi ileteceğiz. Bu yüzden edit.js dosyasına geri dönün ve aşağıdaki değişikliği yapın:

 export default function Edit( { attributes, setAttributes } ) { ... }

Adım 4: Olay İşleyicileri Tanımlayın

RichText öğesinin, öğenin içeriği değiştiğinde çağrılacak bir işlev sağlayan bir onChange özniteliği vardır.

Bu işlevi tanımlayalım ve edit.js betiğinin tamamını görelim:

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

Şimdi dosyayı kaydedin ve terminal pencerenizde npm run start . Ardından, WordPress kontrol panelinize geri dönün, yeni bir gönderi veya sayfa oluşturun ve Ortaklık bloğunuzu ekleyin:

Biraz metin ekleyin ve Kod görünümüne geçin. İşte kodunuzun nasıl görünmesi gerektiği:

 <!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

Şimdi sayfayı kaydeder ve ön uç sonucunu kontrol ederseniz, değişiklikleriniz siteyi etkilemediğinden biraz hayal kırıklığına uğrayabilirsiniz. Bunun nedeni, gönderi kaydedildiğinde kullanıcı girdisini veritabanında depolamak için save.js dosyasını değiştirmeniz gerektiğidir.

Adım 5: Verileri Kaydet

Şimdi save.js dosyasını açın ve betiği aşağıdaki gibi değiştirin:

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

Burada yaptığımız şey bu:

• RichText bileşenini block-editor paketinden içe aktarın.
• Bir nesne bağımsız değişkeni aracılığıyla save işlevine birkaç özelliği iletin (bu örnekte, yalnızca attributes özelliğini iletiyoruz)
• RichText bileşeninin içeriğini döndür

RichText bileşeni hakkında daha fazla bilgiyi Block Editor El Kitabında okuyabilir ve tüm donanım listesini Github'da bulabilirsiniz.

Şimdi bir adım daha ileri gidelim. Sonraki bölümde, blok araç çubuğuna nasıl kontrol ekleyeceğinizi öğreneceksiniz.

Blok Araç Çubuğuna Kontroller Ekleme

Blok araç çubuğu, kullanıcıların blok içeriğinin bölümlerini değiştirmesine izin veren bir dizi kontrol içerir. Her araç çubuğu denetimi için bir bileşen bulacaksınız:

Örneğin, bloğunuz için bir metin hizalama kontrolü ekleyebilirsiniz. Tek yapmanız gereken @wordpress/block-editor paketinden iki bileşeni içe aktarmak.

Önceki örnekle aynı adımları izleyeceğiz:

1. WordPress Paketlerinden Gerekli Bileşenleri İçe Aktarın
2. Karşılık Gelen Öğeleri JSX Kodunuza Dahil Edin
3. Block.json Dosyasında Gerekli Nitelikleri Tanımlayın
4. Olay İşleyicileri Tanımlayın
5. Veri kaydet

Adım 1: BlockControls ve AlignmentControl Bileşenlerini @wordpress/block-editor'dan içe aktarın

Blok araç çubuğuna bir hizalama kontrolü eklemek için iki bileşene ihtiyacınız vardır:

• BlockControls , dinamik bir kontrol araç çubuğu oluşturur (belgelenmemiş).
• AlignmentControl , seçilen blok için hizalama seçeneklerini görüntüleyen bir açılır menü oluşturur (daha fazlasını okuyun)

edit.js dosyasını açın ve import ifadesini aşağıda gösterildiği gibi düzenleyin:

 import { useBlockProps, RichText, AlignmentControl, BlockControls } from '@wordpress/block-editor';

2. Adım: BlockControls ve AlignmentControl Öğeleri ekleyin

Edit işlevine gidin ve <BlockControls /> öğesini <RichText /> ile aynı düzeyde ekleyin. Ardından <BlockControls /> <AlignmentControl /> ekleyin:

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

Yukarıdaki kodda <> ve </> , React parçalarını bildirmek için kısa sözdizimidir, React'te birden çok öğeyi bu şekilde döndürürüz.

Bu örnekte AlignmentControl iki özelliği vardır:

• value , öğe için geçerli değeri sağlar
• onChange , değer değiştiğinde çalışacak bir olay işleyici sağlar

Ayrıca RichText öğesi için ek öznitelikler tanımladık (örneklerle özniteliklerin tam listesini kontrol edin)

3. Adım: block.json'da align Niteliğini tanımlayın

Şimdi block.json dosyasına gidin ve align niteliğini ekleyin:

 "align": { "type": "string", "default": "none" }

Terminale geri dönün, mevcut işlemi ^C ile durdurun ve betiği npm run start ile yeniden başlatın. Ardından blok düzenleyiciye geri dönün, sayfayı yenileyin ve bloğu seçin. Bir hizalama kontrolü ile blok araç çubuğunu görmelisiniz:

Şimdi, yeni hizalama kontrollerini kullanarak blok içeriğini biçimlendirmeye çalışırsanız, hiçbir şeyin olmadığını göreceksiniz. Bunun nedeni, henüz olay işleyicisini tanımlamamış olmamızdır.

Adım 4: Olay İşleyicileri Tanımlayın

Şimdi onChangeAlign tanımlayın:

 const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

newAlign undefined , newAlign none olarak ayarlarız. Aksi takdirde, newAlign kullanırız.

edit.js betiğimiz tamamlanmış olmalı (şimdilik):

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

Şimdi düzenleyiciye geri dönebilir ve blok içeriğini hizalayabilirsiniz.

Blok içeriğini ve öznitelikleri veritabanında saklamak için kaydetme işlevini değiştirmemiz gerekiyor.

Adım 5: Verileri Kaydet

save.js dosyasını açın ve save işlevini aşağıdaki gibi değiştirin:

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

Son olarak, kodu daha okunabilir hale getirmek için, yıkıcı atama sözdizimini kullanarak attribute nesnesinden tek tek özellikleri ayıklayabilirsiniz:

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

Dosyayı kaydedin, işlemi yeniden başlatın ve Kod düzenleyici modunda düzenleyiciye dönün. Kod şöyle görünmelidir:

 <!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

Ve bu kadar! Blok araç çubuğuna bir hizalama kontrolü eklediniz

Blok araç çubuğu kontrolleri hakkında daha fazla bilgiyi Blok Düzenleyici El Kitabında okuyabilirsiniz.

Blok Ayarları Kenar Çubuğunu Özelleştirme

Ayrıca Blok Ayarlar Kenar Çubuğuna kontroller ekleyebilir (hatta uygulamanız için yeni bir kenar çubuğu oluşturabilirsiniz).

API, bunun için bir InspectorControls bileşeni sağlar.

Blok Düzenleyici El Kitabı, Ayarlar Kenar Çubuğunun nasıl kullanılacağını açıklar:

Ayarlar Kenar Çubuğu, daha az kullanılan ayarları veya daha fazla ekran alanı gerektiren ayarları görüntülemek için kullanılır. Ayarlar Kenar Çubuğu yalnızca blok düzeyinde ayarlar için kullanılmalıdır.

Yalnızca bir blok içindeki seçili içeriği etkileyen ayarlarınız varsa (örneğin: bir paragraf içindeki seçili metin için "kalın" ayar): bunu Ayarlar Kenar Çubuğunun içine yerleştirmeyin. Ayarlar Kenar Çubuğu, HTML modunda bir blok düzenlenirken bile görüntülenir, bu nedenle yalnızca blok düzeyinde ayarları içermelidir.

Tekrar:

1. WordPress Paketlerinden Gerekli Bileşenleri İçe Aktarın
2. Karşılık Gelen Öğeleri JSX Kodunuza Dahil Edin
3. Block.json Dosyasında Gerekli Nitelikleri Tanımlayın
4. Olay İşleyicileri Tanımlayın
5. Veri kaydet

Adım 1. InspectorControls ve PanelColorSettings Bileşenlerini @wordpress/block-editor'dan içe aktarın

Kullanıcıların bloğun belirli yönlerini özelleştirmesine izin vermek için birkaç kontrol ekleyebilirsiniz. Örneğin, bir renk kontrol paneli sağlayabilirsiniz. Bunu yapmak için InspectorControls ve PanelColorSettings bileşenlerini block-editor modülünden içe aktarmanız gerekir:

 import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

Adım 2: Karşılık Gelen Öğeleri JSX kodunuza dahil edin

Şimdi, Edit işlevi tarafından döndürülen JSX'e karşılık gelen öğeleri ekleyebilirsiniz:

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

RichText öğesinin style özniteliğini de güncellediğimizi unutmayın:

 <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

3. Adım: block.json'da Gerekli Nitelikleri Tanımlayın

Şimdi block.json dosyasındaki backgroundColor ve textColor niteliklerini tanımlayın:

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

Adım 4: Olay İşleyicileri Tanımlayın

Şimdi, kullanıcı girişinde backgroundColor ve textColor güncellemek için iki işlev tanımlamanız gerekiyor:

 const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

Adım 5: Verileri Kaydet

Son bir adım: save.js dosyasını açın ve komut dosyasını aşağıdaki gibi değiştirin:

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

Şimdi işlemi durdurun (^C) ve npm run start yeniden çalıştırın. Sayfayı yenileyin, bloğunuzun herhangi bir örneğini silin ve gönderinize tekrar ekleyin:

Değişikliklerinizi yapın, gönderiyi kaydedin ve ön uçta görüntüleyin. Blok düzenleyicide yaptığınız değişiklikler ön siteye yansıtılmalıdır.

Harici Bağlantı Ekleme ve Özelleştirme

Bu bölümde, blok türünüze yeni bileşenler ekleyeceksiniz:

• Kullanıcıların Ortak bloğuna özelleştirilebilir bir bağlantı eklemesine izin veren bir ExternalLink bileşeni
• Kullanıcıların bağlantı ayarlarını özelleştirmesine olanak tanıyan birkaç kenar çubuğu denetimi

Adım 1. Bileşenleri @wordpress/components'tan içe aktarın

Şimdi birkaç bileşeni @wordpress/components içe aktarmanız gerekiyor. edit.js dosyanızı açın ve aşağıdaki import ifadesini ekleyin:

 import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBody , Ayarlar Kenar Çubuğuna daraltılabilir bir kap ekler.
• PaneRow , kenar çubuğu denetimleri için genel bir kapsayıcı üretir.
• TextControl , bir metin girişi denetimi sağlar.
• ToggleControl , kullanıcıların belirli bir seçeneği etkinleştirmesini/devre dışı bırakmasını sağlayan bir geçiş sağlar
• ExternalLink , harici bir link eklemek için basit bir bileşendir.

Adım 2. Karşılık Gelen Öğeleri JSX Kodunuza Dahil Edin

Önce ExternalLink öğesini bir div kapsayıcısında aynı RichText düzeyinde ekleyeceksiniz:

 <div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

ExternalLink bileşeni belgelenmemiştir, bu nedenle mevcut özniteliklerin listesini almak için bileşenin kendisine başvurduk. Burada href , className ve rel niteliklerini kullanıyoruz.

Varsayılan olarak, rel özniteliği değeri noopener noreferrer olarak ayarlanmıştır. Kodumuz, toggle kontrolü açıkken ortaya çıkan a etiketinin rel özniteliğine nofollow anahtar sözcüğünü ekleyecektir.

Artık blok kenar çubuğuna bağlantı ayarları ekleyebilirsiniz.

İlk olarak, InspectorControls içine PanelColorSettings ile aynı seviyede bir PanelBody öğesi PanelColorSettings :

 <InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

İşte bununla ne yapıyoruz:

1. title özelliği, panel başlığını sağlar.
2. initialOpen , panelin başlangıçta açık olup olmadığını ayarlar.

Ardından, PanelBody içine iki PanelRow öğesi ve her PanelBody içine bir TextControl öğesi PanelRow :

 <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

Yukarıdaki kod şimdi oldukça basit görünmelidir. İki metin denetimi, kullanıcıların bağlantı etiketini ve URL'yi ayarlamasına olanak tanır.

Ayrıca, bir özniteliğin dahil edilip edilmeyeceği gibi belirli bir seçeneği açmak/kapatmak için PanelRow ile ek bir ToggleControl ekleyeceğiz:

 <PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

3. Adım: block.json'da Gerekli Nitelikleri Tanımlayın

Şimdi block.json dosyasında affiliateLink , linkLabel ve hasLinkNofollow özniteliklerini tanımlayın:

 "affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

Buraya eklenecek başka bir şey yok! Olay işleme fonksiyonlarını tanımlamaya geçelim.

Adım 4: Olay İşleyicileri Tanımlayın

edit.js dosyasına geri dönün ve aşağıdaki işlevleri ekleyin:

 const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

Bu işlevler, kullanıcı girişinde karşılık gelen öznitelik değerlerini günceller.

Adım 5: Verileri Kaydet

Son olarak save.js'deki save fonksiyonunu güncellememiz gerekiyor:

 export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

Burada ExternalLink yerine normal a öğesi kullandığımızı unutmayın:

Şimdi verileri kaydedin ve ortamınızı yeniden başlatın.

Birden Fazla Blok Stili Ekleme

Önceki bir bölümde, kullanıcıların kullanıcı girişini hizalamasına olanak tanıyan bir blok araç çubuğu denetiminin nasıl ekleneceğini öğrendiniz. Blok araç çubuğuna daha fazla stil kontrolü ekleyebiliriz, ancak kullanıcının tek bir tıklama ile seçebileceği bir dizi önceden tanımlanmış blok stili de sağlayabiliriz.

Bu amaçla, Blok API'sinin kullanışlı bir özelliğini kullanacağız: Blok Stilleri.

Tek yapmanız gereken, block.json styles özelliğini tanımlamak ve stil sayfalarınızda karşılık gelen stilleri bildirmek.

Örneğin, aşağıdaki stil dizisini ekleyebilirsiniz:

 "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

Bununla, varsayılan bir stil ve border adlı ek bir stil eklediniz. Şimdi blok düzenleyiciye geri dönün:

Stiller, blok değiştiriciye tıklayarak ve ardından Blok Ayarları Kenar Çubuğunda Stiller panelini arayarak kullanıcıya sunulacaktır.

Bir stil seçin ve p öğesine uygulanan sınıfları kontrol edin. Bloğu sağ tıklayın ve Inspect . Aşağıdaki gibi yapılandırılmış bir adla yeni bir sınıf eklendi:

 is-style-{style-name}

“Border” stilini işaretlediyseniz, p öğesine bir is-style-border sınıfı eklenecektir. "Varsayılan" stili işaretlediyseniz, bunun yerine bir is-style-default sınıfı eklenecektir.

Şimdi sadece CSS özelliklerini bildirmeniz gerekiyor. editor.scss dosyasını açın ve mevcut stilleri aşağıdakilerle değiştirin:

 .wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

Şimdi aynısını style.scss ile yapabilirsiniz:

 .wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

İşlemi durdurun (^C) ve npm run start yeniden çalıştırın.

Ve bu kadar! Sayfayı yenileyin ve yeni blok stillerinizle eğlenin:

Gutenberg Bloklarını InnerBlocks Bileşeniyle Yuvalama

Tamamen işlevsel olmasına rağmen, Ortak Bloğumuz hala çok çekici değil. İzleyiciler için daha ilgi çekici hale getirmek için bir resim ekleyebiliriz.

Bu, bloğumuza bir karmaşıklık katmanı ekleyebilir, ancak neyse ki, tekerleği yeniden icat etmenize gerek yok çünkü Gutenberg, iç içe bloklardan oluşan bir yapı oluşturmak için kullanabileceğiniz belirli bir bileşen sağlıyor.

InnerBlocks bileşeni şu şekilde tanımlanır:

InnerBlocks , iç içe blok içeriğini etkinleştirmek için blok uygulamalarında kullanılabilecek bir çift bileşeni dışa aktarır.

İlk olarak, src klasöründe yeni bir .js dosyası oluşturmanız gerekecek. Örneğimizde, bu dosyaya container.js adını vereceğiz.

Şimdi yeni kaynağı index.js dosyasına aktarmanız gerekecek:

 import './container';

container.js'ye geri dönün ve gerekli bileşenleri içe aktarın:

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

Bir sonraki adım, blokların yerleştirileceği yapıyı sağlayan bir şablon tanımlamaktır. Aşağıdaki örnekte, bir çekirdek Görüntü bloğunu ve özel Satış Ortağı bloğumuzu içeren iki sütundan oluşan bir şablon tanımlıyoruz:

 const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

Şablon, bir blockTypes dizisi (blok adı ve isteğe bağlı nitelikler) olarak yapılandırılmıştır.

Yukarıdaki kodda, Sütunları ve Sütun bloklarını yapılandırmak için birkaç öznitelik kullandık. Özellikle, templateLock: 'all' özniteliği, kullanıcının mevcut blokları eklememesi, yeniden sıralamaması veya silmemesi için Sütun bloklarını kilitler. templateLock aşağıdaki değerlerden birini alabilir:

• all — InnerBlocks kilitlidir ve hiçbir blok eklenemez, yeniden sıralanamaz veya kaldırılamaz.
• insert — Bloklar yalnızca yeniden sıralanabilir veya kaldırılabilir.
• false — Şablon kilitli değil.

Şablon daha sonra InnerBlocks öğesine atanır:

 <InnerBlocks template={ TEMPLATE } templateLock="all" />

Herhangi bir uyumluluk sorununu önlemek için InnerBlocks bileşenine bir templateLock niteliği de ekledik (ayrıca bkz. sayı #17262 ve çekme #26128).

İşte son container.js dosyamız:

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

Ek İyileştirmeler

Bloğumuz tamamen işlevseldir, ancak bazı küçük değişikliklerle onu biraz iyileştirebiliriz.

RichText bileşeni tarafından oluşturulan paragrafa backgroundColor niteliğini atadık. Ancak, arka plan rengini div kabına atamayı tercih edebiliriz:

Bu nedenle, edit.js dosyasını değiştirin ve save.js div s dosyasını aşağıdaki gibi değiştirin:

 <div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

Bu, kullanıcının tüm bloğun arka planını değiştirmesine izin verecektir.

Öte yandan, daha alakalı bir değişiklik useBlockProps yöntemini içerir. Orijinal kodda, blockProps sabitini şu şekilde tanımladık:

 const blockProps = useBlockProps();

Ancak, bir dizi özelliği geçerek useBlockProps daha etkili bir şekilde kullanabiliriz. Örneğin, sınıf classnames modülünden sınıf adlarını içe classnames ve sarmalayıcı sınıf adını buna göre ayarlayabiliriz.

Aşağıdaki örnekte, align özniteliğinin ( edit.js ) değerine dayalı olarak bir sınıf adı atarız:

 import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

Aynı değişikliği save.js dosyasında da yapacağız:

 import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

Ve bu bir sargı! Artık yapıyı üretim için çalıştırabilirsiniz.

Özet

Ve işte buradayız, bu inanılmaz yolculuğun sonunda! Geliştirme ortamının yapılandırılmasıyla başladık ve eksiksiz bir blok türü oluşturduk.

Girişte bahsettiğimiz gibi, gelişmiş Gutenberg blokları oluşturmak ve kendinizi piyasada profesyonel bir Gutenberg geliştiricisi olarak konumlandırmak için sağlam bir Node.js, Webpack, Babel ve React bilgisi gereklidir.

Ancak blok geliştirme ile eğlenmeye başlamak için yerleşik bir React deneyimine sahip olmanız gerekmez. Blok geliştirme, Gutenberg bloklarının arkasındaki teknolojilerde giderek daha geniş beceriler kazanmanız için size motivasyon ve hedefler verebilir.

Bu nedenle, bu kılavuz eksiksiz olmaktan uzaktır. Bu, yalnızca ilk Gutenberg bloklarınızı oluşturmaya başlamanıza yardımcı olacak çok çeşitli konulara giriş niteliğindedir.

Bu nedenle, çevrimiçi dokümantasyon ve kılavuzları dikkatlice okuyarak bilginizi derinleştirmenizi öneririz. Mevcut birçok kaynak arasında aşağıdakileri öneriyoruz:

• Resmi Yeni başlayanlar için bir Blok Eğitimi Oluşturun
• Ara geliştiriciler için Resmi Blok Eğitimi
• Dinamik Bloklar
• Meta Kutuları
• Eklentiniz için Kenar Çubuğu Oluşturma

WordPress geliştirmeye yeni başlıyorsanız, ön uç geliştirmenin temel kavramlarını anlamak isteyebilirsiniz. İşte başlamanıza yardımcı olabilecek kaynakların kısa bir listesi:

• WordPress Yerel Olarak Nasıl Kurulur (ücretsiz e-kitap)
• Yönetilen WordPress Barındırma'nın Gerçek Değeri (ücretsiz e-kitap)
• JavaScript Nedir?
• HTML'ye karşı HTML5
• WordPress'te CSS Nasıl Düzenlenir
• PHP Nedir?
• WordPress Kanca Eğitim Kampı: Eylemler, Filtreler ve Özel Kancalar Nasıl Kullanılır

Ve bu kılavuzdaki örneklerin tam kodunun Gist'te mevcut olduğunu unutmayın.

Şimdi sıra sizde: Herhangi bir Gutenberg bloğu geliştirdiniz mi? Şimdiye kadar yaşadığınız başlıca zorluklar nelerdir? Yorumlarda deneyiminizi bize bildirin!