Styles: audit utility classes generated on the frontend

[ramonjd]

For auditing and to kick off a discussion, here is a (probably incomplete) list of styles Gutenberg generates for frontend code:

Classname	Variations	Description	Status
is-${ orientation }	vertical, horizontal	layout	current
is-content-justification-${ justification }	center, left, right	layout	current
is-nowrap	-	layout	current
is-layout-${ layout }	flex, flow constrained	layout	current updated
has-background	-	block supports	current
has-${ preset }-background-color	Any color preset slug	block supports	current
has-${ preset }-gradient-background	Any gradient preset slug	block supports	current
has-border-color	-	block supports	current
has-${ preset }-border-color	Any color preset slug	block supports	current
has-${ preset }-font-size	Any font size preset slug	block supports	current
has-${ preset }-font-family	Any font family preset slug	block supports	current
has-text-color	-	block supports	current
has-${ preset }-color	Any color preset slug	block supports	current
has-text-align-${ alignment }	center, left, right	text blocks	current
has-inline-color	text blocks
has-${ spacing }-spacing-size	Any spacing preset slug	block supports	current
has-icon	-	icon	current
wp-elements-${ unique_id } ${ element_tag }	Unique id + element tag name selector, e.g., .wp-elements-123 a	block supports	current
wp-container-${ unique_id }	Unique id	layout	current
wp-duotone-${ filter_id } img	The id is a reference to the duotone filter id	block supports	current
wp-block-${ block_name }	The block name without core/ prefix	blocks	current
wp-site-blocks	-	template wrapper	current
wp-element-caption	-	elements	current
wp-element-button	-	elements	current

cc @apeatling @mtias

[ramonjd]

An issue that raises the possibility for is-row etc for manifestations of the Group block

• There is no way for the front side to determine that a Group Block is a "Row" variation. #38126

[andrewserong]

One of the ideas in #39336 from @cbirdsong is to use .is-layout-row and .is-layout-stack classes for the horizontal and vertical variations of the flex layout type. So if we went that route, someone could potentially target a Row group block variation via .wp-block-group.is-layout-row?

[carolinan]

This list is missing has-link-color, is there a reason?

[ramonjd]

Closing as stale.

The list needs refreshing. We can return when there's progress on classnames

[yratof]

Is there an out of the box standard for things like 'is-vertical'? just a utility css for all the flex layouts

[ramonjd]

I noticed there is a is-vertical classname added to stacked containers, e.g.,

<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex">
<p>Test</p>
</div>

But it doesn't have any corresponding CSS.

Looks like the classname is there for backwards compatibility:

gutenberg/lib/block-supports/layout.php

Line 746 in 8dc36f6

$class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );

[cbirdsong]

I used this as a jumping off point for a discussion:

• Why not have the style engine generate reasonable semantic classes instead of repetitive .wp-container-whatever classes? #61417