Extend drop cap customizations with `theme.json`

[colorful-tones]

What problem does this address?

While working on TwentyTwentyTwo - it was noted that the dropcap layout looked tight (bad line-height) or undesirable Drop cap needs attention/styling #180 on certain user's systems. Currently, it was agreed that dropcap support was not imperative for TwentyTwentyTwo.

Note: this is not imperative to WP 5.9 release or TwentyTwentyTwo progress at all.

However, it would be ideal to extend drop cap styling and support to allow for some theme.json settings to adjust things like: line-height, font-weight, and even color or margin.

What is your proposed solution?

Extend drop cap support and put additional mechanisms in place in theme.json to allow theme authors to declaratively define drop cap styling.

Possible related conversation and considerations: theme.json: whether or not to allow targetting settings that are specific to the block #35114

Is it the objective to be able to configure every option in core blocks through theme.json? It would be so helpful to be able to preconfigure things like text alignment, vertical alignment, block alignment, block width, media position, and so on..

[justintadlock]

Yep, I ended up having to basically create a whole set of drop-cap properties so that I could overwrite this in upcoming global styles variation .json files:

.has-drop-cap:not(:focus)::first-letter {
    font-family: var( --wp--custom--drop-cap--typography--font-family, inherit );
    font-size: var( --wp--custom--drop-cap--typography--font-size, 5.5em );
    font-weight: var( --wp--custom--drop-cap--typography--font-weight, 700 );
    font-style: var( --wp--custom--drop-cap--typography--font-style, normal );
    line-height: var( --wp--custom--drop-cap--typography--line-height, .85 );
    margin: var( --wp--custom--drop-cap--spacing--margin, 0.05em 0.1em 0 0 );
    padding: var( --wp--custom--drop-cap--spacing--paddig, 0 );
}

[kocjs]

@justintadlock

After enabling the drop cap support via theme.json, I added this properties to the styles.css of TT3, unfortunately i do not see any change in the drop cap. Could you please help me with it.

Any help is appreciated

[shoelaced]

Would love to see this incorporated, especially with the new font management functionality coming.

[justintadlock]

One consideration is browser support for initial-letter, which has the potential to completely change any current solutions.

[ndiego]

We are getting close to Beta 1 for 6.7. Has any work been started on this issue? If not, thoughts on punting to 6.8?