generatepress icon indicating copy to clipboard operation
generatepress copied to clipboard

Dynamic Typography - add CSS class field for pre-defined elements

Open diggeddy opened this issue 3 years ago • 2 comments

Description

Option to add a CSS Class to predefined target elements:

Screenshot 2022-09-07 at 15 24 56

This would allow users to create a utility class for that specific style.

For example the user selects the H2 Element and adds a utility class of .h2 this will return:

h2, .h2 { /* font styles */ }

NOTE: This can be achieved using a Custom target element. But there are more requests of this kind where users want to maintain semantic markup but apply a different style, and this would make a better UX than custom targets for this purpose.

diggeddy avatar Sep 07 '22 14:09 diggeddy

Personally I would not need to define the utility-class names manually. If they were hardcoded to h2 or gp-h2 or something I do not think I would mind.

And to clarify, what I want to avoid is repeating typography settings for tags in either dynamic typography or custom CSS. If I change the style for h2, I should not have to update the corresponding utility class.

gabbsmo avatar Sep 07 '22 14:09 gabbsmo

The method above would allow you to select a predefined Typography Target element and add as many Utility classes that may be required. No repeating or duplicating. Just a field to add the extra classes if you need them:

The benefit of providing the field for users over us adding a gp utility class are:

  1. if no class is added then we don't write extra code to the CSS
  2. users can apply their own class names to fit into their workflows
  3. you can include pre-defined classes for elements that are added by other means eg. a the HTML from another plugin.

If its something we agree to do, then i recommend we keep it as flexible as possible. :)

diggeddy avatar Sep 07 '22 14:09 diggeddy