MevvBlocks Belgeleri

Kurulum

MevvBlocks WordPress 6.0 ve PHP 8.1 ister. Başka bağımlılığı yoktur: dış kütüphane yok, başkasının sunucusundan yazı tipi yok, derleme adımı yok.

Eklentiyi yükleyip etkinleştirin.
Bir sayfayı blok editöründe açın ve Kapsayıcı bloğunu ekleyin.
İçine istediğiniz blokları yerleştirin. Blokları ekleyicideki Tasarım kategorisinde bulursunuz.
Geri kalanını yönetim menüsündeki MevvBlocks ekranlarından yönetin.

WooCommerce isteğe bağlıdır. Kuruluysa iki blok daha eklenir.
MevvBridge isteğe bağlıdır. Elementor'den geldiyseniz o sayfaları yeniden düzenlenebilir yapan şey MevvBlocks'tur.
MevvLegal isteğe bağlıdır. Kuruluysa harita bloğu gömülü çerçeveyi MevvLegal'e devreder ve harita ziyaretçi onay vermeden yüklenmez.

Pro, ücretsiz sürümün yanına kurulan ayrı bir eklentidir ve ücretsiz sürümü zorunlu bağımlılık olarak bildirir. Lisans anahtarı Lisans ekranına girilir. Pro kurulu değilken MevvBlocks sunucularımıza hiç istek atmaz.

Ekran boyutuna göre stil — kapattığı boşluk

Çekirdek bloklar tek bir dolgu değeri, tek bir en az yükseklik, tek bir sütun sayısı alır. O değer her ekranda geçerlidir. Bir bölümün masaüstünde 100, mobilde 40 piksel boşluğu olsun istiyorsanız çekirdek bunu ifade edemez — ve insanların sayfa yapıcı kurmasının en yaygın teknik sebebi tam olarak bu tek boşluktur.

MevvBlocks bir değer yerine üç değer tutar — masaüstü, tablet, mobil. Sınırlar sabittir:

Masaüstü: Medya sorgusu yok — temel değer.
Tablet: 1024 piksel ve altında geçerli.
Mobil: 767 piksel ve altında geçerli.

Aynı iki sayı eklentinin her yerinde kullanılır — menünün hamburger eşiği, ızgaranın sütun sayıları. Serbest piksel alanı bilerek verilmedi: 900 yazan biri 900'de hamburger alırdı ama dolgusu hâlâ 1024'te değişirdi; iki ayrı kırılım sistemi, kendi kendisiyle çelişen düzen demektir.

Değerler bloğun kendi özniteliklerinde, post_content içinde durur — özel bir tabloda ya da yazı alanında değil. CSS sunucuda, istek anında üretilir ve ait olduğu elemanın yanına küçük bir stil bloğu olarak basılır.

Neden CSS sayfayla birlikte kaydedilmiyor? Çünkü kaydedilmiş HTML tek bir kırılımı taşıyabilir. Üç değeri mümkün kılan şey istek anında üretmektir — ve biten bir lisansın yayındaki sayfayı asla karartamamasının sebebi de budur: o yolda tek bir lisans sorgusu yoktur.

Editör önizlemesi neden yaklaşık

Bunu açıkça söylemekte fayda var, çünkü gördüğünüzün aldığınız olmadığı tek yer burası.

Kırılıma göre CSS'i sunucu, sayfa basılırken üretir. O kod editörde çalışmaz.
Bloklar kendi işaretlemesini kaydetmez — editörün biçimlendireceği kayıtlı bir şey yoktur.
Editör bu yüzden bir yaklaşıklık çizer: yapı, içerik, yön, sütun sayısı ve boşluk. Dolgunuz, en az yüksekliğiniz, arka plan görseliniz, kenarlığınız ve tablet/mobil değerlerinizin hiçbiri orada görünmez.

Editörün doğru gösterdiği şey genel palet ve tipografi kümeleridir: o değişkenler editöre de enjekte edilir, yani editördeki renk ve yazı ön yüzle aynıdır.

Bir blokta tablet ya da mobil değer varsa editör bunu bir bildirimle yazar ve hangi ayarlar olduğunu sayar; yaklaşık önizlemenin bir şey sakladığını bilirsiniz. Kesin görünüm ön yüzdür, oradan bakın. Piksel doğru editör önizlemesi sonraki sürümün işi; bugün "oldu" demek, kendi sitenizde keşfedeceğiniz bir yalan olurdu.

Bloklar

Otuz blok, WooCommerce kuruluysa otuz iki. Hepsi ücretsiz sürümdedir; Pro'ya özel blok yoktur. Ekleyicide Tasarım kategorisindeler.

Düzen ve metin: Kapsayıcı, Başlık, Metin, Düğme, Ayırıcı, Görsel, Kısa Kod
Sunum: Referans, İkon, İkon Kutusu, İkon Listesi, Görsel Kutusu, Sosyal İkonlar, Telif Hakkı, Ekip Üyesi, Yıldız Derecelendirme, Fiyat Tablosu
Etkileşim: Kaydırıcı, Sekmeler, Akordiyon, Gezinme Menüsü, Arama Formu, Form, İçindekiler, Sosyal Paylaşım
Veri ve zaman: İçerik Izgarası, Geri Sayım, Sayaç, İlerleme Çubuğu, Harita
WooCommerce: Ürünler, Ürün Kategorileri — yalnız WooCommerce etkinken eklenir

Hareket efektleri blok değildir: her MevvBlocks bloğuna bir Hareket paneli eklenir.

Buradaki hiçbir şey JavaScript yüklenmediğinde gizlenmez. Sekmeler bütün panelleri gösterir, akordiyon yerel bir details ögesidir, kaydırıcı kayar ve okları betik onları çalıştırabilene kadar gizli basılır — çalışmayan bir düğme göstermek, kırık bir arayüz göstermektir. Gizli içerik, erişilemez içeriktir.

İçerik ızgarası ve döngü oluşturucu

İçerik Izgarası bloğu yazıları, sayfaları ya da ürünleri sorgular ve dizer. Sayfalama düz bağlantılarla çalışır, yani JavaScript kapalıyken de çalışır.

Sıralama sabit bir listedir — tarih, değiştirme, başlık, menü sırası, rastgele — çünkü bu değer veritabanına ulaşır.
Kart başlıkları h2 ile h6 arasındadır. h1 sunulmaz: zaten bir h1'i olan sayfada kart ızgarası başlık sırasını bozardı.
Kart başına tek bağlantı. Görseli, başlığı ve "devamını oku"yu birden bağlamak, ekran okuyucunun aynı hedefi üç kez okuması demektir.
Izgara bulduğu yazı kimliklerini önbelleğe alır, basılmış HTML'i asla; herhangi bir yazı kaydedildiğinde önbellek düşer — "yazı yayınladım ama görünmüyor" arızası bu yüzden oluşamaz.

Döngü oluşturucu, dahili kart yerine kartı kendinizin çizmesini sağlar. Döngü kartı türünde bir şablon oluşturur, onu sıradan bloklarla ve dinamik bağlarla kurar ve ızgaranın ayarlarından seçersiniz.

Kart şablonunu düzenlerken bağlam yoktur, yani dinamik bağlar statik yedek değerlerini gösterir. Şablon boşsa, silinmişse, taslakta bırakılmışsa ya da kendine dönüyorsa ızgara hiçbir şey basmak yerine dahili karta düşer. Döngü iç içeliği iki düzeyle sınırlıdır.

Form motoru

On altı alan türü ve sunucuda doğrulama. Form, sayfadaki İŞ YAPAN tek parçadır; bu yüzden JavaScript olmadan da çalışır: düz bir POST gönderimi, betikli gönderimle aynı doğrulamayı ve aynı mesajları alır.

Alan türleri: Metin, e-posta, telefon, URL, sayı, tarih, saat, gizli alan, uzun metin, seçim, çoklu seçim, radyo, onay listesi, onay kutusu, rıza kutusu ve başlık. Pro bir dosya yükleme alanı ekler.
Gönderimler nereye gider: Hem kendi tablosuna hem e-postaya. Kayıt önce yazılır, posta sonra gönderilir; çünkü posta teslimi veritabanı yazımından çok daha sık başarısız olur.
Nereden okunur: MevvBlocks → Form Gönderimleri. Pro oraya CSV dışa aktarma ekler.
Bildirim e-postası: Gönderen sitenizdir, ziyaretçi değil. Ziyaretçinin adresini gönderen yapmak, form postalarının hiç ulaşmamasının en yaygın sebebidir — SPF ve DMARC reddeder. Ziyaretçinin adresi yanıt adresi olur.

Spam üç katmanla karşılanır ve CAPTCHA yoktur: oturuma bağlı olmayan bir imza, en kısa doldurma süresi ve bir bal küpü alanı. Bal küpünü dolduran gönderim sessizce kabul edilip atılır — hata göstermek bota yakalandığını söylemek olurdu ve bir sonraki denemesinde o alanı atlardı.

Neden WordPress nonce'ı değil de imza? Nonce oturuma ve on iki saatlik bir pencereye bağlıdır. Önbellekli bir sitede aynı HTML saatlerce, bazen günlerce sunulur, içindeki nonce çoktan geçersizdir ve form sessizce çalışmaz olur. Form eklentilerinin en yaygın saha arızası budur. Buradaki imza yedi gün geçerlidir ve kimin gezindiğine bağlı değildir.

Gönderimin IP adresi hiçbir zaman okunabilir hâlde saklanmaz; yalnız kendi sitenizin anahtarıyla tuzlanmış bir özeti tutulur, böylece iki ayrı sitenin kayıtları birbiriyle eşleştirilemez.

Gönderim deposu lisansa bağlı değildir. Bağlı olsaydı, ödemenin kesildiği gün müşterinin veri kaybetmeye başladığı gün olurdu.

Tema şablonları

Yedi şablon türü, zaten kullandığınız WordPress editöründe kurulur — Başlık, Alt bilgi, Tekil içerik, Arşiv, Arama sonuçları, Bulunamadı (404) ve Döngü kartı. İkinci bir editör, çekirdek güncellendikçe geride kalacak bir şey daha olurdu.

Tür ve koşullar düz bir kenar çubuğu kutusundadır, React paneli değil — klasik kutu JavaScript kapalıyken de kaydeder ve editör arayüzü değiştiğinde bozulmaz.

Koşullar: Tüm site, ana sayfa, gönderi türü, kategori ya da tek bir içerik. Boş bırakırsanız tüm sitede geçerlidir.
Birden çok şablon uyarsa: En dar koşullu olan kazanır.
Bozuk koşul: Kaydederken atılır ve boş yazılır; geçersiz metin olarak saklansaydı şablon sessizce hiç görünmezdi.

Başlık ve alt bilgi şablonları yalnız Astra ve GeneratePress'te yerleşir. Temanızın tarifi yoksa hiç basılmaz ve ekran bunu söyler — kaldıramadığımız bir temaya başlık eklemek kesin olarak iki başlık demektir. Tekil, arşiv, arama ve 404 şablonları her temada çalışır: yalnız döngüyü değiştirir, temanın kendi başlık ve alt bilgisine dokunmazlar.

Döngü kartı türündeki bir şablon kendiliğinden hiçbir sayfaya yerleşmez. Onu bir ızgara bloğu seçer.

Şablon kütüphanesi ve blok ön ayarları

Yirmi hazır şablon: on altı bölüm, dört tam sayfa. Sıradan WordPress desenleri olarak kaydedilirler, yani zaten bildiğiniz yoldan eklersiniz — + düğmesi, Desenler sekmesi, sonra MevvBlocks bölümleri ya da MevvBlocks sayfaları kategorisi.

Bunun için özel bir pencere yazılmadı. Çekirdeğin ekleyicisi önizlemeyi, aramayı, klavye gezinmesini ve çeviriyi zaten veriyor; eklediği şey de düz blok işaretlemesi, yani kilitleneceğiniz bir şey yok.

Şablonlar hiç görselle gelmez. Dışarıdan görsel çekmek hem telif hem gizlilik sorunu, üstelik sayfanızın görüntüsünü başka bir sunucunun ayakta kalmasına bağlar. Görsel blokları yerinde duruyor ve alternatif metinleri dolu; kendi görselinizi seçmeniz yeter.

Blok ön ayarları, bir bloğun görünüm ayarlarını bir adla kaydeder ve aynı türden başka bir bloğa uygular. İçerik bilerek kaydedilmez — metin, bağlantı, görsel ve liste içerikleri ayıklanır, yani bir ön ayarı uygulamak yazdığınızın üzerine yazmaz.

Desenler ön yüzde hiç kaydedilmez. Her sayfa görüntülemesinde işaretlemelerini üretmek 109 KB ve 3,59 ms ölçüldü — okuyan kimse desen eklemediğine göre boşuna ödenen bir bedel.

Açılır pencereler

İçerik blok editöründe kurulur; tetikleyici, koşul ve sıklık ayarları da aynı ekranın kenar çubuğundadır. MevvBlocks → Açılır Pencereler altından yönetilir.

Tetikleyiciler: Sayfa açılışında gecikmeli, kaydırma yüzdesinde, çıkış niyetinde, bir CSS seçiciye tıklandığında ya da belirli bir etkin süre sonunda. Sekme arkadayken etkinlik sayacı durur.
Koşullar: Tüm site, ana sayfa, belirli sayfalar, gönderi türü ya da kategori; giriş yapmış, yapmamış ya da herkes; ve cihaz bazında.
Sıklık: Her seferinde, oturumda bir ya da N günde bir.
Görünüm: Konum, genişlik, başlığın görünüp görünmeyeceği, dışına tıklayınca kapanma ve açılış animasyonu.

"Bir daha gösterme" sayacı ziyaretçinin kendi tarayıcısında tutulur, sunucuda değil. Sunucuda saymak, bir kutuyu iki kez göstermemek için her ziyaretçiye kalıcı bir kimlik üretmek olurdu.

Cihaz hedeflemesine tarayıcı karar verir, kullanıcı aracısına bakılarak değil. Kullanıcı aracısı tableti telefondan güvenilir biçimde ayıramaz ve tam sayfa önbelleğinin arkasında ilk ziyaretçinin cihazını herkese servis ederdi. Hiç tetikleyici seçilmezse açılışa, hiç cihaz seçilmezse üçüne birden düşer — sessizce hiç görünmeyen bir pencere, fazla görünenden kötüdür.

Site paleti

Renk ve tipografi için tek ekran; hem MevvBlocks menüsünden hem Görünüm altından açılır, çünkü insanlar orada arıyor. Her satır kendi değişken adını gösterir ve bloklar düz değerlere değil o adlara başvurur.

Geçişten önce kurulmuş bir sayfanın başvurularını kaybetmek yerine yeni paleti almasını sağlayan şey budur — değişken adları sayfalarınızın zaten kullandığı adlarla aynı tutulur.

Silme yoktur. Bir renk ya da tipografi kümesi boş bırakılabilir, ama silinmesi ona başvuran her bloğu çözümsüz bırakırdı. Boşaltmak geri alınabilir; bir başvuruyu silmek alınamaz.

Erişilebilirlik denetimi

MevvBlocks → Erişilebilirlik yayındaki sayfalarınızı, yazılarınızı ve şablonlarınızı tarar ve hangi bloğun neyi eksik bıraktığını söyler: alternatif metni olmayan görsel, boş başlık, adı ya da hedefi olmayan düğme, bozuk başlık sırası, düşük kontrast.

Aynı denetim siz daha düzenlerken kenar çubuğu paneli olarak da vardır; bir bulgunun düzeltilmesi en ucuz olduğu yer orasıdır.

Bu bilerek bir kaplama değildir. Sayfaya "erişilebilirlik menüsü" ekleyen katmanlar hiçbir şeyi düzeltmez: alternatif metni olmayan görselin hâlâ yoktur, düşük kontrastlı metin hâlâ okunmaz. "Bu site erişilebilir" iddiasını taşıyıp öyle olmamak, hiç iddia etmemekten daha kötü bir konumdur — kaplama kullanan siteler tam olarak bunun yüzünden dava edildi. Bu araç ölçer ve söyler; düzeltmek sizde.

Kontrast yalnız iki renk de gerçekten biliniyorken bildirilir. Devralınmış bir renge tahmin yürütmek, hakkında bir şey yapamayacağınız uyarılar üretirdi.

Ücretsiz ve Pro

Ücretsiz sürüm ürünün kendisidir: otuz blok, tema şablonları, ızgara ve döngü oluşturucu, gönderim deposuyla form motoru, menü, arama, açılır pencereler, şablon kütüphanesi, blok ön ayarları, genel palet ve erişilebilirlik denetimi.

Pro çıktıya değil, düzenleme yeteneklerine ekler:

Kırılım noktaları — masaüstü / tablet / mobil sekmeleri; her kırılım için en az yükseklik, içerik genişliği, genişlik ve dört dolgu değeri.
Özel CSS — blok bazında; selector sözcüğü o bloğun kendisini gösterir.
Form eklentileri — koşullu alanlar, gönderene otomatik yanıt, webhook ve dosya yükleme alanı.
CSV dışa aktarma — form gönderimleri için.

Kırılım ve özel CSS panelleri bugün çekirdek bloklarda görünür: Kapsayıcı, Başlık, Metin, Düğme, Ayırıcı, Görsel, Referans, İkon, İkon Kutusu, İkon Listesi, Kısa Kod, Form, Ürünler ve Ürün Kategorileri. Kırılıma göre bazı denetimler zaten ücretsizdir: ızgaranın tablet ve mobil sütun sayıları, menünün hamburger eşiği, görsel kutusunun mobil konumu ve yapışkan konumun cihaz seçimi.

Lisans bittiğinde ya da hiç yokken:

Siteniz birebir aynı görünür. Kaydedilmiş her tablet ve mobil değer basılmaya devam eder; blok bazındaki her özel CSS kuralı da öyle. Bu bir söz değil, mimari bir kuraldır: render yolundaki hiçbir dosya lisans durumunu sormaz ve bunu bir test her sürümde denetler.
Formlar gönderilmeye, kaydedilmeye ve posta göndermeye devam eder.
Var olan açılır pencereler görünmeye devam eder.
Kaybettiğiniz şey editördeki Pro panelleridir — ve yalnız onlar.

Sunucularımıza ulaşılamıyorsa etkin bir lisans yedi gün daha çalışır. Hiç başarıyla doğrulanmamış bir kurulumda ek süre yoktur: adresimizi engellemek Pro edinmenin yolu değildir.

Bir şey çalışmıyorsa

"Form oturumu zaman aşımına uğradı": O sayfanın önbellekteki kopyası yedi günden eski ya da sitenizin güvenlik anahtarları yenilenmiş. Sayfa önbelleğini temizleyin.
Form posta göndermiyor: Önce gönderim listesine bakın — kayıt postadan önce yazılır, yani oradaysa form çalışmış, teslimat çalışmamıştır. Sonra alıcı adresini ve sitenizin posta yapılandırmasını kontrol edin.
Editörde doğru, ön yüzde yanlış görünüyor: Editör önizlemesi tasarım gereği yaklaşıktır; yukarıya bakın. Doğru olan ön yüzdür. Blokta tablet ya da mobil değer varsa editör bunu bildirimle yazar.
Düzenlemeye kalkınca "bu blok geçersiz" diyor: Bu, geçmişte sunucuda kayıtlı olup editörde kaydı olmayan bloklarda oluyordu — kusursuz basılıyor, yalnız açılınca bozuluyorlardı. Artık bir test bunu bekliyor; yine de görürseniz blok adını bildirin.
Geri sayım yanlış zamanı gösteriyor: İşaretleme "X saniye kaldı" değil mutlak bir hedef anı taşır, yani önbellekli sayfa onu donduramaz. Blok kendini sunucu saatine göre düzeltir; o istek engellenmişse hata vermek yerine ziyaretçinin kendi saatine döner.
Başlık ya da alt bilgi şablonu görünmüyor: Temanızın tarifi yok. Yalnız Astra ve GeneratePress kaldırılabiliyor ve ekran bunu uyarıyor. Diğer şablon türleri her temada çalışır.
İki başlık çıktı: Hem MevvBlocks hem MevvBridge birer tane basıyor. MevvBlocks yeri bilerek önce alır — başlığı ikisinden birine bırakın.
Kapsayıcılar ayarladığımdan geniş ya da dar: Bir tema kuralı belirginlikte kazanıyor. Özellikle Astra kendi alt ögelerini güçlü biçimde biçimlendiriyor. Ölçülen durumlar !important ile değil belirginlik yükseltilerek çözüldü; yenisine denk gelirseniz hangi tema olduğunu bildirin.
Yayınlanmış bir yazı ızgarada görünmüyor: Görünmeli. Izgara yalnız yazı kimliklerini önbelleğe alır ve herhangi bir yazının kaydedilmesi önbelleği düşürür. Sürüyorsa gönderi türünün ve sıralamanın beklediğiniz gibi olduğunu doğrulayın.

Sınırlar

Editör önizlemesi yaklaşıktır. Yapı ve içerik görünür; kesin görünüm ön yüzdür.
Başlık ve alt bilgi şablonları yalnız Astra ve GeneratePress'te çalışır. Diğer her tema hiçbir şey almaz, bir de uyarı alır — sessiz kalmak iki başlık demek olurdu.
Harita bir OpenStreetMap gömmesidir. Tek işaretçi; özel işaretçi görseli, harita stili ve yol tarifi yok. API anahtarı yok, faturalandırma hesabı yok, sayfa kaynağınızda duran bir anahtar yok.
Erişilebilirlik kaplaması yok. Yalnız ölçüm ve bildirim.
CAPTCHA yok.
Canlı arama yok. Her tuş vuruşunda istek, hem bağımlılık hem hız sınırı yüzeyidir.
Geri sayım sitenin saat dilimini kullanır, ziyaretçinin değil. Bir kampanya dünyanın her yerinde aynı anda biter.
Menü serbest piksel değil iki kırılım sunar; açılır panel / yandan kayan mod yoktur — odak yönetimiyle kayan panel, açılır pencere bloğunun işidir.
Izgara kartları h1 olamaz, döngü iç içeliği iki düzeyde durur.
Dinamik içerik sabit bir kaynak listesinden gelir. "Şu ifadeyi çalıştır" biçiminde bir alan yoktur: bu, sayfa düzenleyebilen herkese sunucuda kod çalıştırma yetkisi vermek olurdu.
Genel renk ve tipografi kümeleri silinemez, yalnız boşaltılır.
Ürün kartlarını WooCommerce çizer, biz değil; böylece temanız ve üçüncü parti kancalar çalışmaya devam eder.
Arayüz Türkçedir. Henüz çeviri dosyası yoktur.
Kaldırmak gönderim tablosunu ve ayarları silmez. Blok içeriğiniz her hâlükârda okunabilir kalır — post_content içinde standart işaretlemedir.

Hiçbir yerde üçüncü parti JavaScript ya da CSS kütüphanesi yüklenmez. Kaydırıcı için de, akordiyon için de, hareket için de, harita için de. Her biri kullanıldığı sayfada kırk ile yüz kilobayt arasında bir bedele mal olurdu.

Masaüstünde 100 piksel, mobilde 40 — blok editöründe.