Add contextual info to blocks for styling

[iandunn]

To help organizers write custom CSS, I think we should add contextual information to block markup via data- attributes.

For example, a camp might want to make Gold-level sponsor logos larger than Bronze-level sponsor logos. Right now, when only a specific level of sponsors are shown, the container is:

<ul class="wordcamp-block wordcamp-post-list has-layout-list wordcamp-sponsors">

...and I think we should change it to:

<ul class="wordcamp-block wordcamp-post-list has-layout-list wordcamp-sponsors" data-sponsor-level="gold">

Similarly, regardless of whether the block is showing all sponsors or only some, I think each individual item should have the info as well. e.g., change

<div class="wordcamp-sponsor wordcamp-sponsors__post slug-dreamhost">

...to:

<div class="wordcamp-sponsor wordcamp-sponsors__post slug-dreamhost" data-sponsor-level="gold">

That's just one example, though; there are probably several other things that would be useful for the Sponsors block, and the other blocks would have similar things as well.

Data attributes feel more appropriate than CSS classes in this case, but I don't have a strong opinion.

[ryelle]

Good idea to add the level info, but if the idea is to help organizers write more specific CSS, why not use classes?

<ul class="wordcamp-block ... wordcamp-sponsors is-level-gold">

So now this can easily be targeted with .wordcamp-sponsors.is-level-gold {}, and individual sponsors don't need the info since they can be targeted with .is-level-gold .wordcamp-sponsor {}.

[iandunn]

Data attributes feel more correct to me because the contextual info feels more like data about the element, rather than something that's more presentational like most classes. Targeting w/ data selectors is easy as well.

I'm happy w/ either approach, though.