区块主题设置

文件结构

启用任何主题都需要两个文件：index.php和style.css。区块主题还必须包括templates文件夹内的index.html模板。如果模板文件放在错误的文件夹中，主题将无法正确加载。模板片段是可选的，如果有，则必须放在parts件夹里。

theme.json配置文件是可选的，但强烈建议使用。了解更多关于theme.json的信息。

除了必要的文件外，主题还可以包含theme.json、functions.php文件、任何额外的PHP文件、CSS、图像或JavaScript来增强主题。

文件结构示例

assets (dir)
      - css (dir)
            - blocks (dir)
      - images (dir)
      - js (dir)
inc (dir)
patterns (dir)
parts (dir)
      - footer.html
      - header.html
templates(dir)
      - 404.html
      - archive.html
      - index.html
      - page.html
      - single.html
      - search.html
functions.php
index.php
README.txt
rtl.css
screenshot.png
style.css
editor-style.css
theme.json

 

主题设置函数

在区块主题的functions.php中设置主题的例子，包含wp-block-styles和一个编辑器样式：

if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook.
 */
function myfirsttheme_setup() {
    // Add support for block styles.
    add_theme_support( 'wp-block-styles' );

    // Enqueue editor styles.
    add_editor_style( 'editor-style.css' );
}
endif; // myfirsttheme_setup
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

这比你可能用来设置一个经典主题的代码要少得多。

 

主题支持

在区块主题中，下列主题支持被自动启用：

add_theme_support( 'post-thumbnails' );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'editor-styles' );
add_theme_support( 'html5', array('style','script', ) );
add_theme_support( 'automatic-feed-links' );

当你的theme.json中包含有一个设置时，一些主题支持会被自动启用。theme.json中的设置优先于add_theme_support()。

主题支持	Theme.json 设置
add_theme_support( ‘editor-font-sizes’, array() );	settings.typography.fontSizes
add_theme_support( ‘custom-line-height’ );	settings.typography.lineHeight
add_theme_support( ‘align-wide’ );	settings.layout
add_theme_support( ‘editor-color-palette’, array() );	settings.color.palette
add_theme_support( ‘editor-gradient-presets’, array() );	settings.color.gradients
add_theme_support( ‘custom-spacing’ );	settings.spacing
add_theme_support( ‘custom-units’, array() );	settings.spacing.units

 

引入区块的CSS样式

除了可以使用在主题基础章节中介绍的wp_enqueue_style()之外，你还可以使用wp_enqueue_block_style()来为区块引入样式，但需要WordPress 5.9版本。

创建区块主题的一个关键原因是性能。通过wp_enqueue_block_style()，主题只在页面上使用某区块时加载它对应的CSS。
在WordPress和Gutenberg提供区块样式之后，额外的样式会在编辑器和前台被加载。你可以用这个方法来添加你无法通过theme.json添加的区块样式。例如，媒体查询。

这个代码例子改变了最新评论区中日期的大小和文本颜色。因为这是一个嵌套在其他HTML元素中的time HTML元素，所以不能用theme.json来进行样式设计

首先，创建一个新的CSS文件，文件名为：latest-comments.css。
把这个文件放在哪里，取决于你如何组织主题文件。在本例中，该文件被放置在assets/CSS/blocks文件夹中。

time元素的CSS类是wp-block-latest-comments__comment-date。前缀加区块名称后面部分用两个下划线分开。
你可以在编码指南中阅读更多关于区块编辑器的命名规则。

文本颜色和字体大小是通过CSS自定义属性添加的，这些属性由theme.json生成：

.wp-block-latest-comments__comment-date {
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--small);
}

下一步，在主题设置函数中引入区块样式。

区块的名称被放在一个数组内，用以加载多个区块样式。
用foreach循环遍历数组中的每个区块，并创建一个句柄、src（源）和路径参数。
然后使用区块名称和参数引入文件：
wp_enqueue_block_style( “prefix/blockname”, $args );

本例子中，前缀是 "core"，因为这个样式是为一个核心区块设计的。当你为插件中的区块设计样式时，你需要调整前缀。

function myfirsttheme_setup() {
    /*
     * Load additional block styles.
     */
    $styled_blocks = ['latest-comments'];
    foreach ( $styled_blocks as $block_name ) {
        $args = array(
            'handle' => "myfirsttheme-$block_name",
            'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
            $args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
        );
        wp_enqueue_block_style( "core/$block_name", $args );
    }
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

 

引入JavaScript

请参考区块编辑手册中的加载JavaScript一文。