WordCamp Warszawa 2022, Powrót do spotkań offline (relacja i prezentacja)

WordCamp Warszawa 2022 był wydarzeniem szczególnym pod każdym względem. Po latach pandemicznej przerwy internetowe webinary i niekończące się wideokonferencje nareszcie ustąpiły miejsca uściskom dłoni, kuluarowym dyskusjom przy kawie i bezpośredniej wymianie myśli inżynierskiej w świecie rzeczywistym.

Energia 200 uczestników zgromadzonych w Warszawie była niezwykła. Widać było, jak bardzo społeczność WordPressa, zarówno weterani tworzący ekosystem od kilkunastu lat, jak i nowi specjaliści, potrzebowała fizycznego kontaktu i konfrontacji wiedzy z rynkową praktyką.

Jeśli interesuje Cię nowoczesna architektura motywów blokowych lub szukasz wsparcia przy zaawansowanym wdrożeniu serwisów korporacyjnych, sprawdź moją ofertę jako programista WordPress w WPPoland.

#WordCamp Warszawa 2022: data, miejsce i liczby

Konferencja odbyła się 11-12 czerwca 2022 w CIC (Cambridge Innovation Center) przy ul. Chmielnej 73 w Warszawie, obok Dworca Centralnego. Tak podaje strona lokalizacji WordCampa. Na stronie głównej wydarzenia organizatorzy podsumowali ją jako powrót WordCampa na polską scenę “po długich 3 latach nieobecności” i podali liczby: 200 uczestników, 35 prelegentów, 10 wolontariuszy.

Organizatorami byli Arek Stęplowski, Kamil Kawałko i Michał Strześniewski, a obok nich społeczność WordUp Warszawa i Fundacja WWW (lista organizatorów). Kamil Kawałko przygotował też oprawę graficzną konferencji.

Układ dwóch dni według oficjalnego programu:

Jedna ścieżka w sobotę oznaczała, że cała sala słuchała tych samych wystąpień. To ułatwiało rozmowy w przerwach, bo każdy miał ten sam punkt odniesienia.

#Container queries i theme.json w motywach WordPress

Wystąpiłem w sobotę o 11:15 z prelekcją pod tytułem Ko-do-ma-so-chizm. Dlaczego robisz to naokoło?. Według opisu sesji w programie był to przegląd frontendowych, lecz rzadko używanych sposobów na poprawę UX i dostępności: natywnych tagów, stylów, skrótów i funkcji oraz refaktoryzacji kodu. Mówiłem na styku inżynierii frontendu i projektowania interfejsów, skupiając się na narzędziach, które zmieniają tworzenie motywów dla edytora blokowego Gutenberg.

Nagranie jest częścią transmisji pierwszego dnia na kanale YouTube Fundacji WWW. Według spisu treści w opisie filmu prelekcja trwa od 1:37:50 do 2:14:36:

#Jak używać CSS Grid, container queries i theme.json

EWOLUCJA UKŁADÓW W MOTYWACH WORDPRESSA:
+-------------------------------------------------------------+
| Era Legacy (2010-2018):                                      |
| Floaty, clearfixy, 12-kolumnowe siatki Bootstrapa, !important|
+-------------------------------------------------------------+
                              v
+-------------------------------------------------------------+
| Era Flexbox & CSS Grid (2018-2022):                          |
| Dwuwymiarowe siatki grid-template-areas, auto-fit, minmax() |
+-------------------------------------------------------------+
                              v
+-------------------------------------------------------------+
| Nowoczesna Era Komponentowa (2022+):                         |
| Container Queries (@container), theme.json i CSS Variables   |
+-------------------------------------------------------------+

1. Flexbox i CSS Grid to fundament, nie eksperyment: W profesjonalnych projektach nie ma już technicznego uzasadnienia dla stosowania floatów czy ciężkich bibliotek CSS generujących tysiące zbędnych klas pomocniczych. Dwuwymiarowy CSS Grid pozwala zrealizować układ redakcyjny przy użyciu kilku deklaracji, co zmniejsza arkusz stylów i upraszcza drzewo DOM.

/* Tradycyjny układ oparty na floatach i clearfix (przestarzały wzorzec) */
.legacy-archive-grid::after {
  content: "";
  display: table;
  clear: both;
}
.legacy-archive-card {
  float: left;
  width: 33.333%;
  padding: 15px;
  box-sizing: border-box;
}

/* Nowoczesny, responsywny CSS Grid bez konieczności definiowania reguł @media */
.modern-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--wp--preset--spacing--40, 2rem);
  align-items: stretch;
}

2. Container queries (@container) jako kierunek rozwoju: Tradycyjne zapytania @media badają wyłącznie szerokość całego okna przeglądarki (viewportu). W modułowym ekosystemie blokowym Gutenberg komponent (np. karta artykułu z miniaturą i zajawką) może trafić do wąskiej kolumny bocznej, do trójkolumnowego gridu na stronie głównej albo do pełnoekranowego banera. Container queries pozwalają blokom dostosować układ do szerokości bezpośredniego kontenera nadrzędnego, a nie ekranu użytkownika.

/* Rejestracja kontenera kontekstowego dla bloku */
.wp-block-custom-card-wrapper {
  container-type: inline-size;
  container-name: post-card-container;
}

/* Domyślny układ pionowy dla wąskich przestrzeni (np. sidebar) */
.wp-block-custom-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Po przekroczeniu 520px szerokości kontenera układ przełącza się w poziom */
@container post-card-container (min-width: 520px) {
  .wp-block-custom-card {
    flex-direction: row;
    align-items: center;
  }
  .wp-block-custom-card__image {
    width: 38%;
    flex-shrink: 0;
  }
  .wp-block-custom-card__body {
    width: 62%;
  }
}

3. Plik theme.json jako pojedyncze źródło prawdy: Wraz z Full Site Editing (FSE) rola rozbudowanych plików style.css maleje. Deklaratywny plik theme.json standaryzuje tokeny projektowe: palety kolorów, typografię, marginesy i paddingi. WordPress generuje z nich zmienne CSS (--wp--preset--*), dzięki czemu edytor i front strony korzystają z tych samych wartości.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "name": "Medium",
          "size": "clamp(1.125rem, 1rem + 0.5vw, 1.35rem)",
          "slug": "medium"
        },
        {
          "name": "Large",
          "size": "clamp(1.5rem, 1.25rem + 1vw, 2.25rem)",
          "slug": "large"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        { "name": "Small", "size": "1rem", "slug": "30" },
        { "name": "Medium", "size": "2rem", "slug": "40" },
        { "name": "Large", "size": "3.5rem", "slug": "50" }
      ]
    }
  }
}

#Kiedy container queries trafiły do przeglądarek

W czerwcu 2022 container queries były zapowiedzią, nie narzędziem produkcyjnym. Żadna stabilna przeglądarka ich jeszcze nie obsługiwała. Kolejność wdrożeń według notek wydawniczych producentów:

Dopiero od lutego 2023 wszystkie trzy silniki obsługują zapytania o rozmiar kontenera. Safari 16 dodało przy tym jednostki kontenera (cqi, cqw i pokrewne). Dla motywu, który musi działać u wszystkich odwiedzających, bezpieczną granicą jest więc 2023 rok, a nie data konferencji. Przykład z karty artykułu powyżej działa dziś bez fallbacku w aktualnych wersjach wszystkich trzech silników.

#Jak zmieniał się theme.json od 2022 roku

Konfiguracja z przykładu używa "version": 2. Ta wersja schematu weszła w WordPressie 5.9, czyli pół roku przed konferencją, co opisuje notka deweloperska z 8 stycznia 2022. Pliki w wersji 1 z WordPressa 5.8 nadal działają, bo WordPress przekształca je do wersji 2 w locie.

Dwie późniejsze zmiany dotyczą bezpośrednio przykładu:

• Płynna typografia ("fluid": true) zadebiutowała w WordPressie 6.1, według notki z 3 października 2022. W czerwcu 2022 to ustawienie nie działało jeszcze w stabilnym WordPressie, więc wartości clamp() trzeba było wpisywać ręcznie, tak jak w przykładzie.
• Wersja 3 schematu pojawiła się w WordPressie 6.6. Notka z 19 czerwca 2024 zaleca przejście na nią dopiero wtedy, gdy minimalna wspierana wersja WordPressa w motywie to 6.6. Starsze wersje schematu pozostają obsługiwane.

#Page buildery czy Gutenberg i bezpieczeństwo wtyczek

Program konferencji dobrze pokazywał, czym w 2022 roku zajmowała się polska społeczność WordPressa.

#Dlaczego agencje odchodzą od page builderów

W niedzielę Izabela Karkocha pokazała, że ciekawą stronę da się zbudować na motywie domyślnym, bez dodatkowych wtyczek i bez page builderów, i kiedy takie podejście się opłaca. Piotr Całka omówił z perspektywy software house’u, czy gotowe motywy warto stosować. Oba wystąpienia wpisywały się w odwrót od ciężkich edytorów wizualnych (takich jak Elementor, WPBakery czy Divi) w projektach, w których liczy się wydajność. Koszt optymalizacji stron opartych o monolityczne buildery pod Core Web Vitals jest wysoki, dlatego coraz częściej powstają dedykowane bloki Gutenberga i motywy blokowe oparte na czystym kodzie. W 2022 roku metrykami Core Web Vitals były LCP, FID i CLS. 12 marca 2024 INP zastąpił FID, więc dziś responsywność interakcji mierzy się inaczej niż w czasie konferencji.

#Bezpieczeństwo WordPressa na WordCamp Warszawa 2022

Bezpieczeństwu poświęcono trzy wystąpienia. Bartek Nowak pokazał File Locker, czyli kontrolę dostępu do wrażliwych plików, gdy podstawowe uprawnienia WordPressa nie wystarczają. Artur Pajkert mówił o phishingu, typosquattingu, atakach homograficznych, certyfikatach SSL i o tym, jakie zagrożenia WAF blokuje, zanim w ogóle wykona się WordPress. W niedzielę Krzysztof Dróżdż omówił sytuację, w której strona przywrócona z backupu i wyczyszczona po chwili znów jest zainfekowana.

Z tych tematów wynikają praktyki, które warto mieć w każdym projekcie: blokowanie bezpośredniej edycji plików w środowisku produkcyjnym (DISALLOW_FILE_MODS), automatyczne skanowanie zależności w CI/CD oraz weryfikacja sum kontrolnych plików WordPressa za pomocą WP-CLI. Po ponownej infekcji to właśnie sumy kontrolne pokazują, które pliki rdzenia i wtyczek różnią się od oryginału:

# Weryfikacja integralności rdzenia WordPressa oraz wtyczek w procesie CI/CD
wp core verify-checksums
wp plugin verify-checksums --all

#Wolny WooCommerce i autoload w tabeli wp_options

Rozmowy w strefie sponsorów dały mi więcej wiedzy o rynku hostingu niż setki przeczytanych artykułów. Wśród sponsorów byli dostawcy hostingu: cyber_Folks, Bluehost i Nexcess (sponsorzy platynowi) oraz SmartHost i LH.pl (sponsorzy złoci), według strony głównej wydarzenia. Poniższe zestawienie porządkuje typowe różnice między starszym a nowszym podejściem do infrastruktury:

Wiersz o PHP warto czytać z dzisiejszymi datami. Według tabeli końca wsparcia na php.net PHP 7.4 przestało być wspierane 28 listopada 2022, PHP 8.0 26 listopada 2023, a PHP 8.1 31 grudnia 2025. Wersje, które w 2022 roku były docelowe, dziś same wymagają aktualizacji.

Częstym wąskim gardłem wydajności dużych sklepów WooCommerce nie jest moc procesora, lecz niekontrolowany rozrost tabeli wp_options (zwłaszcza opcji z flagą autoload = yes) oraz brak separacji zapytań odczytu od zapisu w bazie danych. Do szybkiej identyfikacji problematycznych rekordów służy proste zapytanie diagnostyczne SQL:

-- Identyfikacja najcięższych opcji ładowanych automatycznie przy każdym żądaniu HTTP
SELECT option_name, length(option_value) AS byte_size
FROM wp_options
WHERE autoload = 'yes'
ORDER BY byte_size DESC
LIMIT 15;

#Program pierwszego dnia WordCamp Warszawa 2022

Sobota miała jedną ścieżkę. Po otwarciu Kasia Aleszczyk opowiedziała o projektach społeczności, do których można dołączyć. Dalszy program, w kolejności z oficjalnego harmonogramu, układał się w kilka bloków:

• Typografia i dostępność: dr Mateusz Machalski mówił o roli typografii w budowaniu komunikatów, Jacek Zadrożny pokazał 10 sposobów na zepsucie dostępności strony, a panel o stanie dostępności WordPressa poprowadzili Marcin Andrzejewski, Jacek Zadrożny, Arek Stęplowski i Marcin Pietrzak.
• Frontend: moja prelekcja Ko-do-ma-so-chizm, opisana wyżej.
• Bezpieczeństwo: Bartek Nowak (File Locker) i Artur Pajkert (WordPress odporny na atak nuklearny).
• SEO: Paweł Gontarek o tym, czego SEO nie lubi w WordPressie, i Roman Rozenberger o najczęstszych błędach SEO w e-commerce na WordPressie, na podstawie case study.
• Testy: Jakub Rosiński o tym, ile wartości dają testy jeszcze przed produkcją, i Oskar Sajdak o pięciu rodzajach testów w jego projekcie: jednostkowych, integracyjnych, funkcjonalnych, akceptacyjnych i regresji wizualnej.
• Warsztat developera: Piotr Niewiadomski o automatyzacji wdrożeń i aktualizacji przez Composera, Maciej Kuchnik o natywnych funkcjach WordPressa zamiast setek linijek własnego kodu.
• Kariera: Sebastian Kurzynowski o wynagrodzeniu freelancera i jego wpływie na jakość pracy.

Dwa bloki o dostępności i testach w jednym dniu pokazywały, że rozmowa w społeczności przesunęła się z “jak to zbudować” na “jak to utrzymać”. Moja prelekcja o natywnych tagach i stylach trafiła między wystąpienie o psuciu dostępności a panel WCAG, co dobrze pasowało do jej treści.

#Warsztaty i prelekcje drugiego dnia WordCamp Warszawa 2022

Niedziela działała w trzech ścieżkach naraz, a równolegle trwał Contributor Day. Warsztaty, według opisów w programie:

Główna ścieżka niedzieli była bardziej biznesowa. Tomasz Lach opisał dwa lata pracy nad własnym produktem WordPressowym, który jeszcze nie zarabiał. Łukasz Zegarek mówił o stronie zgodnej z RODO. Tomasz Kołkiewicz omówił umowy, obsługę klienta, rozliczenia i ograniczanie ryzyka braku wynagrodzenia, a Aneta Rutkowska edukację klienta przed ustaleniem budżetu. Roman Maria Koidl przedstawił VAT i cło w transgranicznym e-commerce. Piotr Jabłonowski opowiedział, jak z prostej wtyczki powstał globalny biznes. Michał Kaźmierczak podsumował lata budowania firmy wyspecjalizowanej w WordPressie. Dzień zamknął panel o powrocie WordCampa w Polsce po pandemii z udziałem Michała Strześniewskiego, Piotra Całki i Kamila Kawałki.

#Networking na WordCamp po pandemii

Dwa lata spotkań wyłącznie przez ekran zmęczyły całą branżę IT. WordCamp Warszawa pokazał, że bezpośredniej rozmowy nie da się odtworzyć na komunikatorze.

#Spotkania z osobami znanymi wcześniej tylko zdalnie

W kuluarach spotkałem ludzi, z którymi pracowałem zdalnie od pięciu lat, a których nigdy wcześniej nie widziałem na żywo. Konferencja z jedną ścieżką w sobotę i wspólnymi przerwami ułatwiała takie spotkania, bo wszyscy byli w tym samym miejscu o tej samej porze.

#Stawki i umowy w branży WordPress

Tematy, o których rzadko pisze się publicznie, były w programie wprost. Sebastian Kurzynowski mówił o negocjowaniu stawek i rozpoznawaniu dobrej oferty pracy, a Tomasz Kołkiewicz o konstrukcji umów, terminowości płatności i minimalizowaniu ryzyka braku wynagrodzenia. Po takich wystąpieniach rozmowy w przerwach schodziły na konkretne praktyki.

#Jak przejść z motywu klasycznego na blokowy

Jednym z najczęstszych pytań po mojej prelekcji było: jak bezpiecznie zmigrować działający serwis o wieloletniej historii na architekturę blokową bez przestojów i bez utraty pozycji w wyszukiwarce. Praktyczną stronę tego tematu w niedzielę omawiał warsztat Magdaleny Paciorek o edytorze blokowym w dedykowanym motywie. Mój model wdrożeniowy wygląda tak:

1. Audyt i ekstrakcja design tokens: Zamiast przepisywać cały kod od zera, pierwszym krokiem jest inwentaryzacja kolorów, typografii i stałych odstępów z istniejących arkuszy CSS. Wartości trafiają do pliku theme.json, co ujednolica zmienne w całym systemie.
2. Hybrydowy model wdrożenia (Hybrid Theme): Nie trzeba od razu wdrażać pełnego Full Site Editing. WordPress pozwala zachować klasyczny nagłówek i stopkę w PHP, podczas gdy treść wpisów i stron powstaje z bloków.
3. Zastąpienie shortcode’ów dedykowanymi blokami dynamicznymi: Stare kody skrótowe (shortcodes) generują dług technologiczny i utrudniają podgląd w edytorze. Przekształcenie ich w natywne bloki Gutenberg (np. z wykorzystaniem register_block_type i szablonów renderowania) ułatwia pracę redakcji.
4. Weryfikacja wydajności i testy regresyjne: Przed przełączeniem produkcyjnym należy przeprowadzić testy Core Web Vitals na środowisku stagingowym, monitorując LCP, CLS i INP przy użyciu narzędzi takich jak Lighthouse CI.

#Gdzie obejrzeć nagrania z WordCamp Warszawa 2022

Na stronie głównej WordCampa organizatorzy podali, że prezentacje są dostępne na kanale YouTube Fundacji WWW i że wideo trafi też na WordPress.tv. Nie znalazłem nagrań z tej edycji na WordPress.tv, więc punktem odniesienia pozostaje YouTube.

Transmisja pierwszego dnia trwa prawie dziewięć godzin (8:56:16). W opisie filmu jest spis treści ze znacznikami czasu każdej prelekcji, od Kasi Aleszczyk (20:35) po Sebastiana Kurzynowskiego (8:13:20). Moja prelekcja zaczyna się od 1:37:50 i od tego miejsca startuje osadzony wyżej odtwarzacz. Szczegółowy program z opisami sesji jest pod adresem warsaw.wordcamp.org/2022/program.

#Podsumowanie

WordCamp Warszawa 2022 zakończył trzyletnią przerwę w polskich WordCampach. 35 prelegentów, dzień prelekcji w jednej ścieżce i dzień warsztatów z Contributor Day złożyły się na mocny impuls dla społeczności, a tematy takie jak dostępność, testy i natywne techniki frontendowe nie straciły aktualności.

Część technik z mojej prelekcji dojrzała dopiero po konferencji: container queries działają we wszystkich silnikach od lutego 2023, a płynna typografia w theme.json od WordPressa 6.1. Jeśli zastanawiasz się, czy kupić bilet na kolejny WordCamp, kup go. Udział w konferencji to okazja do weryfikacji własnego warsztatu i do relacji, które procentują przez kolejne lata.

Jeśli planujesz modernizację infrastruktury swojego serwisu, migrację do motywu blokowego zgodnego z Core Web Vitals lub potrzebujesz eksperckiego wsparcia architektonicznego, zapoznaj się z moimi usługami w zakresie zaawansowanego rozwoju WordPressa.