Problem/Motivation
In block_class 4.0.2 on Drupal 11, when a custom HTML ID is set on a block using the "Customize the unique HTML ID of this block" field, any underscores in the ID value are automatically converted to dashes on page render.
For example, a custom block ID entered as more_to_explore is rendered in the page source as more-to-explore.
This breaks CSS selectors, JavaScript targeting, and anchor links that depend on the original underscore-based ID. The issue does not exist in block_class 2.0.11 on Drupal 10.
The root cause is that the 4.x branch processes the custom ID through Html::cleanCssIdentifier() without overriding the default character replacement map, which includes _ → - by default. The CSS class field has a built-in "Filter to HTML Clean CSS Identifier" configuration option that allows overriding this map — however, no equivalent override exists for the ID field.
Steps to reproduce
1. Install block_class 4.0.2 on Drupal 11
2. Place any block on a page
3. In the block configuration, enable "Customize the unique HTML ID of this block"
4. Enter an ID containing underscores, e.g. more_to_explore
5. Save the block
6. View the page and inspect the rendered HTML source
Expected result: The block renders with id="more_to_explore"
Actual result: The block renders with id="more-to-explore"
Proposed resolution
In BlockClassHelperService.php, change the Html::cleanCssIdentifier() call that processes the custom block ID to pass an explicit replacement map as the second argument. The map should omit the default _ → - mapping so underscores are preserved in the output:
// Before
Html::cleanCssIdentifier($custom_id)
// After
Html::cleanCssIdentifier($custom_id, [' ' => '-', '/' => '-', '[' => '-', ']' => ''])
Remaining tasks
- [ ] Review and test the patch
- [ ] Confirm fix works across block types (content blocks, views blocks, custom blocks)
- [ ] Automated test coverage for ID with underscores
User interface changes
None.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | block_class-upgrade-to-4.0.2-converts-id-underscore-to-dash-3611581-2.patch | 582 bytes | anjalisudhi |
Comments
Comment #2
anjalisudhi commentedAttaching a patch against 4.0.2 that fixes the issue.
The problem is in BlockClassHelperService.php where the custom block ID is processed through Html::cleanCssIdentifier() without an explicit replacement map. The default replacement map in Html::cleanCssIdentifier() includes _ => -, which converts underscores to dashes silently.
The fix passes an explicit replacement map as the second argument, omitting the underscore-to-dash mapping so underscores are preserved in the rendered ID.
Note: The CSS class field already has a "Filter to HTML Clean CSS Identifier" configuration option that allows users to override this map at the config level. No equivalent override exists for the ID field, so the fix is applied directly in the service.
Tested on:
- Drupal 11.3.13
- block_class 4.0.2
- PHP 8.3.x
**Steps tested:**
1. Placed a block with custom ID more_to_explore
2. Before patch: rendered as id="more-to-explore"
3. After patch: rendered as id="more_to_explore"