Добавить класс чисел, который повторяется в Гутенберге блоков WordPress - PullRequest
0 голосов
/ 20 февраля 2020

Я использую пользовательский блок для Гутенберга

add_action('acf/init', 'my_acf_init');
function my_acf_init() {

    if( function_exists('acf_register_block') ) {

        acf_register_block(array(
            'name'              => 'h2-block',
            'title'             => __('H2 Block'),
            'description'       => __('A custom H2 block.'),
            'render_callback'   => 'h2_block_render_callback',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'supports' => array(
                'align' => array( 'left', 'right' ),
            ),
        ));

    }
}

Визуализация обратного вызова

function h2_block_render_callback( $block ) {
    $className ='h2-block';

    if (!empty($block['className'])) {
            $className = ''. $block['className'];
    }
    if( !empty($block['align']) ) {
        $className .= ' has-text-align-' . $block['align'];
    }
    ?>
    <div class="section_one <?php echo esc_attr($className); ?> <?php echo h2_block_class(); ?>">
        <?php echo '<h2>'.get_field('h2_content').'</h2>'; ?>
    </div>
    <?php
}

Это позволяет мне использовать пользовательский блок с использованием Гутенберга и выполняет рендеринг отлично

ниже приведен код, который я использую для итерации и добавления класса в блоки, которые не работают

function h2_block_class() {
    global $post;
    $blocks = parse_blocks( $post->post_content );
    $i = 0;
    foreach ( $blocks as $block ) {
        if ($block['blockName'] == 'acf/h2-block') {
            $i++;
            $total_blocks = $i;
        }
    }
    return $total_blocks;
}

Результат отображает неправильно

<div class="section_one h2-block 2"><h2>Header 1</h2></div>
<div class="section_one h2-block 2"><h2>Header 2</h2></div>

Где это должно быть

<div class="section_one h2-block 1"><h2>Header 1</h2></div>
<div class="section_one h2-block 2"><h2>Header 2</h2></div>
...