Gutenberg Blokları Neden ve Nasıl Yapılır – Yeni Başlayanlar İçin Öğreticiler
Gutenberg bloğu yapmayı öğrenmek iyi bir geleceğe iyi bir yatırımdır. Gutenberg tartışmasına nereden düşerseniz gidin, blok editörü kalmak için burada. Klasik bir düzenleyiciye geri dönmüş olsanız bile, büyük olasılıkla önümüzdeki birkaç yıl içinde birkaç noktada bloklar şeklinde web sayfaları yapmaya başlayacaksınız. Yirmi on dokuz gibi daha fazla tema, yeni WordPress editörünün sunduklarını kullanacak. Ayrıca, WordPress’in navigasyon menüleri veya widget’ları gibi diğer bölümlerinde de hemen bloklar kullanacaksınız. Bu nedenle, başınızı şimdi etrafına sarsan iyi olur.
Editör, eklentiler üzerinden genişletilebilen bir dizi standart blokla donatılmıştır. Bununla birlikte, kendi özel çözümünüzü oluşturabilmek genellikle çok yararlıdır, bu Gutenberg Block öğreticisi size öğretilecektir. Ama her şeyden önce, temel bilgilerle başlayalım. Gutenberg bloğu nedir? Nasıl nasıl bahsettiğimizi bitirmeden önce ne hakkında konuştuğumuzu bitirelim. Gutenberg Block Örnekleri, Gutenberg tarafından WordPress’te içerik oluşturulmasında tanıtılan ana değişiklikler, içeriğin büyük bir kısmına sahip olmak yerine (klasik editörde olduğu gibi), web sayfaları artık blok adı verilen daha küçük parçalara ayrılmıştır.
Bu birçok farklı şey olabilir:
Paragraf
Başlık
Blokquote
Resimler ve galeriler
Liste
Gömülü medya
top
Masa
Ayrıca, yakında sayfa öğelerini (kısa kodlar ve widget’lar gibi) görüntülemek için çeşitli yolları öğrenmek zorunda değilsiniz, ancak yeterli: blok. Nasıl kullanacağınızı bildiğinizde, sitenizin tüm farklı bölümlerini kontrol edebilirsiniz. Öyleyse, neden kendi Gutenberg bloğunuzu yapıyorsunuz? WordPress ile ilgili en ilginç şeylerden biri, ayarlanabilmesidir. Bu platformla ilgili hemen hemen her şey ihtiyaçlarınıza göre ayarlanabilir. Örneğin, klasik editörler tamamen ayarlanabilir. Öyleyse, neden yeni ortağıyla aynı şeyi yapmıyorsunuz? Özellikle sık sık ihtiyacınız olan bir içerik bloğu varsa, ancak editörler, eklentiler veya temalar (henüz değil) değilse, kendi içeriğinizi yapmak mantıklıdır. Herhangi bir zamanda özel bir kod girmek yerine, varsayılan menüden seçebilmek daha pratiktir. Katılmıyor musun? Sonuçta, web siteniz mümkün olduğunca kolay çalışma gereksinimlerine uyum sağlamalıdır. Ayrıca, kendi Gutenberg bloğunuzu nasıl yapacağınızı bilmek hızlı bir şekilde yararlı bir beceri haline geliyor. Kolay mı? Teknik açıdan bakıldığında, Gutenberg blok bileşenlerinin çoğunun JavaScript’te yazıldığını belirtmek önemlidir. Bu, programlama dilini öğrenmek için 2015 yılında Matt Mullenweg’in tavsiyesi ile uyumludur – derinlemesine (bunu yapmak istiyorsanız, bu yararlı kaynağı kontrol edin). JavaScript’e doğru kayma son yıllarda, örneğin Calypso’da kanıtlanmıştır. Programlama dili birçok avantajla birlikte gelir ve ateş üzerine inşa edilmiş (Gutenberg gibi) JavaScript tabanlı web uygulamaları Web’in geleceğidir. Bununla birlikte, bu da maalesef Gutenberg bloğunu yapmak yeni başlayanlar için çok samimi olmadığı anlamına geliyor. Çok uzun bir kelimeyle bile bir geliştirici değilim ama neredeyse on yıldır WordPress ile birlikte çalıştım, yazdım ve siteler inşa ettim.
Ancak, kendimi bu yazı ile yaptığım zorlukları tamamlamak için mücadele ettiğimi itiraf etmeliyim. Umarım, süreci adım adım açıklayarak, kodu yazarak geçimini sağlamayan diğerleri için açabilirim. Bakalım, ha? Gutenberg WordPress editörü için bir blok nasıl yapılır, şimdi teori bittikten sonra Gutenberg bloğunu nasıl yapacağınız hakkında konuşalım. Bu öğretici için yeni editörler için özel olarak oluşturulan ilk tema olan yirmi on dokuz temayı kullanacağız. Kutunun dışında, kapak, widget, alıntı, alıntı ve daha fazlası dahil olmak üzere birkaç özel blok sunuyor. Bu nedenle, ayarlanabilir içerik ve özel stile sahip basit bir davet bloğu ekleyeceğiz. Başından beri tam olarak başlamamak için Ahmad Awais’in Create Guten Block Dev Araç Seti’ni kullanacağız. Okuyacağınız her şey buna dayanıyor. Buna ek olarak, akıllıca veya gerekli hissettiğim resmi Gutenberg belgelerine bağlantı verecek. 1. Çevrenizi hazırlayın Gutenberg blokları yapmak için ilk zorluklardan biri geliştirme ortamını yapılandırmaktır. Yerel bir WordPress kurulumu ayarlamak kolay olsa da, yeni editörünüzü kurcalamak için Webpack, React, Eslint, Babylon ve daha fazlası gibi şeylere ihtiyacınız var. Bunun yarısının ne anlama geldiğini bilmiyorsanız, sorun değil, ben de bilmiyorum. Önemli olan, her şeyin yukarıda belirtilen Gutenan için blok kitine doğru bir şekilde dahil edilmesi ve yapılandırılmasıdır.
Ancak, kullanmak için önce Node.js ve NPM yüklemeniz gerekir. Bunun için resmi Node.js web sitesini açın ve sisteminiz için doğru yükleme dosyasını indirin. İşiniz bittiğinde, kurulumu çalıştırın ve çalıştırın. Hazır? Güzel, ilk adımı yeni bitirdin. 2. Guten bloğunu oluşturarak eklenti dosyanızı hazırlayın Bundan sonra, ilk bloğunuzu oluşturma zamanı. Bunu bir konsoldan kolayca yapabilirsiniz. Onunla daha önce hiç çalışmadıysanız, endişelenmeyin. Benim için ilk kez de buydu. Yapmanız gereken ilk şey bir konsol açmak. Windows’ta Windows düğmesine basın, bir komut istemi arayın ve açın. Mac kullanıyorsanız, CMD+F kullanın, ardından bir konsol arayın. Her ikisi de böyle bir şey açmalı: Burada yapmak istediğiniz ilk şey yerel site eklentisi dizininize gitmek. Bunu CD komutuyla yapabilirsiniz. CD yazma [Dizin Adı] Dizini açın, CD … Tek bir dizine geri. Ayrıca, eklenti dizinine giden yolu pencerenin üstünden kopyalayabilir ve doğrudan oraya gitmek için CD komutunun ardından koyabilirsiniz.
Oraya vardığınızda, aşağıdaki komutu çalıştırmak istiyorsunuz: NPX Create-Guten-Block My Block My Block’u yapmak istediğiniz bloğun adıyla değiştirdiğinizden emin olun. Örneğin, benim durumumda, CTA-blok kullanıyorum. Makine daha sonra aynı adlı bir dizin oluşturur, gerekli tüm bilgileri indirir ve Gutenberg bloğunuz için ihtiyacınız olan eklenti dosyasını ayarlar.
Bu birkaç dakika sürecek ama bittiğinde, bununla sonuçlanırsınız:
Bununla bitirdikten sonra, bir Gutenan bloğu oluşturmak ve eklenti klasörünüzü (CD [dizin adı]) girme tavsiyesini izleyin ve NPM Start yazın.İkincisi, geliştirme modunda bir blok çalıştırır, değişikliklere dikkat eder ve kodunuzdaki hataları rapor eder.3. BT eklentisini etkinleştirin ve şimdiye kadar, yeni yaptığınız eklentiyi zaten kullanabilirsiniz.Bunun için WordPress sitenizi girin, eklenti menüsünü açın ve orada etkinleştirin. Şimdi düzenleyiciye giderken, artı sembolünü tıklatıp blok adını ararken, dahil bulabilirsiniz. Bunu ekranda bulmak için bir sayfaya bile koyabilirsiniz: Kötü değil, değil mi? 4. Plugin.php’yi düzenleyin Bir şey görmenin nedeni, şu anda blok kukla içerik içermesidir. Bunu değiştirme zamanı. Her değişiklik için önemli dosyalar eklenti dizinindeki eklentiler.php ve blocks.js, editor.scss ve style.scsss adlı SRC/Block adlı üç dosyadır. Onlarla birlikte, kendi Gutenberg bloğunuzun işlevselliği ve tasarımı ile ilgili her şeyi kontrol edersiniz. Değiştirilmesi en kolay olanı Plugin.php’dir. Burada, arkadaki eklenti menüsünde görülen tüm bilgileri içeren bir başlık eklentisi bulursunuz. /** * Eklenti Adı: CTA-Block-CGB Gutenberg Blok Eklentisi * Eklenti URI: https://github.com/ahmadawais/create-gten-block/ * Açıklama: CTA-block- IS Create aracılığıyla oluşturulan bir Gutenberg eklentisi – Guten-Block. * Yazar: Mrahmadwais, Maedahbatoes * Yazar Uri: https://ahmadwais.com/ * Sürüm: 1.0.0 * Lisans: GPL2+ * Lisans Uri: https://www.gnu.org/licenss/gpl-2.0.txt * * @package cgb */ İlk adım olarak, tüm bunları doğru adı, yazarı ve eklentideki diğer bilgileri yansıtacak şekilde değiştirin. Her şey oldukça açıktır, ancak sorun yaşarsanız, bu yazıyı okuyun. Bittiğinde ve kaydedildiğinde, WordPress’teki değişiklikleri de görürsünüz. Gutenberg bloğunuzu kaydedin, bundan sonra, bloğunuzun Gutenberg editöründe nasıl göründüğü için de aynısını yapmak istersiniz. Bunun için Block.js. WordPress sitesindeki blokları kaydetmek için tüm kodları ve ön uçta ve arka uçta ne yaptığını içerir. Gutenan bloğu oluşturmak için varsayılan dosya çok iyi açıklanmıştır. Bu, kendi değişiminizi yapabilmeniz için hangi bölümün sorumlu olduğunu söyler. RegisterBlockType bir blok kaydıdır. Aşağıdaki işlevler düzenleme: ve Kaydet: Gutenberg’deki ve ilgili sayfalardaki blokların içeriğini ve davranışlarını açıklayın. Burada ve burada daha fazla bilgi. Benim durumumda, yalnızca RegisterBlockType ile başlayan her şeyi silmem ve bunu Gutenberg belgelerinin (aşağı) bir örneğiyle değiştirmem gerekiyor. Bu, kalın, eğik, köprü vb. Dahil minimum biçimlendirme seçeneklerine sahip basit bir zengin metin düzenleyicisi alanı oluşturur. Bununla birlikte, şimdiye kadar yaptığımız şeyle işlev görmek için bu bölümü değiştirmemiz gerekiyor: bloklar.registerblockType (‘gutenberg-örnekler/örnek-03-düzenlenebilir’, {başlık: ‘örnek: düzenlenebilir’, simge: ‘Universal -Access -alt ‘, Kategori:’ Düzen ‘, özellikle değiştirmek istediğiniz şey: Kayıt yolu -Bu bloklardan sonra görünen yolu ifade eder. Başlık: – Gutenberg’de görünecek bloğun adı. Simge: – Editördeki bloklarla ilgili simgeler. Bağlantı işaretini kullanabilirsiniz. Dashicons ön eki olmadan adı girdiğinizden emin olun. Veya kendi SVG dosyanızı kullanın. Kategori: – Bloğunuz hangi kategoriniz altında görünecektir. Bazı standart kategorilerdir: yaygın, biçimlendirme, düzen, widget’lar ve gömme. Benim durumumda, sadece şuna değiştirdim: bloklar.registerBlockType (‘CGB/Block-CTA-Block’, {başlık: ‘CTA Block’, Icon: ‘referans’, kategori: ‘Ortak’, bundan sonra ortaya çıktı Editör şöyle: Ve sayfada görülen budur: Kalan kodu bulduğumda bıraktım. 6. Blok kuvvetini ayarladıktan sonra, yeni bloğunuzun görünümünü ayarlama zamanı. Bu editör.scss ve style.scss’de olur. Gutenberg editöründe bloğunuzun ne olduğunu ilk kontrol eden dosya adının önerdiği gibi, ikincisi ön uçta çıktı. Guten Block Create örneğinde, yeşil çıkışın editörde ancak sayfada kırmızı olduğunu görebilirsiniz. Bu, iki farklı işaretleme kümesi kullanmanın bir sonucudur. Çoğu durumda, stili aynı tutmak mantıklı olabilir. Sonuçta, Gutenberg’in en büyük satış değerinden biri düzenleme deneyimidir ve son ürün eskisinden daha uyumludur. Benim durumumda, her iki dosyaya da aşağıdakileri ekledim: .WP-Block-CGB-Block-Block-Block {arka plan: #d6f279; Sınır: 0.2rem noktalı #292929; Marj: 0 otomatik; Dolgu: 1Rem; Metin-align: merkez; } Ve bu editörün sonucudur:
Ve ön uçta:
Bu arada Gutenberg, CSS sınıfını adına bağlı olarak engelleyecek şekilde otomatik olarak ayarlar ve tarayıcı aracınızla öğrenebilirsiniz.Ancak, Create Gutenan bloğunun stil sayfası doğru sınıf adını içerecektir.Ayrıca, kendinizi belirleyebilirsiniz.7. Tamam, bloğunuzdan memnun kaldıktan sonra birkaç adım daha var.Yapmak istediğiniz ilk şey konsola geri dönmek ve NPM dosyanızı izlemeyi durdurmak için CTRL/CMD+C’ye basın.Bundan sonra, aşağıdaki komutu çalıştırın: NPM Run Build, üretim kodu için gereken dosyaları derler (endişelenmeyin, bloğunuzun işini durdurmaz, kontrol ediyorum).Bu bloğu tekrar Create Guten Block’ta kullanmak istemediğinizi düşünüyorsanız, NPM Run Ejekt de yazabilirsiniz.Ancak bu, bundan sonra projenin kendisini korumalısınız.Gutenberg bloğunu yapmaya hazır mısınız?
