-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Post Comments Form: ensure typography styles are applied to child elements #36188
Comments
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 I'm sure there's a neat trick, but it's eluding me so far. |
Just jotting down some whacky ideas: Add a class to the wrapper for each typography style in
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
|
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.
The text was updated successfully, but these errors were encountered: