ACF Pro vs native Gutenberg – kiedy warto przejść i jak to zrobić bez bólu
Czy warto porzucić ACF Pro na rzecz natywnego Gutenberga? To pytanie coraz częściej pojawia się w projektach WordPress, zwłaszcza tam, gdzie liczy się szybkość, edytowalność i zgodność z Core Web Vitals. W tym artykule nie znajdziesz prostych odpowiedzi — zamiast tego dostaniesz konkretne scenariusze, decyzje projektowe i checklistę migracyjną.
🔍 Dlaczego w ogóle rozważać przejście?
ACF Pro to potężne narzędzie: elastyczne pola, szybka konfiguracja, pełna kontrola nad strukturą danych. Ale:
- Gutenberg zyskał na dojrzałości: bloki są modularne, szybciej renderują się w edytorze, a wielu klientów oczekuje „wizualnego” podejścia.
- Core Web Vitals faworyzują natywne rozwiązania — mniej JS, mniej ładowania zewnętrznych bibliotek.
- Redukcja zależności – mniej pluginów = mniej ryzyka przy aktualizacjach.
🧠 Kiedy warto zostać przy ACF Pro?
Pozostań przy ACF, jeśli:
- Tworzysz custom post types z nietypową strukturą danych (np. katalogi, portfolio z relacjami).
- Potrzebujesz precyzyjnej kontroli nad HTML-em i semantyką (np. dla SEO technicznego).
- Pracujesz z multilingual content i chcesz mieć pełną kontrolę nad polami w Polylang/WPML.
- Klient nie chce „grzebać” w edytorze — preferuje prosty backend z polami.
🧭 Kiedy warto przejść na Gutenberg?
Rozważ migrację, jeśli:
- Tworzysz landing pages z dynamicznymi sekcjami, które klient chce edytować samodzielnie.
- Chcesz wykorzystać Reusable Blocks i Patterns do szybkiego prototypowania.
- Twoja strona ma być lekka, szybka i zgodna z FID/LCP/CLS.
- Pracujesz z agencjami, które oczekują „standardowego” WordPressa bez custom backendu.
🛠️ Jak przejść bez bólu – krok po kroku
- Zmapuj pola ACF → bloki Gutenberg Przykład:
image→Image Block,wysiwyg→Paragraph + Heading,repeater→Group Block. - Zbuduj własne bloki z
block.jsonJeśli potrzebujesz niestandardowych funkcji, stwórz własne bloki z React/JSX lub PHP render callback. - Użyj
InnerBlocksitemplateLockDzięki temu możesz kontrolować strukturę edytora, nie tracąc elastyczności. - Zoptymalizuj CSS i JS Usuń zależności ACF, załaduj tylko potrzebne style dla bloków.
- Przetestuj UX klienta Czy edytor jest intuicyjny? Czy klient nie „psuje” layoutu? Możesz zablokować niektóre funkcje.
🧱 Przykład block.json – własny blok Gutenberga
Jeśli chcesz stworzyć własny blok, który zastąpi pole ACF (np. hero_title), zacznij od pliku block.json:
{
"apiVersion": 2,
"name": "vasili/hero-title",
"title": "Hero Title",
"category": "text",
"icon": "heading",
"description": "Custom hero title block",
"supports": {
"html": false
},
"attributes": {
"content": {
"type": "string",
"source": "html",
"selector": "h1"
}
},
"editorScript": "file:./hero-title.js",
"render": "file:./render.php"
}}
Ten blok pozwala klientowi edytować nagłówek w edytorze, ale renderuje go przez PHP, co daje pełną kontrolę nad semantyką i strukturą.
🧩 Przykład render_callback w PHP
Jeśli chcesz zachować kontrolę nad HTML-em (np. dla SEO lub dostępności), użyj render_callback:
function render_hero_title_block( $attributes ) {
$content = isset( $attributes['content'] ) ? esc_html( $attributes['content'] ) : '';
return '<h1 class="hero-title">' . $content . '</h1>';
}
register_block_type( 'vasili/hero-title', array(
'render_callback' => 'render_hero_title_block',
) );
Dzięki temu możesz:
- dodać klasy CSS zgodne z Twoim systemem BEM,
- kontrolować nagłówki (
h1,h2, itd.) zależnie od kontekstu strony, - filtrować treść, np. dla wersji językowych lub A/B testów.
📈 SEO i Core Web Vitals – kto wygrywa?
| Kryterium | ACF Pro | Gutenberg native |
|---|---|---|
| Semantyka HTML | ✅ pełna kontrola | ⚠️ zależna od bloków |
| LCP / FID / CLS | ⚠️ zależne od implementacji | ✅ lepsze out-of-the-box |
| Edytowalność treści | ❌ backend-only | ✅ wizualna edycja |
| Multilingual support | ✅ pełna kontrola | ⚠️ zależna od pluginów |
🧪 Case study: Strona usługowa dla agencji
Projekt: Strona dla agencji tłumaczeń w 3 językach Wersja ACF Pro: precyzyjne pola, kontrola nad strukturą, lepsze SEO Wersja Gutenberg: szybsze ładowanie, łatwiejsza edycja, ale trudniejsza kontrola nad semantyką
Wniosek: ACF Pro wygrał ze względu na potrzebę precyzyjnego tłumaczenia i struktury danych.
🧵 Podsumowanie
Nie ma jednej odpowiedzi. Ale jeśli zależy Ci na:
- kontroli nad strukturą HTML,
- precyzyjnym SEO,
- wielojęzyczności,
to ACF Pro nadal ma przewagę. Jeśli jednak chcesz:
- szybkiego edytora,
- lepszych Core Web Vitals,
- łatwej edycji dla klienta,
to Gutenberg może być właściwym wyborem.