# Sözleşme kutusu ve sipariş butonu arasındaki boşluk

28 Ekim 2026. Değişiklik 2.4.13 sürüm paketine dahil edilmiştir ve ayrı yerel test mağazasında doğrulanmıştır. Önceki `tags/2.4.12` değiştirilmemiştir.

## Gerçek neden ve çözüm

`build/style-irem-block.css` dosyasında boşluk kuralları bulunmasına rağmen WooCommerce entegrasyonu stili yalnızca kaydediyordu. Blok metadata'sında `style` bağlantısı bulunmadığından WordPress dosyayı bloğun yanında yüklemiyordu. Gerçek ödeme ekranında sözleşme kapsayıcısının margin değeri `0px`, butona olan mesafesi `0px` olarak ölçüldü. Yüklenen stiller listesinde bu CSS yoktu.

Kaynak `assets/js/blocks/block.json` dosyasına resmi WordPress blok API'sinin `style: file:../../style-irem-block.css` tanımı eklendi. Blok varlık sürümü önbellek yenilenmesi için `2.0.1` yapıldı; bu eklentinin yayımlanmış sürüm numarası değildir.

Yeni `assets/js/blocks/style.css`, sözleşme alanına `margin-block: 24px` uyguluyor. Kurallar yalnızca blok checkout'taki sözleşme kapsayıcısını ve editörde bu bloğu hedefliyor. Renk, yazı tipi, buton boyutu, diğer checkout bloklarının sırası ve klasik checkout stilleri değiştirilmedi. Önceden yüklenmeyen CSS'deki ek çerçeve ve padding etkinleştirilmedi; istenen boşluk normal belge akışında sağlandı.

`scripts/build.mjs`, kaynak CSS'yi küçültüp `build/style-irem-block.css` olarak üretiyor; yatay yön içermeyen mantıksal kurallar RTL çıktısına da aktarılıyor. Kaynak/generated metadata ve iki JavaScript paketi yeniden derlendi. Stil dosyası frontend ve editör için WordPress tarafından bağlanıyor. DOM taşıma, CSS order, tema özel seçicisi, negatif margin, butona müdahale veya `!important` eklenmedi.

Resmi API: [WordPress block.json stil kaydı](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style).

## Gerçek tarayıcı matrisi

Mevcut ayrı WordPress 7.1.3 / WooCommerce 11.2.1 / tr_TR / PHP 8.2.30 kurulumunda, uygulama içi tarayıcıyla gerçek sayfalar açıldı. Her temada 1280×900 ve 390×844 boyutlarında blok ve klasik ödeme kontrol edildi: toplam 16 görünüm.

| Tema | Sürüm | Blok ödemede masaüstü kutu–buton mesafesi | Mobil blok kapsayıcı alt boşluğu | Klasik ödemede kutu–buton mesafesi |
| --- | --- | --- | --- | --- |
| Twenty Twenty-Five | 1.5 | 24px | 24px | 16px |
| Twenty Twenty-Four | 1.6 | 24px | 24px | 16px |
| Storefront | 4.6.2 | 24px | 24px | 16px |
| Astra | 4.14.1 | 24px | 24px | 16px |

WooCommerce mobilde sipariş özetini sözleşmeyle buton arasında gösterebildiğinden mobilde butona olan toplam mesafe daha büyüktür; buna müdahale edilmedi. 24px değeri sözleşme kapsayıcısının alt boşluğudur.

Her görünümde tek onay kutusu, görünür alan içinde kalan kapsayıcı ve yeterli dikey mesafe doğrulandı. Sekiz blok ödeme görünümünün her birinde onaysız gönderim Türkçe hata mesajını gösterdi, `aria-invalid=true` oluştu ve odak `ozel_sozlesmeler` kutusuna geçti. Blok CSS'sinin gerçekten yüklendiği tarayıcıdan ölçüldü. Klasik ödeme ekranında bu blok CSS'si yüklenmedi ve mevcut 16px aralık korundu.

Temalar yalnızca ayrı yerel test kurulumunda değiştirildi. Test sonunda başlangıçtaki Twenty Twenty-Five temasına dönüldü; geçici tarayıcı ekran boyutu sıfırlandı. Ekran görüntüleri ve 16 ölçümün JSON kaydı `/Users/yemlihakorkmaz/Local Sites/wc-korkmaz-contract-qa/setup/spacing/` dizinindedir.

## Otomatik kontroller ve sınırlar

- `npm run build`: başarılı; LTR/RTL CSS ve JavaScript paketleri yeniden üretildi.
- `npm test`: 6 JavaScript/React testi başarılı.
- `tests/wp-integration.php`: 49 gerçek WordPress/WooCommerce kontrolü başarılı. Eklenen dört kontrol stilin blok metadata'sına bağlı olduğunu, gerçekten kayıt edildiğini, blok render edilince kuyruğa alındığını ve doğru CSS/sürümün kullanıldığını denetliyor. Sunucu tarafı kabul ve klasik nonce testleri de geçti.
- `tests/php-regression.php`: WordPress 7.1.3 ile 42 izole PHP kontrolü başarılı.
- Tema/görünüm ölçümlerinin dosya üzerinden otomatik denetimi: 16/16 başarılı.

Yeni tarayıcı testlerinde sipariş tamamlanmadı; onaysız doğrulama ve görünüm denendi. Sözleşme kabulü, sipariş oluşturma ve PDF üretimi kodları bu değişiklikte değiştirilmedi. Önceki geniş sipariş/PDF testleri ayrı raporlarda kayıtlıdır.

Örnek görseller için tema değişimi sırasında WordPress thumbnail üretiminden `Incorrect APP1 Exif Identifier Code` uyarıları günlüğe düştü; kaynak çekirdeğin görsel metadata okuyucusu ve örnek JPEG'lerdir. Bunlar gizlenmedi ve eklenti CSS hatası olarak değerlendirilmedi.

Canlı müşteri mağazası, Safari ve tüm üçüncü taraf temalar denenmedi. Sonuçlar tabloda belirtilen gerçek tema/sürüm ve ekran boyutları için doğrulanmıştır.