Implement a reliable, consistent, easy to use system for HTML classes

[mtias]

We are at a point where we need to make a final wrap on how to target blocks with CSS, make it explicit and not easy to circumvent.

Proposal

Generate a class with the following structure:

• wp-block-{blockName} for core blocks
• wp-block-{namespace-blockName} for 3rd parties.

Approach A

Pass a property to the save implementation as htmlClass, generated by us but exposed to use:

save( { attributes, htmlClass } ) {
	const { url, text, title, align = 'none' } = attributes;

	return (
		<div className={ `htmlClass align${ align }` }>
			<a href={ url } title={ title }>
				{ text }
			</a>
		</div>
	);
}

This gives some flexibility (you can avoid adding it for blocks like text, or headings) but also forces some boilerplate on implementation. It also gives the chance of adding it wherever we want on the edit render as well.

Approach B

Go with a magical approach by applying the class to the wrapper element through our serialization flow.

[ellatrix]

Quite like B if it's not too complex. The less the block implementor needs to handle, the better.

[litka]

Is there currently discussion about assigning additional custom classes to a block via the inspector? Assigning custom styles to a select number of elements is a common scenario in design.

As an example, you may want certain heading blocks to have red text. To accomplish this, you could assign a class like .text-red. But if all headings use the same class, there's no way to target just the headings you want to be red. Ideally a class input should exist in the inspector, implemented similarly to tags in Gutenberg.

Also, I agree that not all blocks need a generated class, but I do think there should be an option to assign a custom class. Given that current functionality calls for one paragraph/heading/etc. per block, those inline elements wouldn't need a wrapper — the class could be added directly to the element tag.