0

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

一切正常，因为我尝试创建多个内部块......我的代码以这种方式开始：

acf_register_block_type([
    'name' => "theme-columns",
    'title' => __("Columns", "mytheme"),
    'description' => __("Columns", "mytheme"),
    '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 />每个块多个......在网上搜索，我发现有些人谈论这样做就像core/column块一样，使用一些“黑客”......但我不知道该怎么办...

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

谢谢！

- 更新 -

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

public function column()
{
    $this->register_block([
        'name' => "theme-column",
        'title' => __("Column", "mytheme"),
        'description' => __("Column", "mytheme"),
        'category' => "theme-blocks",
        'icon' => "columns",
        'render_callback' => [$this->renderers, "column_renderer"],
        'mode' => "preview",
        'supports' => [
            'align' => true,
            'mode' => false,
            '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",
        'title' => __("Columns", "mytheme"),
        'description' => __("Columns", "mytheme"),
        'category' => "theme-blocks",
        'icon' => "columns",
        'render_callback' => [$this->renderers, "columns_renderer"],
        'mode' => "preview",
        'supports' => [
            'align' => true,
            'mode' => false,
            'jsx' => true
        ],
        'enqueue_assets' => function(){
            wp_enqueue_style("theme-main");
        }
    ]);
}

public function columns_renderer()
{
    $allowedBlocks = ["acf/theme-column"];
    $template = array(
        array('acf/biore-column', []),
    );
    $column_count = get_field("columns-count");
    ?>
    <div class="row py-4">
        <?php for($i = 0; $i < $column_count; $i++): ?>
        <div class="col">
            <InnerBlocks allowedBlocks="<?= esc_attr(wp_json_encode($allowedBlocks)); ?>" template="<?= esc_attr(wp_json_encode($template)); ?>" />
        </div>
        <?php endfor; ?>
    </div>
    <?php
}
4

1 回答 1

0

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

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

我使用templateLock="all"onRow 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.',
  'category'            => 'formatting',
  'mode'                => 'preview',
  'supports'            => array(
    'align'             => true,
    'anchor'            => true,
    'customClassName'   => true,
    'mode'              => false,
    '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['className'] );
    }
    if( !empty( $block['align'] ) ) {
        $classes .= sprintf( ' align%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
}
于 2021-03-23T08:43:48.290 回答