web-dev-qa-db-ja.com

グーテンベルクでコアブロックにカスタムクラスを追加する

Gutenbergでブロックをリストするクラス（core/list）を追加しようとしています。残念ながら、リストや段落のようなブロックの中には標準のデフォルトクラス名wp-block-{name}を持たないものもあり、 blocks.getBlockDefaultClassName フィルタを使用して名前を変更することはできません。

これを回避するために、blocks.getSaveContent.extraPropsフィルタを使用しました。これにより、クラスをまだ持っていないすべてのブロックにクラスを追加できるようになります。以下のコードは私がそれをうまく動かした方法です。リストや段落などのブロックにadded-class-nameを追加しています。

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
);

そして私はそれを次のようにエンキューしています：

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' );

しかし、私がしたいのは _ only _ listブロックにクラスを追加することですか？それは全然できますか？

filtersjavascriptblock-editor
7
Trevor

このフックには2番目と3番目の引数があり、2番目の引数を使ってブロックタイプを取得できます。

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

Save関数でWP要素を返すすべてのブロックに適用されるフィルタ。このフィルタは、save関数のルート要素に追加の小道具を追加するために使用されます。たとえば、この要素にclassName、id、または有効な小道具を追加します。 save要素の現在の小道具、ブロックタイプ、およびブロック属性を引数として受け取ります。 

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
);
8
Shibi