WordPress 修改已有的块添加设置宽度的功能

主题 functions.php 文件中加入

function myguten_enqueue()
{
  
  wp_enqueue_script(
    'myguten-script',
    get_theme_file_uri() . '/myguten.js'
  );

}

add_action('enqueue_block_editor_assets', 'myguten_enqueue');

然后在 myguten.js 文件中加入

const { addFilter } = wp.hooks;

function filterCoverBlockAlignments(settings, name) {
    if (name === 'loos-hcb/code-block' || name === 'core/code') {
        return lodash.assign({}, settings, {
            supports: lodash.merge(settings.supports, {
                align: true,
            }),
        });
    }
    return settings;
}

addFilter(
    'blocks.registerBlockType',
    'intro-to-filters/cover-block/alignment-settings',
    filterCoverBlockAlignments,
);

上面的代码是为 loos-hcb/code-block 块(这个是我使用的代码高亮插件)和 core/code 块添加对宽度设置的支持

为古腾堡默认code块添加设置宽度功能

参考

https://css-tricks.com/a-crash-course-in-wordpress-block-filters/