Block id is removed in the block component

Just ran into this today. The fix for me was to copy the block.html.twig template from the parent Radix theme into the templates/block directory in my subtheme and edit the twig to include the ID.

Code before somewhere around line 14 in block.html.twig:
<div{{ attributes.addClass(classes)|without('id') }}>

Code after:
<div{{ attributes.addClass(classes) }}>

Clear caches and the browser cache and it works now.

I would think a long term solution would be to include a conditional in the Theme Settings Page to turn ID's off and on.

Cheers,
Andrew

EDIT: I just noticed that the 8.x-4.x version of radix writes the twig via the following code which is going to throw a wrench in things. Maybe there's a twig filter that will print ID's... I don't know.

{% include '@radix/block/block.twig' with {
  html_tag: 'div',
} %}

If you really need a workaround, I'd just grab the block.html.twig file from core/themes/classy/templates and put it in the templates/blocks directory of your subtheme. It's not the perfect solution but it will do in a pinch.

What the heck. A better workaround is to just use the block template from the 8.x-3.x version and don't strip the ID's.

{#
/**
 * @file
 * Default template for block.
 */
#}
{%
set classes = [
'block',
bundle ? 'block--' ~ bundle|clean_class,
id ? 'block--' ~ id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h4{{ title_attributes.addClass('block__title') }}>{{ label }}</h4>
  {% endif %}
  {{ title_suffix }}
  <div class="block__content">
    {% block content %}
      {{ content }}
    {% endblock %}
  </div>
</div>

I have a probleme here too. So i checked out the component that is beeing included in the normal block template

It looks like this.

{#
/**
 * @file
 * Template for a Block component.
 *
 * Available config:
 * - html_tag: The HTML tag for the block.
 * - utility_classes: An array of utility classes.
 */
#}
{% set classes = [
  'block',
  bundle ? 'block--' ~ bundle|clean_class,
  id ? 'block--' ~ id|replace({"_": "-"})|clean_class,
]|merge(utility_classes ? utility_classes : []) %}

{% if html_tag %}
  <{{ html_tag }}{{ attributes|without('id').addClass(classes) }}>
{% endif %}

  {{ title_prefix }}
  {% if label %}
    {% block label %}
      <h2{{ title_attributes }}>{{ label }}</h2>
    {% endblock %}
  {% endif %}
  {{ title_suffix }}

  {% block content %}
    {{ content }}
  {% endblock %}

{% if html_tag %}
  </{{ html_tag }}>
{% endif %}

So ids should be there i guess. I debugged and for the title block the id is "pd5-radix-page-title", pd5-radix beeing my themes name. For example.
If i flush the cache i can see that no views blick has an "id" index in $context, so no "id" is never used, printed.

I hacked the block.twig in components now just renaming the 'block' class. Doesnt change anyothing, that class is never added. I dont get the logic here at all.

Ok lets check the preprocess of radix includes/block.inc

If $variables has no "id" index an id is never set. So most blocks have none. They have a "plugin_id" so i added an esle if to use that plugin_id if "id" is not avaliable. That works. I laso think plugin_id should be unique.

/**
 * Implements hook_preprocess_block().
 */
function radix_preprocess_block(&$variables) {
  // Add id to template.
  if (isset($variables['elements']['#id'])) {
    $variables['id'] = str_replace('_', '-', $variables['elements']['#id']);
  }
  else if(isset($variables['plugin_id'])){
    $variables['id'] = str_replace('_', '-', $variables['plugin_id']);
  }

  // Check for BlockContent.
  if ($variables['elements']['#configuration']['provider'] != 'block_content' || empty($variables['elements']['content']['#block_content'])) {
    return;
  }

  // Get the block bundle.
  $block_content = $variables['elements']['content']['#block_content'];

  // Add bundle to template.
  $variables['bundle'] = $block_content->bundle();
}

Ok that puts the id into the class area. I suggest adding an "id" tag instead. Modification of the components blocks/block.twig is neccessary.

My suggestion would be this:
I added a cleaned_id variable and added the id using attributes {{ attributes.setAttribute('id', clean_id) }}

{#
/**
 * @file
 * Template for a Block component.
 *
 * Available config:
 * - html_tag: The HTML tag for the block.
 * - utility_classes: An array of utility classes.
 */
#}
{% set classes = [
  'block',
  bundle ? 'block--' ~ bundle|clean_class,
  id ? 'block--' ~ id|replace({"_": "-", ":": "--"})|clean_class,
]|merge(utility_classes ? utility_classes : []) %}

{% set clean_id = [
  id ? 'block--' ~ id|replace({"_": "-", ":": "--"})
  ]
%}

{% if html_tag %}
  <{{ html_tag }}{{ attributes|without('id').addClass(classes)}}{{ attributes.setAttribute('id', clean_id) }}>
{% endif %}

  {{ title_prefix }}
  {% if label %}
    {% block label %}
      <h2{{ title_attributes }}>{{ label }}</h2>
    {% endblock %}
  {% endif %}
  {{ title_suffix }}

  {% block content %}
    {{ content }}
  {% endblock %}

{% if html_tag %}
  </{{ html_tag }}>
{% endif %}

This finally will give each block a unique id. Very important in my opinion for anchors and other target stuff.

I'm using Facets and this is an actual issue. Maybe this needs work?

I've modified the block.twig component to not remove the id attribute.

Previous patch is invalid. Here is the valid one.

UPDATE, nothing seems to be working and further research has led me to https://www.drupal.org/project/drupal/issues/1880646 where we can see the effort in drupal core to replace block id's with plugin ids. I ended up just using a template override due to time contsraints but this is clearly an pretty major issue for radix.

Working on a D9 setup. This ist totally screwed up here because there is rellay no useful "bundle" name. Sometimes it is basic.
I need a way to create a unique id here. Will report back if i find something.

Yes in D9 use plugin_id instead of id
This works for me here.

{#
/**
 * @file
 * Template for a Block component.
 *
 * Available config:
 * - html_tag: The HTML tag for the block.
 * - utility_classes: An array of utility classes.
 */
#}

{#<ol>#}
{#  {% for key, value in _context  %}#}
{#    <li>{{ key }}</li>#}
{#  {% endfor %}#}
{#</ol>#}
{#{{ plugin_id }}#}

{% set classes = [
  'block',
  bundle ? 'block--' ~ bundle|clean_class,
  plugin_id ? 'block--' ~ id|replace({"_": "-", ":": "--"})|clean_class,
]|merge(utility_classes ? utility_classes : []) %}

{% set clean_id = [
  plugin_id ? 'block--' ~ plugin_id|replace({"_": "-", ":": "--"})
]
%}

{% if html_tag %}
  <{{ html_tag }}{{ attributes|without('id').addClass(classes)}}{{ attributes.setAttribute('id', clean_id) }}>
{% endif %}

  {{ title_prefix }}
  {% if label %}
    {% block label %}
      <h2{{ title_attributes }}>{{ label }}</h2>
    {% endblock %}
  {% endif %}
  {{ title_suffix }}

  {% block content %}
    {{ content }}
  {% endblock %}

{% if html_tag %}
  </{{ html_tag }}>
{% endif %}

The above example is almost right but there's a typo. It should be:
plugin_id ? 'block--' ~ plugin_id|replace({"_": "-", ":": "--"})|clean_class,
This should really be fixed in the main theme since all the layout builder blocks do not print any class.