163 lines
5.3 KiB
Markdown
163 lines
5.3 KiB
Markdown
# 使用样式与样式表
|
||
|
||
## 概述
|
||
|
||
区块通常会在文章内容中插入需要特定样式化的标记（HTML）。本指南将详细介绍几种在区块编辑器中使用 CSS 的不同方法，以及如何处理样式和样式表。
|
||
|
||
## 开始之前
|
||
|
||
您需要准备一个基础区块和 WordPress 开发环境来实现本指南中的示例。请参阅[快速入门指南](/docs/getting-started/quick-start-guide.md)或[区块教程](/docs/getting-started/tutorial.md)完成环境配置。
|
||
|
||
## 添加样式的方法
|
||
|
||
以下是为区块添加样式的不同方法（适用于编辑器界面或保存后的显示效果）：
|
||
|
||
## 方法一：内联样式
|
||
|
||
第一种方法演示了如何添加内联样式。这种方式会将定义的样式转换为插入元素的属性。
|
||
|
||
通过 `useBlockProps` React 钩子可以设置并应用区块包装元素的属性。具体示例如下：
|
||
|
||
```jsx
|
||
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（编辑器界面显示，绿色背景）。</p>
|
||
);
|
||
},
|
||
save() {
|
||
const redBackground = {
|
||
backgroundColor: '#900',
|
||
color: '#fff',
|
||
padding: '20px',
|
||
};
|
||
|
||
const blockProps = useBlockProps.save( { style: redBackground } );
|
||
|
||
return (
|
||
<p { ...blockProps }>Hello World（前端显示，红色背景）。</p>
|
||
);
|
||
},
|
||
} );
|
||
```
|
||
|
||
## 方法二：区块类名
|
||
|
||
内联样式适用于少量 CSS 的情况。如果需要更复杂的样式，使用独立的样式表文件会更便于管理。
|
||
|
||
`useBlockProps` 钩子会自动包含区块的类名，它会根据区块名称生成以 `wp-block-` 为前缀的类名，并将命名空间分隔符 `/` 替换为 `-`。
|
||
|
||
例如区块名称 `gutenberg-examples/example-02-stylesheets` 对应的类名为：`wp-block-gutenberg-examples-example-02-stylesheets`。虽然较长但能有效避免与其他区块冲突。
|
||
|
||
```jsx
|
||
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（编辑器界面显示，绿色背景）。</p>
|
||
);
|
||
},
|
||
save() {
|
||
const blockProps = useBlockProps.save();
|
||
|
||
return (
|
||
<p { ...blockProps }>Hello World（前端显示，红色背景）。</p>
|
||
);
|
||
},
|
||
} );
|
||
```
|
||
|
||
### 构建或添加依赖
|
||
|
||
如需将 blockEditor 添加为依赖项，请确保执行构建步骤或更新资源 PHP 文件。
|
||
|
||
构建脚本并更新用于跟踪依赖关系和构建版本的资源文件：
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 加载样式表
|
||
|
||
与脚本类似，您可以通过 `block.json` 文件加载区块的样式表。
|
||
|
||
- `editorStyle` 属性：指定仅在编辑器界面加载的 CSS 文件
|
||
- `style` 属性：指定在编辑器界面和前端都会加载的 CSS 文件
|
||
- `viewStyle` 属性：指定仅在前端加载的 CSS 文件（当区块被使用时）
|
||
|
||
值得注意的是，如果编辑器内容位于 iframe 中，`style` 和 `editorStyle` 都会在 iframe 内加载。`editorStyle` 还会在 iframe 外加载，因此可用于编辑器内容和界面样式。
|
||
|
||
示例：
|
||
|
||
```json
|
||
{
|
||
"apiVersion": 3,
|
||
"name": "gutenberg-examples/example-02-stylesheets",
|
||
"title": "示例：样式表",
|
||
"icon": "universal-access-alt",
|
||
"category": "layout",
|
||
"editorScript": "file:./block.js",
|
||
"editorStyle": "file:./editor.css",
|
||
"style": "file:./style.css"
|
||
}
|
||
```
|
||
|
||
在插件目录中创建 `editor.css` 文件用于编辑器界面：
|
||
|
||
```css
|
||
/* 绿色背景 */
|
||
.wp-block-gutenberg-examples-example-02-stylesheets {
|
||
background: #090;
|
||
color: white;
|
||
padding: 20px;
|
||
}
|
||
```
|
||
|
||
创建 `style.css` 文件用于前端显示：
|
||
|
||
```css
|
||
/* 红色背景 */
|
||
.wp-block-gutenberg-examples-example-02-stylesheets {
|
||
background: #900;
|
||
color: white;
|
||
padding: 20px;
|
||
}
|
||
```
|
||
|
||
在 block.json 中指定后，这些文件将自动加载。
|
||
|
||
<div class="callout callout-info">
|
||
|
||
如果使用 `@wordpress/scripts`，需要在对应的 JavaScript 文件中导入样式表，以便 `@wordpress/scripts` 处理样式表。
|
||
|
||
示例：
|
||
|
||
- 在 `edit.js` 中添加 `import './editor.scss';`
|
||
- 在 `index.js` 中添加 `import './style.scss';`
|
||
- 在 `view.js` 中添加 `import './view.scss';`（交互式区块模板）
|
||
</div>
|
||
|
||
**注意：** 如需加载多个文件，可以像其他插件或主题一样使用标准的 `wp_enqueue_style` 函数。区块编辑器建议使用以下钩子：
|
||
|
||
- `enqueue_block_editor_assets` - 仅在编辑器界面加载
|
||
- `enqueue_block_assets` - 在前端和编辑器界面同时加载
|
||
|
||
## 总结
|
||
|
||
本指南展示了通过内联样式或独立样式表为区块应用样式的不同方法。这两种方法都使用了 `useBlockProps` 钩子，更多细节请参阅[区块包装器参考文档](/docs/reference-guides/block-api/block-edit-save.md#block-wrapper-props)。
|
||
|
||
完整代码请查看[区块开发示例库](https://github.com/WordPress/block-development-examples)中的 [stylesheets-79a4c3](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/stylesheets-79a4c3) 示例。 |