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

  1. Zmapuj pola ACF → bloki Gutenberg Przykład: imageImage Block, wysiwygParagraph + Heading, repeaterGroup Block.
  2. Zbuduj własne bloki z block.json Jeśli potrzebujesz niestandardowych funkcji, stwórz własne bloki z React/JSX lub PHP render callback.
  3. Użyj InnerBlocks i templateLock Dzięki temu możesz kontrolować strukturę edytora, nie tracąc elastyczności.
  4. Zoptymalizuj CSS i JS Usuń zależności ACF, załaduj tylko potrzebne style dla bloków.
  5. 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.