Add block classes for bundle and view mode

Created on 26 November 2016, over 7 years ago
Updated 20 February 2023, over 1 year ago

Problem/Motivation

While, for example, nodes are rendered with classes to target theming by node type (bundle) and view mode, core doesn't provide anything parallel for content blocks.

Maybe this reflects the hybrid nature of blocks. The block content entity type that supports bundles and view modes is only one of many types of blocks. And since the addition of classes was moved from preprocessors to templates, modules cannot directly make their additions. Rendering classes in block.html.twig would arguably privilege the core block_content module over other (contrib) modules that also provide blocks but don't have the ability to inject their classes.

But whatever the source of this issue, the lack of such classes is a barrier when theming custom blocks and, compared to node, detracts from parallelism between content entity types.

Proposed resolution

  • Add block_content_preprocess_block() to conditionally set variables for bundle and view_mode.
  • In the block.html.twig template in Classy, add classes for bundle (type) and view mode parallel to those added for nodes in node.html.twig.

Remaining tasks

User interface changes

API changes

Block templates receive two new variables for content blocks: bundle and view_mode.

Data model changes

Blocks in Classy are rendered with classes in the form block--type-image-[bundle] and block--view-mode-[view_mode] where [bundle] and [view_mode] are the bundle name and view mode name, both rendered with "clean" class names (e.g., hyphens in the place of underscores). Example with bundle of image_link and view mode of full: block--type-image-link and block--view-mode-full.

Feature request
Status

Closed: duplicate

Version

10.1

Component
Block content 

Last updated 38 minutes ago

Created by

🇨🇦Canada nedjo

Live updates comments and jobs are added and updated live.
  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10
    +++ b/core/modules/block_content/block_content.module
    @@ -51,6 +51,19 @@ function block_content_theme($existing, $type, $theme, $path) {
    +    $variables['attributes']['class'][] = 'block-type--' . $variables['elements']['content']['#block_content']->bundle();
    +    if (isset($variables['elements']['#configuration']['view_mode'])) {
    +      $variables['attributes']['class'][] = 'view-mode--' . $variables['elements']['#configuration']['view_mode'];
    

    I'm still not convinced adding these classes across the board is the right approach.

    Personally I want less Drupal noise in my templates, not more.

    Should we be instead taking the approach node takes, which is to add additional theme suggestions?

    i.e so block--block-content--{bundle} and block--block-content--{bundle}--{view-mode} works out of the box?

  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    That seems to be what we're doing in Template suggestions for custom block view modes Fixed

  • 🇺🇸United States smustgrave

    Can see both scenarios where one may want to add css targeting a specific class without having to override the template.

  • 🇬🇧United Kingdom AaronMcHale Edinburgh, Scotland

    I'm still not convinced adding these classes across the board is the right approach.

    Personally I want less Drupal noise in my templates, not more.

    Should we be instead taking the approach node takes, which is to add additional theme suggestions?

    i.e so block--block-content--{bundle} and block--block-content--{bundle}--{view-mode} works out of the box?

    I'm sort of leaning that way as well. It always bothers me how much markup Drupal can spew out onto the page. There's also the question of sites which may not even want to expose their internal naming to end users. It's probably not a security concern, but personally I might find it a bit annoying.

    Building on that thinking, this does make me wonder if we should instead provide template suggestions for all [content] entities out of the box. This is a case of boilerplate code which at some point every entity type (core or contrib) is probably going to come up against.

  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    Yeah, I still think Template suggestions for custom block view modes Fixed is the best approach here, @AaronMcHale seems to agree. Should we close won't fix this?

  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    I asked in #frontend for others to chime in.

  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    For posterity, for a very long time our frontend workflow has been to use something like BEM to bring order to class naming, preferring to override templates to use class names that are meaningful to the project.

    Theming using Drupal generated classes is considered an edge-case/last resort when you can't change the markup and typically isolated in CSS files under the heading 'Fugly selectors' 😛

  • 🇺🇸United States smustgrave

    FYI not married to the idea here if the consensus is it’s not needed.

    Adding a preprocess hook is also very simple.

  • 🇨🇦Canada nedjo

    When I opened this issue lo these several years ago, my concerns (see the issue summary) were two:

    the lack of such classes is [1] a barrier when theming custom blocks and, [2] compared to node, detracts from parallelism between content entity types.

    Add block classes for bundle and view mode Closed: duplicate is a good step towards both concerns, so FWIW I agree this can be closed as a duplicate.

  • 🇦🇺Australia rikki_iki Melbourne

    I'd prefer to avoid this... theme suggestions and variables sure, but classes output by default means more things I need to override and strip out.

  • Status changed to Closed: duplicate over 1 year ago
  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    Thanks @smustgrave @nedjo @rikki_iki

Production build 0.69.0 2024