使用样式与样式表

概述

区块通常会将标记（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 代码可在区块开发示例仓库中查看。