Jump to content

Make it easier to target the ipsWidget-class for a pages block


Recommended Posts

When a block is added in a widget position, it receives an outer li-class as such: 

<li class="ipsWidget ipsWidget_horizontal ipsBox" data-blockid="app_cms_Blocks_52wbf4kut" data-blockconfig="true" data-blocktitle="Egne blokker" data-controller="core.front.widgets.block">
My block html

I may want to target the ipsWidget-class only for a specific block I've made in Pages because I don't want it to have the padding added for instance. 

I can technically target it as such: .ipsWidget[data-blockid="app_cms_Blocks_52wbf4kut"], but this have some downsides: 

  • It's not obvious what I'm targeting (Unless I leave a CSS-comment)
  • I can't feel sure the ID wont change
  • The ID will be different for each position
  • The ID will be different for the same block across different communities

I could also be more general and target .ipsWidget[data-blockid="*app_cms_Blocks"], but I may not want the same rules to apply to all blocks. 

My suggestion is: If a template key is defined for the custom pages block, then incorporate that template-key into the li-element. Some options on how to go about this:

  • Add it as a class. For instance class='ipsWidget ipsWidget_horizontal ipsBox custom-block-mykey'
  • Add it to data-blockid: data-blockid="app_cms_Blocks_mykey_52wbf4kut"
  • Add it to the controller. For example: data-controller="core.front.widgets.block.mykey or data-controller="core.front.widgets.block,core.front.widgets.block.mykey"
Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...