title: "使用样式与样式表" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Block Tutorial - How To Guides - Repos
使用样式与样式表
概述
区块通常会将标记（HTML）插入到文章内容中，您可能希望以某种方式对其进行样式设计。本指南将介绍几种在区块编辑器中使用 CSS 的不同方法，以及如何处理样式和样式表。
开始之前
您需要一个基础区块和 WordPress 开发环境来实现本指南中的示例。请参阅快速入门指南或区块教程进行设置。
添加样式的方法
以下是您可以在编辑器或保存时用于为区块添加样式的不同方法。
方法一：内联样式
第一种方法展示如何内联添加样式。这会将定义的样式转换为插入元素上的属性。
useBlockProps React 钩子用于设置并应用在区块包装元素上的属性。以下示例展示了具体做法：
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
edit() {
const greenBackground = {
backgroundColor: '#090',
color: '#fff',
padding: '20px',
};
const blockProps = useBlockProps( { style: greenBackground } );
return (
<p { ...blockProps }>Hello World (from the editor, in green).</p>
);
},
save() {
const redBackground = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
const blockProps = useBlockProps.save( { style: redBackground } );
return (
<p { ...blockProps }>Hello World (from the frontend, in red).</p>
);
},
} );
方法二：区块类名
内联样式适用于少量 CSS 应用。如果样式内容远超上述示例，您可能会发现将其放在单独的样式表文件中更易于管理。
useBlockProps 钩子会自动包含区块的类名，它会为每个区块生成一个名称，该名称以 wp-block- 为前缀，并将命名空间分隔符 / 替换为单个 -。
例如，区块名称 gutenberg-examples/example-02-stylesheets 将获得类名：wp-block-gutenberg-examples-example-02-stylesheets。这可能有点长，但最好避免与其他区块发生冲突。
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
edit() {
const blockProps = useBlockProps();
return (
<p { ...blockProps }>Hello World (from the editor, in green).</p>
);
},
save() {
const blockProps = useBlockProps.save();
return (
<p { ...blockProps }>Hello World (from the frontend, in red).</p>
);
},
} );
构建或添加依赖项
如需将 blockEditor 作为依赖项引入，请确保执行构建步骤或更新资源 PHP 文件。
构建脚本并更新用于跟踪依赖项和构建版本的资源文件。
npm run build
排入样式表
与脚本类似，您可以使用 block.json 文件来排入区块的样式。
使用 editorStyle 属性指定仅在编辑器视图中加载的 CSS 文件，使用 style 属性指定在编辑器视图和前端（当区块被使用时）都加载的 CSS 文件，使用 viewStyle 属性指定仅在前端（当区块被使用时）加载的 CSS 文件。
值得注意的是，如果编辑器内容被嵌入在 iframe 中，style 和 editorStyle 都会在 iframe 内加载。editorStyle 也会在 iframe 外部加载，因此它可以用于编辑器内容以及用户界面。
例如：
{
"apiVersion": 3,
"name": "gutenberg-examples/example-02-stylesheets",
"title": "Example: Stylesheets",
"icon": "universal-access-alt",
"category": "layout",
"editorScript": "file:./block.js",
"editorStyle": "file:./editor.css",
"style": "file:./style.css"
}
因此，在您的插件目录中，创建一个 editor.css 文件以在编辑器视图中加载：
/* 绿色背景 */
.wp-block-gutenberg-examples-example-02-stylesheets {
background: #090;
color: white;
padding: 20px;
}
以及一个 style.css 文件以在前端加载：
/* 红色背景 */
.wp-block-gutenberg-examples-example-02-stylesheets {
background: #900;
color: white;
padding: 20px;
}
当在 block.json 中指定时，这些文件将自动被排入。
注意： 如果您有多个文件需要包含，可以像其他插件或主题一样使用标准的 wp_enqueue_style 函数。对于区块编辑器，您需要使用以下钩子：
enqueue_block_editor_assets- 仅在编辑器视图中加载enqueue_block_assets- 在前端和编辑器视图中都加载
结论
本指南展示了两种为区块应用样式的不同方法：内联样式或独立样式表。这两种方法都使用了 useBlockProps 钩子，更多详情请参阅区块包装器参考文档。
完整的 stylesheets-79a4c3 代码可在区块开发示例仓库中查看。