Zephyrnet Logosu

WordPress Blok Geliştirmeye Başlarken

Tarih:

Şu anda WordPress için geliştirme yapmanın garip olduğunu kabul edelim. İster WordPress'te yeni olun, ister uzun süredir onunla çalışıyor olun, "Tam Site Düzenleme" (FSE) özelliklerinin tanıtımı, Blok Düzenleyici (WordPress 5.0) ve Site Editörü (WordPress 5.9), WordPress temalarını ve eklentilerini oluşturma geleneksel yöntemimizi alt üst etti.

Blok Düzenleyici ile ilk tanışmamızın üzerinden beş yıl geçmesine rağmen, onu geliştirmek zordur çünkü belgeler ya eksiktir ya da güncelliğini yitirmiştir. Bu daha çok FSE özelliklerinin ne kadar hızlı hareket ettiğine dair bir ifade, bir şey Geoff yakın tarihli bir gönderide ağıt yaktı.

Örnek olay: 2018'de bir tanıtım serisi Gutenberg gelişimine giriş hakkında tam burada CSS hilelerinde yayınlandı. O zamandan bu yana zaman değişti ve bu geliştirme tarzı hala işe yarasa da, tavsiye edilmez artık (ayrıca, create-guten-block dayandığı proje de artık sürdürülmüyor).

Bu makalede, mevcut metodolojiyi takip edecek şekilde WordPress blok geliştirmeye başlamanıza yardımcı olmayı amaçlıyorum. Yani, evet, bu yayınlandıktan sonra işler çok iyi değişebilir. Ancak blok geliştirmenin özünü yakalayacak şekilde odaklanmaya çalışacağım çünkü araçlar zaman içinde gelişebilse de temel fikirler muhtemelen aynı kalacak.

Gutenberg Editörü: (1) Blok yerleştirici, (2) içerik alanı ve (3) ayarlar kenar çubuğu
kredi: WordPress Blok Düzenleyici El Kitabı

WordPress blokları tam olarak nedir?

gibi terimlerle ne demek istediğimizle ilgili biraz kafa karışıklığını gidererek başlayalım. bloklar. WordPress 5.0'a giden bu özelliklere giren tüm geliştirmelerin kod adı “Gutenberg” - bilirsiniz, mucit matbaa.

O zamandan beri "Gutenberg", Blok Düzenleyici ve Site Düzenleyici de dahil olmak üzere bloklarla ilgili her şeyi tanımlamak için kullanıldı, bu nedenle bazı kişilerin anlamadığı ölçüde karmaşık hale geldi. adı küçümsemek. Her şeyin üstesinden gelmek için, bir Gutenberg eklentisi deneysel özelliklerin olası dahil edilmeleri için test edildiği yer. Ve tüm bunları "Tam Site Düzenleme" olarak adlandırmanın sorunu çözeceğini düşünüyorsanız, bununla ilgili endişeler de var.

Bu nedenle, bu makalede "bloklar" derken, WordPress Blok Düzenleyici'de içerik oluşturmaya yönelik bileşenleri kastediyoruz. Bloklar bir sayfaya veya gönderiye eklenir ve belirli bir içerik türü için yapı sağlar. WordPress, Paragraf, Liste, Resim, Video ve Ses gibi yaygın içerik türleri için bir avuç "temel" blokla birlikte gelir. birkaç isim.

Bu çekirdek blokların dışında özel bloklar da oluşturabiliriz. WordPress bloğu geliştirmenin amacı budur (işlevselliklerini değiştirmek için çekirdek blokları filtrelemek de vardır, ancak muhtemelen buna henüz ihtiyacınız olmayacak).

hangi bloklar işe yarar

Blok oluşturmaya dalmadan önce, blokların dahili olarak nasıl çalıştığına dair bir fikir edinmeliyiz. Bu kesinlikle bizi daha sonra bir ton hayal kırıklığından kurtaracak.

Bir blok hakkında düşünme şeklim oldukça soyut: bana göre bir blok, bazı içerikleri temsil eden bazı özelliklere (nitelikler denir) sahip bir varlıktır. Bunun kulağa oldukça belirsiz geldiğini biliyorum ama benimle kal. Bir blok temel olarak iki şekilde kendini gösterir: blok düzenleyicide grafiksel bir arayüz olarak veya veritabanında bir veri yığını olarak.

WordPress Block Editor'ı açıp bir blok eklediğinizde, örneğin bir Pullquote bloğu, güzel bir arayüz elde edersiniz. Bu arayüze tıklayıp alıntılanan metni düzenleyebilirsiniz. Blok Düzenleyici kullanıcı arayüzünün sağ tarafındaki Ayarlar paneli, metni ayarlamak ve bloğun görünümünü ayarlamak için seçenekler sunar.

The Kısa alıntı bloğu WordPress Çekirdeğine dahil olan

Süslü kısa alıntınızı oluşturmayı bitirip Yayınla'ya tıkladığınızda, gönderinin tamamı şu adresteki veritabanında depolanır: wp_posts masa. Gutenberg yüzünden bu yeni bir şey değil. İşler her zaman böyle yürümüştür - WordPress, gönderi içeriğini veritabanında belirlenmiş bir tabloda saklar. Ama yeni olan şu ki Pullquote bloğunun bir temsili saklanan içeriğin bir parçasıdır. post_content alanı wp_posts tablo.

Bu temsil neye benziyor? Bir göz atın:


It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.

The Encyclopedia of world peas

Düz HTML gibi görünüyor, değil mi?! Bu, teknik dilde "seri hale getirilmiş" bloktur. HTML yorumundaki JSON verilerine dikkat edin, "textAlign": "right". bu bir bağlanmak - blokla ilişkili bir özellik.

Diyelim ki Blok Düzenleyiciyi kapattınız ve bir süre sonra tekrar açın. İlgili içerikten post_content alan, Blok Düzenleyici tarafından alınır. Düzenleyici daha sonra alınan içeriği ve bununla karşılaştığı her yerde ayrıştırır:

...

...kendi kendine yüksek sesle şöyle der:

Tamam, bu bana bir Pullquote bloğu gibi görünüyor. Hmm.. onun da bir özniteliği var… Düzenleyicide bir Pullquote bloğu için özniteliklerinden grafik arayüzü nasıl oluşturacağımı anlatan bir JavaScript dosyam var. Bu bloğu tüm görkemiyle işlemek için bunu şimdi yapmalıyım.

Bir blok geliştiricisi olarak işiniz:

  1. WordPress'e, falanca ayrıntıyla belirli bir blok türünü kaydetmek istediğinizi söyleyin.
  2. Blok Düzenleyiciye, bloğu düzenleyicide oluşturmasına ve aynı zamanda veritabanına kaydetmek için "seri hale getirmesine" yardımcı olacak JavaScript dosyasını sağlayın.
  3. Bloğun düzgün çalışması için ihtiyaç duyduğu ek kaynakları, örneğin stiller ve yazı tiplerini sağlayın.

Unutulmaması gereken bir nokta, seri hale getirilmiş verilerden grafik arayüze - ve tersi - tüm bu dönüştürmenin yalnızca Blok Düzenleyicide gerçekleşmesidir. Ön uçta, içerik tam olarak depolandığı şekilde görüntülenir. Bu nedenle, bir anlamda, bloklar veri tabanına veri koymanın süslü bir yoludur.

Umarım, bu size bir bloğun nasıl çalıştığına dair biraz netlik verir.

Son düzenleyici durumlarını ve verilerin bir veritabanına nasıl kaydedildiğini ve işleme için nasıl ayrıştırıldığını özetleyen diyagram.

Bloklar sadece eklentilerdir

Bloklar sadece eklentilerdir. Peki, teknik olarak, sen yapabilmek temalara bloklar koyun ve siz yapabilmek bir eklentiye birden fazla blok koyun. Ancak, çoğu zaman, bir blok oluşturmak istiyorsanız, bir eklenti yapacaksınız. Bu nedenle, daha önce bir WordPress eklentisi oluşturduysanız, o zaman zaten bir WordPress bloğu oluşturmaya yönelik yolun bir parçasısınız demektir.

Ancak bir an için, bırakın bir bloğu, asla bir WordPress eklentisi kurmadığınızı varsayalım. Nereden başlıyorsun?

blok kurma

Blokların ne olduğunu ele aldık. Bir tane yapmak için her şeyi ayarlamaya başlayalım.

Düğümün kurulu olduğundan emin olun

Bu size erişim sağlayacaktır npm ve npx komutlar, nerede npm bloğunuzun bağımlılıklarını kurar ve öğeleri derlemenize yardımcı olurken, npx paketleri yüklemeden komutları çalıştırır. macOS kullanıyorsanız, muhtemelen zaten Düğümünüz vardır ve kullanabilirsiniz nvm sürümleri güncellemek için. Windows kullanıyorsanız, yapmanız gerekir Düğümü indirip yükleyin.

Bir proje klasörü oluşturun

Şimdi, doğrudan komut satırına atlayan ve size adlı bir paketi yüklemenizi söyleyen başka öğreticilerle karşılaşabilirsiniz. @wordpress/create-block. Bu paket harika çünkü geliştirmeye başlamanız için ihtiyaç duyduğunuz tüm bağımlılıkları ve araçları içeren eksiksiz bir proje klasörü sunuyor.

Kendi bloklarımı kurarken kişisel olarak bu rotayı izliyorum, ancak bir an için beni eğlendirin çünkü temel geliştirme ortamını anlamak adına getirdiği düşünülmüş şeyleri kesmek ve sadece gerekli parçalara odaklanmak istiyorum.

Bunlar özellikle çağırmak istediğim dosyalar:

  • readme.txt: Bu, eklenti dizininin ön yüzü gibidir, tipik olarak eklentiyi tanımlamak ve kullanım ve kurulum hakkında ek ayrıntılar sağlamak için kullanılır. Bloğunuzu şuraya gönderirseniz: WordPress Plugin Dizini, bu dosya eklenti sayfasının doldurulmasına yardımcı olur. Blok eklentiniz için bir GitHub deposu oluşturmayı planlıyorsanız, README.md aynı bilgilere sahip dosya, böylece orada güzel bir şekilde görüntülenir.
  • package.json: Bu, geliştirme için gerekli olan Düğüm paketlerini tanımlar. Kuruluma geldiğimizde açacağız. Klasik WordPress eklentisi geliştirmede, Composer ile çalışmaya alışık olabilirsiniz ve composer.json bunun yerine dosya. Bu, bunun karşılığıdır.
  • plugin.php: Bu ana eklenti dosyasıdır ve evet, klasik PHP'dir! Eklenti başlığımızı ve meta verilerimizi buraya koyacağız ve eklentiyi kaydetmek için kullanacağız.

Bu dosyalara ek olarak, ayrıca src bloğumuzun kaynak kodunu içermesi gereken dizin.

Bu dosyalara sahip olmak ve src dizin, başlamak için tek ihtiyacınız olan şey. Bu gruptan, dikkat edin teknik olarak sadece bir dosyaya ihtiyacımız var (plugin.php) eklentiyi yapmak için. Geri kalanlar ya bilgi sağlar ya da geliştirme ortamını yönetmek için kullanılır.

Adı geçen @wordpress/create-block paketi bu dosyaları (ve daha fazlasını) bizim için oluşturur. Bunu bir zorunluluktan çok bir otomasyon aracı olarak düşünebilirsiniz. Ne olursa olsun, işi kolaylaştırır, böylece onunla bir blok iskele kurma özgürlüğünü çalıştırarak alabilirsiniz:

npx @wordpress/create-block

Blok bağımlılıklarını yükleyin

Önceki bölümde bahsedilen üç dosyanın hazır olduğunu varsayarsak, bağımlılıkları kurmanın zamanı geldi. Öncelikle ihtiyacımız olacak bağımlılıkları belirlememiz gerekiyor. Bunu düzenleyerek yapıyoruz package.json. Kullanırken @wordpress/create-block yardımcı programı, aşağıdakiler bizim için oluşturulur (yorumlar eklendi; JSON yorumları desteklemiyor, bu nedenle kodu kopyalıyorsanız yorumları kaldırın):

{
  // Defines the name of the project
  "name": "block-example",
  // Sets the project version number using semantic versioning
  "version": "0.1.0",
  // A brief description of the project
  "description": "Example block scaffolded with Create Block tool.",
  // You could replace this with yourself
  "author": "The WordPress Contributors",
  // Standard licensing information
  "license": "GPL-2.0-or-later",
  // Defines the main JavaScript file
  "main": "build/index.js",
  // Everything we need for building and compiling the plugin during development
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // Defines which version of the scripts packages are used (24.1.0 at time of writing)
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}
Yorumsuz görüntüle
{
  "name": "block-example",
  "version": "0.1.0",
  "description": "Example block scaffolded with Create Block tool.",
  "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",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

The @wordpress/scripts package buradaki ana bağımlılıktır. Gördüğünüz gibi bu bir devDependency geliştirmeye yardımcı olduğu anlamına gelir. Nasıl yani? ortaya çıkarır wp-scripts kodumuzu derlemek için kullanabileceğimiz ikili src dizine build dizin, diğer şeylerin yanı sıra.

WordPress'in çeşitli amaçlar için kullandığı bir dizi başka paket vardır. Örneğin, @wordpress/components paket sağlar birkaç prefabrik UI bileşenler bloğunuz için WordPress tasarım standartlarıyla uyumlu tutarlı kullanıcı deneyimleri oluşturmak için kullanılabilecek WordPress Blok Düzenleyici için.

aslında yapmıyorsun gerek kullanmak isteseniz bile bu paketleri yüklemek için. Bunun nedeni bunlar @wordpress bağımlılıklar, blok kodunuzla birlikte verilmez. Bunun yerine, herhangi import yardımcı program paketlerinden gelen koda atıfta bulunan ifadeler — benzeri @wordpress/components — derleme sırasında bir "varlıklar" dosyası oluşturmak için kullanılır. Ayrıca, bu içe aktarma ifadeleri, içe aktarmaları genel bir nesnenin özelliklerine eşleyen ifadelere dönüştürülür. Örneğin, import { __ } from "@wordpress/i18n" küçültülmüş bir sürüme dönüştürülür const __ = window.wp.i18n.__. (window.wp.i18n karşılık gelen bir kez, küresel kapsamda kullanılabilir olması garanti edilen bir nesne olmak i18n paket dosyası kuyruğa alınır).

Eklenti dosyasındaki blok kaydı sırasında, "varlıklar" dosyası dolaylı olarak WordPress'e bloğun paket bağımlılıklarını anlatmak için kullanılır. Bu bağımlılıklar otomatik olarak kuyruğa alınır. Kullandığınız kabul edilirse, tüm bunlar perde arkasında halledilir. scripts paket. Bununla birlikte, kod tamamlama ve parametre bilgileri için bağımlılıkları yerel olarak yüklemeyi seçebilirsiniz. package.json Dosya:

// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}

Şimdi package.json kurulduktan sonra, komut satırında proje klasörüne giderek ve çalıştırarak tüm bu bağımlılıkları kurabilmeliyiz. npm install.

Yükleme komutunu çalıştırdıktan sonra terminal çıkışı. 1,296 paket kuruldu.

Eklenti başlığını ekleyin

Klasik WordPress eklenti geliştirmesinden geliyorsanız, muhtemelen tüm eklentilerin ana eklenti dosyasında WordPress'in eklentiyi tanımasına ve WordPress yöneticisinin Eklentiler ekranında bununla ilgili bilgileri görüntülemesine yardımcı olan bir bilgi bloğu olduğunu biliyorsunuzdur.

İşte ne var @wordpress/create-block yaratıcı bir şekilde "Merhaba Dünya" adlı bir eklenti için benim için oluşturuldu:

<?php
/**
 * Plugin Name:       Block Example
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 5.9
 * 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:       css-tricks
 *
 * @package           create-block
 */

Bu, istediğiniz gibi adlandırabileceğiniz ana eklenti dosyasındadır. Buna şöyle genel bir şey diyebilirsin index.php or plugin.php. create-block package, onu kurarken proje adı olarak verdiğiniz her şeyi otomatik olarak çağırır. Bu örneği “Blok Örneği” olarak adlandırdığım için paket bize block-example.php tüm bu şeylerle dosyalayın.

Kendinizi yazar yapmak gibi bazı ayrıntıları değiştirmek isteyeceksiniz. Ve bunların hepsi gerekli değil. Bunu "sıfırdan" yuvarlasaydım, şuna daha yakın görünebilirdi:

<?php
/**
 * Plugin Name:       Block Example
 * Plugin URI:        https://css-tricks.com
 * Description:       An example plugin for learning WordPress block development.
 * Version:           1.0.0
 * Author:            Arjun Singh
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       css-tricks
 */

Her satırın tam amacına girmeyeceğim çünkü bu zaten bir WordPress Eklentisi El Kitabında yerleşik model.

dosya yapısı

Bloğumuz için gerekli dosyalara zaten baktık. Ama eğer kullanıyorsanız @wordpress/create-block, proje klasöründe bir sürü başka dosya göreceksiniz.

İşte şu anda orada olanlar:

block-example/
├── build
├── node_modules
├── src/
│   ├── block.json
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   └── style.scss
├── .editorconfig
├── .gitignore
├── block-example.php
├── package-lock.json
├── package.json
└── readme.txt

Phew, bu çok fazla! Yeni şeyleri arayalım:

  • build/: Bu klasör, dosyaları üretim kullanımı için işlerken derlenmiş varlıkları aldı.
  • node_modules: Bu, çalışırken kurduğumuz tüm geliştirme bağımlılıklarını tutar npm install.
  • src/: Bu klasör, eklentinin derlenen ve sunucuya gönderilen kaynak kodunu tutar. build dizin. Buradaki dosyaların her birine biraz sonra bakacağız.
  • .editorconfig: Bu, kod düzenleyicinizi kod tutarlılığına uyarlamak için yapılandırmaları içerir.
  • .gitignore: Bu, sürüm kontrol takibinden çıkarılması gereken yerel dosyaları tanımlayan standart bir depo dosyasıdır. Senin node_modules kesinlikle buraya dahil edilmelidir.
  • package-lock.json: Bu, yüklediğimiz gerekli paketlerdeki güncellemeleri izlemek için otomatik olarak oluşturulmuş bir dosyadır. npm install.

Meta verileri engelle

içine kazmak istiyorum src dizini sizinle olacak, ancak önce içindeki tek bir dosyaya odaklanacak: block.json. Kullandıysanız create-block , zaten sizin için orada; değilse, devam edin ve oluşturun. WordPress, hem bloğu tanımak hem de Blok Düzenleyicide oluşturmak için WordPress bağlamı sağlayan meta veriler sağlayarak bunu bir bloğu kaydetmenin standart, kanonik yolu haline getirmek için çok çalışıyor.

İşte ne var @wordpress/create-block benim için oluşturulmuş:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "create-block/block example",
  "version": "0.1.0",
  "title": "Block Example",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "supports": {
    "html": false
  },
  "textdomain": "css-tricks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

aslında bir bir yığın farklı bilgi buraya dahil edebiliriz, ancak aslında gerekli olan tek şey name ve title. Süper minimal bir sürüm şöyle görünebilir:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/block-example",
  "version": "1.0.0",
  "title": "Block Example",
  "category": "text",
  "icon": "format-quote",
  "editorScript": "file:./index.js",
}
  • $schema dosyadaki içeriği doğrulamak için kullanılan şema biçimlendirmesini tanımlar. Kulağa gerekli bir şey gibi geliyor, ancak destekleyici kod editörlerinin sözdizimini doğrulamasına ve araç ipucu ipuçları ve otomatik tamamlama gibi diğer ek olanaklar sağlamasına izin verdiği için tamamen isteğe bağlı.
  • apiVersion hangi sürümü ifade eder API'yi engelle eklenti kullanır. Bugün, Sürüm 2 en son sürümdür.
  • name eklentiyi tanımlamaya yardımcı olan gerekli benzersiz bir dizedir. Bunun ön ekini koyduğuma dikkat edin css-tricks/ aynı ada sahip olabilecek diğer eklentilerle çakışmaları önlemeye yardımcı olmak için bir ad alanı olarak kullanıyorum. Bunun yerine baş harfleriniz gibi bir şey kullanmayı tercih edebilirsiniz (örn. as/block-example).
  • version bir şey WordPress kullanmanızı önerir yeni sürümler yayınlandığında bir önbellek bozma mekanizması olarak.
  • title diğer gerekli alandır ve eklentinin görüntülendiği her yerde kullanılan adı ayarlar.
  • category bloğu diğer bloklarla gruplandırır ve Blok Düzenleyicide birlikte görüntüler. Mevcut mevcut kategoriler şunları içerir: text, media, design, widgets, theme, ve embedve hatta oluşturabilirsiniz özel kategoriler.
  • icon arasından bir şey seçmenizi sağlar. Dashicons kitaplığı bloğunuzu Blok Düzenleyicide görsel olarak temsil etmek için. ben kullanıyorum format-quote icon](https://developer.wordpress.org/resource/dashicons/#format-quote) çünkü bu örnekte kendi kısa alıntı türümüzü yapıyoruz. Kendi simgemizi oluşturmak yerine mevcut simgelerden yararlanabilmemiz güzel, ancak bu kesinlikle mümkün.
  • editorScript ana JavaScript dosyasının bulunduğu yerdir, index.js, hayatları.

bloğu kaydet

Gerçek koda ulaşmadan önce son bir şey, o da eklentiyi kaydettirmek. Tüm bu meta verileri kurduk ve WordPress'in onu tüketmesi için bir yola ihtiyacımız var. Bu şekilde, WordPress tüm eklenti varlıklarını nerede bulacağını bilir, böylece Blok Düzenleyicide kullanılmak üzere sıralanabilirler.

Bloğun kaydedilmesi iki aşamalı bir işlemdir. Hem PHP'de hem de JavaScript'te kaydetmemiz gerekiyor. PHP tarafı için ana eklenti dosyasını açın (block-example.php bu durumda) ve eklenti başlığından hemen sonra aşağıdakini ekleyin:

function create_block_block_example_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_block_example_block_init' );

İşte bu create-block yardımcı program benim için oluşturuldu, bu yüzden işlevin adı bu şekilde. Farklı bir isim kullanabiliriz. Anahtar, yine, diğer eklentilerle çakışmalardan kaçınmaktır, bu nedenle, onu olabildiğince benzersiz kılmak için ad alanınızı burada kullanmak iyi bir fikirdir:

function css_tricks_block_example_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'css_tricks_block_example_block_init' );

neden işaret ediyoruz build dizin ise block.json tüm blok meta verileri ile birlikte src? Bunun nedeni, kodumuzun hala derlenmesi gerekmesidir. bu scripts paket, içindeki dosyalardan gelen kodu işler. src dizini oluşturur ve üretimde kullanılan derlenmiş dosyaları dizine yerleştirir. build dizin, aynı zamanda kopyalama block.json dosya sürecinde.

Pekala, bloğu kaydetmenin JavaScript tarafına geçelim. aç src/index.js ve şöyle göründüğünden emin olun:

import { registerBlockType } from "@wordpress/blocks";

import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";

const { name } = metadata;

registerBlockType(name, {
  edit: Edit,
  save: Save,
});

React ve JSX alanına giriyoruz! Bu, WordPress'e şunu söyler:

  • içe aktar registerBlockType modülünden @wordpress/blocks paketi.
  • Şuradan meta verileri içe aktar: block.json.
  • içe aktar Edit ve Save karşılık gelen dosyalarından bileşenler. Daha sonra bu dosyalara kod koyacağız.
  • Bloğu kaydedin ve Edit ve Save bloğu işlemek ve içeriğini veritabanına kaydetmek için bileşenler.

ne haber edit ve save fonksiyonlar? WordPress bloğu geliştirmenin nüanslarından biri, "arka ucu" "ön uçtan" ​​ayırmaktır ve bu işlevler, bloğun içeriğini bu bağlamlarda işlemek için kullanılır; edit arka uç oluşturmayı yönetir ve save içeriği sitenin ön ucunda işlemek için Blok Düzenleyiciden veritabanına yazar.

Hızlı bir test

Bloğumuzun Blok Düzenleyicide çalıştığını ve ön uçta işlendiğini görmek için bazı hızlı işler yapabiliriz. Hadi açalım index.js tekrar kullanın ve edit ve save nasıl çalıştıklarını gösteren bazı temel içerikleri döndürmek için işlevler:

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

const { name } = metadata;

registerBlockType(name, {
  edit: () => {
    return (
      "Hello from the Block Editor"
    );
  },
  save: () => {
    return (
      "Hello from the front end"
    );
  }
});

Bu temelde daha önce sahip olduğumuz aynı kodun soyulmuş bir versiyonudur, sadece doğrudan meta verilere işaret ediyoruz. block.json blok adını almak için ve Edit ve Save işlevleri doğrudan buradan çalıştırdığımız için bileşenler.

Bunu çalıştırarak derleyebiliriz npm run build komut satırında. Bundan sonra, Blok Düzenleyicide "Blok Örneği" adlı bir bloğa erişimimiz var:

Bloğu içerik alanına bırakırsak, geri döndüğümüz mesajı alırız. edit işlevi:

Blok yerleştirici paneli açık ve kısa alıntı bloğu içerik alanına eklenmiş halde WordPress Blok Düzenleyici. Arka uçtan merhaba yazıyor.

Gönderiyi kaydedip yayınlarsak, geri döndüğümüz mesajı almamız gerekir. save ön uçta görüntülerken işlev:

Web sitesinin ön ucunda oluşturulan kısa alıntı bloğu. Ön uçtan merhaba diyor.

blok oluşturma

Görünüşe göre her şey birbirine bağlı! Sahip olduğumuz şeye geri dönebiliriz index.js testten önce, artık her şeyin çalıştığını onayladığımıza göre:

import { registerBlockType } from "@wordpress/blocks";

import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";

const { name } = metadata;

registerBlockType(name, {
  edit: Edit,
  save: Save,
});

Dikkat edin edit ve save işlevler, mevcut iki dosyaya bağlıdır. src dizin ki @wordpress/create-block bizim için oluşturulur ve her dosyada ihtiyacımız olan tüm ek içe aktarmaları içerir. Daha da önemlisi, yine de, bu dosyalar Edit ve Save bloğun işaretlemesini içeren bileşenler.

Arka uç işaretlemesi (src/edit.js)

import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

export default function Edit() {
  return (
    

{__("Hello from the Block Editor", "block-example")}

); }

Orada ne yaptığımızı gördünüz mü? Sahne aksesuarlarını ithal ediyoruz. @wordpress/block-editor Daha sonra stil için kullanabileceğimiz sınıflar oluşturmamızı sağlayan paket. Biz de ithal ediyoruz __ çevirilerle uğraşmak için uluslararasılaştırma işlevi.

Arka uçtaki kısa alıntı bloğu, seçili ve yanında devtools açık ve işaretlemeyi gösteriyor.

Ön uç işaretlemesi (src/save.js)

Bu bir oluşturur Save bileşen ve hemen hemen aynı şeyi kullanacağız src/edit.js biraz farklı metinle:

import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

export default function Save() {
  return (
    

{__("Hello from the front end", "block-example")}

); }

Yine, CSS'mizde kullanabileceğimiz güzel bir sınıf elde ediyoruz:

Ön uçtaki kısa alıntı bloğu, seçili ve yanında devtools açık ve işaretlemeyi gösteriyor.

Stil blokları

Sınıf oluşturmak için blok desteklerin nasıl kullanılacağını ele aldık. Tamamen CSS ile ilgili bir sitede bu makaleyi okuyorsunuz, bu yüzden özellikle blok stillerinin nasıl yazılacağına değinmeseydik bir şeyleri kaçırıyormuşum gibi hissediyorum.

Ön ve arka uç stillerini ayırt etme

Bir bakarsan block.json içinde src dizinde stillerle ilgili iki alan bulacaksınız:

  • editorStyle arka uca uygulanan stillere giden yolu sağlar.
  • style hem ön hem de arka uca uygulanan paylaşılan stillerin yoludur.

Kev Quirk'in ayrıntılı bir makalesi var bu, arka uç düzenleyiciyi ön uç kullanıcı arayüzü gibi göstermeye yönelik yaklaşımını gösterir.

Hatırlayın ki @wordpress/scripts paket kopyalar block.json içindeki kodu işlediğinde dosya /src dizini oluşturur ve derlenmiş varlıkları /build dizin. O build/block.json bloğu kaydetmek için kullanılan dosya. Bu, sağladığımız herhangi bir yol anlamına gelir src/block.json göre yazılmalı build/block.json.

Sass'ı Kullanmak

Birkaç CSS dosyası bırakabiliriz. build dizini, içindeki yollara başvurun src/block.json, yapıyı çalıştırın ve bir gün arayın. Ancak bu, tüm gücünden yararlanmaz @wordpress/scripts Sass'ı CSS'ye derleyebilen derleme işlemi. Bunun yerine, stil dosyalarımızı src dizini ve bunları JavaScript'te içe aktarın.

Bunu yaparken nasıl hareket edeceğimize dikkat etmeliyiz. @wordpress/scripts işlem stilleri:

  • Adlı bir dosya style.css or style.scss or style.sassJavaScript koduna içe aktarılan , şu şekilde derlenir: style-index.css.
  • Diğer tüm stil dosyaları derlenir ve index.css.

The @wordpress/scripts paket kullanır webpack paketleme için ve @wordpress/scripts kullanır PostCSS eklentisi işleme stilleri için çalışmak için. PostCSS ek eklentilerle genişletilebilir. bu scripts paket, tümü ek paketler kurulmadan kullanılabilen Sass, SCSS ve Autoprefixer için olanları kullanır.

Aslında, ilk bloğunuzu ile döndürdüğünüzde @wordpress/create-block, işe koyulmak için kullanabileceğiniz SCSS dosyalarıyla iyi bir başlangıç ​​elde edersiniz:

  • editor.scss arka uç düzenleyiciye uygulanan tüm stilleri içerir.
  • style.scss hem ön hem de arka uç tarafından paylaşılan tüm stilleri içerir.

Şimdi bloğumuz için CSS'de derleyeceğimiz küçük bir Sass yazarak bu yaklaşımı uygulamalı olarak görelim. Örnekler çok Sass-y olmayacak olsa da, derleme sürecini göstermek için bunları hala SCSS dosyalarına yazıyorum.

Ön ve arka uç stilleri

Tamam, hem ön hem de arka uca uygulanan stillerle başlayalım. İlk olarak, oluşturmamız gerekiyor src/style.scss (kullanıyorsanız zaten oradadır. @wordpress/create-block) ve içe aktardığımızdan emin olun, bunu yapabileceğimiz index.js:

import "./style.scss";

Açmak src/style.scss ve blok desteklerinden bizim için oluşturulan sınıfı kullanarak oraya birkaç temel stil bırakın:

.wp-block-css-tricks-block-example {
  background-color: rebeccapurple;
  border-radius: 4px;
  color: white;
  font-size: 24px;
}

Şimdilik bu kadar! Derlemeyi çalıştırdığımızda, bu derlenir build/style.css ve hem Blok Düzenleyici hem de kullanıcı arabirimi tarafından başvurulur.

Arka uç stilleri

Blok Düzenleyiciye özgü stiller yazmanız gerekebilir. Bunun için oluştur src/editor.scss (tekrar, @wordpress/create-block bunu sizin için yapar) ve oraya bazı stiller bırakın:

.wp-block-css-tricks-block-example {
  background-color: tomato;
  color: black;
}

Ardından içe aktarın edit.js, dosyamızı içeren dosya Edit component (istediğimiz yere import edebiliriz ama bu stiller editör için olduğu için componenti buraya import etmek daha mantıklıdır):

import "./editor.scss";

Şimdi koştuğumuz zaman npm run build, stiller bloğa her iki bağlamda da uygulanır:

WordPress Block Editor'daki domates rengi arka plana sahip küçük alıntı bloğu. siyah metnin arkasında.
Kısa alıntı bloğu, siyah metnin arkasında rebecca mor renkli bir arka plan uygulanmış ön uçta yer alır.

Başvuru stilleri içinde block.json

Stil dosyalarını şuraya aktardık: edit.js ve index.js, ancak derleme adımının bizim için iki CSS dosyası oluşturduğunu hatırlayın. build dizin: index.css ve style-index.css sırasıyla. Oluşturulan bu dosyalara blok meta verilerinde başvurmamız gerekir.

Bir iki ifade ekleyelim block.json meta:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/block-example",
  "version": "1.0.0",
  "title": "Block Example",
  "category": "text",
  "icon": "format-quote",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

koşmak npm run build bir kez daha, eklentiyi WordPress sitenize yükleyip etkinleştirin ve kullanmaya hazırsınız!

Sen kullanabilirsiniz npm run start derlemenizi izleme modunda çalıştırmak için, kodunuzda her değişiklik yaptığınızda ve kaydettiğinizde kodunuzu otomatik olarak derler.

Yüzeyi çiziyoruz

Gerçek bloklar, zengin kullanıcı deneyimleri oluşturmak için Blok Düzenleyicinin Ayarlar kenar çubuğunu ve WordPress'in sağladığı diğer özellikleri kullanır. Dahası, bloğumuzun temelde iki versiyonu olduğu gerçeği — edit ve save — aynı zamanda kod tekrarını önlemek için kodunuzu nasıl düzenlediğinizi de düşünmeniz gerekir.

Ancak umarız bu, WordPress blokları oluşturmak için genel sürecin gizemini gidermeye yardımcı olur. Bu, WordPress geliştirmede gerçekten yeni bir dönemdir. Bir şeyleri yapmanın yeni yollarını öğrenmek zor ama nasıl geliştiğini görmek için sabırsızlanıyorum. gibi araçlar @wordpress/create-block yardım, ama o zaman bile tam olarak ne yaptığını ve neden yaptığını bilmek güzel.

Burada ele aldığımız şeyler değişecek mi? Büyük ihtimalle! Ancak en azından, WordPress bloklarının olgunlaşmasını ve bunları oluşturmaya yönelik en iyi uygulamaları izlemeye devam ederken, üzerinde çalışabileceğiniz bir temeliniz var.

Referanslar

Yine, buradaki amacım, işlerin hızla geliştiği ve WordPress belgelerinin yetişmekte biraz zorlandığı bu sezonda blok geliştirmeye başlamak için etkili bir yol haritası çıkarmak. Bunu bir araya getirmek için kullandığım bazı kaynaklar:

spot_img

En Son İstihbarat

spot_img