Tworzymy rozwijane panele jako blok ACF

Czym są rozwijane panele ?

Rozwijane panele inaczej akordiony (ang. accordion) są elementami na stronie, które po kliknięciu w przycisk rozwiną nam ukrytą treść, którą chcemy wyświetlić użytkownikowi. Najczęstszym zastosowaniem akordionów mogą być sekcje FAQ lub tematy pomocy na naszej stronie.

Zajrzyjmy do kodu

Wspominałem wcześniej we wpisie Bloki ACF jak tworzyć customowe rozwiązania przy użyciu ACF oraz PHP. Dziś przetestujemy to w praktyce. Wymagany Bootstrap 5.x w Twoim projekcie

Pierwszym krokiem jest zarejestrowanie bloku w pliku functions.php w motywie Twojej strony. Wystarczy wkleić do pliku 3 linijki kodu

functions.php

add_action( 'init', 'register_acf_blocks_accordion' );
function register_acf_blocks_accordion() {
    register_block_type( __DIR__ . '/blocks/accordion/block.json' );
}

W skrócie: dodajemy akcje która uruchomi nasz blok oraz rejestrujemy funkcję o nazwie register_acf_blocks_accordion, która wczyta nam z określonej ścieżki plik block.json w którym zawarte są informacje na temat naszego bloku.

blocks/accordion/block.json

{
    "name": "acf/accordion", // nazwa
    "title": "Accordion", // tytuł
    "description": "Dodaj rozwijane panele do swojej strony", // opis
    "style": [ "file:./accordion.css" ], // ładowanie zewnętrznych styli
    "category": "formatting", // wybieramy kategorię, możemy tworzyć również nowe
    "icon": "admin-comments", // ikona elementu
    "keywords": ["accordion", "quote"], 
    "acf": { // ścieżka do pliku który chcemy wyrenderować na stronie
        "mode": "preview",
        "renderTemplate": "/blocks/accordion/accordion.php"
    },
    "align": "full"
}

W pliku json siedzi obiekt który ma wartości przypisane do kluczy. Opisałem w kodzie do czego służą, wystarczy podmienić kilka wartości według własnych potrzeb

blocks/accordion/accordion.php

<?php

/**
 * Accordion Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during backend preview render.
 * @param   int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param   array $context The context provided to the block by the post or it's parent block.
 */

// Support custom "anchor" values.
$anchor = '';
if (!empty($block['anchor'])) {
    $anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}

// Create class attribute allowing for custom "className" and "align" values.
$class_name = 'accordion-block';
if (!empty($block['className'])) {
    $class_name .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
    $class_name .= ' align' . $block['align'];
}

// Load values and assign defaults.
$text             = get_field('testimonial') ?: 'Dodaj nowe rozwijane panele do swojej strony';
$name             = get_field('acf_block_accordion_name');
$content          = get_field('acf_block_accordion_description');
$title_padding_x  = get_field('acf_block_accordion_padding_x');
$title_padding_y  = get_field('acf_block_accordion_padding_y');
$content_color = get_field('acf_block_accordion_description_color');

// Build a valid style attribute for background and text colors.
$styles = array('background-color: ' . $background_color, 'color: ' . $text_color);
$style  = implode('; ', $styles);

?>
<div <?php echo $anchor; ?>class="<?php echo esc_attr($class_name); ?>" style="<?php echo esc_attr($style); ?>">
    <?php if (have_rows('acf_block_accordion')) : ?>
        <?php $accordion_number = 0; ?>
        <div id="accordion_acf_block-<?= $name; ?>" class="accordion" role="tablist">
          <?php while (have_rows('acf_block_accordion')) : the_row(); ?>
           <?php
            $title = get_sub_field('acf_block_accordion_title');
            $content = get_sub_field('acf_block_accordion_description');
            $accordion_number++;
           ?>
             <div class="accordion-item border-0">
              <h2 class="accordion-header" role="tab">
               <button 
                class="accordion-button border-bottom" 
                style="padding: <?= $title_padding_y; ?>px <?= $title_padding_x; ?>px" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#accordion_acf_block-<?= $name; ?> .item-<?=   $accordion_number; ?>" 
                aria-expanded="true" 
                aria-controls="accordion_acf_block-<?= $name; ?> .item-<?= $accordion_number; ?>">
                <?= $title; ?>
               </button>
              </h2>
                    <div class="accordion-collapse collapse item-<?= $accordion_number; ?>" role="tabpanel" data-bs-parent="#accordion_acf_block">
                        <div class="accordion-body">
                            <div class="mb-0" style="color: <?= $content_color; ?>"><?= $content; ?>
                            </div>
                        </div>
                    </div>
                </div>

            <?php endwhile; ?>
        </div>
    <?php endif; ?>


</div>

Zdecydowanie najwięcej dzieje się w pliku accordion.php, który jest renderowany przez naszą stronę. Pierwsze kilka linijek kodu to głównie ustawienia „template’u” bloku a następnie podpięte pola ACF, które przypisane są do naszego bloku. Następnie podpinamy element bootstrapowy i przechodzimy do wykorzystania „repeatera”, który pozwala nam na dodawanie dowolnej ilości rozwijanych paneli na stronie – od strony zaplecza wygląda to mniej więcej tak:

Gdzie mogę wykorzystać zwijane panele ?

Jeśli korzystasz z edytora gutenberg na swojej stronie postawionej na WordPress to znaczy że z rozwijanych paneli możesz korzystać wszędzie na stronie. Blok wystarczy osadzić gdzie tylko chcemy, ja w tym przypadku osadziłem go we wpisie. Proste i praktyczne, prawda ?

Komentarze