Wordpress Gutenberg自定义列块
Wordpress Gutenberg自定义列块
提问于 2021-03-22 22:36:28
我正在尝试用ACF和Wordpress为Gutenberg创建一个自定义的" columns“块，所以我想要的是一个易于管理的columns块，其中用户可以输入一些表示所需列数的数字(例如，5)，一个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 block那样做，使用一些“黑客”……但我不明白该怎么做...
有没有人可以帮助我，给我一些方法来达到我需要的东西？
谢谢!
-更新--
尝试创建“列”块并将“列”设置为只接受新创建的“列”块，但仍不起作用...
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
}回答 1
Stack Overflow用户
发布于 2021-03-23 08:43:48
我实际上一直在做一些非常类似的事情，尽管我现在陷入了一个不同的问题。
看起来您仍在尝试在columns_renderer函数中创建多个InnerBlocks。相反，我所做的是创建一个InnerBlocks，并用一个由多个Column块组成的$template填充它。
我在Row InnerBlocks上使用templateLock="all"来阻止在那里添加任何新的块，类似的事情也可以通过使用allowedBlocks来实现，这取决于您是否希望能够从可视化编辑器添加更多的Columns。我将templateLock="false"添加到Columns InnerBlocks中，以便覆盖父(Row)值并允许向其中添加内容。
我使用acf为Row块创建了一个带有数字范围滑块的cols字段，默认值为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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66754772
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
