区块样式表

欢迎来到本课程，我们将探索如何在不使用 theme.json 文件的情况下创建区块样式表。

什么是区块样式表，何时使用它？

你始终可以选择在 theme.json 中编写 CSS。

以下是一个针对 WordPress 核心画廊区块的示例。然而，如果你的 CSS 变得过于冗长，区块样式表就是解决方案。

现在，让我们看看 WordPress 目录中的几个区块主题。

• 第一个主题名为 Ronny，由 ThemeinWP 创建。
• 第二个主题名为 Charity Vibes，由 Iconic Themes 创建。

你始终可以选择将 CSS 放在 style.css 中。

但对于大型项目，你可能需要考虑按区块拆分样式表，并将其放入诸如 assets 之类的文件夹中。这样可以提高网站性能，也让大型项目更易于管理。

在 Ronny 主题中，他们选择将区块样式表放在 ‘assets/styles’ 中；而在 Charity Vibes 中，他们选择将样式表放在 ‘assets/css’ 中，并命名为 blocks.css 文件。

由此可见，你在命名文件和文件夹时是有选择余地的。

创建自定义区块样式表

现在，让我们看看如何创建自定义区块样式表。

需要注意一些命名约定。

区块样式表的类名是 .wp-block-{命名空间}-{别名}，对于核心区块，你会使用类 .wp-block-{别名}，而区块样式表文件则命名为 core-{别名}.css。

要注册区块样式表，你需要使用 wp_enqueue_block_style 函数。

第一个参数传入区块名称，第二个参数传入一个参数数组。你可以使用 functions.php 来注册区块样式表。

以下是一个针对 WordPress 核心图片区块的示例，这是让你的样式在页面头部区域以内联方式显示所需的最低要求。

add_action( 'init', 'themeslug_enqueue_block_styles' );

function themeslug_enqueue_block_styles() {
    wp_enqueue_block_style( 'core/image', array(
        'handle' => 'themeslug-block-image',
        'src'    => get_theme_file_uri( "assets/blocks/core-image.css" ),
        'path'   => get_theme_file_path( "assets/blocks/core-image.css" )
    ) );
}

下一步

你可以参考 WordPress.org 上的主题手册，了解更多关于区块样式表的信息。