Carbon Fields vs ACF PRO: bloki Gutenberg

Carbon Fields to biblioteka WordPressa służąca do tworzenia i zarządzania dedykowanymi polami za pomocą prostego API. Umożliwia programistom łatwe dodawanie pól do wpisów, taksonomii, użytkowników, komentarzy i widgetów. Obsługuje również bloki Gutenberg oraz pola powtarzalne.

Carbon Fields jest bezpłatny, ma otwarty kod źródłowy, jest kompatybilny z PHP 5.3+ i może być wykorzystywany w projektach komercyjnych. Obsługuje również pola meta oraz dynamiczne interfejsy, które pozwalają rozszerzyć jego funkcjonalność.

Jeśli tworzysz motywy z wykorzystaniem OOP i automatycznego ładowania klas, praca z Carbon Fields będzie dla Ciebie prosta i wygodna. Bibliotekę można zainstalować za pomocą Composera.

Zalety Carbon Fields:

• Brak interfejsu panelu administracyjnego do tworzenia pól — pola są tworzone wyłącznie za pomocą kodu, co zmniejsza ryzyko przypadkowej zmiany ich nazw przez klientów i w konsekwencji uszkodzenia działania kodu.
• Duży wybór gotowych typów pól.
• Elastyczność oraz możliwość rozszerzania biblioteki i tworzenia własnych pól.
• Bardzo dobra dokumentacja zawierająca przykłady.
• Bezpłatna, z otwartym kodem źródłowym i możliwością wykorzystania w dowolnym projekcie komercyjnym.
• Obsługa starszych wersji PHP oraz pełna kompatybilność z PHP 8.3.

Wady Carbon Fields:

• Do implementacji pól wymagana jest znajomość OOP.
• Instalacja odbywa się za pomocą Composera, z którym niektórzy programiści mogą nie być jeszcze zaznajomieni. (Jeśli potrzebujesz pomocy, przeczytaj ten artykuł dotyczący korzystania z Composera w motywie lub wtyczce).
• Niepełny interfejs bloków Gutenberg wyświetla jedynie pola, bez wizualnego podglądu, który oferuje ACF PRO.

Kod krok po kroku — integracja Carbon Fields

Zaczniemy od zainicjalizowania Composera w katalogu motywu za pomocą polecenia composer init i udzielenia odpowiedzi na kilka pytań.

Następnie powinny zostać utworzone folder vendor oraz plik composer.json. Kolejnym krokiem jest zainstalowanie Carbon Fields za pomocą polecenia:

composer require htmlburger/carbon-fields

Dodaj poniższy kod do pliku functions.php, aby wczytać główny plik biblioteki:

<?php
/** 
* Connect library startup file 
* 
* @return void 
*/
function crb_load() {
    require_once('vendor/autoload.php');
    \Carbon_Fields\Carbon_Fields::boot();
}

add_action('after_setup_theme', 'crb_load');

Code to Create a Gutenberg Block in Carbon Fields

<?php
/**
 * Add Block FAQ.
 */
function crb_add_gutenberg_block() {
    // FAQ block.
    Block::make(
       __( 'FAQ', 'iwpdev' )
    )->add_fields(
       [
          Field::make(
             'complex',
             'faq_items',
             __( 'FAQs', 'iwpdev' )
          )->add_fields(
             [
                Field::make( 'text', 'title', __( 'Title', 'iwpdev' ) ),
                Field::make( 'rich_text', 'description', __( 'Description', 'iwpdev' ) ),
             ]
          ),
       ]
    )->set_category(
       'iwpdev',
       'editor-code'
    )->set_render_callback(
       function ( $fields, $attributes, $inner_blocks ) {
          get_template_part(
             'template-parts/blocks/faq',
             'block',
             [
                'attributes' => $attributes,
                'fields'     => $fields,
             ]
          );
       }
    );
}

add_action( 'carbon_fields_register_fields', 'crb_add_gutenberg_block' );

Kod do dołączenia stylów i skryptów Bootstrap 5

<?php
/** 
* Add Bootstrap 5 
* 
* @return void 
*/
function add_bootstrap() {
    wp_enqueue_style('iwp_bootstrap', '//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', [], '5.2.3');
    wp_enqueue_script('iwp_bootstrap', '//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', ['jquery'], '5.2.3', true);
}
add_action('wp_enqueue_scripts', 'add_bootstrap');

Kod szablonu bloku

<?php
$fields     = $args['fields'];
$attributes = $args['attributes'];

if ( ! empty( $fields['faq_items'] ) ) {
    ?>
    <div class="accordion" id="accordionPanelsStayOpenExample">
       <?php foreach ( $fields['faq_items'] as $key => $item ) { ?>
          <div class="accordion-item">
             <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                      aria-expanded="false"
                      data-bs-target="#<?php echo esc_html( 'accord-' . $key ); ?>">
                   <?php echo esc_html( $item['title'] ?? '' ); ?>
                </button>
             </h2>
             <div id="<?php echo esc_html( 'accord-' . $key ); ?>" class="accordion-collapse collapse"
                 aria-labelledby="panelsStayOpen-headingOne">
                <div class="accordion-body">
                   <?php echo wp_kses_post( wpautop( $item['description'] ?? '' ) ); ?>
                </div>
             </div>
          </div>
       <?php } ?>
    </div>
    <?php
}

Na tym etapie nasz blok Gutenberg powinien wyglądać tak, jak przedstawiono na poniższych zrzutach ekranu.

Oto wyniki, które uzyskaliśmy:

• Czas generowania strony: 0,2100 s
• Maksymalne zużycie pamięci: 6,7 MB
• Zapytania do bazy danych: 32
• Czas wykonywania zapytań do bazy danych: 0,0104 s
• Liczba załadowanych skryptów: 10
• Liczba załadowanych arkuszy stylów: 24

/** 
* FAQ register block. 
* 
* @return void 
*/
function register_gutenberg_blocks() {
    if (function_exists('acf_register_block')) {
        acf_register_block_type([
            'name' => 'FAQ',
            'title' => __('FAQ', 'iwpdev'),
            'description' => __('FAQ', 'iwpdev'),
            'category' => 'acf-blocks',
            'post_types' => ['page'],
            'supports' => ['anchor' => true, 'align' => ['full', 'wide'], 'jsx' => true],
            'render_template' => 'template-parts/block/faq.php',
        ]);
    }
}
add_action('acf/init', 'register_gutenberg_blocks');

Tworzymy blok w panelu administracyjnym, korzystając z jednego pola repeater zawierającego dwa pola podrzędne: jedno dla tytułu, a drugie dla treści.

Nie zapomnij wybrać opcji renderowania szablonu dla tego bloku, który został zarejestrowany w powyższym kodzie.

Jeśli wszystko zostało wykonane poprawnie, powinieneś zobaczyć ten blok w formie przedstawionej na poniższych zrzutach ekranu.

Block Template Code

<?php

$faq_arg = get_field('faq');
if (!empty($faq_arg)) { ?>
    <div class="accordion" id="accordionPanelsStayOpenExample">
        <?php foreach ($faq_arg as $key => $item) { ?>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#<?php echo esc_html('accord-' . $key); ?>">
                        <?php echo esc_html($item['title'] ?? ''); ?>
                    </button>
                </h2>
                <div id="<?php echo esc_html('accord-' . $key); ?>" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
                    <div class="accordion-body">
                        <?php echo wp_kses_post(wpautop($item['description'] ?? '')); ?>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
<?php }

Oto wyniki, które uzyskaliśmy z ACF PRO:

• Czas generowania strony: 0,4336 s
• Maksymalne zużycie pamięci: 8,1 MB
• Zapytania do bazy danych: 38
• Czas wykonywania zapytań do bazy danych: 0,0109 s
• Liczba załadowanych skryptów: 8
• Liczba załadowanych arkuszy stylów: 24

Nazwa parametru	ACF	Carbon Fields
Czas generowania strony	–	+
Maksymalne zużycie pamięci	–	+
Zapytania do bazy danych	–	+
Czas wykonywania zapytań do bazy danych	–	+
Liczba załadowanych skryptów	+	–
Liczba załadowanych arkuszy stylów	+	+
Szybkość tworzenia pól	+	–

Podsumowanie i pełne porównanie

Carbon Fields jest szybszy i bardziej wydajny pod względem zużycia zasobów, szczególnie jeśli Twój motyw zawiera wiele dedykowanych bloków, co może zapewnić niewielką poprawę szybkości działania strony. Biblioteka działa niezawodnie zarówno na starszych, jak i nowszych wersjach PHP. Klienci nie mogą zmieniać parametrów pól, co pomaga zachować stabilność kodu — jest to szczególnie istotne w przypadku dużych projektów.

ACF to świetne rozwiązanie do szybkiego tworzenia bloków i wdrażania ich bez konieczności posiadania zaawansowanej wiedzy programistycznej. Wadą jest jednak koszt oraz dłuższy czas generowania bloków po stronie front-endu.