概述

块通常会将标记（HTML）插入到您想要以某种方式样式的帖子内容中。本指南将介绍几种在块编辑器中使用 CSS 的方法以及如何处理样式和样式表。

开始之前

您需要一个基本的块和 WordPress 开发环境来实现本指南中显示的示例。请查看 快速入门指南 或 块教程 以进行设置。

添加样式的方法

以下是您可以使用的不同方法，在编辑器中或在保存时为块添加样式。

方法 1：内联样式

第一种方法显示添加内联样式。这将定义的样式转换为插入元素的属性。

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>
        );
    },
} );

方法 2：块类名

内联样式适用于应用少量 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 外部加载，因此它可以用于编辑器内容和 UI。

例如：

{
    "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 文件以在编辑器视图中加载：

/* 绿色背景 */
.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 中指定时，文件将自动加载。

如果您使用 `@wordpress/scripts`，您需要在相应的 JavaScript 文件中导入样式表，以便 `@wordpress/scripts` 处理样式表。

示例：

– 在 `edit.js` 中，您将放置 `import './editor.scss';`
– 在 `index.js` 中，您将放置 `import './style.scss';`
– 在 `view.js` 中，您将放置 `import './view.scss';`（交互式块模板）

注意：如果您有多个文件需要包含，您可以像任何其他插件或主题一样使用标准的 wp_enqueue_style 函数。您将为块编辑器使用以下钩子：

  • enqueue_block_editor_assets – 仅在编辑器视图中加载
  • enqueue_block_assets – 在前端和编辑器视图中都加载

结论

本指南展示了应用样式到块的几种不同方法，通过内联或在其自己的样式表中。这两种方法都使用 useBlockProps 钩子，有关更多详细信息，请查看 块包装器参考文档。

在 block-development-examples 存储库 中查看完整的 stylesheets-79a4c3 代码。