How to rename or choose twigs file name suggestions?

Question

When I create a custom block called Lorem ipsum Dolor, I have not the possibility to choose the machine name. So when I have to make a twig template, the file suggestion is :

block—loremipsumdolor.html.twig

I mean it is without undescore. I found it hard to handle all these twig file when I work on a custom template. It is not human friendly readable.

Is there a way to choose the name of the file name or the block machine name ?

Other example :

Block name : Custom Search form

<!-- FILE NAME SUGGESTIONS:
   * block--customsearchform.html.twig
-->

I have not this problem with node :

node--13--teaser.html.twig

Answer 1

Given a block name of 'Custom Search form', you can add to the file name suggestions using a preprocess hook in your theme.

An example of code to add to the .theme file:

/**
 * Add an alternative to file name suggestions the Custom Search form block.
 *
 * Implements hook__suggestions_HOOK_alter().
 * @return array Suggestions.
*/
function mytheme_theme_suggestions_block_alter(array &$suggestions, array $variables) {
    if($variables['elements']['#id'] == 'customsearchform'){
        $suggestions[] = 'block__custom_search_form';
    }
}

This will result in an additional file name suggestion:

<!-- FILE NAME SUGGESTIONS:
   * block--custom-search-form.html.twig * block--customsearchform.html.twig
-->