块通常会将标记（HTML）插入到要以某种方式设置样式的帖子内容中。本指南介绍了在块编辑器中使用CSS的几种不同方法，以及如何使用样式和样式表。
您需要一个基本块和WordPress开发环境来实现本指南中显示的示例。请参阅快速入门指南或块教程进行设置。
以下是可用于在编辑器中或保存时向块添加样式的不同方法。
第一个方法显示了内联添加样式。这会将定义的样式转换为所插入元素的属性。
这个使用块属性React钩子用于设置和应用块包装元素的属性。以下示例显示了如何：
从“@wordpress/blocks”导入{registerBlockType}；从“@wordpress/block-editor”导入{useBlockProps}；registerBlockType（'gutenberg-examples/example-02-stylesheets'{编辑（）{const绿色背景={backgroundColor:“#090”，颜色：“#fff”，填充：'20px'，};const blockProps=使用blockProps（{style:greenBackground}）；返回(Hello World（来自编辑器，绿色）</p>（第页）);},保存（）{const red背景={backgroundColor:“#900”，颜色：“#fff”，填充：'20px'，};const blockProps=useBlockProps.save（{style:redBackground}）；返回(＜p｛…blockProps｝＞Hello World（来自前端，红色）</p>（第页）);},} );
内联样式适用于少量CSS。如果您有比上面更多的内容，您可能会发现在单独的样式表文件中使用它们更容易管理。
这个使用块属性hooks自动包含块的类名，它使用块的名称前缀为每个块生成一个名称wp-块-，更换/带有单个的命名空间分隔符-.
例如，块名：gutenberg-examples/example-02-样式表将获得类名：wp-块状-古腾堡-样品-示例-02-样式表。可能有点长，但最好避免与其他块冲突。
从“@wordpress/blocks”导入{registerBlockType}；从“@wordpress/block-editor”导入{useBlockProps}；registerBlockType（'gutenberg-examples/example-02-stylesheets'{编辑（）{const blockProps=使用块属性（）；返回(Hello World（来自编辑器，绿色）</p>（第页）);},保存（）{const blockProps=useBlockProps.save（）；返回(Hello World（来自前端，红色）</p>（第页）);},} );
为了将blockEditor包含为依赖项，请确保运行构建步骤，或更新资源php文件。
构建脚本并更新用于跟踪依赖项和构建版本的资产文件。
npm运行生成
与脚本一样，您可以使用块.json文件。
使用编辑器样式属性设置为只想在编辑器视图中加载的CSS文件，使用风格属性，用于在使用块时要在编辑器视图和前端加载的CSS文件，并使用视图样式属性，用于在使用块时只想在前端加载的CSS文件。
值得注意的是，如果编辑器内容是iframed的，那么风格和编辑器样式将加载到iframe中。编辑器样式也将在iframe外部加载，因此它可以用于编辑器内容和UI。
例如：
{“apiVersion”：3，“name”：“gutenberg-examples/example-02-stylesheets”，“title”：“示例：样式表”，“icon”：“通用访问标签”，“类别”：“布局”，“editorScript”：“文件：./block.js”，“editorStyle”：“文件：./editor.css”，“style”：“文件：./style.css”}
因此，在插件目录中，创建一个编辑.css要在编辑器视图中加载的文件：
/*绿色背景*/.wp-block-gutenberg示例-02-样式表{背景：#090；颜色：白色；填充：20px；}
还有一个样式表要在前端加载的文件：
/*红色背景*/.wp-block-gutenberg示例-02-样式表{背景：#900；颜色：白色；填充：20px；}
当在block.json中指定时，文件将自动排队。
如果您正在使用`@wordpress/scripts`，则需要在相应的JavaScript文件中导入样式表，以便`@wordbress/scripts `处理样式表。
例子：
–在“edit.js”中，可以放置“import”/editor.scs'`
–在`index.js`中，您可以放置`import'/style.scs'`
–在“view.js`中，您可以放置“import”/view.scss'；`（交互式块模板）
注：如果要包含多个文件，可以使用标准wp_enque_样式像其他插件或主题一样的功能。您需要为块编辑器使用以下挂钩：
排队块编辑器资产–仅在编辑器视图中加载排队块资产–在前端和编辑器视图上加载
本指南介绍了通过内联或在其自己的样式表中对块应用样式的几种不同方法。这两种方法都使用使用块属性钩子，参见块包装器参考文档了解更多详细信息。
查看完整信息样式表-79a4c3中的代码块开发示例存储库.