React-Gutenberg Köprüsü ile Tanışın: Daha da İyi Bir Kurgu Deneyimi için Başsız Blok Desteği

Başsız WordPress'in sunduğu fırsatlardan heyecan duyuyorsunuz, ancak müşterinizin pazarlama ekibi WYSIWYG Gutenberg editörüne bağlı.

Faust'un başsız projeler için yeni Gutenberg blok desteğinin, pazarlamacılarınızı güçlendirirken gelişiminizi modernize etmek için ikisini nasıl bir araya getirdiğini görün.

Konuşmacılar:

• Teresa Gobble, WP Engine'de Yazılım Mühendisi
• Blake Wilson, Kıdemli Yazılım Mühendisi, WP Engine

Oturum Slaytları:

Deşifre metni:

TERESA GOBBLE: Merhaba millet. Benim adım Teresa Gobble. Faust ekibinde çalışan WP Engine ile bir yazılım mühendisiyim.

Kıdemli bir yazılım mühendisi olan Blake Wilson ile birlikte size React-Gutenberg Köprüsü'nü tanıtmak için buradayım; daha da iyi bir düzenleme deneyimi için başsız blok desteği. Hoş geldin. Başlayalım.

Yani bugün, ele alacak çok şeyimiz var. Her şeyden önce, React-Gutenberg Köprüsü'nün değerinin yanı sıra sizin için sahip olduğumuz sorun ve çözümle ilgili birkaç şeyin üzerinden geçeceğim. Ardından, bize React-Gutenberg Köprüsü'nün bir demosunu çalışırken gösterecek olan Blake'e gideceğiz. Sonrasında bir iki teknik detaydan bahsedeceğiz. Ayrıca bunun için elimizde olanların gelecekteki yol haritasını da ziyaret edeceğiz.

İşte sorun burada. Gutenberg bloklarını WordPress'ten başsız bir ön uca çevirmenin modern bir yolu yoktur. Var olan çözümler, kafasız geliştiricilerin bekleyebileceği bir geliştirici deneyimi sağlamak için henüz ölçeklenebilir veya sezgisel değildir.

Ayrıştırma, editörde Gutenberg blok içeriğini doğal olarak kullanma yeteneğini bozar. Ve ajanslar, çok az rehberlikle kendi yollarını nasıl çizeceklerini veya sıfırdan nasıl ilerleyeceklerini merak etmeye bırakılıyor. Ve millet için birçok cevaplanmamış soru kaldı.

Peki ya stil? Yeniden kullanılabilirlik, dinamik bloklar, InnerBlocks ne olacak? İşte burada React-Gutenberg Köprüsü devreye giriyor. Bu iki parçalı bir çözüm – birincisi, başsız ön uçta ayrıştırılıp okunabilmeleri için Gutenberg bloklarını programlı olarak ortaya çıkarmanın bir yolu. Bu parçaya WPGraphQL İçerik Blokları denir.

İkinci olarak, başsız ön uçta bu blokların kurulumunu ve işlenmesini kolaylaştıran bir bağlayıcımız var. Bu da Faust WP Blocks adlı bir paket. Burada, bu çözüm parçalarının her ikisiyle de nasıl çalıştığına dair bir izlenecek yol göreceksiniz.

Web sitenizin React tabanlı arka ucunda, WPGraphQL İçerik Blokları eklentisi tarafından gösterilen Gutenberg Blokları bulunur. Block.json içeriğini WPGraphQL'ye sunar. Bunu WPGraphQL adlı eklentiye sağlar.

Ardından sıra, blokların özelleştirilmesini, keşfedilmesini ve oluşturulmasını sağlayan bağlayıcı paketine gelir. Ve bugün teknik tartışma ve demodan bahsederken bu aslında çok daha fazla tartışılacak. Peki bu, ekibinize ne tür bir değer katıyor?

Karmaşıklığı ve belirsizliği azaltan uçtan uca üzerinde düşünülmüş bir çözüm. Belirli kuralları izleyerek geliştirme süresinden tasarruf sağlar. Blokların ve blok desenlerin bir arada kullanılmasına olanak sağlar. Ve tekrar tekrar kullanılabilir. Artık React-Gutenberg Köprüsü'nün nasıl çalıştığı hakkında bir fikriniz olduğuna göre, bir demosunu çalışırken görmek için Blake'e gidelim.

BLAKE WILSON: Teşekkürler Teresa. Herkese selam. Ben Blake Wilson'ım. Burada, WP Engine'de kıdemli bir yazılım mühendisiyim.

Ve Faust'u inşa eden Faust JS ekibindeyim. Bugün size, bu React-Gutenberg Köprüsü'nü yönetmeye yardımcı olmak için oluşturduğumuz iki bileşeni gösteren gerçekten harika bir demom var. Öyleyse hemen konuya girelim.

Başlamak için, kurulumum için burada nelere sahip olduğumu size göstereceğim. Ve sonra gerçek koda gidebilir ve orada nelere sahip olduğumuzu görebiliriz. Yeni başlayanlar için, burada Yerel'de çalışan bir WordPress sitem var.

Birkaç eklenti yükledim. Bu yüzden Faust eklentisine sahibim. Bu, Faust JS sitenizdeki önizlemeleri ve tüm bu tür iyi şeyleri kolaylaştırmaya yardımcı olur. WordPress sitenizi bir GraphQL uç noktasına dönüştürmek için gerekli olan WPGraphQL'ye sahibim.

Ve sonra WPGraphQL İçerik Bloklarım var. Bu, React-Gutenberg Köprüsü'nü kolaylaştırmaya yardımcı olmak için oluşturduğumuz eklentilerden biri. Bu çözüm iki ana kısımdan oluşmaktadır.

Bu yüzden, WPGraphQL aracılığıyla Gutenberg Block verilerini programlı olarak gerçekten açığa çıkaran parçalardan birine ve ardından Faust JS ön ucunuzda onu tüketmek için başka bir parçaya sahibiz. WPGraphQL İçerik Bloklarına ve bunun nasıl çalıştığına bir göz atarak başlayalım.

Böylece grafiksel IDE'mize gireceğiz. Ve burada bir sayfanın verilerini almak için bu sorguyu kurdum. Yani bu durumda, biz sadece sayfanın başlığını alıyoruz.

GraphQL Content Blocks'un yaptığı şey, GraphQL şemanızda bir içerik bloğu tipini ortaya çıkarmaktır. İçerik bloklarını yazarsak, burada görebilirsiniz, bu verilen sayfa ve bu sayfadaki tüm bloklar için bilgi alırız. Hadi gidip bu sayfayı düzenleyelim ve biraz içerik ekleyelim.

Böylece örnek sayfaya gireceğiz. Ve burada boş bir sayfamız olduğunu görebilirsiniz. Öyleyse devam edelim ve bazı bloklar oluşturalım. Burada bazı sütunlar oluşturalım.

Ve 50/50 sütunu yapacağız. Bu yarıya bir paragraf ekleyelim ve ardından bu yarıya bir görsel ekleyelim. Bu yüzden medya kitaplığımda bir resim var. Devam edelim ve şunu bırakalım.

Ve burada görebilirsiniz, iki sütunumuz var. Yine solda bir paragraf ve sağda bir resim. Öyleyse bunu güncelleyelim. WPGraphQL Content Blocks'a geri dönelim ve sonuç olarak ne elde ettiğimize bakalım.

Burada görebileceğiniz gibi, şimdi iki içerik bloğumuz var. Buradaki ilki bir çekirdek sütun, çekirdek sütun. Ve sonra bunun içinde işlenmiş HTML alıyoruz.

WPGraphQL İçerik Blokları ile ilgili harika olan şey, InnerBlock'ları da halletmemizdir. Burada gördüğünüz gibi, içerik bloklarına flat true adında bir param eklersek, aslında bu sütunlarda bulunan tüm blokları elde ettiğimizi görebilirsiniz. Bu nedenle, bu davayı sizin için de ele alıyoruz.

Çekirdek sütun, çekirdek sütun, çekirdek paragraf, çekirdek görüntü elde ederiz. Yani tüm bunlar sizin için programlı olarak yapılır. Ve şimdi, bu blok verilerini kullanıcı arabiriminizde kullanabilirsiniz. Öyleyse burada biraz daha derine inelim.

Diyelim ki bununla ilgili bazı özellikler istiyoruz. Bunu GraphQL'de bir birleşim kullanarak kullanabiliriz. Bu yüzden çekirdek görüntü üzerinde yapacağız, öznitelikleri alacağız. Örneğin, başlığı istediğimizi varsayalım.

Yani burada altyazı olmadığını görebilirsiniz. Örnek sayfamıza geri dönelim. Devam edip buraya bir başlık ekleyeceğiz. Altyazım. Bunu güncelle.

Ve bu sorguyu yenilersek, şimdi görebiliriz, altyazımı WPGraphQL İçerik Bloklarında uygun bir öznitelik olarak alıyoruz. Yani bu çözümün 1. kısmı. Şimdi, aslında tüm Gutenberg Block verilerimizi alabilir ve bunu ön ucumuzda tüketmek için kullanabiliriz.

Öyleyse VS Code'a geçelim ve bu parçayı nasıl ele aldığımızı görelim. Bu, bir araya getirdiğim bir Faust JS örnek projesi. Çok basit. Faust İskele Planına dayalıdır, ancak bu blokları işlemek için bazı ek yapılandırmalara sahiptir.

Yani JSON paketine bir göz atarsak, burada birkaç bağımlılığımız olduğunu görebilirsiniz, çekirdek ve CLI gibi olağan Faust paketlerinden bazıları. Faust VP Bloklarımız da var. Bu, tüm yardımcı işlevlerimizi sağlayan paketlerden biridir.

Stilleri işlemek için bazı WordPress bağımlılıklarımız da var. Burada ayrıca bu WP Blocks dizinine sahip olduğumuzu da fark edeceksiniz. Burası, ön ucumuz için tüm bloklarımızın yaşadığı yerdir ve ön ucumuzda kullandığımız tüm bloklar için bir kayıt görevi görür.

Bir index.js dosyamız olduğunu görebilirsiniz. Ve bu aslında ön uçta kullandığımız tüm blokları belirleyen bir nesne. Burada görebileceğiniz gibi, ana paragrafımız, ana sütunumuz, ana sütunlarımız ve ana görselimiz var.

Bunu kurmak açısından, konuşacağımız iki ana parça var. Biri WordPress Blokları sağlayıcısı ve WordPress Blokları görüntüleyicisidir. Öyleyse, eylemde nasıl göründüğüne bir göz atalım. Önce WordPress Blokları sağlayıcısına bir göz atalım.

Ve bu,pages_app'ta mevcut olacak. Gördüğünüz gibi burada bu bileşene sahibiz, bu sağlayıcı, WordPress Blocks sağlayıcısı. Ve blokları kabul eden bir yapılandırma pervanesini kabul eder. Burada gördüğünüz gibi, bu dizinin indeksi olan WP Blocks'tan blokları alıyoruz ve onu config nesnesine geçiriyoruz.

Temel olarak, bunun söylediği şey, WordPress Blokları sağlayıcısının tüm uygulamanızı sarması ve tüm bu bloklar için tüm uygulamanıza bağlam sağlamasıdır. Şimdi tekil şablonumuza WP Şablonlarına girelim. Ve burada görebileceğiniz gibi, içerik blokları desteğiyle WordPress Blokları görüntüleyiciyi çağırıyoruz. Bu, WPGraphQL'den geri aldığımız blok verisidir.

Pekala, kurulum hakkında bu kadar bilgi yeter. Bunu döndürelim ve eylemde nasıl göründüğüne bakalım. Bu yüzden, localhost 3000'de bir dev ortamı kuracak olan NPM run dev'i çalıştıracağım. Ve daha önce üzerinde çalıştığımız sayfa, eğik çizgi örnek sayfasıydı, bu yüzden, bu Gutenberg'leri görmek için localhost 3000 eğik çizgi örnek sayfasını ziyaret edeceğim. Daha önce kurduğumuz bloklar.

Burada görebileceğiniz gibi, Gutenberg editörümüzde aynı bloklara sahibiz. Örnek sayfa için Gutenberg editörümüze geri dönelim. Ve burada iki sütunumuz olduğunu görebilirsiniz, bu benim paragrafım ve sonra buradaki ön uçtaki görüntümüze karşılık gelen görüntümüz.

Bu harika görünüyor falan diyebilirsiniz ama stilleri değiştirebilir miyiz? Yazı boyutunu değiştirebilir miyiz? Kesinlikle yapabilirsin.

Öyleyse Gutenberg düzenleyicimize geri dönelim ve bu bloklarda bazı değişiklikler yapalım. O halde buraya paragrafımıza bir arka plan rengi ekleyelim. Ayrıca boyutunu büyük olarak değiştirelim. Buradaki görüntü için yuvarlatalım.

Altyazıyı çıkaralım. Ve bunu güncelleyeceğiz. Ve burada gördüğünüz gibi bu stiller artık geçerli. Ve onları ön uçta görebilirsiniz.

Bu yüzden, WordPress'te beklemediğiniz yayıncı deneyimini başsız WordPress sitenize gerçekten geri veriyoruz. Bununla ilgili bir başka harika şey de, artık bu bloklar için programatik veriler alıyorsunuz, React bileşeninizi sonraki görüntü gibi çerçeveye özgü özelliklerle yapabilirsiniz. Artık, yalnızca WPGraphQL'den geri aldığınız HTML'yi oluşturmak yerine, artık bu programatik verileri Gutenberg'deki tüm görüntülerimizi bir sonraki görüntüyle işleyen bir bileşen oluşturmak için kullanabiliriz, bu da bize yavaş yükleme, daha iyi performans ve daha iyi optimize edilmiş görüntüler sağlar genel olarak, kullanıcılarımız için daha iyi bir kullanıcı deneyimi yaratmak.

Yani bu harika. Gutenberg düzenleyicimizde tam olarak ne beklediğimizi görüyoruz, ancak diyelim ki henüz desteklenmeyen veya Faust sitemizde yapılandırmadığımız bir bileşen ekledik. Öyleyse devam edelim ve burada yeni bir bileşen oluşturalım. Tablo kullanacağız.

Ve iki sıra yapacağız - 1. sıra, 2. sıra. Git ve bunu güncelle. Ve buradaki kodumuza geri bakarsak, tanımlanmış dört bloğumuz olduğunu görebiliriz – temel paragraf, temel sütun, temel sütunlar ve temel görüntü. Burada çekirdek tablomuz yok.

Peki bu sayfayı görüntülediğimizde ne olacak? Hadi bir bakalım. Faust kullanıcı arabirimimizdeki örnek sayfaya geri döneceğiz. Burada hala 1. ve 2. sıralı bir tablomuz olduğunu görebilirsiniz.

Bunun nedeni, blok Faust JS projenizde henüz tanımlanmamışsa, işlenmiş HTML'ye makul bir akıllı geri dönüş yapacağımızdır. Bu şekilde, tanımsız, boş veya hiç içerik görmezsiniz. En azından orijinal işlenmiş HTML'yi geri alıyorsunuz.

Tüm bunları göz önünde bulundurarak, bir blok oluşturmak için gerçekte neye ihtiyaç duyulduğuna, yani gerçekte nasıl göründüğüne bir göz atalım. Bu yüzden burada VS Koduna geri döneceğiz. Örneğin çekirdek görüntüyü seçelim.

Burada görebileceğiniz gibi, bu sadece geleneksel bir React bileşenidir. Biz buna çekirdek görüntü diyoruz. Ve diğer tüm React bileşenlerinde olduğu gibi donanımları kabul eder.

Burada bir bloğa esasen iki parça var. Böylece sunum katmanı olan gerçek React bileşenine sahibiz. Ardından, bu bloğun çalışması için gereken veriler olan block.fragments'ı elde ederiz.

Burada bir parça oluşturduğumuzu görebilirsiniz, çekirdek görüntü üzerinde çekirdek görüntü parçası. Ve bu öznitelikleri alıyoruz – bu bloğu oluşturmak için ihtiyacımız olan öznitelikler. Alternatif metni, kaynağı, başlığı, sınıf adını, genişliği, yüksekliği vb. aldığımızı görebilirsiniz.

Ve sonra yapabileceğimiz şey, bu nitelikleri gerçek React mantığımıza uygulamaktır. Dolayısıyla, burada talep edilen tüm alanlar daha sonra donanımlarda mevcuttur. Böylece, burada istediğimiz nitelikler olan props.attributes'in çıktığını görebilirsiniz, nitelikler.alt, nitelikler.kaynak vb. Bu, bloğunuz için tüm veri gereksinimlerini aynı dosya içinde bir arada konumlandırmanın harika bir yoludur.

Bu, yalnızca ihtiyacınız olan verileri talep ettiğinizden ve isteklerinizin güzel ve performanslı olduğundan emin olmaktır. Bu örnek projede birkaç yardımcı fonksiyonumuz da var. Burada bir çift olduğunu görebilirsiniz - stiller ve resim boyutunda aksesuarlar elde edin.

Yani bunlar aslında sadece bu stilleri WordPress'ten alıyor ve onları React'in kullanabileceği gerçek bir stiller nesnesinde birleştiriyor. Şu anda stiller, satır içi stiller için desteklenmektedir. Genel stil sayfalarını da alabilirsiniz, ancak şu anda theme.json için destek sağlamaya çalışıyoruz.

Yani Teresa, gelecekteki yol haritamızda bundan biraz bahsedecek. Ancak ideal olarak, tüm stillerimizi ve dolguyu, kenar boşluklarını vb. theme.json'dan alıp burada başsız ön uçta uygulayabileceğimiz bir nokta gelecek. Tüm bunları göz önünde bulundurarak, bu özellikle bugün geldiğimiz nokta ve gelecekte nereye gitmeyi planladığımız hakkında konuşmak için Teresa ve ben ile hızlı bir teknik tartışmaya geçelim.

TERESA GOBBLE: Demo için teşekkürler, Blake. Bu harikaydı. Şimdi devam edelim ve bazı teknik ayrıntılara girelim ve bunun nasıl çalıştığı hakkında sohbet edelim. Sizin için aldığım ilk soru şu: WPGraphQL İçerik Bloklarını kullanmak için gereksinimler nelerdir?

BLAKE WILSON: Evet, evet. Harika soru Teresa. Dolayısıyla, eklentiyi kullanmak için tek gereksinim, WPGraphQL'nin de kurulu olmasıdır. Açıkçası, sitenizin Faust JS ile arayüz oluşturmasını istiyorsanız, başsız ön uçta oluşturmayı ve tüm bu iyi şeyleri kolaylaştırmaya yardımcı olacak Faust JS blok paketini kurabilirsiniz. Ancak blok verilerini gerçekten ortaya çıkarmak için ihtiyacınız olan tek şey WPGraphQL ve WP GraphQL Content Blocks eklentisidir.

TERESA GOBBLE: Harika. Blok verileri de nasıl toplanır?

BLAKE WILSON: Evet, yani tüm blok verileri, kayıt bloğu tipi işlevini kullanan WordPress'teki herhangi bir blok tarafından toplanır. Bu arayüzleri bu işlevle kullandığınız hemen hemen tüm bloklar, içerik bloklarında görünecektir. Ve bununla ilgili harika olan şey, block.json dosyasıyla geçiş yapması ve tüm bu alanları otomatik olarak kendi kendine tanımlaması ve kendi kendine belgelemesidir. Yani hepsi bir arada belgeleriniz var.

TERESA GOBBLE: Oh, harika. Ne zaman tasarrufu. Biraz daha bahsetmenizi istediğim başka bir konu da, desteklenmeyen bir blokta ne olduğudur. Desteklenmeyen bir blok sorgulandığında ne olur?

BLAKE WILSON: Evet, bu da harika bir soru. Burada olabilecek iki gerçek senaryo var. Öyleyse, gönderi verilerinizde o zamandan beri WordPress'ten kaldırılmış bir bloğunuz olduğunu varsayalım.

Belki de kaldırılan bir üçüncü taraf bloğuydu. Bu, hem Faust ön ucunda hem de WordPress kayıt defterinde desteklenmeyen bir desteklenmeyen blok durumudur. Bu durumda, tanımsız blok veya bilinmeyen blok adı verilen içerik bloklarına bir blok döndürürüz, böylece bunu başsız kullanıcı arabiriminize uygun şekilde yazabilirsiniz. Ve sonra ikinci kısım, WordPress kayıt defterindeki bir bloğun desteklenip desteklenmediği, ancak Faust JS ön uçunuzda henüz desteklenmediği, bu durumda yaptığımız şey, işlenmiş HTML'ye geri dönmektir. Bu şekilde, en azından, görünen, boş olmayan veya tanımsız veya bunun gibi herhangi bir değer olan HTML'yi oluşturdunuz.

TERESA GOBBLE: Oh, harika. Ve bu aslında beni bir sonraki soruma götürüyor. Başsız ayrılmış bir web sitesindeki üçüncü taraf eklentileri söz konusu olduğunda, WPGraphQL İçerik Blokları eklentisini kullanarak üçüncü taraf bir eklenti kullanabilir misiniz? Bunların hepsi birlikte nasıl çalışır?

BLAKE WILSON: Evet, evet. Bu nedenle, herhangi bir üçüncü taraf eklentisi için, WordPress'teki kayıtlı blok türü işleviyle arayüz oluşturdukları sürece, söz konusu birinci veya ikinci soruya geri dönersek, bu blok otomatik olarak WPGraphQL İçerik Bloklarına maruz kalacaktır. Bu veriler işlendiği sürece, bloğu Faust JS ön uçunuzda oluşturabilirsiniz. Ve bununla ilgili harika olan şey, diyelim ki bir atlıkarınca için üçüncü taraf bir bloğunuz var. Bunu Faust JS kullanıcı arabiriminizde bir kez oluşturduktan sonra, bunu ileriye dönük diğer projelerde yeniden kullanabilirsiniz.

TERESA GOBBLE: Oh, harika. Yeniden kullanılabilirlik parçasının devreye girdiği yer burasıdır. Ve bu eklentiyle, ayrıştırılmış web sitelerinde kutudan çıkar çıkmaz çalışmayan üçüncü taraf eklentilerle bu boşluğun bir kısmını gerçekten kapatabilirsiniz.

Ayrıca, şimdi sohbete bakarsanız, insanların üçüncü taraf bir eklentiden blok oluşturmasına yardımcı olmak için hazırlanmış bir öğreticimiz var. Yani şimdi sohbete bakarsınız, bunu görebilir ve bir tık verebilirsiniz. Bir yer imi ver.

Peki, bloklar içindeki blokları nasıl ele alırsınız? Bu gerçekten zor olabilir. Bize bunun nasıl görüneceğinden biraz bahseder misiniz?

BLAKE WILSON: Elbette, evet. Dolayısıyla, düz adı verilen içerik bloklarını sorgularken bu bayrağa veya bu parametreye sahibiz. Ve bu, doğru veya yanlış bir değeri kabul eder. Ve bu doğru olarak sağlandığında, ister bir sütun, ister bir resim veya bir paragraf olsun, o sayfadaki tüm blokların düz bir dizisini veya düz bir listesini alırsınız.

O sayfada sorgulanan tüm blokların tam listesine iki ek özellik ile sahip olacaksınız. Biri düğüm kimliğidir. Yani bu, söz konusu bloğun gerçek kimliğidir. Ve sonra, o bloğun ebeveyni olan ebeveyn kimliğiniz de olacak. O zaman yapabileceğiniz şey, daha önce Gutenberg'de gördüğümüz gibi, iç blok bilmecesini hemen hemen çözerek, bunu ön uçta gerçek bir hiyerarşik liste halinde yeniden yapılandırmak.

TERESA GOBBLE: Harika. Yani aslında, içerik bloklarını getirirken, uygun üst alt kimlikleri içinde düz bir blok listesi döndürmek için belirtebileceğiniz bir seçenek var mı?

BLAKE WILSON: Evet, evet, kesinlikle.

TERESA GOBBLE: Harika. Ayrıca, WPGraphQL İçerik Bloklarının söz konusu işleve de bir göz atması için sohbette yine burada başka bir öğretici parçamız var. Bu yüzden size stil parçasıyla ilgili başka bir soru sormak istiyorum – o halde global stil sayfalarıyla stil verme, satır içi, buradaki yaklaşım nedir? Stil nasıl işlenir?

BLAKE WILSON: Evet, evet. Yani stil, muhtemelen şu anda araştırmaya çalıştığımız en büyük itici güçlerden biri. Az önce gösterdiğim örnekte, satır içi stiller kullanılıyor.

Global stiller, global stiller sayfaları da desteklenmektedir. Ve sanırım bir sonraki yol haritasında buna değineceksin. Ancak ideal olarak, theme.json'dan kenar boşlukları, dolgular, renkler ve tüm bu iyi bilgileri alabileceğimiz ve ardından uygulayabileceğimiz theme.json desteğini de desteklemek istiyoruz. Bu nedenle, geliştirmenin bir sonraki aşamasında bunun üzerinde çalışıyor olacağız.

TERESA GOBBLE: Harika. Bizi bu konuda gezdirdiğiniz için teşekkür ederiz. Birçok insanın bu konuda gerçekten heyecanlı olduğunu biliyorum. Öyleyse, yayıncının desteklenmeyen blokları kullanmasını nasıl kısıtlarız?

BLAKE WILSON: Evet, evet. Yani orada bir eklenti var. Duruma göre değişir. Üçüncü taraf blokları kullanıyorsanız, bunlardan bazılarında bu özellik zaten yerleşiktir.

Ancak değilse, belirli blokları yayıncı perspektifinden değiştirebileceğiniz, blok görünürlüğü adı verilen bir eklenti var. Faust sitenize henüz uygulanmamış bir carousel bloğunuz olduğunu varsayalım. Blok görünürlüğünü yükleyebilir ve yayıncının hala desteklenmediği veya geliştirilme aşamasındayken kullanmaması için işaretini kaldırabilirsiniz.

TERESA GOBBLE: Oh, harika. Böylece eklenti bloğu görünürlüğü aslında belirli blokları değiştirebilir, gizleyebilir, gösterebilir?

BLAKE WILSON: Evet, evet, kesinlikle. Bu şekilde, hem WordPress tarafınızda hem de başsız sitenizde desteklediğiniz sınırlı sayıda bloğunuz olur, böylece yayıncılar bilir, Tamam, bunu destekleneceğinden emin olarak kullanabiliriz. başlangıç ​​aşaması.

TERESA GOBBLE: Oh, bu kesinlikle daha temiz bir sunum gibi geliyor. Tamam iyi. Sana son soru. Bu ön uç blokları, yayıncının editörüne karşılık geliyor mu?

BLAKE WILSON: Evet, harika açıklama. Yani henüz değil. Bu, gelecekte üzerinde çalışacağımız bir şeydir, ancak şimdilik bu bloklar başsız ön uç için desteklenmektedir.

WordPress'te oluşturduğunuz özel bir bloğunuz varsa, NPX blok oluştur komutunu kullanıyorsanız, yine de bu görünümü WordPress tarafında desteklemeniz gerekir. Ama üzerinde çalıştığımız bir konu. Yol haritamızda var.

TERESA GOBBLE: Oh, harika. TAMAM. Bu noktaları bizimle konuştuğun için teşekkürler, Blake. Bu gerçekten yardımcı oldu ve demo da.

Devam edelim ve vites değiştirelim ve aslında bu proje yol haritası hakkında biraz daha konuşalım. Aslında, ikisi zaten tamamlanmış olan beş aşamamız var – 1. aşama ve 2. aşama.

Bundan sonra, insanların orada bulunan farklı yardımcı programlara ve yardımcı işlevlere tüm erişime sahip olmasını sağlamak için Faust'un Gutenberg Blokları ile daha sıkı entegrasyonuna odaklanan 2. aşamaya geçtik. Şu anda üzerinde bulunduğumuz bir sonraki aşama olan 3. aşama, teknik tartışmamız sırasında Blake'in bahsettiği gibi theme.json desteği ve yeniden kullanılabilir blok kitaplıkları sağlamaya odaklanıyoruz.

Bunu yaptıktan sonra 4. ve 5. aşama gerçekleşecek. 4. Aşama, mevcut geliştirme ve düzenleme deneyiminin yanı sıra temel WordPress'in ötesinde daha geniş ekosistemi desteklemeye odaklanan 5. aşamayı geliştirmeye odaklanır. Yaklaşmakta olan bu aşamalar için gerçekten heyecanlıyız ve umarız bizimle temasa geçer ve yol haritasının nerede olduğunu öğrenmek için blog yazımıza da göz atarsınız.

Bir göz atarsanız, aşağıdaki sohbette blog yazılarımıza bir bağlantı görebilirsiniz. Devam edin ve bunları yer imlerine ekleyin. React-Gutenberg Köprüsü tartışmamızda bize katıldığınız için herkese teşekkürler. Blake'i burada tekrar ekrana getirmek istiyorum, böylece o da teşekkür edebilir ve bundan sonra kafanızda kalan herhangi bir sorunuz olursa nereye gidebileceğiniz konusunda bize biraz daha bilgi verebilir.

BLAKE WILSON: Evet, teşekkürler Teresa ve bugün bu oturuma katılan ve izleyen herkese teşekkürler. Hepinizin denemeye başlaması için bu özellikle ilgili topluluk geri bildirimi almaktan gerçekten heyecan duyuyoruz.

Eğer beğenirseniz, sohbetteki bağlantıda örnek projemiz var. Ayrıca, başsız Discord'umuz için sohbette bir bağlantımız var, yani siz ve benzer düşünen diğer başsız geliştiricilerin başsız alanda gelecek özellikler ve sürümler hakkında katılıp sohbet edebileceği bir yer. Hepinize tekrar teşekkürler. Bunu gerçekten takdir ediyoruz.