Drupal 8 Twig - custom block - two twig templates working third is not?

Question

I have a custom module modero_kbo that creates a custom block. I need to display this block differently depending on where it is placed on my page.

I have this function in my modero_kbo.module:

function modero_kbo_theme() {
  return array(
    'modero_kbo_vat' => array(
      'variables' => array(
        'form' => NULL
      )
    ),
    'modero_kbo__landing_page' => array(
      'variables' => array(
        'form' => NULL
      )
    ),
    'modero_kbo__landing_page__modero_kbo_form_2.html.twig' => array(
      'variables' => array(
        'form' => NULL
      )
    ),
  );
}

And this in my custom theme .theme file:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for modero_kbo.html.twig.
 */
function moderosolid_theme_suggestions_modero_kbo_vat_alter(array &$suggestions, array $variables) {
  if($node = \Drupal::routeMatch()->getParameter('node')){
    $suggestions[] = 'modero_kbo__' . $node->bundle();
    $suggestions[] = 'modero_kbo__' . $node->bundle() . '__' . $variables['form']['#attributes']['data-drupal-selector'];
  }
}

All 3 template suggestions are showing up in my html source on the page. The first two actually work, the third one is not working. I've tripple checked all the file names and spelling.

I have 3 different template files, the first two are working, the third one is showing in the suggestions list, but is not used for some reason?

modero-kbo-vat.html.twig
modero-kbo--landing-page.html.twig
modero-kbo--landing-page--modero-kbo-form-2.html.twig

Answer 1

One error we found here is that I should only be using the first array in the modero_kbo_theme() function.

The moderosolid_theme_suggestions_modero_kbo_vat_alter alters that theme.

We could not figure out why the 3rd hook was not working, we suspect that the form variables might not be available at some point in the process.

I solved this by copying the block and creating a new block with a custom template.