Add a prominent style variation for the language suggestion.

[StevenDufresne]

Relating to WordPress/wordpress.org#301, this PR adds a new style variation to the language suggest block. This will allow us to set it in a theme template.

For the case of the plugin directory where it can be conditional based on the page, I assume we can just filter it as follows:

function filter_language_suggest( $block_content ) {
	$html = new \WP_HTML_Tag_Processor( $block_content );
	$html->next_tag();
	$html->add_class('is-style-prominent');
	return $html->get_updated_html();
}

add_filter( 'render_block_wporg/language-suggest', __NAMESPACE__ . '\filter_language_suggest' );

Screenshots

Variation	Display
Default
is-prominent

[ryelle]

A few minor notes, but overall tested out well. I was able to use the prominent class as-is, and also combined with custom colors. I also tested the default style, just to make sure there were no regressions.

Prominent, default colors

Prominent, custom colors

Default with custom colors (w.org homepage)

[ryelle]

Should this also have a fallback value, since the others do?

[ryelle]

Could this also be set in .wp-block-wporg-language-suggest.is-style-prominent {}? I think that should cascade down correctly, right?

[ryelle]

These are named like they can be set in theme.json, but they'll be overridden here if they are. You could put them in a :root block, so any theme.json settings would override it, but that would still be overridden by the prominent style (if you did, I'd also suggest renaming --wp--custom--wporg-language-suggest--background to --wp--custom--wporg-language-suggest--color--background so the object syntax would be correct).

Not a strong suggestion, I'm not sure it would be used if this was possible, but I tried it out since they're named matching the syntax.

"settings": {
	"custom": {
		"wporg/language-suggest": {
			"background": "var(--wp--preset--color--pomegrade-1)"
		}
	}
},

[StevenDufresne]

Got it. 👍

I've made some updates to look first for theme.json generated variables and then fallback in 92eb3f7. Thoughts?

In terms of following object syntax, because I'm making use of the "custom" property, I have gone with the shortest name possible. If that breaks convention or isn't developer friendly, I don't mind updating. The css declarations were just getting long enough :).

[StevenDufresne]

Example usage in theme.json:

"custom": {
  "wporg-language-suggest": {
     "background": "red"
  }
}

[ryelle]

The global styles (theme.json) are loaded after the block styles, so you can just set up these variables in this stylesheet in :root and they'll be overwritten if the theme defines them:

:root {
	--wp--custom--wporg-language-suggest--color--background: var(--wp--preset--color--blueberry-4, #eff2ff);
	--wp--custom--wporg-language-suggest--color--text: var(--wp--preset--color--charcoal-1, #1e1e1e);
	--wp--custom--wporg-language-suggest--typography--font-size: var(--wp--preset--font-size--extra-small, 12px);
	--wp--custom--wporg-language-suggest--spacing: var(--wp--preset--spacing--10, 10px);
}

This ^ also uses the property names based on how the styles are broken down in settings - even though this is custom and does not have any standards, I would lean to mirroring the syntax from styles. So background and text are properties of color, and font-size is under typography. The exception is that spacing should be margin or padding objects, but we only have the one spacing value so leaving it as a string works.

"wporg/language-suggest": {
	"color": {
		"background": "var(--wp--preset--color--white)",
		"text": "var(--wp--preset--color--charcoal-1)"
	},
	"typography": {
		"fontSize": "18px"
	},
	"spacing": "24px"
}

---

On the other hand, I think you could stick with --wporg-language-suggest--background-style names, and drop the theme.json connection entirely. As long as it works with local modifications we'll probably be fine, and it does.

<!-- wp:wporg/language-suggest {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"purple-1","textColor":"white","className":"is-style-prominent"} -->
<div class="wp-block-wporg-language-suggest alignfull is-style-prominent has-white-color has-purple-1-background-color has-text-color has-background has-link-color"></div>
<!-- /wp:wporg/language-suggest -->

[StevenDufresne]

I agree. I'll keep it local and merge. Thanks for the review.