Hello World（编辑器界面显示，绿色背景）。
); }, save() { const redBackground = { backgroundColor: '#900', color: '#fff', padding: '20px', }; const blockProps = useBlockProps.save( { style: redBackground } ); return (Hello World（前端显示，红色背景）。
); }, } ); ``` ## 方法二：区块类名 内联样式适用于少量 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 (Hello World（编辑器界面显示，绿色背景）。
); }, save() { const blockProps = useBlockProps.save(); return (Hello World（前端显示，红色背景）。
); }, } ); ``` ### 构建或添加依赖 如需将 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 中指定后，这些文件将自动加载。