为WordPress区块添加自定义样式：为列表块添加对号（√）样式

本文核心代码

// 为WordPress区块添加自定义样式：为列表块添加对号（√）样式
if ( ! function_exists( 'yixiuk2_block_styles' ) ) :
	function yixiuk2_block_styles() {
		register_block_style(
			'core/list',
			array(
				'name'         => 'checkmark-list',
				'label'        => __( 'Checkmark', 'yixiuk2' ),
				'inline_style' => '
				ul.is-style-checkmark-list {
					list-style-type: "2713";
				}

				ul.is-style-checkmark-list li {
					padding-inline-start: 1ch;
				}',
			)
		);
	}
endif;
add_action( 'init', 'yixiuk2_block_styles' );

代码位置

推荐将此代码实现放置到主题的 funtion.php 中。

以下是对以上代码的拆解：

代码结构分析

1. 函数存在性检查

if ( ! function_exists( 'yixiuk2_block_styles' ) ) :

• 检查是否已经存在同名函数，避免重复定义冲突
• : 是 PHP 替代语法，与 endif 配对使用

2. 主函数定义

function yixiuk2_block_styles() {
    register_block_style(
        'core/list',  // 目标区块：核心列表区块
        array(
            'name'         => 'checkmark-list',  // 样式标识符
            'label'        => __( 'Checkmark', 'yixiuk2' ),  // 显示名称（可翻译）
            'inline_style' => '
            ul.is-style-checkmark-list {
                list-style-type: "2713";  // Unicode 对勾符号
            }
            ul.is-style-checkmark-list li {
                padding-inline-start: 1ch;  // 左内边距 1 字符宽度
            }',
        )
    );
}
endif;

3. 钩子注册

add_action( 'init', 'yixiuk2_block_styles' );

• 在 WordPress 初始化时执行函数
• init 是注册区块样式的适当时机

功能详解

CSS 样式说明

• list-style-type: "2713": 将列表标记改为 Unicode 对勾符号 (✓)
• padding-inline-start: 1ch:
• ch 单位基于数字 “0” 的宽度
• 为列表项添加 1 字符宽度的左内边距
• inline-start 支持 RTL（从右到左）语言

实际效果

应用此样式后：

• 无序列表会显示为对勾标记 ✓ 而不是默认的圆点
• 在区块编辑器的样式面板中会出现 “Checkmark” 选项

使用场景

在古腾堡编辑器中：

1. 添加一个列表区块
2. 在右侧边栏的 “样式” 设置中
3. 选择 “Checkmark” 样式选项

扩展示例

可以注册多个区块样式：

function yixiuk2_block_styles() {
    // 对勾列表样式
    register_block_style('core/list', array(
        'name'  => 'checkmark-list',
        'label' => __('Checkmark', 'yixiuk2'),
        'inline_style' => 'ul.is-style-checkmark-list { list-style-type: "2713"; }'
    ));

    // 叉号列表样式
    register_block_style('core/list', array(
        'name'  => 'cross-list',
        'label' => __('Cross', 'yixiuk2'),
        'inline_style' => 'ul.is-style-cross-list { list-style-type: "2717"; }'
    ));
}

这段代码是 WordPress 主题或插件开发中常见的模式，用于扩展古腾堡编辑器的样式选项。