Creating custom font size presets in a theme

Gutenberg module allows developers to create their own list of font size presets to be used on the editor.

On your default theme folder you just need to add a file named your_theme.gutenberg.yml and follow this structure:

theme-support:
  fontSizes:
    - name: "Small"
      size: 12
      slug: "small"
    - name: "Medium"
      size: 14
      slug: "medium"
    - name: "Large"
      size: 16
      slug: "large"

Automatically, the editor will retrieve the available font size definitions from the yaml configuration file.

The font sizes are rendered on the font size picker in the order themes provide them.

Themes are responsible for creating the classes that apply the correct font size styles. The class name is built appending 'has-', followed by the font size name using kebab case and ending with -font-size.

.has-small-font-size {
  font-size: 12px
}
.has-medium-font-size {
  font-size: 14px
}
.has-large-font-size {
  font-size: 16px
}

Note: The slugs default and custom are reserved and cannot be used by themes.