Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Views offers a "CSS Class" setting that can get classes in the markup that wraps your view content, but themers often need these classes in the top level of the markup (the block container), not nested inside.
(Text taken from https://www.drupal.org/project/viewblock_topclass for Drupal 7)
Steps to reproduce
Create a view, add a class, and see that it only wraps the generated view content, not the parent level of the block, so you can't for example target the header, or from the root of the block element.
There are many alternative solutions, as can be seen in How to add CSS classes to a Views-generated block? (NOT to its generated content, the block itself!), but inserting the class in the top level shouldn't require coding.
The most robust workarounds is the contrib module https://www.drupal.org/project/block_class.
Alternatively, setting the machine name, which becomes part of the generated ID in the root/parent of the block can also work, though changing the machine name of an already placed block is not recommended, since it will break all references to it, for example require placing the block again.
Proposed resolution
Updating Views' "CSS Class" feature, so that the class is added in the top level of the markup, not around the generated markup is one option, but probably not ideal, since the View shouldn't need to worry about in what context it is being rendered.
To help the user, we could inform about workarounds, configuring the block machine name before placing the block or using the Block Class contrib module.
Remaining tasks
Update the "Add class" help text, and add information on how to customize the parent element (for example a block) displaying the list.
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | block-root-parent-level-views-add-class.png | 109.26 KB | ressa |
Issue fork drupal-3367445
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
lendudeI'm not sure this is something that needs to be done in Views. The View shouldn't need to worry about in what context it is being rendered and it won't always know what its parent is going to be, so it shouldn't try to set classes on its parent rendering item (and no idea how we would do that consistently if we wanted to) .
Since the 'header' being referred to seems to be the block header, I would argue that the feature request should be that the block module maybe should allow users to set classes on specific blocks. Does that make sene? That won't help you if you are rendering it in another context than a block though, so dunno.
Comment #3
ressaThanks for a fast response @Lendude and clarifying the concepts for me, it's really valuable.
Maybe the simplest solution would be to inform the users about at what level the class will be inserted, since quite a few might expect or desire the class to be inserted in the parent block level, not around the view content, as well as offering two alternative solutions?
I have updated the Issue Summary to make it clearer what the proposal is, and adding an image to visualize what is meant by block "parent"-level and view "Add class"-level, and where they are at.
Comment #5
ressaHere is rough sketch, adding extra info under the field. I also added a section about customizing a view list in Customize the output style of a view field or list.
Comment #6
smustgrave commentedI like the idea of updating the text but not sure we should include Block Class. I can't find other instances where we call out specific contrib modules. And that module seems lightly maintained. Multiple RTBC ticket sitting there for 3 months.
Maybe suggest a block preprocess hook for adding the class?
Comment #7
ressaThanks for quick feedback @mustgrave. Great idea with adding a block preprocess hook example on how to add a class, and also removing the Block class link.
I added a block preprocess hook example on https://www.drupal.org/docs/8/core/modules/views/customize-the-output-st... and replaced the Block class link in the patch with block preprocess hook text.
Comment #8
smustgrave commentedThink that reads much better.
Comment #9
lauriiiI don't think we have a lot of information like this in the UI. I think it might be a welcome addition to provide helpful notes in the UI. I don't know if we should add it as is, but this seems something where we could use the upcoming tooltip component: #3197758: Create a new component: Toggletip.
Comment #10
ressaThanks for making me aware of the new Tooltip component @lauriii, it looks pretty cool.
I agree, let's wait for #3197758: Create a new component: Toggletip to land, and then add the help text with that.