search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.36k stars 4.13k forks source link

Add fluid typography option at block level #42694

Open madhusudhand opened 2 years ago

madhusudhand commented 2 years ago

What problem does this address?

This is an extension of #24480

In the scenarios where the blocks of the theme needs fluid typography, defining them under settings and using them as variable under a block, would overload the font size dropdown in the editor UI.

In multiple cases the defined typography is meant only for specific blocks such as post-title that doesn't have a size configuration, and showing all of them in the editor UI is unnecessary.

What is your proposed solution?

Enable fluid typography at block level to avoid many unrelated definitions being defined in settings.

ramonjd commented 2 years ago

I'm not convinced that we should modify the block styles model, for example, something like this:

"styles": {
    "blocks": {
         "core/paragraph": {
              "typography": {
                     "fontSize": {
                           "min": "1em",
                           "max": "10em",
                      }
               }
         }
   }
}

If fluid typography is toggled off then the values aren't very useful, or there'd have to be some bespoke code to use fontSize.min instead.

Maybe a new property under typography would be better: fluidFontSize or something.

Another possibility would be have a flag in the settings.typography.fontSizes items that would indicate whether it should appear in the UI control as an option or not. That way the preset would be generated but it wouldn't appear in the list.

madhusudhand commented 2 years ago

Another possibility would be have a flag in the settings.typography.fontSizes items that would indicate whether it should appear in the UI control as an option or not. That way the preset would be generated but it wouldn't appear in the list.

I like this idea of being able to define the sizes that are required for a theme, all in a single place and expose only the standard sizes to appear in UI control. The flag could be anything like hidden which is false by default, and set it to true in the additional sizes that need not appear in UI.

"fontSizes": [{
    "size": "2rem",
    "fluid": {
        "min": "2rem",
        "max": "2.5rem"
    },
    "slug": "huge",
    "name": "Huge",
    "hidden": true
}]