Thêm lớp tùy chỉnh vào các khối cốt lõi trong Gutenberg

Tôi đang cố gắng thêm một lớp vào danh sách các khối ( core/list) trong Gutenberg. Thật không may, có vẻ như vì một số khối như danh sách và đoạn văn không có tên lớp mặc định tiêu chuẩn của wp-block-{name}chúng không thể được đổi tên bằng blocks.getBlockDefaultClassNamebộ lọc.

Để giải quyết vấn đề đó, tôi đã sử dụng blocks.getSaveContent.extraPropsbộ lọc, dường như cho phép tôi thêm một lớp vào TẤT CẢ các khối chưa có lớp. Mã dưới đây là cách tôi đã làm việc đó. Đó là thêm added-class-namevào các khối thích danh sách và đoạn văn, v.v.

function addBlockClassName( className ) {
  return Object.assign( className, { class: 'added-class-name' } );
}

wp.hooks.addFilter(
  'blocks.getSaveContent.extraProps',
  'gdt-guten-plugin/add-block-class-name',
  addBlockClassName
);

Và tôi đang mê mẩn nó như vậy:

function gdt_blocks_class_rename() {
  wp_enqueue_script(
      'gdt-plugin-blacklist-blocks',
      get_stylesheet_directory_uri() . '/dist/guten-addons.js',
      array( 'wp-blocks' )
  );
}
add_action( 'enqueue_block_editor_assets', 'gdt_blocks_class_rename' );

Tuy nhiên, điều tôi muốn có thể làm là thêm một lớp vào các khối danh sách CHỈ ? Điều đó có thể được thực hiện ở tất cả?

Bạn có đối số thứ hai và thứ ba với hook này, bạn có thể sử dụng đối số thứ hai để lấy loại khối.

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/

Một bộ lọc áp dụng cho tất cả các khối trả về Phần tử WP trong chức năng lưu. Bộ lọc này được sử dụng để thêm đạo cụ bổ sung vào phần tử gốc của chức năng lưu. Ví dụ: để thêm một className, id hoặc bất kỳ chỗ dựa hợp lệ nào cho phần tử này. Nó nhận các đạo cụ hiện tại của phần tử lưu, loại khối và thuộc tính khối làm đối số.

function addBlockClassName( props, blockType ) {
    if(blockType.name === 'core/list') {
        return Object.assign( props, { class: 'wp-block-list' } );
    }
    return props;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'gdt-guten-plugin/add-block-class-name',
    addBlockClassName
);