古腾堡核心/列:正确更改 html 输出

时间:2021-06-01 08:09:50

标签: wordpress filter hook block wordpress-gutenberg

我想知道,这种更改块核心/列的HTML输出的方法是否以最好的方式完成。基本上,我需要一个 额外的 div-tag wihin wp-block-column 输出

默认输出:

<div class="wp-block-columns"><div class="wp-block-column">content col1</div><div class="wp-block-column">content col2</div></div>

所需的输出:

<div class="wp-block-columns"><div class="wp-block-column"><div class="wp-block-column-inner">content col1</div></div><div class="wp-block-column"><div class="wp-block-column-inner">content col2</div></div></div>

目前我在主题functions.php

中使用以下内容
function custom_render_block_core_columns (
    string $block_content, 
    array $block
): string 
{
    if (
        $block['blockName'] === 'core/columns' && 
        !is_admin() &&
        !wp_is_json_request()
    ) {
        
        $html = '';

        
        $block['attrs']['className'] ??= '';
        $block['attrs']['className'] .= ' theme--' . ($block['attrs']['backgroundColor'] ?? 'white');

        $html .= '<div class="wp-block-columns ' . $block['attrs']['className'] . '">' . "\n";
        
        if (isset($block['innerBlocks'])) {
            foreach ($block['innerBlocks'] as $inner_block) {
                $varCheck = trim($inner_block['innerHTML']);
                                
                if ($varCheck == '<div class="wp-block-column"></div>') {
                    $inner_block['innerHTML'] =  '<div class="wp-block-column"><div class="wp-block-column-inner"></div></div>';  
                    
                    $inner_block["innerContent"][0] = '<div class="wp-block-column"><div class="wp-block-column-inner">';
                    $inner_block["innerContent"][2] = '</div></div>';  
                    
                }
                $html .= render_block($inner_block);
            }
        }

        $html .= '</div><!--/ .wp-block-columns -->' . "\n";        
        return $html;
    }

    return $block_content;
}

add_filter('render_block', 'custom_render_block_core_columns', null, 2);

0 个答案:

没有答案