web-dev-qa-db-fra.com

Ajouter une classe personnalisée aux blocs de base dans Gutenberg

J'essaie d'ajouter une classe à la liste des blocs (core/list) dans Gutenberg. Malheureusement, il semble que certains blocs, tels que les listes et les paragraphes, n'ont pas le nom de classe par défaut standard wp-block-{name}; ils ne peuvent pas être renommés à l'aide du filtre blocks.getBlockDefaultClassName .

Pour contourner ce problème, j'ai utilisé le filtre blocks.getSaveContent.extraProps, qui semble me permettre d'ajouter une classe à TOUS les blocs qui n'en contiennent pas déjà. Le code ci-dessous est la façon dont cela fonctionne. Il ajoute added-class-name à des blocs de préférences, des paragraphes, etc.

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

Et je l'ai mis en file d'attente comme ça:

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

Cependant, ce que je veux pouvoir faire, c'est ajouter une classe àUNIQUEMENTblocs de liste? Cela peut-il être fait du tout?

filtersjavascriptblock-editor
7
Trevor

Vous avez les deuxième et troisième arguments avec ce hook, vous pouvez utiliser le second pour obtenir le type de bloc.

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

Un filtre qui s'applique à tous les blocs renvoyant un élément WP dans la fonction de sauvegarde. Ce filtre est utilisé pour ajouter des accessoires supplémentaires à l'élément racine de la fonction de sauvegarde. Par exemple: pour ajouter un nom de classe, un identifiant ou tout accessoire valide pour cet élément. Il reçoit les accessoires actuels de l'élément de sauvegarde, le type de bloc et les attributs de bloc sous forme d'arguments. 

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