Создание блоков Gutenberg с помощью ACF Pro

Создание блоков Gutenberg с помощью ACF Pro

В плагине ACF Pro версии 5.8 был добавлен PHP фреймворк, который позволяет с лёгкостью добавлять новые блоки Gutenberg используя всю мощь ACF.

В самом начале, делаем проверку активный ли ACF и добавляем экш, который будет заниматься регистрацией Gutenberg блока:

functions.php

if(function_exists('acf_register_block_type')){
    add_action('acf/init', 'register_acf_block_types');
}

Теперь опишем функцию, в котором мы будем регистрировать новый блок Gutenberg с помощью функции acf_register_block_type():

functions.php

/**
 * Register Block
 */
function register_acf_block_types(){
    acf_register_block_type(
        array(
            'name' => 'toaster',
            'title' => __('Toaster'),
            'description' => __('A custom toaster block'),
            'render_template' => 'template-parts/blocks/toaster.php',
            'icon' => 'editor-paste-text',
            'keywords' => array('toaster', 'product')
        )
    );
}

Здесь мы указываем метаданные шаблона, определяем шаблон, а также указываем иконку для блока.

На данном этапе у нас уже появится новый блок, но контента мы пока добавить не сможем.

acf-gutenberg-register-block

Теперь нам нужно добавить новые поля ACF. При этом в Location у нас появился новый вариант Block, выбираем созданый нами блок Toaster.

acf-gutenberg-rule

Добавим поля для Repeater Toasters.

acf-gutenberg-register-block

Можно импортировать поля ACF чтобы ускорить процесс:

if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array(
    'key' => 'group_5d3c375444d19',
    'title' => 'Toaster',
    'fields' => array(
        array(
            'key' => 'field_5d3c37c4a9d49',
            'label' => 'Toasters',
            'name' => 'toasters',
            'type' => 'repeater',
            'instructions' => '',
            'required' => 0,
            'conditional_logic' => 0,
            'wrapper' => array(
                'width' => '',
                'class' => '',
                'id' => '',
            ),
            'collapsed' => '',
            'min' => 0,
            'max' => 0,
            'layout' => 'block',
            'button_label' => '',
            'sub_fields' => array(
                array(
                    'key' => 'field_5d3c37eda9d4a',
                    'label' => 'Name',
                    'name' => 'name',
                    'type' => 'text',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'default_value' => '',
                    'placeholder' => '',
                    'prepend' => '',
                    'append' => '',
                    'maxlength' => '',
                ),
                array(
                    'key' => 'field_5d3c37f1a9d4b',
                    'label' => 'Price',
                    'name' => 'price',
                    'type' => 'number',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'default_value' => '',
                    'placeholder' => '',
                    'prepend' => '',
                    'append' => '',
                    'min' => '',
                    'max' => '',
                    'step' => '',
                ),
                array(
                    'key' => 'field_5d3c3827a9d4c',
                    'label' => 'Image',
                    'name' => 'image',
                    'type' => 'image',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'return_format' => 'array',
                    'preview_size' => 'medium',
                    'library' => 'all',
                    'min_width' => '',
                    'min_height' => '',
                    'min_size' => '',
                    'max_width' => '',
                    'max_height' => '',
                    'max_size' => '',
                    'mime_types' => '',
                ),
            ),
        ),
    ),
    'location' => array(
        array(
            array(
                'param' => 'block',
                'operator' => '==',
                'value' => 'acf/toaster',
            ),
        ),
    ),
    'menu_order' => 0,
    'position' => 'normal',
    'style' => 'default',
    'label_placement' => 'top',
    'instruction_placement' => 'label',
    'hide_on_screen' => '',
    'active' => true,
    'description' => '',
));

endif;

Если же теперь мы попробуем добавить добавить блок Toasters в Gutenberg, то в настройках блока мы увидим наши поля Repeater.

acf-gutenberg-to-edit-mode

Чтобы удобней было работать с блоком — мы можем перейти в режим редактирования блока.

acf-gutenberg-block-edit-mode

Теперь осталось создать шаблон, который будет рендерить блок как на фронт-энде, так и в Gutenber:

wp-content/themes/twentyseventeen/template-parts/blocks/toaster.php

<?php

$className = 'toaster';
if(!empty($block['className'])){
    $className .= ' ' . $block['className'];
}

if(!empty($block['align'])){
    $className .= ' align' . $block['align'];
}
?>

<div class="<?php esc_attr($className) ?>">
    <?php if(have_rows('toasters')): ?>
        <table>
            <thead>
                <th>Name</th>
                <th>Price</th>
                <th>Image</th>
            </thead>
            <tbody>
            <?php while(have_rows('toasters')) : the_row(); ?>
                <tr>
                    <td><?php echo get_sub_field('name') ?></td>
                    <td><?php echo get_sub_field('price') ?></td>
                    <td>
                        <img src="<?php echo get_sub_field('image')['sizes']['thumbnail'] ?>" alt="alt">
                    </td>
                </tr>
            <?php endwhile; ?>
            </tbody>
        </table>
    <?php endif ?>
</div>

На финише мы получим примерно такой вывод.

acf-gutenberg-final-result

Отправить

Похожие посты


Владимир Камуз

Фрилансер Full Stack WordPress разработчик из Украины. Работаю в основном на международной бирже фриланса Upwork.

Comment

Добавить комментарий

Email рассылка

Еженедельный дайджест последних добавленных обучающих материалов. Подпишитесь на Email рассылку, чтобы не пропустить полезную информацию о фрилансе на Upwork и веб-разработке.