自定义样式的css在古登堡预览中不起作用

时间：2021-11-10 作者：D_P

我在Wordpress块中添加了自定义CSS文件add_editor_style( \'/css/posts.css\' );. 问题是这种风格不适用于古腾堡编辑器中的手机和平板电脑预览。因为我使用Kadence Blocks插件，所以我尝试添加额外的CSS选择器body.kadence-preview-width-mobile 但它不起作用。那么，我应该怎么做才能使古腾堡移动预览与自定义CSS样式配合使用呢？

1 个回复
最合适的回答,由SO网友:shadi 整理而成

add_editor_sytle 添加自定义TinyMCE编辑器样式表的回调。并且您希望在块编辑器中设置块样式，而不是在TinyMCE编辑器中。使用wp_register_style 默认情况下，它会排队进入所有媒体屏幕。然后为要使用的任何块注册此样式register_block_style.尝试以下操作：

add_action(\'init\', function() {
    wp_register_style(\'awp-block-styles\', get_template_directory_uri() . \'/assets/css/custom-block-style.css\', false);
    register_block_style(\'core/heading\', [
        \'name\' => \'colored-bottom-border\',
        \'label\' => __(\'Colored bottom border\', \'txtdomain\'),
        \'style_handle\' => \'awp-block-styles\'
    ]);
});
这种方式更好，因为只有在使用块时，样式才会排队。但如果要同时设置所有块的样式。然后使用wp_enqueue_style 使用并将其钩住enqueue_block_editor_assets 仅针对编辑器，以及wp_enqueue_scripts 对于前端。

也可以在中设置块或元素的样式theme.json 文件

标签： block-editor   小码农  

相关推荐