Ana içeriğe geç

MHM Rentiva v4.26.3: Araç Kartı Görsel Kalitesi, Admin Toast Kesilmesi ve ZIP Chart.js Düzeltmesi

· 5 dakikalık okuma
MaxHandMade
Maintainer

v4.26.3, listeleme/arama sayfalarındaki araç görsellerinin bulanık yüklenmesine neden olan responsive sizes hatasını, ayarlar sayfasındaki "kaydedildi" toast bildirimlerinin kesilip ekrandan taşmasını ve release ZIP'inden Chart.js'in çıkarılmasına yol açan .distignore kök-sabitleme hatasını gideriyor. Üçü de üretimde gözle görülen ama console.log'a düşmeyen sessiz sorunlardı.

🖼️ Araç Kartı Görsel Kalitesi — 220px Tuzağı

Araç kartı partialında (templates/partials/vehicle-card.php) yıllardır sabit kodlanmış bir sizes özniteliği vardı:

sizes="(max-width: 782px) 100vw, (max-width: 900px) 180px, 220px"

Bu öznitelik tarayıcıya "bu görselin ekranda kaplayacağı alan en fazla 220px" diyordu. Tarayıcı da doğal olarak srcset'teki en küçük uygun varyantı — 300w thumbnail'ı — seçiyordu. Ancak kartların gerçek görünen genişliği 350-440px arasındaydı. Sonuç: retina ekranlarda bile bulanık araç görselleri.

En belirgin olduğu yer: Arama sonuçları sayfası, çünkü oradaki kartlar en geniş olanlardı. Ayrıca arama kodu (SearchResults::format_vehicle_data()) varsayılan olarak zaten 'medium' (300px) istiyordu — yani hem kaynak görsel small'dı, hem de browser daha da küçüğünü seçiyordu.

Çözüm iki katmanlı:

  1. SearchResults varsayılan image_size'medium''large' (1024px) oldu — araç ızgarası, araç listesi ve öne çıkan araçlar zaten 'large' kullanıyordu
  2. vehicle-card.php sizes özniteliği → (max-width: 782px) 100vw, 500px — retina ekranlarda browser artık 1024w varyantı seçiyor, geniş kartlar keskin

Bu düzeltme tek bir partial dosyası değiştiği için listeleme, favoriler, araç arşivi ve arama sonuçları — hepsi birlikte düzeldi.

🔔 Admin Settings Toast — "Kaydedildi" Bildiriminin Kesilmesi

Ayarlar sayfasında herhangi bir değişikliği kaydettiğinizde çıkan "Ayarlar kaydedildi" bildirimi, özellikle uzun mesajlarda sağ tarafı kesilmiş olarak görünüyordu. Sorun tek bir yerde değildi — iki ayrı bozukluk üst üste binmişti:

1. WordPress bildirimi header flex konteynerine hapsediliyordu. render_admin_header() helper'ı H1, alt başlık ve aksiyonlar için bir flex konteyner kuruyor ama sonuna <hr class="wp-header-end" /> koymuyordu. WordPress common.js'in bildirimleri yerleştirmek için kullandığı resmi API tam olarak bu işaretçi. İşaretçi yokken WordPress ilk H1'i arıyor ve bildirimi dar flex kolonunun içine sıkıştırıyordu.

2. Özel toast CSS'i her şeyi tek satıra zorluyordu. Plugin'in convertWPNoticesToToasts() helper'ı WordPress bildirimini gizleyip özel bir .rv-notification.mhm-admin-toast div'i oluşturuyor. Bu div'in CSS'i white-space: nowrap, max-width: 350px, height: 50px içeriyordu — yani uzun mesajları taşırıyor, kelime kaydırma yapmıyor, ve birden fazla toast üst üste geldiğinde istiflenmiyordu.

Çözüm:

  • render_admin_header() flex konteynerin kapanışından hemen sonra <hr class="wp-header-end" /> yayınlıyor — artık bildirimler konteynerin altında tam genişlikte beliriyor
  • Toast CSS'i baştan yazıldı: sabit height/max-width/nowrap kaldırıldı; min-width: 280px, max-width: min(480px, calc(100vw - 60px)), white-space: normal, overflow-wrap: break-word
  • Toastlar için #mhm-admin-toast-container adında sabit konumlu flex konteyner eklendi; yeni toastlar prepend ile en üste giriyor — böylece birden fazla toast istifleniyor ve en yenisi her zaman üstte
  • XSS güvenliği: toast mesajları artık template literal ile değil .text(message) ile yazılıyor — gelecekte bir hook'un bildirim içeriğine HTML enjekte etme riski yok

📦 Release ZIP Chart.js 404 — .distignore'un Gizli Hatası

WordPress.org üzerinden kurulan kopyalarda admin dashboard'daki grafikler 404 veriyordu. Kök nedeni .distignore dosyasının vendor/ paterniydi.

Release ZIP'i oluşturan bin/build-release.py Python script'i, paterndeki trailing / karakterini siliyor ve kalan vendor'u "herhangi bir yol segmenti" olarak eşleştiriyordu. Bu mantıkla:

  • vendor/composer/... eşleşti — doğru (Composer klasörünü atlamak istiyoruz)
  • assets/js/vendor/chart.min.js de eşleşti — yanlış (bu dosya kargoda olmalıydı)

Sonuç: chart.min.js, flatpickr/, swiper-bundle.min.js ve diğer ağaç içi vendor kütüphaneleri release ZIP'inden düşüyordu. Lokal geliştirmede görünmüyordu çünkü build süreci atlanıyordu. Ancak WordPress.org ya da GitHub Release ZIP'i üzerinden kurulum yapıldığında dashboard boş kalıyordu.

Çözüm:

  • bin/build-release.py artık .gitignore tarzı kök sabitlemeyi destekliyor — bir patern / ile başlarsa yalnızca plugin kök dizinindeki o yola eşleşiyor, alt dizinlerdeki aynı isimli klasörlere dokunmuyor
  • .distignore güncellendi: vendor//vendor/

Doğrulama: Yeni ZIP'te assets/js/vendor/chart.min.js, assets/vendor/flatpickr/*, assets/vendor/swiper-bundle.min.js mevcut; Composer vendor/ kök dizini dışlandı.

🧙 Setup Wizard — Versiyon Badge ve Lite/Pro CTA (Toplu Batch'ten)

Bu release'e toplu halde giren bir dizi kullanıcı arayüzü iyileştirmesi:

  • Kurulum Sihirbazı başlığı artık plugin versiyonunu + Lite/Pro rozetini gösteriyor
  • Lisans sekmesi + Lisans menü sayfası "Ürün Sayfasını Aç" CTA butonu kazandı — kullanıcı ürünün satın alma sayfasına tek tıkla gidebiliyor
  • Geliştirici modu guardı: has_real_license() artık dev mode'da CTA görünmesini engellemiyor — geliştirme ortamlarında da CTA test edilebiliyor

📋 Değişiklik Kaydı

TürAçıklama
🖼️ DüzeltmeAraç kartı sizes özniteliği 220px → 500px (listeleme + favoriler + arşiv + arama sonuçları)
🖼️ DüzeltmeSearchResults varsayılan image_size 'medium''large'
🔔 Düzeltmerender_admin_header() <hr class="wp-header-end" /> emit ediyor — bildirimler artık header flex'ten çıkıyor
🔔 DüzeltmeAdmin toast CSS: sabit height/nowrap kaldırıldı, kelime kaydırma eklendi
🔔 DüzeltmeAdmin toast istifleme: #mhm-admin-toast-container + prepend — birden fazla toast üst üste binmiyor
🛡️ GüvenlikAdmin toast mesajları artık .text() ile yazılıyor — HTML enjeksiyonuna karşı güvende
📦 Düzeltme.distignore /vendor/ kök sabitlemesi — chart.min.js, flatpickr, swiper artık ZIP'te
🔧 Buildbin/build-release.py .gitignore tarzı leading-slash anchoring desteği
🧙 UXSetup Wizard header versiyon + Lite/Pro badge
🧙 UXSetup Wizard Lisans sekmesi + Lisans menüde "Ürün Sayfasını Aç" CTA

📁 Değiştirilen Dosyalar

  • templates/partials/vehicle-card.php (sizes 220px → 500px)
  • src/Admin/Frontend/Shortcodes/SearchResults.php (image_size 'medium' → 'large')
  • src/Admin/Core/Traits/AdminHelperTrait.php (wp-header-end marker)
  • assets/css/admin/settings.css (toast wrap + stacking CSS redesign)
  • assets/js/admin/settings.js (container + prepend + .text XSS guard)
  • .distignore (/vendor/ kök sabitleme)
  • bin/build-release.py (anchored pattern support)
  • src/Admin/Setup/SetupWizard.php (versiyon badge + CTA)
  • src/Admin/Licensing/LicenseAdmin.php (CTA)
  • mhm-rentiva.php, readme.txt, README.md, README-tr.md, changelog.json, changelog-tr.json (versiyon yükseltme)

✅ Kalite

  • 720 test, 2470 assertion, 6 atlandı (v4.25.0 baseline'ı 683/2277 idi)
  • PHPUnit tam yeşil

⬆️ Güncelleme Notu

v4.26.3 tamamen geriye dönük uyumlu bir patch sürümüdür — DB şemasında değişiklik yoktur, migration çalışmaz, ek bir yapılandırma gerekmez. Güncelleme yolları:

  • WordPress admin → Eklentiler → Güncelle
  • wp plugin update mhm-rentiva --allow-root
  • Manuel ZIP yükleme (v4.26.2'den itibaren otomatik migration destekleniyor)

Daha fazla bilgi için Doküman Sayfamızı ziyaret edin.