MevvBlocks Documentation

Instalacja

Wtyczka MevvBlocks wymaga WordPress 6.0 lub nowszego oraz PHP 8.1 lub nowszego. Nie ma żadnej innej zależności: żadnej zewnętrznej biblioteki, żadnej czcionki z cudzego serwera, żadnego kroku budowania.

Wgraj i włącz wtyczkę.
Należy otworzyć stronę w edytorze bloków i dodać blok Kontener.
W jego wnętrzu umieszcza się wybrane bloki. Można je znaleźć w kategorii Projekt.
Resztą zarządza się z menu MevvBlocks na pasku bocznym panelu administracyjnego.

WooCommerce jest opcjonalny. Jego instalacja dodaje dwa bloki.
MevvBridge jest opcjonalna. Po przejściu z kreatora Elementor to właśnie wtyczka MevvBlocks sprawia, że tamte strony znów dają się edytować.
MevvLegal jest opcjonalna. Gdy jest obecna, blok mapy przekazuje jej swoje osadzenie, aby mapa nie wczytała się przed wyrażeniem zgody przez odwiedzającego.

Wersja Pro to osobna wtyczka instalowana obok darmowej i deklaruje darmową wtyczkę jako twarde wymaganie. Klucz licencyjny wprowadza się na ekranie Lisans (licencja). Bez wersji Pro wtyczka MevvBlocks w ogóle nie wysyła żądań do naszych serwerów.

Styl osobno dla każdego rozmiaru ekranu — luka, którą to zamyka

Bloki rdzenia przyjmują jedną wartość dopełnienia, jedną minimalną wysokość, jedną liczbę kolumn. Ta wartość obowiązuje na każdym ekranie. Jeżeli sekcja potrzebuje 100 pikseli dopełnienia na komputerze i 40 na telefonie, rdzeń nie potrafi tego wyrazić — a ta jedna luka jest najczęstszym technicznym powodem instalowania kreatora stron.

Wtyczka MevvBlocks przechowuje trzy wartości zamiast jednej — komputer, tablet, telefon. Progi są stałe:

Komputer: Bez zapytania medialnego — wartość bazowa.
Tablet: Obowiązuje od 1024 pikseli w dół.
Telefon: Obowiązuje od 767 pikseli w dół.

Te same dwie liczby używane są wszędzie indziej we wtyczce — przy progu menu hamburgerowego, przy liczbach kolumn siatki. Swobodnego pola pikseli celowo nie udostępniono: ktoś, kto wybrałby 900, dostałby hamburger przy 900, podczas gdy jego dopełnienie nadal zmieniałoby się przy 1024, a dwa systemy breakpointów oznaczają układy sprzeczne same ze sobą.

Wartości żyją we własnych atrybutach bloku, wewnątrz pola post_content — nie w osobnej tabeli i nie w polach meta wpisu. CSS powstaje na serwerze, w chwili żądania, i jest wypisywany jako mały blok stylów obok elementu, do którego należy.

Dlaczego nie zapisywać CSS razem ze stroną? Ponieważ zapisany kod HTML potrafi nieść tylko jeden breakpoint. Dopiero renderowanie w chwili żądania czyni trzy wartości w ogóle możliwymi — i dlatego wygasła licencja nigdy nie może zgasić opublikowanej strony: na tej ścieżce nie ma ani jednego sprawdzenia licencji.

Podgląd w edytorze — co pokazuje i czego nadal nie potrafi

Na tej stronie było kiedyś napisane, że podgląd jest przybliżeniem. W zakresie układu już nim nie jest. Kanwa prosi teraz serwer o ten sam CSS, który wypisze strona, i stosuje go do tych samych klas opakowujących, których używa front witryny.

Co jest dziś w kanwie wierne: układ kontenera (kierunek, kolumny, odstęp, wyrównanie), dopełnienie, margines, tło, obramowanie, zaokrąglenie, cień, minimalna wysokość, typografia, transformacje, maski i pozycjonowanie — a wartości dla tabletu i telefonu włączają się przy zmianie rozmiaru, ponieważ kanwa jest ramką iframe i zapytania medialne działają w jej wnętrzu.

Dlaczego CSS pochodzi z serwera, a nie jest odtwarzany w języku JavaScript: silnik stylów jest jeden, a druga kopia rozjechałaby się z pierwszą. W dniu, w którym ktoś dodałby ustawienie do jednej, a zapomniał o drugiej, edytor byłby błędny, twierdząc jednocześnie, że jest dokładny — gorzej niż dawne uczciwe przybliżenie.

Co nadal nie jest dokładne: reguły celujące w znacznik wewnątrz bloku. W kanwie blok rysuje własne elementy edycyjne, więc selektor napisany pod strukturę frontu nie ma czego dopasować. Zamknięcie tej luki oznacza uczynienie znacznika edycyjnego identycznym z opublikowanym dla każdego ze stu jeden bloków; to prawdziwa praca i nie została wykonana.

Zmierzone, a nie zadeklarowane: ta sama sekcja została wyrenderowana dwa razy przy tym samym arkuszu stylów — raz tak, jak wypisuje ją front witryny, raz tak, jak buduje ją kanwa — i porównano szesnaście właściwości układu na każdym elemencie. Dawna kanwa różniła się w dwudziestu czterech z nich. Teraz jest to zero na sześćdziesiąt cztery. Narzędzie, które to mierzy, znajduje się w kodzie źródłowym wtyczki (tools/onizleme-esitlik.js), a najpierw skierowano je na stary znacznik, aby udowodnić, że nie jest ślepe.

Bloki

Sto jeden bloków, albo siedemdziesiąt osiem bez WooCommerce. Wszystkie są w wersji darmowej; żaden blok nie jest wyłącznie dla Pro. Znajdują się w kategorii Projekt we wstawiaczu.

Układ i tekst: Kontener, Nagłówek, Tekst, Przycisk, Separator, Odstęp, Kotwica, Obraz, Shortcode, Cytat, Lista kontrolna, Tabela, Kod
Prezentacja: Opinia, Ikona, Boks z ikoną, Lista z ikonami, Boks z obrazem, Ikony społecznościowe, Prawa autorskie, Członek zespołu, Ocena gwiazdkowa, Tabela cenowa, Cennik, Plakietka, Baner, Pasek logotypów, Boks z liczbą, Alert
Interakcja: Slider, Slajdy, Zakładki, Akordeon, Menu nawigacji, Formularz wyszukiwania, Formularz, Formularz logowania, Formularz rejestracji, Spis treści, Udostępnianie społecznościowe, FAQ, Oś czasu, Kroki
Konwersja: Flip Box, Wezwanie do działania, Animowany nagłówek, Przed / po, Punkt aktywny, Panel wysuwany, Przyciski kontaktu, Pasek ogłoszeń, Porównanie, Pasek danych, Postęp czytania, Czas czytania, Powrót na górę, Tekst na ścieżce
Media: Wideo, Audio, Galeria
Dane i czas: Siatka treści, Odliczanie, Licznik, Pasek postępu, Mapa
Witryna i szablony motywu: Logo witryny, Tytuł witryny, Opis witryny, Tytuł strony, Okruszki nawigacyjne, Informacje o wpisie, Ramka autora, Komentarze, Poprzedni / następny, Tytuł archiwum, Opis archiwum, Mapa witryny
WooCommerce (20): Produkty, Kategorie produktów, Galeria produktu, Tytuł produktu, Cena produktu, Ocena produktu, Krótki opis, Opis produktu, Meta produktu, Informacje dodatkowe, Zakładki produktu, Dodaj do koszyka, Stan magazynowy, Produkty powiązane, Upsell, Sprzedaż krzyżowa, Mini koszyk, Koszyk, Strona zamówienia, Moje konto, Śledzenie zamówienia, Sortowanie produktów, Liczba wyników — dodawane tylko wtedy, gdy WooCommerce jest aktywny

Efekty ruchu nie są blokiem: do każdego bloku MevvBlocks dodawany jest panel Ruch.

Nic tutaj nie jest ukrywane, gdy JavaScript się nie wczyta. Zakładki pokazują wszystkie panele, akordeon to natywny element details, slider się przewija, a strzałki wypisywane są jako ukryte, dopóki skrypt nie może nimi sterować — pokazanie przycisku, który nic nie robi, to pokazanie zepsutego interfejsu. Treść ukryta to treść niedostępna.

Siatka treści i kreator pętli

Blok Siatka treści odpytuje wpisy, strony lub produkty i układa je. Stronicowanie to zwykłe odnośniki, więc działa także przy wyłączonym JavaScripcie.

Sortowanie to lista zamknięta — data, data modyfikacji, tytuł, kolejność w menu, losowo — ponieważ ta wartość trafia do bazy danych.
Nagłówki kart mieszczą się w zakresie od h2 do h6. h1 nie jest oferowany: siatka kart na stronie, która ma już h1, zaburzyłaby kolejność nagłówków.
Jeden odnośnik na kartę. Uczynienie odnośnikami obrazu, tytułu i napisu „czytaj dalej” sprawia, że czytnik ekranu ogłasza ten sam cel trzy razy.
Siatka buforuje znalezione identyfikatory wpisów, nigdy wyrenderowany kod HTML, a bufor unieważnia zapis dowolnego wpisu — dlatego sytuacja „opublikowałem wpis, a on się nie pokazuje” nie może się zdarzyć.

Kreator pętli pozwala samodzielnie zaprojektować kartę zamiast korzystać z wbudowanej. Tworzy się szablon typu Karta pętli, buduje go ze zwykłych bloków z dynamicznymi powiązaniami i wybiera w ustawieniach siatki.

Podczas edycji szablonu karty nie ma kontekstu wpisu, więc dynamiczne powiązania pokazują swoje statyczne wartości zastępcze. A jeżeli szablon jest pusty, usunięty, zostawiony jako wersja robocza albo odwołuje się sam do siebie, siatka wraca do wbudowanej karty, zamiast nie wypisywać nic. Zagnieżdżanie pętli ograniczone jest do dwóch poziomów.

Silnik formularzy

Szesnaście typów pól, z walidacją po stronie serwera. Formularz jest jedyną częścią strony, która naprawdę coś robi, więc działa bez języka JavaScript: zwykłe wysłanie metodą POST otrzymuje tę samą walidację i te same komunikaty co wysłanie skryptowe.

Typy pól: Tekst, E-mail, Telefon, Adres (URL), Liczba, Data, Godzina, Ukryte, Długi tekst, Lista rozwijana, Lista wielokrotnego wyboru, Wybór pojedynczy, Wiele pól wyboru, Pole wyboru, Tekst zgody (KVKK) i Nagłówek podrzędny. Pro dodaje pole przesyłania pliku.
Dokąd trafiają zgłoszenia: Zarówno do własnej tabeli, jak i na e-mail. Rekord zapisywany jest najpierw, a wiadomość wysyłana w drugiej kolejności, ponieważ dostarczenie poczty zawodzi znacznie częściej niż zapis do bazy danych.
Odczytywanie zgłoszeń: MevvBlocks → Zgłoszenia formularzy. Pro dodaje tam eksport do CSV.
E-mail powiadamiający: Nadawcą jest witryna, nigdy odwiedzający. Użycie adresu odwiedzającego jako nadawcy to najczęstszy pojedynczy powód, dla którego poczta z formularza nigdy nie dociera — odrzucają ją SPF i DMARC. Jego adres trafia zamiast tego do pola Reply-To.

Spamem zajmują się trzy warstwy i żadna CAPTCHA: podpis niezależny od sesji, minimalny czas wypełniania oraz pole honeypot. Zgłoszenie, które wypełnia honeypot, jest po cichu przyjmowane i odrzucane — pokazanie błędu powiedziałoby botowi, że został złapany, a przy kolejnej próbie pominąłby to pole.

Dlaczego podpis, a nie nonce z systemu WordPress? Nonce jest przywiązany do sesji i do dwunastogodzinnego okna. Na buforowanej witrynie ten sam kod HTML serwowany jest godzinami albo dniami, nonce w jego wnętrzu dawno wygasł, a formularz po cichu przestaje działać. To najczęstsza terenowa awaria wtyczek formularzy. Podpis stosowany tutaj jest ważny przez siedem dni i nie zależy od tego, kto przegląda stronę.

Adres IP zgłoszenia nigdy nie jest przechowywany w czytelnej postaci — zapisywany jest wyłącznie skrót, solony kluczem własnej witryny, dzięki czemu rekordów z dwóch różnych witryn nie da się ze sobą zestawić.

Przechowywanie zgłoszeń nie jest powiązane z licencją. Gdyby było, dzień wygaśnięcia płatności byłby dniem, w którym klient zaczyna tracić dane.

Szablony motywu

Siedem typów szablonów, budowanych w tym samym edytorze WordPressa, z którego już się korzysta — Nagłówek, Stopka, Pojedyncza treść, Archiwum, Wyniki wyszukiwania, Nie znaleziono (404) i Karta pętli. Drugi edytor byłby kolejną rzeczą, którą trzeba by utrzymywać w zgodzie z rdzeniem WordPressa.

Typ i warunki znajdują się w zwykłym pudełku na pasku bocznym, a nie w panelu React — klasyczne pudełko zapisuje się także przy wyłączonym języku JavaScript i nie psuje się, gdy zmienia się API edytora.

Warunki: Cała witryna, strona główna, typ wpisu, kategoria albo pojedynczy element treści. Pozostawienie pustych pól oznacza całą witrynę.
Gdy pasuje kilka: Wygrywa warunek najwęższy.
Warunki źle sformułowane: Odrzucane przy zapisie i przechowywane jako puste, zamiast być zachowane jako nieprawidłowy tekst, przez który szablon po cichu nigdy by się nie pojawił.

Szablony nagłówka i stopki umieszczane są wyłącznie w motywach Astra i GeneratePress. Jeżeli motyw nie ma przepisu, w ogóle nie są wypisywane i ekran o tym informuje — doczepienie nagłówka do motywu, którego nie potrafimy podnieść, oznacza gwarantowane dwa nagłówki. Szablony wpisu, archiwum, wyszukiwania i 404 działają w każdym motywie, ponieważ zastępują pętlę, a własny nagłówek i stopkę motywu zostawiają na miejscu.

Szablon Karty pętli nigdy sam się nigdzie nie umieszcza. Wybiera go blok siatki.

Biblioteka wzorców i ustawienia wstępne bloków

Dwadzieścia gotowych wzorców: szesnaście sekcji i cztery pełne strony. Są zarejestrowane jako zwykłe wzorce WordPressa, więc wstawia się je w znany już sposób — przycisk +, zakładka Wzorce, a następnie kategoria Sekcje MevvBlocks lub Strony MevvBlocks.

Nie napisano do tego własnego okna modalnego. Okno wstawiania z rdzenia daje już za darmo podgląd, wyszukiwanie, nawigację klawiaturą i tłumaczenie, a to, co wstawia, jest zwykłym znacznikiem bloków — nie ma się w czym zamknąć.

Wzorce dostarczane są bez obrazów. Zaciąganie obrazów skądinąd to kwestia praw autorskich, kwestia prywatności i uzależnienie wyglądu strony od tego, czy cudzy serwer stoi. Bloki obrazów są na swoim miejscu, z wypełnionym tekstem alternatywnym; obraz wybiera sam użytkownik.

Ustawienia wstępne bloków zapisują ustawienia wyglądu bloku pod nazwą i stosują je do innego bloku tego samego typu. Treść celowo nie jest zapisywana — tekst, odnośniki, obrazy i elementy list są usuwane, więc zastosowanie ustawienia wstępnego nigdy nie nadpisuje tego, co zostało napisane.

Wzorce nie są w ogóle rejestrowane na froncie witryny. Generowanie ich znacznika przy każdej odsłonie strony zmierzono na 109 KB i 3,59 ms — zapłacone za nic, skoro nikt nie wstawia wzorca w trakcie czytania.

Wyskakujące okna

Buduje się je w edytorze bloków jak wszystko inne; wyzwalacze, warunki i częstotliwość znajdują się w panelu bocznym tego samego ekranu. Zarządzanie odbywa się w MevvBlocks → Wyskakujące okna.

Wyzwalacze: Przy wczytaniu strony z opóźnieniem, po przewinięciu o dany procent, przy zamiarze wyjścia, po kliknięciu pasującym do selektora CSS albo po okresie aktywnego czasu. Zegar aktywności zatrzymuje się, gdy karta jest w tle.
Warunki: Cała witryna, strona główna, wybrane strony, typ wpisu albo kategoria; zalogowani, niezalogowani albo wszyscy; oraz osobno dla każdego urządzenia.
Częstotliwość: Za każdym razem, raz na sesję albo raz na N dni.
Wygląd: Położenie, szerokość, czy tytuł jest widoczny, czy kliknięcie poza oknem je zamyka, oraz animacja otwarcia.

Licznik „nie pokazuj ponownie” trzymany jest w przeglądarce samego odwiedzającego, a nie na serwerze. Liczenie go po stronie serwera oznaczałoby wykucie trwałej tożsamości dla każdego odwiedzającego tylko po to, by nie pokazać mu pudełka dwa razy.

O kierowaniu na urządzenia decyduje przeglądarka, a nie węszenie w nagłówku user agent. Nagłówek user agent nie odróżni wiarygodnie tabletu od telefonu, a za pamięcią podręczną całych stron serwowałby wszystkim urządzenie pierwszego odwiedzającego. Jeżeli nie wybrano żadnego wyzwalacza, wyskakujące okno wraca do wczytania strony; jeżeli nie wybrano urządzenia, wraca do wszystkich trzech — okno, które po cichu nigdy się nie pojawia, jest gorsze od takiego, które pojawia się zbyt często.

Paleta witryny

Jeden ekran dla kolorów i typografii, dostępny zarówno z menu MevvBlocks, jak i z sekcji Wygląd, bo tam ludzie go szukają. Każda pozycja pokazuje własną nazwę zmiennej, a bloki odwołują się do tych nazw, a nie do dosłownych wartości.

To właśnie pozwala stronie zbudowanej przed przełączeniem przejąć nową paletę zamiast stracić swoje odwołania — nazwy zmiennych pozostają tymi samymi, których strony już używają.

Nie ma usuwania. Zestaw koloru albo typografii można zostawić pusty, ale jego usunięcie sprawiłoby, że każdy blok, który się do niego odwoływał, wskazywałby w pustkę. Opróżnienie jest odwracalne; usunięcie odwołania nie jest.

Audyt dostępności

MevvBlocks → Dostępność skanuje opublikowane strony, wpisy i szablony oraz raportuje, co każdy blok pominął: obrazek bez tekstu alternatywnego, pusty nagłówek, przycisk bez nazwy lub bez celu, zaburzoną kolejność nagłówków, zbyt niski kontrast.

Ten sam audyt dostępny jest jako panel na pasku bocznym jeszcze w trakcie edycji, czyli tam, gdzie naprawa znaleziska kosztuje najmniej.

To celowo nie jest nakładka. Warstwy doczepiające do strony „menu dostępności” niczego nie naprawiają: obraz bez tekstu alternatywnego nadal go nie ma, a tekst o niskim kontraście nadal jest nieczytelny. Niesienie twierdzenia „ta witryna jest dostępna” bez pokrycia w prawdzie to gorsza pozycja niż niegłoszenie żadnego twierdzenia — witryny korzystające z nakładek były pozywane właśnie o to. To narzędzie mierzy i informuje; naprawa należy do właściciela witryny.

Kontrast raportowany jest tylko wtedy, gdy oba kolory są rzeczywiście znane. Zgadywanie odziedziczonego koloru dawałoby ostrzeżenia, z którymi nie da się nic zrobić.

Szybkość — buforowanie elementów i obrazy

Dwie osobne rzeczy, obie w edycji darmowej.

Buforowanie elementów. Wynik renderowania bloku jest przechowywany, zamiast być odbudowywany przy każdym żądaniu. Zmierzone: czas renderowania bloku niższy o 33–72%. Korzysta z trwałej pamięci podręcznej obiektów (Redis, Memcached), gdy taka istnieje, a w przeciwnym razie z transientów.

Blok, którego wynik zależy od odwiedzającego, zapytania albo chwili, nigdy nie jest przechowywany: formularze, logowanie, rejestracja, mini koszyk, siatka produktów, wyszukiwanie, koszyk, strona zamówienia, moje konto, shortcode. Shortcode jest na tej liście, ponieważ nie wiemy, co jest w jego wnętrzu — raz zamroziliśmy token wtyczki WPForms na działającej witrynie i od tamtej pory reguła jest egzekwowana w kodzie źródłowym.

Optymalizacja obrazów. Obok oryginału każdego wgranego obrazu zapisywana jest kopia WebP (opcjonalnie AVIF); oryginał pozostaje nietknięty. Zmierzone: 39–78% mniej. Plik, który się nie zmniejsza, nie jest zachowywany — małe płaskie pliki PNG zwykle rosną w formacie WebP.

Obrazy serwowane są wewnątrz elementu <picture>: adres każdego formatu jest w kodzie HTML, a wyboru dokonuje przeglądarka. Decydowania po stronie serwera na podstawie nagłówka Accept celowo nie użyto — gdy ten sam adres różni się w zależności od odwiedzającego, każda pamięć podręczna na drodze może podać niewłaściwy plik niewłaściwej osobie.

Jeżeli inna wtyczka naprawdę wykonuje to zadanie (LiteSpeed, ShortPixel, Imagify, Smush, EWWW, Optimole, Converter for Media), wtyczka MevvBlocks sama się wycofuje i mówi dlaczego. Pytanie nie brzmi „czy jest zainstalowana”, lecz „czy faktycznie może działać”: LiteSpeed z włączoną optymalizacją obrazów, ale bez klucza chmurowego, nie robi zupełnie nic.

Core Web Vitals — mierzone na własnych odwiedzających

Core Web Vitals to z definicji dane terenowe: mierzone w przeglądarkach prawdziwych odwiedzających, raportowane jako 75. percentyl z okna 28 dni. Pomiar w narzędziu Lighthouse to co innego — jedna maszyna, jedna sieć, jeden moment. Świadomość, co jest czym, rozstrzyga zamieszanie w rodzaju „PageSpeed pokazuje 98, a Search Console świeci na czerwono”.

Ekran Web Vitals pokazuje trzy liczby dla każdej klasy urządzeń:

LCP: Ile czasu zajmuje pojawienie się głównej treści. Dobry wynik to 2,5 sekundy lub mniej.
CLS: Jak bardzo strona się przesuwa, zanim się ustabilizuje. Dobry wynik to 0,1 lub mniej.
INP: Ile czasu zajmuje stronie odpowiedź na stuknięcie lub kliknięcie. Dobry wynik to 200 ms lub mniej.

Skrypt mierzący ma około kilobajta i nie wczytuje żadnej biblioteki — pracę wykonuje własny PerformanceObserver przeglądarki. Próbkowanie domyślnie obejmuje 10% wizyt i decyduje o nim przeglądarka, a nie serwer: gdyby decydował serwer, ten sam adres URL dawałby dwa różne dokumenty HTML, a pamięć podręczna całych stron serwowałaby wszystkim ten, który zobaczyła pierwszy.

Nie są zbierane żadne dane osobowe: bez adresu IP, bez pliku cookie, bez identyfikatora. Trzy wartości, klasa urządzenia i ścieżka strony, przechowywane na własnym serwerze jako liczniki w przedziałach. Nic nigdzie nie jest wysyłane.

Poniżej stu próbek ekran nie pokazuje żadnej liczby — mówi zamiast tego, ile próbek ma. Percentyl z kilkunastu pomiarów to szum, a błędna liczba jest gorsza niż jej brak, bo ktoś na jej podstawie podejmie działanie. Percentyl odczytywany jest z histogramu, więc jest przybliżony do szerokości przedziału, i ekran o tym informuje.

Transformacje i maski

Każdy blok można przesunąć, przeskalować, obrócić (wokół osi Z oraz w 3D wokół X/Y), pochylić i odbić — każdorazowo z osobnymi wartościami dla komputera, tabletu i telefonu. Można też ustawić osobną transformację przy najechaniu kursorem i czas trwania przejścia.

Maską może być koło, trójkąt, sześciokąt, plama, kwiat, kształt odręczny albo własny obraz, z kontrolkami rozmiaru, położenia i powtarzania.

Kształty są osadzone w CSS, a nie dostarczane jako osobne pliki SVG. Błędna ścieżka pliku sprawia, że maska po cichu znika i nikt nie widzi błędu 404; za siecią CDN adres folderu wtyczki może się dodatkowo zmienić.

Własny kod dla całej witryny

Kod HTML, CSS i JavaScript można umieścić w sekcji head, na początku sekcji body albo na jej końcu: tagi weryfikacyjne, fragmenty pomiarowe, drobne poprawki stylu. Położenie, priorytet i warunek sesji są konfigurowalne.

Nie uruchamia kodu PHP. Umieszczenie wykonawcy PHP wewnątrz kreatora stron zamieniłoby uprawnienie projektanta w uprawnienie do uruchamiania kodu na serwerze.

Wymagane uprawnienie to unfiltered_html: kto nie może umieścić surowego skryptu we wpisie, ten nie umieści go też w całej witrynie. Przy zainstalowanej wtyczce MevvLegal skrypty śledzące umieszczone tutaj również są wstrzymywane do czasu wyrażenia zgody na pliki cookie.

Bloki WooCommerce

Dwadzieścia bloków: tytuł produktu, zdjęcia, cena, dodanie do koszyka, ocena, stan magazynowy, meta, krótki opis, opis, zakładki danych, informacje dodatkowe, produkty powiązane, upsell, sprzedaż krzyżowa, koszyk, strona zamówienia, moje konto, śledzenie zamówienia, sortowanie i liczba wyników.

Żaden z nich nie przerysowuje WooCommerce. Wszystkie wywołują jego własne funkcje szablonów i shortcode’y. Motyw zmienia te szablony, a wtyczki podpinają się do nich — wysyłka, raty, powiadomienia o stanie magazynowym, tabele rozmiarów. Rysowanie własnego znacznika po cichu porzuciłoby to wszystko.

Koszyk, strona zamówienia, moje konto i śledzenie zamówienia są właściwe dla konkretnego odwiedzającego: buforowanie całych stron jest wyłączane, a bloki nigdy nie trafiają do bufora elementów. Jeżeli WooCommerce nie jest aktywny, bloki te nie są rejestrowane ani na serwerze, ani w edytorze.

Notatki w edytorze

Do każdego bloku można przypiąć notatkę: kto ją napisał, kiedy i czy sprawa jest załatwiona.

Notatki NIGDY nie są wypisywane na stronie. W tym pliku nie ma ani jednego punktu zaczepienia na froncie witryny, a pilnuje tego test. Notatki to rozmowa wewnętrzna; sytuacja, w której zobaczyłby je odwiedzający, byłaby gorsza niż zepsuty układ.

Notatka jest powiązana z tożsamością bloku. Zduplikowanie bloku nadaje kopii NOWĄ tożsamość, więc nie dziedziczy ona notatki — a przy okazji zyskuje własny zakres CSS.

Notatki żyją we własnych danych wpisu: usunięcie wpisu zabiera je ze sobą, nie pozostawiając osieroconych wierszy.

AI w edytorze — z własnym kluczem

Pisanie, przeredagowanie, skracanie, generowanie tekstu alternatywnego obrazów i tłumaczenie. Obsługiwane są Anthropic i OpenAI.

Klucz API wprowadza się WŁASNY, a żądanie idzie z witryny BEZPOŚREDNIO do dostawcy. Tekst nigdy do nas nie trafia; limit i rachunek zostają po stronie użytkownika. Nie zbudowaliśmy własnej usługi chmurowej: tekst przechodziłby wtedy przez nasze serwery, a odpowiedzialność za dane stałaby się nasza.

Klucz nigdy nie trafia do przeglądarki — żądanie wykonywane jest z serwera. Nie zwraca go też żaden punkt końcowy; nawet formularz ustawień nie wypisuje wartości z powrotem.

NIE szyfrujemy tego klucza i mówimy to wprost: w systemie WordPress klucz szyfrujący musi leżeć na tym samym serwerze, więc napastnik z dostępem do bazy danych dostaje oba. Nazwanie go „zaszyfrowanym” obiecywałoby ochronę, która nie istnieje.

Wynik nie jest zapisywany wprost do bloku; przychodzi jako propozycja, którą trzeba zastosować. To nasza prawdziwa obrona przed tym, by zdanie ukryte w treści zostało odczytane jako polecenie — zatwierdza człowiek.

Free i Pro

Edycja darmowa to cały produkt: wszystkie sto jeden bloków, szablony motywu, siatka i kreator pętli, silnik formularzy wraz z magazynem zgłoszeń, menu, wyszukiwarka, wyskakujące okna, biblioteka wzorców, ustawienia wstępne bloków, paleta globalna, optymalizacja obrazów, buforowanie bloków, własny kod dla całej witryny, notatki w edytorze, ekran Core Web Vitals i audyt dostępności.

Wersja Pro dodaje możliwości edycyjne, a nie wynik na stronie:

Punkty przełamania — zakładki komputer / tablet / telefon, z minimalną wysokością, szerokością treści, szerokością i czterema wartościami wewnętrznego marginesu dla każdego punktu przełamania.
Własny CSS dla każdego bloku, gdzie token selector oznacza sam ten blok.
Dodatki do formularzy — pola warunkowe, automatyczna odpowiedź do nadawcy, webhook oraz pole wysyłania pliku.
Eksport CSV zgłoszeń z formularzy.

Panele punktów przełamania i własnego CSS pojawiają się dziś przy blokach podstawowych — Kontener, Tytuł, Tekst, Przycisk, Separator, Obrazek, Opinia, Ikona, Ramka z ikoną, Lista z ikonami, Shortcode, Formularz, Produkty i Kategorie produktów. Kilka ustawień dla poszczególnych punktów przełamania jest darmowych wszędzie tam, gdzie istnieją: liczba kolumn siatki na tablecie i telefonie, próg menu hamburgerowego, pozycja ramki z obrazkiem na telefonie oraz wybór urządzenia dla pozycji przyklejonej.

Gdy licencja wygaśnie albo jej nie ma:

Witryna wygląda dokładnie tak samo. Każda zapisana wartość dla tabletu i telefonu jest nadal wypisywana, podobnie jak każda reguła własnego CSS dla bloku. To nie jest obietnica, lecz reguła architektoniczna: żaden plik na ścieżce renderowania nie pyta o licencję, a test sprawdza to przy każdym wydaniu.
Formularze nadal się wysyłają, nadal zapisują i nadal wysyłają pocztę.
Istniejące wyskakujące okna nadal się pokazują.
Traci się panele wersji Pro w edytorze — i tylko je.

Jeżeli nasze serwery są nieosiągalne, aktywna licencja działa jeszcze przez siedem dni. Instalacja, która nigdy nie zweryfikowała się pomyślnie, nie dostaje żadnej karencji: zablokowanie naszego adresu nie jest sposobem na zdobycie wersji Pro.

Gdy coś nie działa

„Sesja formularza wygasła.”: Zbuforowana kopia tej strony jest starsza niż siedem dni albo klucze bezpieczeństwa witryny zostały wymienione. Należy wyczyścić pamięć podręczną stron.
Formularz nie wysyła poczty: Najpierw należy sprawdzić listę zgłoszeń — rekord zapisywany jest przed wysłaniem poczty, więc jeżeli tam jest, formularz zadziałał, a dostarczenie nie. Potem trzeba sprawdzić adres odbiorcy i konfigurację poczty witryny.
Strona wygląda dobrze w edytorze, a źle na froncie witryny: Podgląd w edytorze jest z założenia przybliżony; patrz wyżej. Prawdą jest front witryny. Jeżeli blok niesie wartości dla tabletu lub telefonu, edytor wypisuje o tym komunikat.
Blok twierdzi, że jest nieprawidłowy, gdy próbuję go edytować: Historycznie zdarzało się to blokom zarejestrowanym na serwerze, ale brakującym w skrypcie edytora — wypisywały się bez zarzutu i zawodziły dopiero po otwarciu do edycji. Obecnie strzeże przed tym test; jeżeli problem nadal występuje, prosimy zgłosić nazwę bloku.
Odliczanie pokazuje zły czas: Znacznik niesie bezwzględny moment docelowy, a nigdy „pozostało X sekund”, więc zbuforowana strona nie może go zamrozić. Blok koryguje się względem zegara serwera; jeżeli to żądanie zostanie zablokowane, wraca do zegara samego odwiedzającego, zamiast zawieść.
Szablon nagłówka albo stopki się nie pokazuje: Motyw nie ma przepisu. Podnieść da się tylko motywy Astra i GeneratePress; ekran o tym ostrzega. Pozostałe typy szablonów działają w każdym motywie.
Pojawiły się dwa nagłówki: Nagłówek wytwarzają jednocześnie wtyczki MevvBlocks i MevvBridge. Miejsce zajmuje najpierw MevvBlocks, i to celowo — nagłówek należy zostawić jednej z nich.
Kontenery są szersze albo węższe, niż ustawiono: Reguła motywu wygrywa na specyficzności. Szczególnie motyw Astra mocno stylizuje swoich potomków. Dla zmierzonych przypadków naprawiono to przez podniesienie specyficzności, a nie przez użycie !important; przy nowym przypadku prosimy podać, o który motyw chodzi.
Opublikowany wpis nie pojawia się w siatce: Powinien się pojawić. Siatka buforuje wyłącznie identyfikatory wpisów, a zapis dowolnego wpisu unieważnia bufor. Jeżeli problem się utrzymuje, należy sprawdzić, czy typ wpisu i sortowanie są takie, jakich się spodziewamy.

Ograniczenia

Podgląd w edytorze jest przybliżony. Pokazywane są struktura i treść; dokładny wygląd to front witryny.
Szablony nagłówka i stopki działają wyłącznie w motywach Astra i GeneratePress. Każdy inny motyw nie dostaje nic, za to dostaje ostrzeżenie — milczenie oznaczałoby dwa nagłówki.
Mapa to osadzenie OpenStreetMap. Jeden znacznik, bez własnej grafiki znacznika, bez stylizacji mapy, bez wyznaczania trasy. Bez klucza API, bez konta rozliczeniowego i bez klucza leżącego w kodzie źródłowym strony.
Bez nakładki dostępności. Wyłącznie pomiar i raportowanie.
Bez CAPTCHA.
Bez wyszukiwania na żywo. Żądanie przy każdym naciśnięciu klawisza to zależność i powierzchnia dla limitów zapytań.
Odliczanie korzysta ze strefy czasowej witryny, a nie odwiedzającego. Kampania kończy się w jednym momencie na całym świecie.
Menu oferuje dwa breakpointy, a nie swobodną wartość w pikselach i nie ma trybu rozwijanego ani wysuwanego — od panelu wysuwanego z zarządzaniem fokusem jest blok wyskakującego okna.
Karty siatki nie mogą być nagłówkiem h1, a zagnieżdżanie pętli kończy się na dwóch poziomach.
Treść dynamiczna pochodzi z zamkniętej listy źródeł. Nie ma pola „wykonaj to wyrażenie”: oddałoby ono wykonywanie kodu każdemu, kto może edytować stronę.
Globalnych zestawów koloru i typografii nie da się usunąć, można je tylko opróżnić.
Karty produktów rysuje WooCommerce, a nie my, więc motyw i wszelkie punkty zaczepienia innych firm nadal działają.
Interfejs dostarczany jest w jedenastu językach. Turecki, angielski, hiszpański, niemiecki, francuski, portugalski, włoski, niderlandzki, japoński, rosyjski i polski, a do tego warianty krajowe, takie jak es_MX i pt_PT. Każda inna lokalizacja wraca do angielskiego.
Okno Web Vitals resetuje się co 28 dni; nie przesuwa się. Okno przesuwne wymagałoby przedziałów dziennych i dwudziestoośmiokrotnie większej przestrzeni. Ekran pokazuje, kiedy zaczęło się bieżące okno.
Odinstalowanie nie usuwa tabeli zgłoszeń ani ustawień. Treść bloków i tak pozostaje czytelna — to standardowy znacznik w polu post_content.

Nigdzie nie jest wczytywana żadna zewnętrzna biblioteka JavaScript ani CSS. Ani do slidera, ani do akordeonu, ani do ruchu, ani do mapy. Każda z nich kosztowałaby od czterdziestu do stu kilobajtów na każdej stronie, która by jej używała.

Sto pikseli na komputerze, czterdzieści na telefonie — w edytorze blokowym.