WordPress WYSIWYG编辑器无法为段落添加自定义格式类

配置WordPress内置TinyMCE（WYSIWYG）编辑器的自定义格式下拉菜单后，出现以下情况：

• 下拉菜单可正常展示配置的自定义格式选项
• 编辑区选中内容应用格式后，可正常预览对应样式效果
• 手动给段落标签添加指定class时，CSS样式可正常生效，操作全程无JS报错
• 核心异常：选中段落应用自定义格式时，编辑器不会自动给段落添加配置的class类名

function mce_set_styles_dropdown_options($settings)
{
    $styleFormats = [
        [
            'title' => __('Heading 1'),
            'inline' => 'p',
            'classes' => 'h1',
        ],
        [
            'title' => __('Heading 2'),
            'inline' => 'p',
            'classes' => 'h2',
        ],
        [
            'title' => __('Heading 3'),
            'inline' => 'p',
            'classes' => 'h3',
        ],

    ];

    $settings['style_formats_merge'] = false;
    $settings['style_formats'] = json_encode($styleFormats);

    return $settings;
}

add_filter('tiny_mce_before_init', 'mce_set_styles_dropdown_options');


function mce_load_content_css($settings)
{
    $adminCss = getHashedAsset('/app.css');

    $settings['content_css'] = empty($settings['content_css'])
        ? $adminCss
        : $settings['content_css'] . ',' . $adminCss;

    return $settings;
}

add_filter('tiny_mce_before_init', 'mce_load_content_css');

TinyMCE的style_formats配置项对不同类型的标签有明确的参数区分：

• inline：仅用于指定行内包裹标签，比如span、strong这类不会产生换行的行内元素，配置后编辑器会在选中内容外层嵌套对应行内标签并添加class
• block：用于指定块级标签，比如p、div、h1这类块级元素，配置后编辑器会直接给当前光标所在的块级元素添加class，或者将当前块级标签替换为指定的块级标签
• selector：用于匹配已有的指定元素，给符合选择器规则的元素加样式

现有配置错误将块级标签<p>传给了inline参数，TinyMCE无法按行内元素逻辑嵌套p标签（p标签不能作为行内元素存在，也不能嵌套其他块级元素），因此只会在编辑区临时渲染样式效果，不会实际给元素添加class属性。

将所有样式配置项中的inline键替换为block键即可，修正后的$styleFormats配置如下：

$styleFormats = [
    [
        'title' => __('Heading 1'),
        'block' => 'p',
        'classes' => 'h1',
    ],
    [
        'title' => __('Heading 2'),
        'block' => 'p',
        'classes' => 'h2',
    ],
    [
        'title' => __('Heading 3'),
        'block' => 'p',
        'classes' => 'h3',
    ],
];

修改保存后刷新编辑器，选中段落应用自定义格式时就会自动给p标签加上对应的class。

内容的提问来源于stack exchange，提问作者godhandkiller