WordPress 7.1 · core/group
<!-- wp:group {"style":{"spacing":{"padding":
{"top":"100px","bottom":"100px"}
}}} -->Jedna wartość. To 100 pikseli przy 1440 i wciąż 100 pikseli przy 390.
BLOCKS
Dostępna edycja darmowa
MevvBlocks
Od nagłówka po stopkę, wewnątrz edytora blokowego.
Edytor blokowy WordPress jest szybki i natywny, ale nie potrafi nadać jednemu wymiarowi osobnej wartości dla komputera, tabletu i telefonu — sprawdzono to ponownie na WordPress 7.1 i jest to najczęstszy techniczny powód instalowania kreatora stron. MevvBlocks zamyka tę lukę i idzie dalej: sto jeden bloków, szablony motywu od nagłówka po stopkę, siatka wpisów i kreator pętli, silnik formularzy, wyskakujące okna, transformacje i maski, własny kod dla całej witryny, jeden ekran palety witryny, WebP i AVIF dla obrazów, buforowanie na poziomie bloku, audyt dostępności, który mówi prawdę, zamiast ją zakrywać, oraz ekran Core Web Vitals zasilany danymi własnych odwiedzających. Płótno edytora również przestało być przybliżeniem: edytor pyta serwer o dokładnie ten CSS, który wypisze strona, więc to, co zostało ułożone, trafia na produkcję. Dwadzieścia z tych bloków dotyczy WooCommerce i żaden z nich nie przerysowuje WooCommerce — wywołują jego własne szablony, dzięki czemu motyw i pozostałe wtyczki działają dalej.
Luka
Blok rdzenia potrafi przechować tylko jedną liczbę.
Gdy sekcja dostaje w edytorze blokowym wewnętrzny margines, ta wartość jest jedną liczbą. Ta sama liczba trafia na ekran o szerokości 1440 pikseli i na telefon o szerokości 390. Odstęp, który dobrze wygląda na komputerze, na telefonie rozrywa stronę na pół, a typowe odpowiedzi to ręcznie pisany CSS albo kreator stron. To trzecia odpowiedź: to samo ustawienie, a obok niego wartość dla tabletu i dla telefonu.
MevvBlocks · mevvsoft/container
<!-- wp:mevvsoft/container {"ayarlar":{
"padding": {"top":"100","unit":"px"},
"padding_tablet": {"top":"64", "unit":"px"},
"padding_mobile": {"top":"40", "unit":"px"}
}} -->To samo ustawienie, trzy wartości. Nic innego w bloku się nie zmienia.
Co wypisuje serwer
.e-con-1a2b { --padding-top:100px }
@media (max-width:1024px) { .e-con-1a2b { --padding-top:64px } }
@media (max-width:767px) { .e-con-1a2b { --padding-top:40px } }Zapisany HTML może nieść wartość tylko dla jednego rozmiaru ekranu, dlatego CSS powstaje w chwili żądania — i właśnie dlatego te wartości są wypisywane także po wygaśnięciu licencji.
- Komputer 100 px
- Tablet · ≤1024 64 px
- Telefon · ≤767 40 px
To, że bloki rdzenia nie potrafią zmieniać wartości zależnie od rozmiaru ekranu, sprawdzono w samym WordPress 7.1, a nie odczytano z dokumentacji: core/group obsługuje wewnętrzne marginesy, tło, minimalną wysokość, obramowania oraz układ flex lub grid — każde jako pojedynczą wartość. Podane wyżej progi ekranów są własnymi progami wtyczki, a zapytania medialne to dokładnie te, które sama zapisuje.
Możliwości
Zaczyna się od telefonu. Ale na tym się nie kończy.
Witryna potrzebuje więcej niż odstępów: formularza kontaktowego, nagłówka i stopki, które nadal da się edytować, palety, którą nadal da się zmienić. Można zaczynać od pustej strony albo przychodzić z kreatora stron — w obu przypadkach każda z tych funkcji powstała dlatego, że bez niej coś się psuło.
Każdy wymiar osobno dla każdego rozmiaru ekranu
Dopełnienie, rozmiar czcionki czy liczba kolumn mogą mieć osobną wartość dla komputera, tabletu i telefonu. Rdzeń WordPress tego nie potrafi — zostało to zmierzone na wersji 7.1, a nie założone. Ten sam panel wyjmuje też element z układu strony za pomocą pozycjonowania absolute lub fixed, a jego przesunięcia i z-index również ustawia się osobno dla każdego urządzenia.
Sto jeden bloków
Układ, tekst i media; menu, wyszukiwarka, siatka wpisów i kreator pętli; logo witryny, tytuł strony, okruszki nawigacyjne, informacje o wpisie i ramka autora do szablonów motywu; wideo, galeria, tabela, FAQ, oś czasu i kod; flip box, wezwanie do działania, animowany nagłówek, porównanie przed/po, punkty aktywne, panel wysuwany i przyciski kontaktu — a do tego dwadzieścia dla WooCommerce, od galerii produktu po koszyk i stronę zamówienia. Siedemdziesiąt osiem bez WooCommerce.
To, co widać w edytorze, jest tym, co wypisuje strona
Kanwa nie pokazuje już przybliżenia: dopełnienie, odstępy, kierunek, wyrównanie, tło, zaokrąglenie, cień, transformacja i pozycja pojawiają się z takimi wartościami, jakich użyje front witryny. Ten CSS wytwarza jeden silnik stylów, a edytor pobiera go z serwera — napisanie drugiego silnika w języku JavaScript dałoby dwie kopie, które z czasem się rozjeżdżają. Zmierzone: dawna kanwa różniła się od strony w 24 właściwościach układu; teraz jest to zero na 64.
Core Web Vitals od prawdziwych odwiedzających
Wskaźniki LCP, CLS i INP są mierzone w przeglądarkach osób, które odwiedzają witrynę, a na ekranie widnieje 75. percentyl z okna 28 dni — dane terenowe, takie same, na jakie patrzy Search Console, a nie pomiar laboratoryjny. Poniżej stu próbek żadna liczba nie jest w ogóle pokazywana, ponieważ percentyl z garstki pomiarów to szum. Nie są zbierane ani adresy IP, ani pliki cookie, ani identyfikatory, a dane nigdy nie opuszczają własnego serwera.
AI z własnym kluczem
Pisanie, przeredagowanie, skracanie, tłumaczenie i generowanie tekstu alternatywnego obrazów. Klucz API wprowadza sam użytkownik, a żądanie idzie z witryny prosto do dostawcy — tekst nigdy do nas nie trafia, a limit pozostaje własnością użytkownika. Wynik przychodzi jako propozycja, nie jest zapisywany wprost do bloku.
Notatki, których odwiedzający nigdy nie zobaczą
Do każdego bloku można przypiąć notatkę dla zespołu, oznaczyć ją jako załatwioną i usunąć. Żyje ona w edytorze i nie ma ani jednego punktu zaczepienia na froncie witryny, który mógłby ją wypisać.
Szybciej — i zmierzone
Wynik renderowania bloków jest buforowany, a obrazy są konwertowane do formatu WebP lub AVIF obok oryginałów — oryginały pozostają nietknięte. Zmierzone: czas renderowania bloku niższy o 33–72%, waga obrazów niższa o 39–78%. Obrazy są serwowane przez element <code><picture></code>, więc do wszystkich trafia ten sam kod HTML; to decydowanie o każdym odwiedzającym po stronie serwera zatruwa pamięć podręczną strony. Na telefonach można też podać zupełnie inny obraz — nie mniejszą kopię tego samego, lecz inne ujęcie — a wyboru i tak dokonuje przeglądarka.
Silnik formularzy, a nie zależność
Szesnaście typów pól, walidacja po stronie serwera, pułapka honeypot połykana w ciszy oraz ekran, na którym przechowywane są zgłoszenia. Formularz działa bez języka JavaScript, bo to jedyna część strony, która naprawdę coś robi.
Szablony motywu z warunkami
Nagłówek, stopka, wpis, archiwum, wyszukiwanie i 404 — zbudowane w tym samym edytorze WordPress, z którego już się korzysta, a nie w drugim, który musielibyśmy stale dostrajać do rdzenia.
Wyskakujące okna, które przetrwają przełączenie
Otwierają się przy wczytaniu, po przewinięciu na daną głębokość, przy zamiarze wyjścia, po kliknięciu albo po okresie bezczynności. Częstotliwość liczona jest w przeglądarce samego odwiedzającego, więc nikogo nie trzeba identyfikować na serwerze.
Jeden ekran dla palety witryny
Kolory i typografia w jednym miejscu, pod oryginalnymi nazwami zmiennych — dzięki temu strony zbudowane przed przełączeniem przejmują nową paletę, zamiast tracić swoje odwołania.
Audyt dostępności, a nie nakładka
Do strony nie jest doczepiany żaden widżet twierdzący, że witryna jest dostępna. Narzędzie raportuje, czego zabrakło w każdym bloku — brakujący tekst alternatywny, zaburzona kolejność nagłówków, słaby kontrast — jeszcze w trakcie edycji.
Slider, zakładki i akordeon bez biblioteki
Przewijanie to natywne scroll-snap, a akordeon to element details. Jeżeli skrypt się nie wczyta, nic nie zostaje ukryte: treść ukryta to treść niedostępna.
Renderowane na serwerze, nigdy niezwiązane z licencją
Zapisany kod HTML potrafi nieść wartość tylko dla jednego rozmiaru ekranu, dlatego CSS powstaje w chwili żądania. Na tej ścieżce nie ma ani jednego sprawdzenia licencji — wygasła licencja nigdy nie gasi opublikowanej strony.
Jak to działa
Zwykły edytor z takimi kontrolkami, jakie ma kreator.
Żadnego drugiego płótna, żadnej osobnej aplikacji. Wystarczy zaznaczyć blok, a panel po prawej stronie daje to, co dałby kreator stron — osobno dla komputera, tabletu i telefonu.
Zaznacz blok, panel jest tuż obok
Typ układu, kierunek, minimalna wysokość, szerokość treści, wyrównanie, odstęp. Zwykłe bloki w zwykłym edytorze — nie ma się czego uczyć, a treść pozostaje standardowym znacznikiem bloków w polu post_content.
Transformacje, maski i notatki dla zespołu na każdym bloku
Obrót, skalowanie, pochylenie, odbicie i maska — każde z osobnymi wartościami dla komputera, tabletu i telefonu. Do tego notatka przypięta do bloku dla zespołu: żyje w edytorze i nigdy nie trafia na stronę.
I naprawdę działa to na stronie
Flip box na prawdziwej stronie: przednia strona, tylna strona i przycisk, który działa także z klawiatury — nagranie poniżej pochodzi z prawdziwej strony, nie z makiety. Blok renderuje się na serwerze, więc wygasła licencja nigdy go nie gasi.
A potem mówi, czego naprawdę doświadczyli odwiedzający
LCP, CLS i INP mierzone w przeglądarkach prawdziwych odwiedzających, pokazane jako 75. percentyl z 28 dni — dane terenowe tego rodzaju, na które patrzy Search Console, a nie pomiar laboratoryjny. Ekran poniżej pochodzi z prawdziwej instalacji: warto zwrócić uwagę na jedną komórkę, która odmawia pokazania liczby, bo czternaście próbek to nie percentyl.
Obrazy: WebP i AVIF, bez ruszania oryginałów
Jeden ekran. Plik, który się nie zmniejszył, nie zostaje zachowany. A jeśli tę pracę naprawdę wykonuje inna wtyczka, MevvBlocks sam się wycofuje i mówi dlaczego — pytanie nie brzmi „czy jest zainstalowana”, lecz „czy naprawdę może działać”.
Nasz własny sklep działa na tym rozwiązaniu
mevvshop.com to prawdziwy sklep WooCommerce, a jego strony są zbudowane z tych bloków — nagłówek, stopka, karty produktów i cała reszta. Każda liczba na tej stronie została zmierzona tam albo na naszej instalacji demonstracyjnej, a nie oszacowana.
Zmierzone
Liczby, które policzyliśmy, a nie zaokrągliliśmy.
Każdą liczbę poniżej można policzyć w kodzie źródłowym wtyczki. Tam, gdzie liczba brzmiałaby jak obietnica wydajności, nie pada: waga strony zależy od motywu, hostingu i pamięci podręcznej, a tej konkretnej nie mierzyliśmy.
- 101
- bloków — 78 bez zainstalowanego WooCommerce
- 3.217
- testów w zestawie testowym, wszystkie przechodzą
- 16
- typów pól formularza, a w wersji Pro dodatkowo pole pliku
- 6
- typy szablonów: nagłówek, stopka, wpis, archiwum, wyszukiwanie, 404
- 5
- wyzwalacze wyskakujących okien: wczytanie, przewinięcie, wyjście, kliknięcie, bezczynność
- 48
- dołączonych ikon, narysowanych w jednym polu 24 pikseli
- 29.828
- bajtów zamrożonego kodu HTML, który bloki menu, obrazu, ikon społecznościowych i praw autorskich uczyniły z powrotem edytowalnym w naszym własnym sklepie
- 0
- różnic w układzie między płótnem edytora a opublikowaną stroną — na 64 porównane właściwości
- 0
- sprawdzeń licencji na ścieżce renderowania — pilnuje tego test
Policzone w kodzie źródłowym wtyczki 1 września 2026 roku. Dla skali i wyłącznie dla skali: edycja darmowa i Pro to 1,5 MB i 46 KB kodu PHP, JS i CSS, podczas gdy Elementor, Ultimate Addons i Header Footer Elementor zajęły razem 178 MB na dysku w instalacji zmierzonej 31 sierpnia. To różnica w rozmiarze, a nie deklaracja szybkości — i w dużej części wynika po prostu z funkcji, których nie mamy. Do odwiedzającego dociera inna liczba, mniejsza: 20 KB kodu CSS i 5 KB kodu JavaScript na stronie.
Cennik
Wszystkie ceny zawierają VAT.
Wygasła licencja nigdy nie gasi strony. Wartości zapisane przez panel edycji Pro nadal wypisuje edycja darmowa, a formularz nadal przyjmuje zgłoszenia. Zamyka się panel edycji, a nie wygląd witryny.
1 USD = 49,5932 ₺ (kurs İşbank)
Start
Od nagłówka po stopkę, wewnątrz edytora blokowego.
Wystarczy zainstalować edycję darmową: bloki, formularze, szablony motywu, wyskakujące okna oraz dziewiętnaście gotowych sekcji i stron już w niej są. Pro dodaje panel do edycji wartości dla komputera, tabletu i telefonu. Traci się panel, a nie wygląd witryny: gdy licencja wygaśnie, te wartości nadal są wypisywane.
Informacje o produkcie
- Typ produktu
- Pakiet bloków dla WordPress
- Czym jest
- Kreator stron wewnątrz edytora blokowego
- Bloki
- 101, albo 78 bez WooCommerce
- Edycja darmowa
- Bloki, formularze, szablony motywu, wyskakujące okna, style globalne, optymalizacja obrazów, buforowanie bloków, własny kod, audyt dostępności
- Pro
- Panel komputer/tablet/telefon, własny CSS dla każdego bloku, logika warunkowa formularza i pole pliku
- Co pobiera odwiedzający
- 20 KB CSS + 5 KB JS na stronie — zmierzone na stronie głównej wp-demo, 1 września 2026
- Rozmiar kodu źródłowego
- Free 1,5 MB + Pro 46 KB kodu PHP, JS i CSS, 1 września 2026
- Wymagania
- WordPress 6.0+, PHP 8.1+