Blocks 3.0 Tanıtımı

Yayınlanan: 2023-02-22

İşte beklediğiniz heyecan verici haber: Kadence Blocks 3.0 burada!

Popüler WordPress sayfa oluşturucu eklentimizin en son sürümü olan Kadence Blocks 3.0'ın yayınlandığını duyurmaktan gurur duyuyoruz. Geliştirme ve beta sürecini takip ettiyseniz, muhtemelen bu son güncellemenin Kadence Blocks'a daha iyi bir site oluşturma deneyimi sağlayan bir dizi temel değişiklik getirdiğinin farkındasınızdır. Ayrıca, bu temel yeniden yazma, geliştirme ekibimizin yeni bloklar da dahil olmak üzere yeni özellikleri daha iyi eklemesine olanak tanıyan yeni yapılar oluşturur. Kadence ile hızlı ve etkili siteler inşa eden herkesin önünde heyecan verici bir yol var.

Ne var ne yok?

Kod yeniden yazıldı, modernleştirildi, temizlendi ve geliştirildi.

Kadence Blocks, WordPress blok düzenleyicisinin ilk günlerinde oluşturuldu. Aslında, blok düzenleyicinin WordPress çekirdeğinin bir parçası olmasından üç ay önce yayınlandı. Pek çok yönden, başından beri hepimiz blok düzenleyicinin içindeyiz, ancak bu aynı zamanda çekirdekteki kod tabanı ve blok düzenleyicinin kendisi büyük ölçüde değiştiği için çok sayıda yeniden düzenleme yapmak zorunda olduğumuz anlamına geliyordu. yıl. Yer yer yeniden düzenlediğimiz kadarıyla, WordPress çekirdeğinin mevcut yolu ile daha uyumlu hale getirmek ve blok düzenleyicide yenilik yapmak için gelecekteki fırsatları açmak için eklentinin çoğunu yeniden yapılandırmamız gerektiğinin açık olduğu bir ana ulaştık. İşte öne çıkanlardan birkaçı:

  • Derleme yapısı tamamen güncellendi ve artık bileşen kitaplıklarını kullanıyor
  • İşlevsel olması ve API v2 kullanması için blokların React yapısı güncellendi
  • Blok özelleştirmeleri için ön uç CSS'yi derleme ve çıktı alma şeklimizi yeniden oluşturduk
  • Wp_kses sıyrılmasını önlemek için SVG simgelerini kaydetme ve çıkarma yöntemimizi yeniden düzenledik
  • Herhangi bir jQuery sürgüsünü kullanmamak için ön uç Javascript'imizi yeniden oluşturduk

Blok Ayarları için Yeni Bir Kullanıcı Arayüzü

Kadence Blocks 3.0, blok ayarlarının kullanıcı arayüzüne yeni iyileştirmeler getiriyor. Bu değişiklikler, sayfanızdaki blokları ne kadar hızlı ve kolay bir şekilde oluşturabileceğinizi ve yönetebileceğinizi optimize etmek için yapılmıştır.

Sekmelere Göre Düzenlendi

Blok ayarları sezgisel olarak bölümler halinde düzenlenmiştir: Genel, Stil ve Gelişmiş. Bu, düzeninizi değiştirmek ve tasarlamak için doğru ayarı bulmayı daha hızlı ve daha kolay hale getirecektir. Artık birçok ayar arasında gezinmek yok!

Yeni ve Güncellenmiş Ayar Kontrolleri

Blok stillerini düzenlemeyi kolaylaştırmak istedik. WordPress çekirdeği gerçekten güzel olan bazı yeni kontroller geliştirmiş olsa da, bileşenlerini benimsememizi engelleyen sorunlar bulduk. Örneğin, WordPress çekirdeğinin güzel bir gradyan kontrolü vardır, ancak şantiyeleri daha hızlı ve daha kolay hale getirmek isteyen Kadence kullanıcıları için gerçekten önemli olan küresel değişken renklerle çalışmaz. WordPress çekirdeğinin, modern site oluşturma için de önemli olan, duyarlı ayar kontrollerine sahip herhangi bir bileşeni olmadığından bahsetmiyorum bile. Akıllara durgunluk veren emojiyi buraya ekleyin.

Bileşen kitaplığımız için epeyce kendi kontrollerimizi oluşturduk. Bu kontrollerden bazıları WordPress çekirdeğini temel alır ve diğerleri, özelleştirilmiş Kadence kontrolleri ile daha iyi yönlendirme sağlayabileceğimizi düşündüğümüz birkaç küçük yoldan ayrılır. Bunların tümü duyarlı tasarıma sahiptir ve blok kontrollerimize çok daha fazla tutarlılık getirir. Aşağıda bu yeni kontrollerden bazılarının bazı resimleri bulunmaktadır.

Görsel Dolgu ve Kenar Boşluğu

Kadence Blocks, her zaman size Row Layout Block'ta üst ve alt dolguyu görsel olarak ayarlama yeteneği vermiştir. Kadence Blocks 3.0, Row Layout'ta ve diğer birçok bloğumuzda bu deneyimi geliştirir. Dolgu ve kenar boşluğu ayarlarının üzerine geldiğinizde gösterilen vurgulanmış alanlarla, ayarlarınızın sayfa düzenini nasıl etkilediğini görmek artık çok daha kolay.

Satır Düzeni Bloğundaki Değişiklikler

Kadence Blocks eklentisinin temel taşlarından biri Row Layout Block olmuştur. Satır Yerleşim Bloğu, bölümleri bir arada gruplayan ve bloklarla yapıyı kolaylaştıran bir kaptır. Bu temel bloğun kullanımını kolaylaştırmaya büyük önem verdik.

Bir Satır Düzeninde Bölümleri Kolayca Taşıyın

Hepimizin Row Layout'ta (evet, biz de) deneyimlediğimiz hayal kırıklıklarından biri, bir bölümü bir alandan diğerine taşımanın zorluğudur. Bloklarla inşa etmek, genellikle sağdaki bir bölümü sola taşımak için sıkıcı bir kopyala ve yapıştır hareketi anlamına geliyordu. Bir Satır Yerleşim Bloğundaki birçok Bölüm Bloğu ile, bir Bölüm Bloğunun kolayca taşınabilmesini sağlamak için bir Satır Yerleşimini sıfırdan yeniden oluşturmak genellikle gerekli olmuştur.

Şimdi, Bölüm Bloklarını bir Satır Yerleşim Bloğu içinde taşımak her zamankinden daha kolay. Bir oku tıklatarak, bir bölümü hızlı bir şekilde herhangi bir yere taşıyabilir ve bir Satır Düzeni bloğundan diğerine sürükleyebilirsiniz.

Yeni Satır Izgara Düzeni Seçenekleri

Bir sıra düzeni artık bir bölüm ızgarası içerebilir. Örneğin, iki satırı olan üç sütunlu bir ızgara istiyorsanız, bunu bir Satır yerleşim bloğu ile yapabilirsiniz. Bunun harika yanı, onu bir tablette iki sütunlu bir ızgara haline getirebilmenizdir.

Satır Düzeni, Izgara CSS ve diğer Optimizasyonları kullanır

Row Layout Block'un CSS'yi nasıl çıkardığını ve ne tür CSS kullandığını optimize ettik. CSS Flexbox'tan CSS Grid'e geçiş, Kadence Blocks'un CSS dosya boyutunu (36kb -> 6kb) önemli ölçüde azaltmasına olanak tanır. Bununla birlikte, çıktıdaki HTML etiketlerinin miktarını üçten ikiye düşürdük, bu da DOM (Belge Nesne Modeli) boyutunuzu optimize etmenize yardımcı olur. Bu iyileştirme, sayfa hızını önemli ölçüde artırır ve genel kullanıcı deneyimini iyileştirir.

Gelişmiş Metin Bloğunda Yazılan Metin

Yepyeni bir özellik, Gelişmiş Metin Bloğu içindeki Yazılı Metin seçeneğimizdir. Artık içeriğinizde yazılacak ve değiştirilecek bir dizi dize tanımlayabilirsiniz. Bu, belirli bir başlığa dikkat çekmek ve sitenizde etkileşim oluşturmak için harikadır.

Bunu sitenize eklemek için, bir miktar metin seçin ve Gelişmiş Metin Bloğunun araç çubuğundaki oka tıklayın, açılır menüden yazılan metne tıklayın. Ardından, tüm yazı tipi ayarlarını içeren bir panel açılacaktır.

İç Bloklara Geçiş

Kadence Blokları orijinal olarak oluşturulduğunda, iç blokların etrafındaki kontroller son derece eksikti. Bu, birkaç bloğumuz için, aslında bir iç blok olmayan bir tür iç blok oluşturmak için özel dizi öznitelikleri oluşturmamız gerektiği anlamına geliyordu. Düğme Bloğumuz buna güzel bir örnekti. Kullanıcılara kolayca yan yana iki buton ekleme yeteneği vermede değerli bir amaca hizmet etti. WordPress çekirdeği gelişimiyle birlikte ilerlediğinden, iç bloklarla oluşturma araçları çok daha iyi. Artık iç blok olarak tek düğmeli bir konteyner bloğuna sahip olmak çok daha mantıklı. Bu, düzenlemek için düğmeyi tıklamanıza izin verir ve ayar panellerini önemli ölçüde basitleştirir. Kadence Blocks 3.0'da, daha kolay geliştirme amacıyla iç bloklardan yararlanmak için dört bloğu taşıdık.

  • Gelişmiş Düğme Bloğu
  • Referans Bloğu
  • Simge Bloğu
  • Simge Listesi Bloğu

Ayarlar için Değişkenler

Kadence Blocks 3.0'ın birçok hedefinden biri, tasarım kararlarını daha sezgisel hale getirmekti. Pek çok kullanıcı için pikseller, EM veya REM birimleri arasındaki farkı ve yazı tipi boyutları, dolgu veya cilt payı gibi çeşitli ayarlar için hangisini kullanmaları gerektiğini anlamak, yapılacaklar listelerinin başında yer almıyor.

Kadence Blocks 3.0 ile, standart öğe boyutu ayarları için küçük, orta ve büyük boyutları ayarlayabilmeniz ve gerisini bize bırakmanız için, özel değişkenleri kullanmak üzere varsayılan boyut ayarlarımızın çoğunu taşıdık.

Blok ayarlarında pikselleri veya istediğiniz diğer birimleri kullanarak kendi özel boyutlarınızı ayarlamanız yine de kolaydır. Bununla birlikte, varsayılan değişken seçeneklerine bağlı kalmak, tasarımlarınızda tutarlılığı korumanıza ve duyarlı geçersiz kılma ihtiyacını sınırlamanıza yardımcı olacaktır. Ayrıca, tasarımınızı uzun vadede yönetmek daha kolaydır. Hassas kontrollerin gerekli olduğu zamanlar için, Kadence Blocks bu gücü sizin ellerinize de verir.

CSS Kelepçesiyle Duyarlı Tasarım

Hangi cihazı kullanırsanız kullanın, daha iyi bir görüntüleme deneyimi sağlamak için Kadence Blocks 3.0, tasarımların yüklenme şeklini temelden değiştirdi. CSS kelepçesinin arkasındaki teknolojiyle ilgileniyorsanız, burada onun hakkında daha fazla bilgi edinebilirsiniz. Temelde CSS Clamp, üst düzey görüntü alanı boyutunu (örneğin, bir masaüstü tarayıcı) ve alt uç görüntü alanı boyutunu (örneğin, bir cep telefonu) belirler. Sitenin nasıl yüklendiği veya bir kullanıcının tarayıcı penceresini nasıl yeniden boyutlandırdığı önemli değil, siteniz algılanan tarayıcı penceresi boyutuna göre bu öğelerin boyutlarını esnek bir şekilde değiştirecektir.

Kadence Blocks, boyutlandırma özelliklerini masaüstü, tablet veya cep telefonuna göre ayarlamanıza izin verirken, Kadence Blocks 3.0 sizi bu görünümleri boyutlandırma sorumluluğundan kurtarır. Artık, Clamp kullanarak değişken tabanlı ayarlara güvenebilir ve işi Kadence Blocks'un sizin yerinize yapmasına izin verebilirsiniz.

Stilleri Kopyalama ve Yapıştırma Güncellemeleri

Stilleri kopyalayıp yapıştırma seçeneği bir süredir Kadence Blocks'un bir parçasıydı ama biz bunu Blocks 3.0'da yeniledik ve tüm bloklarımıza dahil ettik. Bu aracı iş akışınızın bir parçası haline getirmek biraz kararlılık gerektirir, ancak geliştirmenizi çok daha hızlı hale getireceğine söz veriyoruz!

Blok Varsayılanlarına Yönelik Güncellemeler

Kendinizi bir Kadence Bloğunda her zaman bir şeyler ayarlarken bulursanız, blok için "varsayılan"ın ne olduğunu tanımlayabilirsiniz. Çünkü, satır düzeninizi her zaman tema içeriği maksimum genişliğini kullanacak şekilde ayarlarsanız, sayfanıza yeni bir satır düzeni bloğu eklediğinizde bunu varsayılan yapabilirsiniz. Bunu herhangi bir bloktaki herhangi bir ayarla yapabilirsiniz. Kadence Blocks 3.0'dan önceki çoğu blokta bunu yapabilmiş olsanız da, biz onun çalışma şeklini değiştirdik. Artık blok varsayılanlarını ayarlamak her zamankinden daha kolay. Her bloğun içinden, "gelişmiş"e tıklayabilir ve ardından "varsayılanları engelle"ye tıklayabilirsiniz, bu, herhangi bir blok varsayılanının uygulanıp uygulanmadığını görmenizi sağlar. Blok varsayılanlarının bir parçası olmasını istemediğiniz bazı özellikleri bile kaldırabilirsiniz. Bunu bu kadar kolaylaştıran şey, üzerinde çalıştığınız mevcut bloğu, bir düğmeyi tıklatarak yeni varsayılanı tanımlamak için kullanabilmenizdir. Ayrıca blok varsayılanlarını dışa aktarabilir ve diğer sitelere aktarabilirsiniz.

Tam Geriye Dönük Uyumluluk

Bunun gibi büyük bir yeniden yazma ile, elbette, en büyük endişelerden biri tam geriye dönük uyumluluk sağlamaktır. Kadence Blocks 2.* ile oluşturduğunuz sitelerin güncellenmiş 3.0 eklentisine kolayca geçmesini sağlamak için geliştirme süreci boyunca bu gereksinimi göz önünde bulundurduk. Uzun bir beta döneminde, Kadence Blocks 3.0'ın test edilmesine 400'den fazla kişi katkıda bulunmuştur. Artı, Kadence Blocks ile oluşturulan geniş başlangıç ​​şablonları kitaplığımızla, bunları tonlarca dahili test yapmak için kullanabildik. Merak ediyorsanız, biz de kendi web sitemizde Kadence Blocks 3.0 kullanıyoruz.

Kadence Blocks 3.0'ın test edilmediği uç durumlar olabilir ve hatalar hala mevcut olabilir, ancak bu durumların az olacağına eminiz ve siz 3.0'a geçerken destek ekibimiz yardıma hazırdır.

Blok Düzenleyicide Güncellemeler nasıl çalışır?

Kadence Blocks'u güncellediğinizde yazılarınızın ve sayfalarınızın içeriği otomatik olarak güncellenmeyecektir. Bu sayfaların içeriğinin çoğu statik HTML olarak kaydedilir ve web sitenizin ön ucunda daha önce oluşturulduğuna çok benzer şekilde oluşturulur. Bu HTML'nin bir kısmının nasıl işlendiğini güncelledik ve bununla çıktı alınan harici CSS ve Javascript dosyalarını güncelledik, ancak bloklarınızın temel yapısı aynı kalacak.

Örneğin, Kadence Blocks 2.* içindeki Row Layout Block çıktısında üç HMTL DIV kullanır ve Kadence Blocks 3+ içindeki Row Layout Block sadece iki DIV kullanır. Bu değişiklik web sitenizde hemen etkili olmaz. Kaydedilen HTML, sayfayı veya gönderiyi açana kadar en son güncellemeye göre yeniden oluşturulmayacaktır.

Her iki sürümü de desteklediğimizden emin olmak için kaç tane HTML değişikliği yaptığımızı ve test ettiğimizi sınırladık. Bu değişiklikler, sitenizin performansını artırmak için yapılmıştır.

Güncelleme ve Sorun Giderme İpuçları

Aşağıda, Kadence Blocks 3.0'a nasıl güncelleme yapılacağına ilişkin önerilerimiz ve herhangi bir sorunla karşılaşırsanız ilk olarak kontrol edebileceğiniz bazı şeyler bulunmaktadır.

Güncellemeden önce

  1. Web sitenizi yedekleyin.
  2. Bonus: bir hazırlama sitesi oluşturun ve önce orada güncelleyin.

güncelledikten sonra

  1. Site önbelleğinizi temizleyin (Tarayıcı, Sayfa Önbelleği, Nesne Önbelleği).
  2. Küçültme betiklerinizi hem CSS hem de Javascript için yeniden oluşturun.
  3. Her şeyin sorunsuz çalıştığını doğrulamak için sitenizin sayfalarını görüntüleyin.

Sorun giderme

  1. Bir sayfa ön uçta düzgün görünmüyorsa, sayfayı açın ve yeniden kaydetmeyi deneyin . Bu, sayfa içeriğindeki statik HTML'yi yeniden oluşturacak ve blok biçimlerini güncelleyecektir.
  2. Bir sayfa ön uçta düzgün görünmüyorsa, özel CSS'nizin düzgün çalışması için güncellenmesi gerekip gerekmediğini görmek için eklediğiniz herhangi bir özel CSS'yi inceleyin.

Sıradaki ne?

Kadence Blocks 3.0'ın herhangi bir yeni blokla gelmediğini fark etmiş olabilirsiniz. Bu, bu güncellemenin kapsamını çekirdek yapıya, ayarlara ve düzenleyici kullanıcı arayüzüne odaklanacak şekilde sınırlamak için kasıtlı bir karar oldu. Kadence Blocks 3.0 güncellemesi, çok yakında inmesi gereken yeni bloklar için fırlatma rampasının yanı sıra diğer harika özellikleri de sağlıyor. Aşağıda, Kadence Blocks ile ilgili size bir fikir verecek basitleştirilmiş bir yol haritası bulunmaktadır.

  • Kadence Blocks 3.1 – bir aydan az
    • Gelişmiş Form Bloğu
    • İlerleme Çubuğu Bloğu
  • Yeni Tasarım Kitaplığı – Q1/Q2
  • Kadence Blokları Pro 2.0 – Q1/Q2
    • Blocks 3.0 ile eşleşecek Yapı ve Kullanıcı Arabirimi Güncellemeleri
    • Mevcut blokları yenileyin.
  • Gelişmiş Sorgu Bloğu – Q2
  • Dinamik Tekrarlayıcı Saha Desteği – Q2

Gelişmiş Form Bloğu

Geliştirmenin çoğu için, 3.0'ı yeni bir Gelişmiş Form bloğuyla başlatmayı planladık, ancak 3.0'ı daha fazla bekletmemeye karar verdik. Hala bu bloğun çok yakında çıkmasını bekliyoruz. Bu bloğun ilk sürümü, mevcut form bloğumuzdan çok daha esnek bir form oluşturma yöntemi sağlayacaktır. Örneğin, her alan ana form bloğuna göre kendi iç bloğu olacağından, Satır Düzeni Bloğu'nu kullanarak alanları sütunlar halinde gruplayabileceksiniz.

Bu blok ayrıca özel bir gönderi türünde kendi gönderisini düzgün bir şekilde oluşturur, böylece formlar birden çok sayfaya eklenebilir ve tek bir konumdan güncellenebilir. İlk sürümde, dosya yüklemeleri ve Convert Kit entegrasyonları gibi uzun zamandır beklenen birkaç özellik olacak, ancak bu yalnızca başlangıç ​​olacak. Yılın ilerleyen zamanlarında koşullu alanları, ödemeleri ve çok adımlı formları yayınlamayı planlıyoruz.

Özel bir teşekkür

Kadence Blocks 3.0 Beta sürecinde Kadence Geliştirme Ekibine zaman, hata raporları ve fikirleriyle katkıda bulunan herkese teşekkür ederiz. Bu, Kadence Blocks'un çalışma şeklinin tamamen elden geçirilmesiydi ve sizin hata raporlarınız olmasaydı, Kadence Blocks'un herkes için iyi çalışmasını tam olarak sağlayamazdık.

Kadence Blocks 3.0 ile ne inşa edeceksiniz?

Bu yeni özellikleri ve iyileştirmeleri size sunmaktan heyecan duyuyoruz ve umarız Kadence Blocks 3.0'ı kullanırken bizim onu ​​geliştirmekten keyif aldığımız kadar siz de keyif alırsınız. Sizce en çok ne gelişti? Yeni güncelleme hakkında hangi sorularınız var? Düşüncelerinizi ve deneyimlerinizi aşağıdaki yorumlarda paylaşın. Ayrıca, bu sürümden öne çıkanları almak, Kadence ekibine soru sormak ve Kadence Blocks ile inşaat için yaklaşan yol haritamız hakkında daha fazla bilgi almak için 23 Şubat Perşembe günü YouTube'daki canlı yayınımıza katılmayı planlayın.