Wordpress Gutenberg 自定义列块

问题描述

我正在尝试使用 ACF 和 wordpress 为 Gutenberg 创建一个自定义“列”块，所以我想要的是一个易于管理的列块，用户可以在其中输入一些表示所需列数量的数字（例如， 5) 和 for 将创建该列。

一切都很好，因为我尝试创建多个内部块...我的代码是这样开始的：

acf_register_block_type([
    'name' => "theme-columns",'title' => __("Columns","mytheme"),'description' => __("Columns",'category' => "theme-blocks",'icon' => "grid-view",'render_callback' => [$this->renderers,"columns_renderer"],'mode' => "preview",'supports' => [
        'align' => true,'mode' => false,'jsx' => true
    ],'enqueue_assets' => function(){
        wp_enqueue_style("bootstrap");
    }
]);

还有 columns_renderer 函数：

public function columns_renderer()
{
    $count = get_field("columns-count");
    ?>
    <div class="row row-cols-1 row-cols-md-3 row-cols-xl-5 justify-content-center">
        <?PHP for($i = 0; $i < $count; $i++): ?>
        <div class="col">
            <InnerBlocks />
        </div>
        <?PHP endfor; ?>
    </div>
    <?PHP
}

因此，正如（不）预期的那样，它不起作用，因为古腾堡不支持每个块的多个 <InnerBlocks />...在网上搜索，我发现有些人在谈论这样做，例如 {{1 }} 块确实，使用一些“黑客”......但我无法理解该怎么做......

有人可以帮助我并给我一些方法来达到我所需要的吗？

谢谢！

-- 更新 --

尝试创建“列”块并将“列”设置为仅接受新创建的“列”块，但仍然无法正常工作...

core/column

public function column()
{
    $this->register_block([
        'name' => "theme-column",'title' => __("Column",'description' => __("Column",'icon' => "columns","column_renderer"],'supports' => [
            'align' => true,'jsx' => true
        ],'enqueue_assets' => function(){
            wp_enqueue_style("theme-main");
        }
    ]);
}

public function column_renderer()
{
    ?>
    <InnerBlocks />
    <?PHP
}

public function columns()
{
    $this->register_block([
        'name' => "theme-columns",'enqueue_assets' => function(){
            wp_enqueue_style("theme-main");
        }
    ]);
}

解决方法

实际上我一直在做一些非常相似的事情，尽管我现在遇到了一个不同的问题。

您似乎仍在尝试在 InnerBlocks 函数中创建多个 columns_renderer。相反，我所做的是创建一个 InnerBlocks 并用由多个 $template 块组成的 Column 填充它。

我在 templateLock="all" Row 上使用 InnerBlocks 来阻止在那里添加任何新块，也可以通过使用 allowedBlocks 来实现类似的效果，具体取决于您是否愿意是否能够从可视化编辑器添加更多 Columns。我将 templateLock="false" 添加到 Columns InnerBlocks 以覆盖父 (Row) 值并允许向其中添加内容。

我使用 acf 为 cols 块创建一个带有数字范围滑块的 Row 字段，默认值为 1 以创建 1 列。随着您移动滑块，将添加更多 Columns。

设置块：

acf_register_block_type(array(
  'name'                => 'row','title'               => 'Row','description'         => 'A row content block.','category'            => 'formatting','mode'                => 'preview','supports'            => array(
    'align'             => true,'anchor'            => true,'customClassName'   => true,'mode'              => false,'jsx'               => true
  ),'render_callback' => 'block_row',));

acf_register_block_type(array(
  'name'                => 'column','title'               => 'Column','description'         => 'A column content block.','jsx'               => true,),'render_callback' => 'block_col',));

输出 Row 内容：

function block_row( $block ){
    $classes = '';
    if( !empty( $block['className'] ) ) {
        $classes .= sprintf( ' %s',$block['className'] );
    }
    if( !empty( $block['align'] ) ) {
        $classes .= sprintf( ' align%s',$block['align'] );
    }

    $cols = get_field('cols');
    if( empty( $cols ) ) {
        $cols = 1;
    }

    for( $x = 0; $x < $cols; $x++ ) {
        $template[] = array( 'acf/column' );
    }
?>
<div class="row-block row <?php echo esc_attr($classes); ?>">
    <h1>Row</h1>
    <?php 
    echo '<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '" templateLock="all"/>';
    ?>
</div>
<?php
}

输出 Column 块：

function block_col( $block ){
    $classes = '';
    if( !empty( $block['className'] ) ) {
        $classes .= sprintf( ' %s',$block['align'] );
    }

    $template = array( array( 'core/paragraph',array(
            'content' => 'Enter content here',) ) );
?>
<div class="col-block <?php echo esc_attr($classes); ?>">
    <h1>Col</h1>
    <?php 
    echo '<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '" templateLock="false"/>';
    ?>
</div>
<?php
}