Add Dropcap Customization to UI

[alexdeborba]

What problem does this address?

The current Dropcap setting in WordPress is somewhat hidden within the Typography settings, leading to confusion. Users might mistakenly assume that changes in Typography will only affect the Dropcap, but they actually apply to the entire paragraph. For media publishers, book authors, and academic scholars, Dropcaps often require distinct styling such as different fonts, sizes, colors, or other decorative elements.

Currently, achieving these styles involves using custom CSS or modifying the theme.json file, which is not user-friendly for those without technical knowledge. Additionally, the Dropcap customization is not available at a global level, limiting the design flexibility.

What is your proposed solution?

I propose that the editor UI includes a dedicated option for customizing Dropcaps, allowing users to easily select fonts, sizes, colors, and other styles directly from the editor. This enhancement would provide a more intuitive and accessible way for users to style Dropcaps without needing to resort to custom CSS or theme.json modifications. It would make the Dropcap feature more versatile and beneficial, particularly for creating specialized content like academic templates (e.g., Abstract sections with distinct Dropcap styles).

Implementing this in the UI would provide more flexibility and control to users, enhancing the design experience across different use cases.

[mtias]

Related #36122.

A while ago we discussed with @jasmussen some options for dropcap customization. There were some mockups we tried as well that I can't find at the moment. I think it'd be very cool to support but it has been difficult to prioritize among so many other things.

[jasmussen]

Indeed! There are mockups in #51481. Here's one piece:

Coming back to this today, I would like to revisit the drop cap toggle in the Typography panel itself to look different, but there are some ideas in the drop cap flyout that are worth looking at.

#51480 is also relevant as it features an intentionally very similar interface:

Figma.