Setting Default Typography for Specific Blocks
A common requirement in theme development is ensuring specific blocks look correct immediately upon insertion, without the user having to manually adjust settings in the sidebar.
For example, you might want the Pullquote block to always be 1.5rem and italic, or the Code block to always be 0.9rem and monospace.
1. Settings vs. Styles
It is crucial to understand the difference between settings and styles in this context:
settings.blocks: Controls the UI options. (e.g., "Only show Small and Large font sizes in the dropdown for this block").styles.blocks: Controls the Default CSS. (e.g., "Apply the Large font size automatically when this block is added").
To answer your question: You want to use styles.
2. The Implementation
You define these defaults inside styles.blocks.[block-name].typography.
Example: Customizing Code and Pullquote Blocks
{
"version": 3,
"styles": {
"blocks": {
"core/code": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--monospace)",
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"core/pullquote": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"fontStyle": "italic",
"fontWeight": "300"
}
}
}
}
}3. Best Practices
- Use Variables: Always try to use your registered presets (e.g.,
var(--wp--preset--font-size--small)) instead of raw values like14px. This ensures that if you change "Small" globally later, your blocks update automatically. - Specificity: WordPress generates a CSS rule specifically for that block class (e.g.,
.wp-block-code { ... }). This generally overrides global element styles but has lower specificity than inline styles added by the user in the editor.
4. Restricting the Editor (Optional)
If you set a default size but want to prevent the user from changing it, you can disable the typography controls for that block in settings.
See the Settings reference for how to disable specific UI tools.