Gutenberg Binası Özel Blok: Kesin Blok Geliştirme Eğitimi
Birçok kişi yapı taşlarına ve Gutenberg uygulamasına başlamak için engellerden şikayet ediyor. Öğrenme eğrisi, esas olarak geliştirme ortamının kurulması ve yapılandırılması zorluğundan dolayı diktir. Buna ek olarak, JavaScript, Node.js, React ve Redux hakkında güçlü bilgi, bu karmaşık tarife sahip olması gereken bileşenlerdir.
WordPress Block Editor El Kitabı resmen çok sayıda bilgi geliştiricisi verdi, ancak ayrıntılı okyanusta kaybolabilirsiniz. Gutenberg Projesi’nin ana mimarı olan Whats Dead’in WP Tavern ile yaptığı röportajda rapor edilmesi gerekiyor:
Hızlı bir şekilde öğrenebilen insanlar olmasına rağmen, hala insanlar için büyük bir engeldir. Bunun için birkaç katman olduğunu düşünüyorum; Belgeler hem kuruluşlarda hem de sunumlarda daha iyi bir düzen olabilir. Umarım orada daha fazlasını yapabiliriz. Bunu hatırlayarak, okuyucularımızın Gutenberg bloğunun gelişimine başlamasına yardımcı olmayı amaçlayan bir adım atmaya karar verdik. Kulağa ilginç geliyor mu? Bölünelim!
Gutenberg bloğunun geliştirilmesi için önkoşullar bu öğretici için gerekli olan tek beceri, WordPress eklentilerinin geliştirilmesi ve en azından HTML, CSS, JavaScript ve React hakkında temel bir anlayış hakkında iyi bir bilgidir.
Bu iddialı bir proje olacak mı? Bunun olacağından eminsin! Bütünlük ve sadelik arasında doğru uzlaşmayı bulmak veya hangi konuların dahil edileceğine ve hangilerinin dahil edilmeyeceğine karar vermek kolay değildir. Umarım, orta ve gelişmiş okuyucular bizi affedecektir, çünkü React durumu, Redux mağazaları, üst düzey bileşenler vb. Gibi belirli kavramları derinlemesine öğrenmezler. Bu konular ek alan ve dikkat gerektirir ve blokların geliştirilmesine başlamak için çok sofistike olabilir (bir geliştirici tepki göstermedikçe). Aynı nedenle, Dinamik gibi Gutenberg bloklarının gelişimi ile ilgili birkaç ileri konu tartışmayacağız. Bloklar ve kutular meta. Bu makalenin sonunda alacağınız bilgi ile hemen eğlenmeye başlayabilecek ve üretken olabilirsiniz. Bir blok oluşturmaya başladıktan sonra, becerilerinizi daha da geliştirmeye ve daha gelişmiş bir Gutenberg bloğu oluşturmaya hazır olacaksınız. Gutenberg bloğunun gelişiminden başlayarak ilk başta korkutucu olabilir … ama korkmayın! Yeni başlayanlar için bu tam rehber tweet için tıklama tartıştı
Gutenberg bloğu nedir? Aralık 2018’de ilk piyasaya sürüldüğünden beri, Block Editor her açıdan çok geliştirildi: daha güçlü ateş, daha sofistike kullanıcı arayüzü, gelişmiş kullanımlar, birçok yeni blok, tam site düzenlemesinin ilk uygulaması ve daha fazlası. . Kısacası, Gutenberg hala ağır gelişme altındaysa bile, çok fazla çalışıyor – ve bugün Block Editor güvenilir ve işlevsel bir sayfa üreticisi ve sitesi olarak tam bir aday. Geliştirici perspektifinden bakıldığında, Gutenberg, WordPress kullanıcılarının WordPress’te içerik oluşturmasına, düzenlemesine ve silmesine izin veren React tabanlı tek bir uygulamadır (SPA). Bununla birlikte, bu sizi geleneksel içerik düzenleyicisinin gelişmiş sürümünü düşündürmemelidir. Bunu açıklığa kavuşturmak istiyoruz: Gutenberg sıradan bir Wysiwyg editörü değil. Bunun yerine, WordPress’teki tüm düzenleme deneyimlerini yeniden tanımlar. Gutenberg’de içerik, kullanıcılar tarafından yayınları ve sayfaları veya tüm web sitelerini yapmak için kullanılabilecek “tuğlalar” olan bloklara ayrılmıştır. Ama teknik blok nedir? WordPress tanımını seviyoruz: “Engelleme”, birlikte düzenlenmiş, web sayfalarının içeriği veya düzenini oluşturan işaretleme birimini tanımlamak için kullanılan soyut bir terimdir. Fikir, bugün WordPress’te olduğumuz kavramları kısa kodlar, özel HTML ve bir yangın ve tutarlı kullanıcı deneyimine gömülü keşiflerle birleştiriyor.
Başlık, paragraf, sütunlar, görüntüler, galeriler ve düzenleyici arayüzünü oluşturan tüm öğeler, yan panellerden kontrol çubuğu kontrolüne kadar, reaksiyonun bileşenleridir. Peki, React bileşeni nedir? W3Schools aşağıdaki tanımları sağlar: Bileşenler bağımsız kod bitidir ve yeniden kullanılabilir. JavaScript işlevi ile aynı hedefe hizmet ederler, ancak ayrı çalışır ve HTML’yi oluşturma işlevi () aracılığıyla geri yükler. WordPress 5.8’de Gutenberg Block ile çalışmak. Gutenberg tarafından sağlanan düzenleme deneyimi klasik WordPress editörü için yeni olmasına rağmen, WordPress’in içeriğinizi veritabanında saklama yöntemi hiç değişmedi. Çünkü Gutenberg, WordPress’te çalışan ancak CMS’nin özünde çalışma şeklini değiştirmeyen bir uygulamadır.
Gutenberg ile yapılan gönderme (ve bu, yayınlar, sayfalar ve özel yayın türlerini içerir) hala WP_Posts tablosunda, tam olarak klasik editör gibi saklanır. Ancak Gutenberg ile yapılan bir yazıda, tabloda klasik ve Gutenberg editörü aracılığıyla yapılan yayınlar arasındaki temel farkı gösteren ek bilgiler bulacaksınız. Bu bilgilerin parçaları HTML yorumlarına benziyor ve özel bir işlevi var: sınırlayıcı bloklar:
Kod Düzenleme ekranında bir blog gönderin. Blok bariyeri, ekranda hangi WordPress bloğunun görüntüleneceğini söyler. Ayrıca JSON nesnelerinde blok özelliği için değer sağlarlar. Öğretim yardımcıları, bloğun ekranda nasıl görüntülenmesi gerektiğini belirler:
Node.js ve NPM’yi yükleyin
Başlayalım. 1. Node.js ve NPM’yi geliştirme ortamınızı yüklemeden ve ilk bloğunuzu kaydetmeden önce Node.js ve Paket Düğüm Yöneticisi’ni (NPM) yüklemeniz gerekir. Info Node.js, JavaScript V8 Chrome Motorunda oluşturulmuş bir JavaScript çalışma zamanıdır. Genellikle düğüm paketi yöneticisi olarak bilinen NPM, “dünyanın en büyük yazılım sicili” olarak kabul edilir. Node.js ve NPM’yi birkaç farklı şekilde yükleyebilirsiniz. Ancak önce, yazılımın makinenize yüklenip yüklenmediğini kontrol etmek isteyebilirsiniz.
Bunu yapmak için, terminali başlatın ve aşağıdaki komutu çalıştırın: Sonuç bir komut bulunmamışsa, düğüm Node.js bilgisayarınıza yüklenmediği anlamına gelir ve yüklemeye devam edebilirsiniz. Bu makale için en kolay kurulum seçeneğini, düğüm yükleyicisini seçtik. Tek yapmanız gereken işletim sisteminize uygun sürümü indirmek ve bir kurulum sihirbazı: node.js indirme sayfası başlatmaktır. Node.js yükledikten sonra, terminalinize -V komutunu çalıştırın. Mevcut NPM paketlerine sahip olduğunuzu onaylamak için NPM -V komutunu da çalıştırabilirsiniz. Artık aşağıdaki araçlarla donatılmışsınız:
NPX Node.js Runner Paketi (belgeye bakın). Bu, NPM komutunu önce yüklemeden çalıştırmanıza olanak tanır.
NPM Node.js Paket Yöneticisi (belgeye 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ı hazırlayın Node.js ve NPM’nin en son sürümünü yerel makinenizde aldıktan sonra, WordPress için bir geliştirme ortamına ihtiyacınız olacaktır. Devkinsta gibi yerel bir geliştirme ortamı veya resmi WordPress araçlarını kullanabilirsiniz. Bu iki seçeneğe bir göz atalım. Seçenek 1: Yerel Geliştirme Ortamı (Devkinsta) Yalnızca birkaç tıklamayla, WordPress’i modern yerel WordPress geliştirme aracımız Devkinsta’yı kullanarak yerel olarak yükleyebilirsiniz. Veya MAMP veya XAMPP gibi farklı yerel geliştirme araçlarını seçebilirsiniz:
Devkinsta’da yeni bir WordPress web sitesi oluşturun. Seçenek 2: WP-ENV Doğrudan komut satırından başlatabileceğiniz yerel bir WordPress geliştirici ortamı sağlayan resmi WP-ENV aracını da seçebilirsiniz. Noah Alen bunu aşağıdaki gibi tanımlıyor: Yerel WordPress ortamı artık bir komutu çalıştırmak kadar basit. WP-ENV, yerel bir WordPress ortamı için ağrılı olmayan bir sıfır yapılandırma aracıdır. Bu, kullanıcıların zaman kaybetmeden WordPress’i hızlı bir şekilde oynayabilmeleri için seçenek hakkında bir karar verir. Gerçekten de amaç, geliştirici, tasarımcı, yönetici veya herhangi biri olun – bu ortamı herkes için kolayca erişilebilir hale getirmektir. Denemeye karar verirseniz, WP-ENV kurmak biraz çaba gerektirir. Sadece şu adımları izleyin: Adım 1: Docker ve Node.js kurulumunun Onaylama Teknik gereksinimleri karşılamak için önce Docker ve Node.js’yi bilgisayarınıza yüklemeniz gerekir. Bunun nedeni, WP-ENV’nin WordPress sitesini çalıştıran bir Docker örneği oluşturmasıdır. Kodda yapılan her değişiklik hemen WordPress örneğine yansıtılır. Adım 2: @wordpress/env’i, bilgisayarınızda çalışan Docker ve Node.js ile komut satırından yükleyin, WordPress geliştirme ortamına devam edebilir ve yükleyebilirsiniz. WP-ENV’yi hem küresel hem de yerel yükleyebilirsiniz. Bunu küresel olarak yapmak için, eklenti dizinin içinden aşağıdaki komutu çalıştırmanız gerekir (bunun hakkında daha fazla bilgi aşağıdaki “önemli” bildirim kutusunda): npm yükleme -g @wordpress/env Let’s açıklayalım: NPM Paketi yükleme.
@wordpress/env yükleyeceğiniz bir pakettir.
Varsayılan olarak,/usr/local/lib/node_modules içine yüklenen Mac veya Linux düğüm paketinde önemlidir.Mevcut kullanıcının bu dizinde yazma hakkı yoksa, Eacces hataları verilecektir.Global bir paket yüklerken EACCES izin hatalarını tamamlama hakkında daha fazla bilgi edinin.WP-ENV’nin başarılı bir şekilde yüklendiğini doğrulamak için aşağıdaki komutu çalıştırın: WP-ENV-Sürüm Geçerli WP-ENV sürümünü göreceksiniz, yani eklenti klasörünüzden aşağıdaki komutu kullanarak ortamı başlatabileceğiniz anlamına gelir: WP- ENV Başlangıç Başlangıcı aşağıdaki adresi kullanarak WordPress Gösterge Tablosuna erişebilir: http: // localhost: 8888/wp-admin/
Varsayılan kimlik bilgileri aşağıdaki gibidir:
Şifre: Şifre
Blok eklentinizi hazırlayın Şimdi oluşturulacak bir başlangıç bloğu eklentisine ihtiyacınız var. Ancak, gerekli tüm dosyalar ve klasörlerle manuel olarak bir geliştirme bloğu eklentisi oluşturmak yerine, bloğun geliştirilmesini başlatmak için ihtiyacınız olan tüm dosyaları ve yapılandırmaları sağlayan geliştirici aracını çalıştırırsınız. Yine, aralarından seçim yapabileceğiniz birkaç seçeneğiniz var. Her birine bakalım. Seçenek 1: @wordpress/create-block @wordpress/create-block ile bir engelleme eklentisi hazırlayın Gutenberg blok oluşturmak için resmi bir sıfır yapılandırma aracıdır: Create Block, WordPress eklentileri için bir blok kaydetmek için bir blok yapmanın resmi bir yoludur. Yapılandırma olmadan modern yapı ayarları sunar. PHP, JS, CSS kodu ve projeyi başlatmak için ihtiyacınız olan her şeyi üretir. Bu çoğunlukla Create React-Appe’den esinlenmiştir. @Gaaearon, tüm Facebook ekibi ve React topluluğu için büyük bir övgü. Yerel ortamınız etkin ve çalıştırıldıktan sonra, başlangıç bloğunu yalnızca NPX @WordPress/Create-Block komutunu çalıştırarak ayarlayabilirsiniz ve eklenti iskele yapmak ve yeni bir blok kaydetmek için ihtiyacınız olan tüm dosyaları ve klasörleri sağlayacaktır. Nasıl çalıştığını görmek için testi yapalım. Komut satırınızdan/wp-content/eklentiler/eklentilere gidin ve aşağıdaki komutu çalıştırın: npx @wordpress/create-block My My-Block Onaylanması istendiğinde, devam etmek için y girin: @wordpress ile bir blok yapın: /Oluştur -Blok. Süreç birkaç dakika sürer. Bittiğinde aşağıdaki yanıtı alacaksınız:
Blok eklentileri yapıldı. Ve hepsi bu! Şimdi WordPress geliştirme ortamınızı başlatın ve eklenti ekranını WordPress kontrol panelinde açın. “İlk Blok” adlı yeni eklenti eklenti listenize eklenmiş olmalıdır: Blok eklentisi başarıyla yüklendi. Bilgi WP-ENV aracını kullanırsanız ve WP-ENV Başlangıcısını eklenti içeren dizinden çalıştırırsanız, eklentiyi otomatik olarak yükler ve etkinleştirir. WP-ENV Başlat’ı başka bir dizinden çalıştırırsanız, genel WordPress ortamı oluşturulur (ayrıca bkz. WordPress Geliştirme Sitesi). Gerekirse eklentiyi etkinleştirin, yeni bir blog yazısı oluşturun, bloğun eklenmesini widget bölümüne kaydırın ve yeni bloğunuzu seçin:
@WordPress/Create-Block ile yapılan blok örnekleri. Şimdi terminale geri dönün ve geçerli dizini benim ilk blok olarak değiştirin: ilk blok CD’m sonra aşağıdaki komutu çalıştırın: NPM Start, Eklentileri Geliştirme Modunda çalıştırmanıza izin verir. Bir üretim kodu oluşturmak için aşağıdaki komutu kullanmalısınız: NPM RUE Build Seçenek 2: Create-Guten-Block Create-Guten-Block ile bir blok eklentisi hazırlayın Gutenberg Block’u oluşturmak için üçüncü taraf bir geliştirme aracıdır: Create-Guten-Block React, Webpack, ES6/7/8/SONRAKİ, ESLINT, Babylon, vb. Tıpkı resmi bir oluşturma aracı gibi, Create-Guten-Block da Create-React-App’e dayanır ve ilk blok eklentinizi karmaşıklık olmadan üretmenize yardımcı olabilir. Bu 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:
Destek Sözdizimi React, JSX ve ES6.
Ekranın arkasında bir webpack geliştirme/üretim yapma işlemi.
Otomatik önekle CSS, bu nedenle -webkit veya başka bir öneke ihtiyacınız yoktur.
Üretim için JS, CSS ve görüntüleri kaynak haritalarla birleştirmek için komut dosyası oluşturun.
Tek bir bağımlılık CGB komut dosyası ile yukarıdaki araç için karmaşıklık olmadan güncelleme.
Create-gten-block ile oluşturulan yeni bir eklenti ile eklenti ekranı. Eklentiyi etkinleştirin ve terminale dönün. Geçerli dizini benim ilk blok olarak değiştirin, ardından NPM Start’ı çalıştırın: CD MY MY-BLOCK NPM Start Aşağıdaki yanıtı almalısınız:
NPM başlar. Yine, bu, eklentileri geliştirme modunda çalıştırmanızı sağlar. Bir üretim kodu oluşturmak için: npm run oluşturma eklentisini etkinleştirin ve yeni bir gönderi veya sayfa oluşturun, ardından bloğunuzu keşfedin ve yeni Gutenberg Block: Create Guten-Block ile oluşturulan yeni bir blok seçin. Daha derin bir resim için veya bir hata oluşursa, Ahmad Awais tarafından sağlanan belgelere bakın. İki dev-tours-create-block veya create-guten-bloktan başka bir başlangıç bloğu iskele kılavuzu, şimdi yapı bloğu eklentileri için bir başlangıç noktası olarak kullanabileceğiniz bir blok iskeleniz var. Peki blok bloğu tam olarak nedir? Blok iskele, WordPress’in bloğu tanıyması için ihtiyacınız olan destek dizininin yapısını açıklayan kısa vadeli bir dönemdir. Genellikle dizin index.php, index.js, style.css ve diğerleri gibi dosyaları içerir. Block Editor El Kitabında kullanıldığı gibi resmi Block Geliştiricisi’ni seçtik. Ancak, Create-Guten-Block gibi üçüncü taraf araçları kullanmaya karar verseniz bile, deneyiminiz çok farklı olmayacaktır. Bununla birlikte, daha derine inelim- blok araçlarına yönelelim. Yukarıda bahsettiğimiz gibi dev-tool bloğuna daha yakından bakın, Block Create Gutenberg bloğunu yapmak için resmi bir komut satırıdır. Yeni blok türlerini kaydetmek için gereken PHP, JS ve SCSS kodlarını üretmek için terminalinizde @wordPress/Create-Block çalıştırmak: npx @wordpress/create-block [options] [slug]
[Slug] (İsteğe bağlı) – Slug bloğunu belirlemek ve eklentiyi kurmak için kullanılır
[Seçenekler] (İsteğe bağlı) – Varsayılan olarak sağlanan seçenek, ESNEXT şablonu belirlenir. Bu, JSX sözdizimi ekleyerek bir sonraki JavaScript sürümünü alacağınız anlamına gelir. Bloğun adını ortadan kaldırırsanız, komut etkileşimli modda çalışır ve bir dosya oluşturmadan önce bazı seçenekleri ayarlamanızı sağlar: npx @wordpress/create-block
Etkileşimli modda bir blok çalıştırma. Aşağıdaki resim, resmi bir blok aracı ile yapılan blok eklentisi dosyasının yapısını göstermektedir:
@Wordpress/create-block ile oluşturulan eklenti dosyalarını ve klasörleri bloke edin. Bununla, yeni blok eklentimizin ana dosyalarına ve klasörlerine bakalım. Eklenti Dosyası Ana Eklenti Dosyası Sunucuya bir blok kaydedersiniz: /** * Eklenti Adı: İlk blokum * Açıklama: ESNEXT Standart ve JSX Desteği ile Yazılmış Örnek Blok – Yapma Adımı Gerekli. * En azından gerektirir: 5.8 * PHP gerektirir: 7.0 * sürüm: 0.1.0 * Yazar: WordPress katkıda bulunur * Lisans: GPL-2.0-OR-LATER * Lisans URI: https://www.gnu.org/licenses/gpll -2.0.html * Metin Etki Alanı: My First-Block * * @Package Create-Block * / / ** * ‘Block.json’ dosyasından yüklenen meta verileri kullanarak bloğu kaydedin. * Perde arkasında, ilgili bağlamda blok düzenleyicisi aracılığıyla * enqueable * olabilmeleri için tüm varlıkları da kaydeder. * * @see https://deceloper.wordpress.org/block-iditor/tutorials/block-tutorial/writing–first-ype/ */function create_block_first_block_block_init () {register_block_type (__dire (__dire (__dire (__dire); } Add_action (‘init’, ‘create_block_my_first_block_block_init’); Register_block_type işlevi, block.json dosyalarında depolanan meta verileri kullanarak sunucudaki blok türlerini kaydeder. Bu işlev iki parametre alır:
Blok türünün adı bir ad alanı veya block.json dosyasının bulunduğu klasöre giden yol veya wp_block_type compleoArray bağımsız değişken türü blok türü içerir
Başlık – Bir Blok için Başlık
Kategori – Blok Kategorisi
Simge – Dashicon Salyangoz veya Özel SVG simgesi
Textodain – Metin Etki Alanı Eklentisi
Editorscript – Editör komut dosyasının tanımı
Editörlük – Editörün Tarzının Tanımı
Stil – Bir blok için alternatif bir stil sağlar
Yukarıda listelenen özelliklere ek olarak, bloğunuz tarafından depolanan veriler hakkında bilgi sağlayan öznitelik nesnelerini tanımlayabilirsiniz (ve olabilir). Block.json’da, anahtar/değer ortağında bir dizi öznitelik ayarlayabilirsiniz; burada anahtar özniteliğin adıdır ve değer özniteliğin tanımıdır. Aşağıdaki özellik tanımlarının örneklerini düşünün: “öznitelikler”: {“content”: {“type”: “dizi”, “kaynak”: “Çocuklar”, “Seçici”: “P”}, “Hizala”: {” “:” String “,” varsayılan “:” none “},” link “: {” type “:” String “,” varsayılan “:” https://insta.com “}}, daha derin dalış yapacağız Dosya bloğu. SRC klasörü SRC klasörü, geliştirmenin gerçekleştiği bir yerdir. Bu klasörde, aşağıdaki dosyaları bulacaksınız:
İndex.js
edit.js
Kaydet. JS
editor.scss
Style.scss
İndex.js dosya index.js başlangıç noktanızdır. Burada bağımlılıkları içe aktaracak ve istemcilere blok türlerini kaydedeceksiniz: {RegisterBlockType} ‘dan’@wordpress/bloklar ‘; ithal ‘./style.scss’; ‘./Dit’ adresinden Düzenleme İçe Aktar; “/save ” den ithal kaydet; RegisterBlockType (‘Create-Block/My My-Block’, {edit: edit, kaydet,}); İlk ifade, RegisterBlockType kaydını @WordPress/Blocks paketinden içe aktarır. Aşağıdaki içe aktarma ifadesi, stil sayfasını Düzenleme ve Kaydet işleviyle birlikte ithalat eder. KayıtBlockType işlevi, istemcideki bileşenleri kaydeder. Bu işlev iki parametre alır: blok ad alanı/blok adı (sunucuda kayıtlı olanlarla aynı) ve yapılandırma nesnelerini bloke. Düzenleme işlevi, blok düzenleyicisinde oluşturma olarak bir blok arayüzü sağlarken, kaydetme işlevi veritabanında gerçekleştirilecek ve saklanacak bir yapı sağlar (daha fazla bilgi edinin). edit.js edit.js, bir yönetici arayüz bloğu oluşturacağınız bir yerdir: {__} ‘den {__}’ dan {__}; {@WordPress/Block-editor’dan {useBlockProps} ithalatı; İthal ‘./ditor.scss’; Varsayılan işlevi dışa aktarma EDIT () {return (
{__ (‘Editörden ilk blok-hello’m!’, ‘İlk blok’)}
); } İlk olarak, @WordPress/I18N paketinin __ işlevini içe aktarma (bu paket çeviri işlevinin bir JavaScript sürümünü içerir), UsblockProps React Hook ve Dosya Editor.scss. Bundan sonra, React bileşenini dışa aktardı (içe aktarma ve ihracat ifadeleri hakkında daha fazla bilgi edinin). Save.js Dosyası Save.js, veritabanında depolanacak bir blok yapısı oluşturduğumuz yerdir: {@__} ‘dan {__}’ dan içe aktarma {__};
{@WordPress/Block-editor’dan {useBlockProps} ithalatı; Varsayılan işlevi dışa aktar) {return (
{__ (‘Kaydedilen içerikten ilk blok-hello’m!’, ‘İlk blok’)}
); } editor.scss ve style.scss Komut dosyası dışında, SASS klasöründe iki dosya Sass. Editor.scss dosyası, editör bağlamında bloğa uygulanan kuvveti içerirken, style.scss dosyası ön uçta görüntülenecek blok kuvvetini içerir. Bu kılavuzun ikinci bölümünde bu dosyalara daha derinlemesine dalacağız. NODE_MODULES VE DÜZENLE Klasörler Düğüm Modülünü ve Bağımlılığı içeren Node_Modules. Paket düğümünde daha fazla tartışmayacağız, çünkü bu makalenin kapsamı dışındadır, ancak bu makalede paketi yüklemek için NPM’nin yeri hakkında daha fazla bilgi edinebilirsiniz. Yapı klasörü, derleme işleminden üretilen JS ve CSS dosyalarını içerir. ESNEXT sözdizimi ve JavaScript yapmak için hazırlık yönergelerindeki üretim sürecinde daha fazlasını keşfedebilirsiniz. Proje: Ellerimizi kirletmek için ilk Gutenberg blok zamanınızı oluşturmak. Bu bölüm size bağlı blok adı verilen bir CTA bloğu sağlayan bir eklentinin nasıl yapılacağını öğretecektir. Blok, soldaki resim ve sağdaki metnin paragrafı bulunan iki sütundan oluşacaktır. Ayarlanabilir bağlantılara sahip düğmeler metnin altına yerleştirilecektir:
Bu kılavuzda inşa edilmeyi öğreneceğiniz blok türü. Bu sadece basit bir örnektir, ancak bu, Gutenberg bloğunun gelişiminin temellerini tartışmamızı sağlar. Temel bilgileri net bir şekilde anladıktan sonra, bir blok düzenleyici el kitabı ve orada bulunan diğer büyük kaynakların yardımıyla devam edebilir ve giderek karmaşıklaşan bir Gutenberg bloğu oluşturabilirsiniz. Bu öğreticide sağlanan örnek kodu bilgileri referansınız için GIST’de de mevcuttur. Yerel geliştirme ortamınızda çalışan WordPress’in en son sürümüne sahip olduğunuzu varsayarsak, buradan öğreneceğiniz şey budur: Yeni Başlayan Blok eklentisini nasıl ayarlayabilirsiniz
Block.json iş başında
Varsayılan bileşeni kullanma: RichText Bileşeni
Blok alet bıçaklarına kontrol ekleyin
Blok ayar çubuğunu ayarlayın
Harici bağlantıyı ekleyin ve ayarlayın
Bazı blok stilleri ekleyin
InnerBlocks bileşenleri ile yuvalama blokları
Ek Artış
Gitmeye hazır! Yeni Başlayan Blok Eklentisi Nasıl Ayarlanır Komut satırınızı başlatın ve klasör /WP-Concent /Eklentilere gidin:
Mac OS’deki klasörde yeni terminal. Şimdi, aşağıdaki komutu çalıştırın: NPX @WordPress/Create-Block Bu komut, blokları etkileşimli modda kaydetmek için PHP, SCSS ve JS dosyalarını üretir ve bloğunuz için gerekli verileri kolayca eklemenize olanak tanır. Örneğimiz için aşağıdaki ayrıntıları kullanacağız:
Slug Blok: Bloka bağlı-I
Dahili Adı Alanı: Mantık Verim Eklentisi
Ekran bloğu başlığı: Ortaklık Bloğu
Kısa Blok Açıklama: Kinsta okuyucuları için blok örnekleri
Kategori Adı: Tasarım
Eklenti Yazar: Adınız
Lisans : –
Lisans metnine bağlantı: – Geçerli eklenti Varve: 0.1.0
Eklentiler ve tüm bağımlılıklar yükleme birkaç dakika sürer. Süreç tamamlandığında, aşağıdaki yanıtı göreceksiniz:
Bağlı kuruluş blokları kuruldu ve geliştirme için kaydedildi. Şimdi, klasörden /wp-content /eklentilerinden aşağıdaki komutu çalıştırın: WordPress ortamını çalıştırırsanız, önce bir masaüstü docker başlatmanız ve ardından eklenti klasörünüzden WP-ENV başlatmanız gerekir. Ardından, web tarayıcınızdan http: // localhost: 8888/wp-login’i başlatabilir ve WordPress kontrol panelinize girmek için kullanıcı adı: yönetici ve şifre: şifre kullanabilirsiniz.
Visual Studio Kodu terminalinden komutlar çalıştırın. Son olarak, eklenti klasörünüzden (örneğimizdeki verimli blok benim), geliştirmeye başlayabilirsiniz: NPM Başlangıç ŞİMDİ AŞAĞIDAK BLOK eklentisini bulmak ve etkinleştirmek için eklenti ekranını açın:
Bağlı Blok Eklentisi. Yeni bir yazı oluşturun, blok bloğunu açın ve tasarım kategorisine gidin. Bir ortaklık bloğu eklemek için tıklayın:
@WordPress/Create-Block ile yapılan başlangıç blokları. Block.json İş yerinde daha önce bahsettiğimiz gibi, sunucu yan bloklarının kaydı ana .php dosyasında yapılır. Ancak, .php dosyasındaki ayarları belirlemeyeceğiz. 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: {“Apersion”: 2, “Name”: “My-Affiliate-Plugin/My-Affiliate-Block”, “Sürüm”: “0.1.0” , “Başlık”: “Satış Ortağı Bloğu”, “Kategori”: “Tasarım”, “Icon”: “Para”, “Açıklama”: “Kinsta okuyucuları için örnek bir blok”, “Destekler”: {“html”: false} , “Textdomain”: “My-Affiliate-Block”, “editorscript”: “Dosya: ./ Build/ index.js”, “editorsStyle”: “Dosya: ./ Build/ index.css”, “stil”: ” Dosya: “Dosya: ./build/style-index.css”} Komut Dosyaları ve Style Editorscript, EditorsStyle ve Özellik Stili, komut dosyalarına ve ön uç ve arka uç stillerine göreceli bir yol sağlar. WordPress tarafından otomatik olarak kaydedilip teslim edildiğinden, burada belirtilen komut dosyasını ve stili manuel olarak kaydetmeniz gerekmez. Bunu kanıtlamak için bir tarayıcı müfettişini başlatın ve ağ sekmesini açın: Chrome Devtools’taki kaynakları kontrol edin. Yukarıdaki resimden de görebileceğiniz gibi, derleme klasöründeki index.js komut dosyamız, herhangi bir PHP kodu eklemeden düzenli olarak enque edildi.
Bültenlere Kaydolun
UI etiketi başlık özelliği ve açıklaması, editördeki blokları tanımlamak için gereken etiketleri sağlar:
Kenar çubuğu bloğunda blok adı ve açıklama.Anahtar Kelimeler Daha önce de belirttiğimiz gibi, blok ayarlarınızı özellik ve öznitelikleri kullanarak doğru bir şekilde yapılandırabilirsiniz.Örneğin, kullanıcıların bloğa göz atmasına yardımcı olmak için bir veya birkaç anahtar kelime ekleyebilirsiniz: {“Anahtar Kelimeler”: [“Kinsta”, “İştirak”, “Para”]} Şimdi “Kinsta”, “Affiliate” veya “Para girerseniz “Hızlı Enjektörde, editör size ortaklık bloğunu önerecektir:
Hızlı ekleyicide bir anahtar kelime kullanarak bir blok arıyorum. Yerelleştirme JSON dosyasındaki dizelerin yerelleştirilmesinin nasıl gerçekleştiğini merak ediyorsanız, Cevap: JavaScript’te, Block.json’dan yüklenen meta verileri kullanarak bir blok türünü kaydetmek için @WordPress/Blocks paketinden RigberBlockTypefrommetadata yöntemini kullanabilirsiniz. Dosya. Tüm yerelleştirilmiş özellikler _x ( @wordpress/i18n paketinden) işlevine otomatik olarak sarılır. Tek gereksinim Textdomain özelliğini block.json dosyasına ayarlamaktır. Burada, Gutenberg 10.7’den beri kullanımdan kaldırıldığı için InstalBlockTypefrommetadata RegisterBlockType işlevini kullanıyoruz, ancak mekanizma aynı. Yerleşik bileşenleri kullanma: RichText Bileşenleri Gutenberg bloğunu oluşturan öğeler reaksiyon bileşenleridir ve bu bileşenlere WP Global değişkeni üzerinden erişebilirsiniz. Örnekler için tarayıcınızın konsoluna wp.editor yazmayı deneyin. Bu size WP.Editor modülü de dahil olmak üzere bileşenlerin tam listesini verecektir. Listede kaydırın ve isimleriyle hangi bileşenlerin ne anlama geldiğini tahmin edin. Benzer şekilde, wp.components modülü de dahil olmak üzere bileşenlerin listesini kontrol edebilirsiniz:
WP Editör Bileşenleri. Bilgi Modüler Programlama, bağımsız, değiştirilebilir bir modül programının işlevselliğini ayırmayı vurgulayan bir yazılım tasarım tekniğidir, böylece her biri istenen işlevselliğin yalnızca bir yönünü yürütmek için her şeyi içerecek (kaynak: kaynak: wikipedia). Şimdi edit.js dosyasına geri dönün ve komut dosyasına daha yakından bakın: {@__} ‘dan {__}’ dan içe aktarın; {@WordPress/Block-editor’dan {useBlockProps} ithalatı; İthal ‘./ditor.scss’; Varsayılan işlevi dışa aktarma EDIT () {return (
{__ (‘Editörden ilk blok-hello’m!’, ‘İlk blok’)}
); } Bu kod, düzenlenemeyen basit metin içeren statik bir blok üretir. Ancak birçok şeyi kolayca değiştirebiliriz: kod düzenleyicisindeki başlangıç blokları. Metin yapmak için düzenlenebilir, geçerli
etiketini, giriş içeriğini düzenleyebilecek bileşenlerle değiştirmeniz gerekir. Bu nedenle, Gutenberg varsayılan RichText bileşenleri sağlar. Varsayılan bileşeni bloğunuza ekleyin 5 adımlı işlemdir:
WordPress paketinden gerekli bileşenlerin ithalatı
JSX kodunuza uygun bir öğe ekleyin
Block.json dosyasında gereken özellikleri belirleyin
Etkinliğin denetleyicisini belirleyin
Veri kaydet
Adım 1: WordPress paketinden gerekli bileşenleri içe aktarma Şimdi edit.js dosyasını açın ve aşağıdaki içe aktarma ifadesini değiştirin: {useBlockProps} ‘dan {@wordpress/block-editor’dan {useBlockProps}; … to: {@wordpress/block-editor’dan {useBlockProps, RichText} ithalat etmek; Bu şekilde, @WordPress/Block-editor paketinden USEBlockProps ve RichText bileşenlerini içe aktarırsınız. Blockprops kullanın UsblockProps React Blok sarma öğesini işaretler: API sürüm 2 kullanırken, blok sarmalayıcı öğesini işaretlemek için Düzenle Blok işlevinde yeni bir USEBlockProps kancası kullanmalısınız. Hook, blok davranışını etkinleştirmek için gereken özellikleri ve olay işleyicisini girecektir. Blok öğesine devam etmek istediğiniz özellikler, UsblockProps’tan geçmeli ve döndürülen değer öğeye dağıtılır. Basitçe söylemek gerekirse, UsblockProps, öznitelikleri ve sınıfları ambalaj öğesine otomatik olarak ayarlar (örneğimizdeki P öğesi): useBlockProps tarafından üretilen öğeler ve sınıflar. UsblockProps’u sarma öğesinden silerseniz, işlevselliği ve kuvveti engellemeden erişmeden basit bir metin dizesine sahip olursunuz:
UsblockProps olmadan aynı blok. Daha sonra açıklayacağımız gibi, çıktıyı ayarlamak için bir özellik nesnesini kullanmaya devam edebilirsiniz. Zengin metin bileşenleri RichText, kullanıcıların içeriği düzenlemesine ve biçimlendirmesine olanak tanıyan düzenlenebilir girişler sağlar. Github’da Gitenberg/Packges/Block-editor/SRC/Bileşenler/Rich-Text/ReadMe.md’de belgelenen bileşenleri bulacaksınız. Adım 2: BEJ kodunuza uygun bir öğe ekleyin … const blockprops = useBlockProps (); Return (; Satır Kodu hakkında yorum yapalım: TagName – HTML öğelerinden Etiket Adı Düzenlenebilecek
Kaynak, özellik değerinin içerik gönderilmesinden nasıl çıkarıldığını tanımlar. Örneğimizde, bu HTML içeriğidir. Kaynak özelliği sağlamazsanız, verilerin blok bölücüde saklandığını unutmayın (daha fazlasını okuyun).
Seçici bir HTML etiketi veya sınıf adları veya kimlik öznitelikleri gibi diğer seçmenlerdir.
Özellik nesnesi düzenleme işlevini geçeceğiz. Bu nedenle, edit.js dosyasına dönün ve aşağıdaki değişiklikleri yapın: Varsayılan işlevi dışa aktarın Düzenleme ({öznitelikler, setAttributes}) {…} Adım 4: RichText Element olayının işlenmesini belirleyin Bir işlev sağlayan bir onchange özniteliği vardır Eleman içeriği değiştiğinde çağrılacak. Bu işlevi tanımlayalım ve ‘@wordpress/i18n’ ‘den {__}’ dan {__} intihal edit.js komut dosyasını görelim; {@WordPress/Block-editor’dan {useBlockProps, RichText} ithalatı; İthal ‘./ditor.scss’; Varsayılan işlevi dışa aktarma ({öznitelikler, setAttributes}) {const blockprops = useBlockProps (); const onchangeCon = (newContent) => {setAttributes ({content: newcontent})} dönüş (); } Şimdi dosyayı kaydedin ve Terminal pencerenizde npm çalıştırmayı çalıştırın. Ardından, WordPress kontrol panelinize geri dönün, yeni bir gönderi veya sayfa oluşturun ve satış ortağı bloğunuzu ekleyin:
Blok düzenleyicisindeki RichText bileşeninin çıkışı. Biraz metin ekleyin ve kod ekranına geçin. Kodunuzun görüntülenmesi:
Bu İlk Düzenlenebilir Gutenberg Blokum
Şimdi sayfayı tutup ön uç sonuçlarını kontrol ederseniz, biraz hayal kırıklığına uğramış olabilirsiniz çünkü değişiklikleriniz Siteyi etkilemiyor. Bunun nedeni, yayın depolandığında veritabanına kullanıcı girişini kaydetmek için Save.js dosyasını değiştirmeniz gerektiğidir. Adım 5: Verileri Kaydet Şimdi Save.js dosyasını açın ve komut dosyasını aşağıdaki gibi değiştirin: {__} ‘dan {__}’ dan içe aktarın ‘@wordpress/i18n’; {@WordPress/Block-editor’dan {useBlockProps, RichText} ithalatı; Varsayılan işlevi dışa aktarma ({öznitelikler}) {const blockprops = useBlockProps.save (); return (); } Burada yaptığımız şey bu: RichText bileşenlerini blok editör paketinden içe aktarın.
BEJ kodunuza uygun bir öğe ekleyin
Block.json dosyasında gereken özellikleri belirleyin
Etkinliğin işlenmesini belirleyin
Veri kaydet
Adım 1: Block Controls ve Hizgalandırma Kontrolü’nden Block Controls/Block-editor’dan Block Cihaz Bıçaklarına Tesviye Kontrolü eklemek için iki bileşene ihtiyacınız var:
Cevaplar olmadan Standard’ın altında WordPress Seviye 1 barındırma desteği ile sıkıldı mı? Birinci sınıf destek ekibimizi deneyin! Planımıza bakın
Edit.js dosyasını açın ve aşağıda gösterildiği gibi içe aktarma deyimini düzenleyin: {@wordpress/block-editor’dan {useBlockProps, RichText, HizgmentControl, BlockControls}; Adım 2: BlockControls ve Hizalama Kontrol Elemanlarını Ekleyin Düzenleme işlevini açın ve öğesini ile aynı seviyede girin. Ardından ve içinde : Varsayılan işlevi dışa aktarın ({öznitelikler, setAttributes}) {const blockprops = useBlockProps (); Return ( </); } Yukarıdaki kodda, ve reaksiyon parçalarını bildirmek için kısa bir sözdizimidir, bu da React’teki bazı öğeleri geri yükleme şeklimizdir. Bu örnekte, hizalama konutu iki özelliğe sahiptir: Değer, öğenin geçerli değerini verir
Onchange, değer değiştiğinde çalıştırılacak bir olay işleyicisi sağlar
Ayrıca RichText öğesi için ek öznitelikleri tanımladık (örnekle özniteliklerin tam listesini kontrol edin) Adım 3: Block.json’daki hizalayıcıyı belirleyin. {“Type”: “String”, “Varsayılan”: “Yok”} Terminale dönün, geçerli işlemi ^C ile durdurun ve NPM Run Start ile komut dosyasını tekrar başlatın.Ardından blok düzenleyiciye dönün, sayfayı yenileyin ve bloğu seçin.Tesviye kontrolüne sahip bir blok cihazı göreceksiniz:
Hizalama araç çubuğu başarıyla eklendi. Şimdi, yeni tesviye kontrolü kullanarak engelleme içeriğini biçimlendirmeye çalışırsanız, hiçbir şeyin olmayacağını göreceksiniz. Çünkü olay işleyicisini tanımlamadık. Adım 4: Etkinliğin işlenmesini belirleyin Şimdi Onchangealign’ı belirleyin: const onchangealign = (newaliGign) => {setAttributes ({hizalama: newaliGign === unjansız mı? Yeni ayarlayın. Değilse, newalign kullanıyoruz. Edit.js betiği tamamlanmalıyız (şimdilik): Varsayılan işlevi dışa aktarma düzenleme ({öznitelikler, setAttributes}) {const blockprops = useBlockProps (); const onchangeCon = (newContent) => {setAttributes ({content: newcontent})} const onchangealign = (newaligne) => {setattributes ({hizalama: newalign === bedensiz? )} Return ( ); } Artık editöre geri dönebilir ve blok içeriğini uyumlu hale getirebilirsiniz. Veritabanındaki blok içeriği ve öznitelikleri depolamak için tasarruf işlevini değiştirmemiz gerekir. Adım 5: Verileri Kaydet, Save.js’i açın ve Kaydet işlevini aşağıdaki gibi değiştirin: Varsayılan işlevi dışa aktarma ({öznitelikler}) {const blockprops = useBlockProps.save (); Return ();} Son olarak, kodun okunmasını kolaylaştırmak için, sözdizimi atama yıkımını kullanarak özel nesnelerden ayrı ayrı özelliği çıkarabilirsiniz: varsayılan işlevi dışa aktar ({öznitelik}) {const blockprops = useBlockprops.save ();const {content, hizalama} = öznitelikler;return ();} Dosyayı kaydedin, işlemi başlatın ve kod düzenleyici modunda düzenleyiciye dönün.Kod şöyle görünecek:
Bu benim ilk düzenlenebilir gutenberg blok
Metni sağdaki düzleştirin. Ve hepsi bu! Blok Aracının Block Editor El Kitabındaki kontrolü hakkında daha fazla bilgi edinebilirsiniz. Blok Ayarını Ayarlama Bloğu Ayarla Kenar Çubuğu Ayarları Bloğuna da kontrol ekleyebilirsiniz (hatta uygulamanız için yeni bir kenar çubuğu oluşturabilirsiniz). API, bunun için Meclüman Kontrol Bileşenleri sağlar. Block Editor El Kitabı, ayar kümesinin nasıl kullanılacağını açıklar set: Ayar kümesi, nadiren kullanılan ayarları veya daha fazla ekran alanı gerektiren ayarları görüntülemek için kullanılır. Ayar kümesi yalnızca blok seviyesi ayarları için kullanılmalıdır. Yalnızca blokta seçilen içeriği etkileyen ayarlarınız varsa (örneğin: paragrafta seçilen metin için “kalın” ayarlar): Ayarlar kümesine yerleştirmeyin. Ayarlar tarafı, HTML modunda blokları düzenlerken bile görüntülenir, bu nedenle yalnızca blok seviyesi ayarları içermelidir. Tekrar: WordPress paketinden gereken bileşenlerin içe aktarılması
BEJ kodunuza uygun bir öğe ekleyin
Block.json dosyasında gereken özellikleri belirleyin
Etkinliğin işlenmesini belirleyin
Veri kaydet
const {içerik, hizalama, backgroundColor, textColor} = öznitelikler; return (); } Şimdi işlemi durdurun (^C) ve NPM çalışmasını tekrar çalıştırın. Sayfayı yenileyin, bloğunuzun her örneğini silin ve gönderinize tekrar ekleyin: Renk Ayarları panelleri ile özel blok. Değişikliklerinizi yapın, gönderiyi kaydedin ve ön uca bakın. Blok düzenleyicisinde yaptığınız değişiklikler ön alanda yansıtılmalıdır. Bu bölümdeki harici bağlantıyı ekleyin ve ayarlayın, blok türünüze yeni bileşenler ekleyeceksiniz:
Kullanıcıların bağlı bloklara ayarlanmış bağlantılar eklemesine izin veren externalink bileşenleri
Bazı yan kontroller, kullanıcıların bağlantı ayarlarını ayarlamasına izin verir
Panel gövdesi, ayar setine katlanabilen bir kap ekler.
Panerow, kontrol çubuğu kontrolü için genel bir kap üretir.
TextControl metin giriş denetimi sağlar.
ToggleControl, kullanıcıların belirli seçenekleri etkinleştirmesine/devre dışı bırakmasına izin veren bir anahtar sağlar
Externalink, harici bağlantılar eklemek için basit bir bileşendir.
Adım 2. BEJ kodunuza uygun öğeyi ekleyin Önce DivArink öğesini div konteynerindeki aynı RichText seviyesine ekleyecektir:
{linkLabel} Burada HREF, ClassName ve Rail Nitelikleri kullanıyoruz. Varsayılan olarak, ray özelliğinin değeri Noopener NoreFerRer olarak ayarlanır. Kodumuz, anahtar denetimi etkin olduğunda üretilen A Tag A’dan demiryolu özniteliğine bir nofollow anahtar kelime ekleyecektir. Artık blok tarafına bağlantı ayarları ekleyebilirsiniz. İlk olarak, PanelColoressettings ile aynı seviyede Panel gövdesi öğeleri ekleyeceksiniz: …
InitialOpen, panelin başlangıçta açık olup olmadığını ayarlar.
Ardından, panel gövdesine iki panelli eleman ve her panelde bir TextControl öğesi ekleyeceğiz:
</elda İki metin kontrolü, kullanıcıların bağlantı etiketleri ve URL'leri ayarlamasına olanak tanır. Ayrıca, özellikleri içerip içermediği veya içermeyeceği gibi belirli seçenekleri etkinleştirmek/devre dışı bırakmak için ToggleControl ile ek paneller ekleyeceğiz: : {“type”: “string”, “varsayılan”: “”}, “linkLabel”: {“type”: “String”, “varsayılan “:”
Kontrol edin! olay. Edit.js dosyasına dönün ve aşağıdaki işlevi ekleyin: const onchangeAffiliatEnk = (newaffiliatelick) => {setatttribes ({affiliatelink: ? ”: newLinkLabel})} const togglenofollow = () => {setAttributes ({HasLinknOfollow:! Haslinknofollow}}}} Bu işlevler uygun öznitelik değer girişini güncelleyin. En son veriler, kaydetme işlevini kaydetme işlevini kaydetme.js adresinde güncellemeliyiz:: Varsayılan işlevi dışa aktarma ({öznitelik}) {const {hizalama, içerik, backgroundColor, textColor, affiliatElink, linkLabel, HasLinknofollow} = öznitelik; const blockprops = usblockprops.sa (); r Eturn (
{linkLabel}
); } Burada, Externalink yerine normal öğeyi kullandığımızı unutmayın:
Bağlı Blok Bağlantı Ayarları.Şimdi verileri kaydedin ve ortamınızı başlatın.Önceki bölümde bazı blok stilleri ekleyin, kullanıcıların kullanıcı girişini uyumlu hale getirmesini sağlayan bir blok kontrol cihazının nasıl ekleneceğini öğrendiniz.Blok aygıt bıçaklarına daha fazla kuvvet kontrolü ekleyebiliriz, ancak tek bir tıklamayla seçilebilen bir dizi önceden belirlenmiş blok kuvveti sağlayabiliriz.Bu amaçla, Block API: Block Styles’dan faydalı özellikleri kullanacağız.Tek yapmanız gereken Styles Block.json özelliğini tanımlamak ve stil sayfanızda uygun stili beyan etmektir.Örneğin, aşağıdaki stil dizisini ekleyebilirsiniz: “Styles”: [{“Name”: “Varsayılan”, “Etiket”: “Varsayılan”, “IsDefault”: True}, {“Name”: “Sınır”, ” Etiket “:” Sınır “}], bununla birlikte, varsayılan stili ve sınır adı verilen ek bir kuvveti eklediniz.Şimdi blok düzenleyiciye geri dön:
Önceden belirlenmiş iki blok kuvveti. Kuvvet, blok aktarımını tıklayarak ve ardından blok ayarının bloğundaki kuvvet panelini arayarak kullanıcı için mevcut olacaktır. Stili seçin ve p öğesine uygulanan sınıfı kontrol edin. Sağ -Bloğu tıklayın ve inceleyin. Yeni sınıf, yapılandırılmış ada aşağıdaki gibi eklenmiştir: “sınır” kuvvetini kontrol ederseniz, IS-style- {Style-name}, IS tarzı sınır sınıfı p öğesine eklenir. “Varsayılan” kuvveti kontrol ederseniz, bunun yerine IS tarzı varsayım sınıfı eklenir. Şimdi yalnızca CSS özelliğini bildirmeniz gerekir. Editor.scss dosyasını açın ve geçerli stili aşağıdakilerle değiştirin: .WP-Block-Me-Plugin-Plugin-My-Affiliate-Block {Palding: 2px; & .İs-style-default {sınır: 0; } & .is-style sınır {sınır: 1px katı #000; }} Artık aynı şeyi stille yapabilirsiniz } & .is-style sınır {sınır: 1px katı #000; }} İşlemi durdurun (^c) ve NPM çalıştırmasını tekrar çalıştırın. Ve hepsi bu! Sayfayı yenileyin ve yeni blok stilinizle eğlenin:
Satış Ortaklık Blok Kuvvetleri. Gutenberg Block, tamamen çalışmasına rağmen InnerBlocks bileşenine yerleştirilmiş, bağlı kuruluş bloklarımız hala çok ilginç değil. Seyirciler için daha ilginç hale getirmek için resim ekleyebiliriz. Bu, bloğumuza bir karmaşıklık katmanı ekleyebilir, ancak neyse ki, tekerlekleri yeniden keşfetmenize gerek yoktur, çünkü Gutenberg bir yuvalama bloğu yapısı yapmak için kullanabileceğiniz özel bileşenler sağlar. InnerBlocks bileşeni aşağıdaki gibi tanımlanır: InnerBlocks, yuvalama blok içeriğini etkinleştirmek için blokların uygulanmasında kullanılabilecek bir çift bileşeni dışa aktarır. İlk olarak, SRC klasöründe yeni bir .js dosyası oluşturmalısınız. Örneğimizde, bu dosya kapsayıcısı.js olarak adlandıracağız. Şimdi index.js dosyasına yeni kaynaklar aktarmanız gerekiyor: ithal ‘./Container’; Container.js ve İçe Aktarma Bileşenlerine Geri Dön: “@Wordpress/i18n” den {__} içe aktarın; “@WordPress/Block-Editor” dan {useBlockProps, InnerBlocks}; Bir sonraki adım, bloğun yerleştirileceği bir yapı sağlayan bir şablon tanımlamaktır. Aşağıdaki örnekte, çekirdek çizim bloklarımızı ve özel ortaklık bloklarımızı içeren iki sütundan oluşan bir şablon tanımlıyoruz: const şablonları = [‘çekirdek/sütunlar’, {backgroundcolor: ‘sarı’, dikeyalalignment: ‘center’}, [ [[[‘Core/Sütun’, {TemplateLock: ‘All’}, [‘Core/Image’,], [‘Çekirdek/Sütun’, {TemplateLock: ‘All’}, [‘My-Affiliate-Plugin/My -Affiliate-Block ‘, {yer tutucu:’ Yan içeriği girin … ‘}],]]]];
Şablon bir BlockTypes (blok adı ve isteğe bağlı öznitelik) olarak düzenlenmiştir.Yukarıdaki kodda, sütun ve sütun bloklarını yapılandırmak için birkaç özellik kullanıyoruz.Özellikle, TemplateLock özniteliği: ‘All’ sütun bloğunu kilitler, böylece kullanıcının mevcut blokları eklememesi, yeniden düzenlememesi veya silmemesi.TemplateLock aşağıdaki değerlerden birini alabilir: tüm -innerBlock’lar kilitlenir ve hiçbir blok eklenemez, yeniden düzenlenemez veya silinir.
Yanlış – Şablon kilitlenmez.
)}} {const blockprops = usblockprops.save (); .Blockprops}>
)},});
İştirakte editörde yuvalanmış bloklar. Bloğumuzdaki ek artış tamamen çalışıyor, ancak birkaç küçük değişiklikle biraz düzeltebiliriz. RichText bileşeni tarafından üretilen paragrafa arka planColor özniteliğini ayarladık. Bununla birlikte, arka plan rengini div kabına ayarlamayı tercih edebiliriz: bu nedenle, edit.js ve save.js dosyalarını aşağıdaki gibi değiştirmeyi tercih edebiliriz:
.. .. Bu, kullanıcıların tüm bloğun arka planını değiştirmesine izin verecektir. Öte yandan, daha alakalı değişiklikler UsblockProps yöntemini içerir. Orijinal kodda, sabit blok yaylarını aşağıdaki gibi tanımlıyoruz: const blockprops = useBlockProps (); Ancak, bir grup mülkü atlayarak UsblockProps’u daha etkili bir şekilde kullanabiliriz. Örneğin, ClassNames adını ClassNames sınıf adlarından aktarabilir ve uygun ambalaj sınıflarını düzenleyebiliriz. Aşağıdaki örnekte, hizalama özniteliği değerine (edit.js) dayalı bir sınıf adı belirledik: ‘classNames’ den classNames’i içe aktardık; … Varsayılan işlevi dışa aktarma düzenleme ({öznitelikler, setAttributes}) {… const blockprops = useBlockProps ({className: classNames ({[`Has-Text-Aign- $ {Elign`]: Align,})}); …} Save.js dosyasında aynı değişiklikleri yapacağız: ‘classNames’ den classNames’i içe aktaracağız; … Varsayılan işlevi dışa aktarma ({öznitelikler}) {… const blockprops = useBlockprops.save ({className: classNames ({[`Has-Text-inign- $ {{{{{{{{{{{{}}});
…} Ve bu bir sargı! Artık üretim için yapabilirsiniz. Gutenberg bloğunun gelişimini başlatmak için derinlemesine rehberlik arıyorsanız, bu büyük kılavuz sizin için uygundur. Bugün Gutenberg bloğunuzu görün ve inşa etmeye başlayın! Özet bir tweet için tıklayın ve bu olağanüstü yolculuğun sonunda buradayız! Geliştirme çevre yapılandırması ile başlıyoruz ve sonuçta tam bir blok türü yapıyoruz. Girişte bahsettiğimiz gibi, Node.js, Webpack, Babel ve React hakkında güçlü bilgi, gelişmiş Gutenberg blokları yapmak ve kendinizi profesyonel bir Gutenberg geliştiricisi olarak pazarda konumlandırmak için çok önemlidir. Ancak blok geliştirme ile eğlenmeye başlamak için yerleşik bir reaksiyon deneyimine ihtiyacınız yoktur. Blok gelişimi, Gutenberg bloğunun arkasındaki teknolojide giderek daha geniş beceriler elde etmek için motivasyon ve amaç verebilir. Bu nedenle, bu rehber hala mükemmellikten uzaktır. Bu sadece ilk Gutenberg bloğunuzu oluşturmaya başlamanıza yardımcı olacak çeşitli konulara bir giriş. Bu nedenle, belgeleri ve çevrimiçi yönergeleri dikkatlice okuyarak bilginizi derinleştirmenizi öneririz. Orada bulunan birçok kaynak arasında aşağıdakileri öneririz: Resmi Yeni Başlayanlar için bir Blok Eğitimi Oluşturun
Orta Geliştiriciler için Resmi Blok Eğitimi
Dinamik blok
Meta kutu
Eklentiniz için taraf Bilan Oluşturma
WordPress’i geliştirmeye yeni başlıyorsanız, ön uç geliştirmenin temel kavramlarını anlamak isteyebilirsiniz. İşte başlamanıza yardımcı olabilecek hızlı bir kaynak listesi:
Yerel WordPress Nasıl Kurulur (Ücretsiz E -Kitap)
Html vs html5
WordPress’te CSS nasıl düzenlenir
PHP nedir?
Bootcamp WordPress kancaları: Eylemler, filtreler ve özel kancalar nasıl kullanılır
Ve bu örnek kılavuzun tam kodunun özden geldiğini unutmayın.Şimdi sıra sizde: Gutenberg bloğunu geliştirdiniz mi?Şimdiye kadar yaşadığınız ana zorluklar nelerdir?Bize yorumlardaki deneyiminizden bahsedin!
