Post Comments Form: ensure typography styles are applied to child elements

[ramonjd]

What problem does this address?

In #34064 we opted into and added default Typography support controls.

For the Post Comments Form, we noticed that the <h3 /> element isn't targeted by some of the Typography settings set at the container: the font weight gets applied at the container, but not the heading.

Props to @andrewserong for the bug report.

What is your proposed solution?

Fine tune the server rendered block (either via CSS inheritance tweaking or otherwise) to ensure that inner elements inherit typography styles.

[ramonjd]

It might be theme related. For example, TT1 defines the following in theme.json

			"h3": {
				"typography": {
					"fontSize": "calc(1.25 * var(--wp--preset--font-size--large))",
					"lineHeight": "var(--wp--custom--line-height--heading)",
					"fontWeight": "var(--wp--custom--font-weight--normal)"
				}
			},

These styles overwrite the inline styles applied to the container.

Removing this allows me to style the entire container and its child elements in this very contrived example:

To give the inline styles priority over the theme styles, even something like this is too specific:

.wp-block-post-comments-form {
	:where(h3) {
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		font-style: inherit;
	}

The above will overwrite the theme styles when there are no inline typography styles.

But maybe that's okay since we're dealing with a specific use of h3, that is, inside a post comments form?

I'm sure there's a neat trick, but it's eluding me so far.

[ramonjd]

Just jotting down some whacky ideas:

Add a class to the wrapper for each typography style in

gutenberg/lib/block-supports/typography.php

Line 68 in 1e17b5a

function gutenberg_apply_typography_support( $block_type, $block_attributes ) {

Then overwrite the theme default styles for this particular block like this:

	&.has-font-weight :where(.comment-reply-title) {
		font-weight: inherit;
	}
	&.has-font-family :where(.comment-reply-title) {
		font-family: inherit;
	}
	&.has-font-size :where(.comment-reply-title) {
		font-size: inherit;
	}
	&.has-line-height :where(.comment-reply-title) {
		line-height: inherit;
	}
	&.has-font-style :where(.comment-reply-title) {
		font-style: inherit;
	}
	&.has-letter-spacing :where(.comment-reply-title) {
		letter-spacing: inherit;
	}

Resulting in the following markup:

<div style="font-style:italic; font-weight:900; line-height: 2.3; letter-spacing:48px;" class="has-font-style has-font-weight has-line-height has-letter-spacing wp-block-post-comments-form">
    ....
</div>

This works, but has the downside of adding to every block's container element – blocks that opt-in to typography controls – classes that we might not ever be able to remove if folks start relying on their existence.

We could, just for starters, add these classes in the post-comments-form/index.php

	if ( isset( $attributes['style'] ) && isset( $attributes['style']['typography'] ) && is_array( $attributes['style']['typography'] ) ) {
		foreach ( $attributes['style']['typography'] as $key => $value ) {
			$classes[] = sprintf( 'has-%s', gutenberg_experimental_to_kebab_case( $key ) );
		}
	}

Copy the container's inline styles to the h3

So, something like:

<div style="font-style:italic; font-weight:900; line-height: 2.3; letter-spacing:48px;" wp-block-post-comments-form">
    ....
       <h3 style="font-style:italic; font-weight:900; line-height: 2.3; letter-spacing:48px;" class="comment-reply-title">
           ...
</div>

Copying inline styles seems also messy on the face of it, and only targets the h3 so if the markup changes in the future we might have to add further styles, or whatever.