wordpress - 将 Container Div 添加到 WordPress 中的每个 Gutenberg-Block
问题描述
我正在使用 Gutenberg 编辑器和 Bootstrap CSS 框架。默认情况下,古腾堡街区周围没有容器或类似的东西。
一些块有一个alignwide
和alignfull
选项,可以在它们周围添加类似容器的东西。这些选项适用于封面图片或段落。
但是标题栏(默认情况下)没有这样的选项。
而且我很想为每个 Gutenberg 块添加一个额外的复选框,以div
在它周围切换一个额外的容器。不只是一堂课。
我找到了一些可以为每个古腾堡博客添加额外风格的东西:https ://www.billerickson.net/block-styles-in-gutenberg/
这是那里的代码:
wp.domReady( () => {
wp.blocks.registerBlockStyle( 'core/heading', {
name: 'default',
label: 'Default',
isDefault: true,
} );
wp.blocks.registerBlockStyle( 'core/heading', {
name: 'alt',
label: 'Alternate',
} );
} );
它工作得很好,给块一个额外的类/样式。但它不会在块周围包裹一些东西。
是否有任何选项可以将诸如容器切换(添加类)之类的东西添加div
到.container
块中?
解决方案
如果现在有人(比如我)也需要这个,WordPress 已经有另一个更容易实现的过滤器,称为render_block
https://developer.wordpress.org/reference/hooks/render_block/
这是一个例子
function wporg_block_wrapper( $block_content, $block ) {
if ( $block['blockName'] === 'core/paragraph' ) {
$content = '<div class="wp-block-paragraph">';
$content .= $block_content;
$content .= '</div>';
return $content;
} elseif ( $block['blockName'] === 'core/heading' ) {
$content = '<div class="wp-block-heading">';
$content .= $block_content;
$content .= '</div>';
return $content;
}
return $block_content;
}
add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );
推荐阅读
- ansible - Ansible:从库存文件中获取变量值
- astropy - Astropy Kuiper 检验中的 D 数
- python - 使用名称从 df 中提取行
- angular - 角度输入字段数据格式
- swift - 从 Xcode 应用程序执行终端命令时不允许操作
- html - 我需要了解 J 查询及其嵌套功能> 如何使用相同的目标将一个函数嵌套到另一个函数中?
- android - 构建 gradle 弃用
- powerquery - Power Query:为每个 FieldA 过滤行,给定 FieldB 中的最大值,速度非常慢
- database - 使用“AA”域/数据库的用户登录“BB”域/数据库
- python - 如何使用 Glove 和 CNN 配置和训练模型进行文本分类?