在EDITOR-BLOCKS.css文件中使用css类

时间：2021-10-20 作者：leemon

检查editor-blocks.css 在一些主题中找到的文件中，我看到在一些单独的块类之前添加了以下CSS类：

.edit-post-visual-editor
.editor-block-list__layout
.editor-block-list__block
.block-library-list
例如：

.editor-block-list__block .wp-block-latest-comments {
    margin-left: 0;
    margin-right: 0;
}
还有其他人，没有：

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    font-size: 1.5rem;
    margin: 0 0.8em 0.8em;
    padding: 0;
    border: 0;    
}
这些CSS类有什么用？它们针对块编辑器中的哪些元素？为什么一些块CSS类之前添加了它们，而其他类则没有？它们真的有必要吗？为什么有些主题有editor-blocks.css 文件和ablocks.css 以及为什么其他人只是blocks.css 一

提前感谢

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

如果有人感兴趣，以下是我在研究块编辑器一段时间后得出的结论。

二者都.editor-block-list__layout 和.editor-block-list__block 自WordPress 5.4以来，类已被弃用，并已重命名为.block-editor-block-list__layout 和.block-editor-block-list__block, 分别地这个.block-editor-block-list__layout 类的目标是在帖子内容和.block-editor-block-list__block 类以帖子内容中的各个块类型为目标，因此后者相当于使用特定的.wp-block-*** 课程。

我没有看到.block-library-list 类在块编辑器中的任何位置使用，因此我认为将其作为目标毫无意义。

最后.edit-post-visual-editor 类的目标是整个块编辑器。

总之，在WordPress的最新版本（5.4版以后）中，只需使用.wp-block-*** 类来设置块编辑器中各个块类型的样式。

SO网友:Kalimah

搜索编辑器源代码：https://github.com/WordPress/gutenberg 没有显示太多结果。我建议搜索这些类的主题源代码，看看它们在哪里应用。（如果按。在github上查看代码时，将获得VSCode编辑器）

register_block_type 用于在WordPress中添加阻止日期。通常使用以下参数：

 register_block_type( \'custom-plugin/custom-block\', array(
        \'editor_script\' => \'editor-script.js\',
        \'editor_style\'  => \'editor-style.css\',
        \'style\'         => \'frontend.css\',
    ) );
editor_script 和editor_style 将文件添加到编辑器管理。style 旨在将CSS添加到前端。

文件中没有提到的是style 也在后端加载。因此，这些主题可能使用一个文件作为后端和前端，以最小化他们编写的代码。

SO网友:StudioAl

这个editor-block-list__block 类只在古腾堡编辑器中渲染，而wp-block-[blockname] 类在前端和编辑器上都呈现。因此，课程以editor-block-list__block 仅针对后端。

标签： css   block-editor   小码农  

相关推荐

Add css class to Pagination?

我一直在使用以下代码：$current_page = get_query_var(\'paged\'); $current_page = max( 1, $current_page ); $per_page = 12; $offset_start = 1; $offset = ( $current_page - 1 ) * $per_page + $offset_start; $post_list = new WP_Query(array(&#x