WordPress 7.0 adds textIndent block support. Since 2021 the only way to get ordinary typographic indentation out of Gutenberg was brittle custom CSS or a block style that fought the editor, so this is overdue. It is native now, and like most block supports there is a right way to wire it up and a way that quietly breaks your layout.
Why native textIndent block support matters
Typographic conventions are rarely simple. In English publishing the first paragraph of a section is usually flush left and every paragraph after it is indented. In RTL languages like Arabic or Hebrew, indenting all of them is normal. Until now that meant a selector like p + p { text-indent: 1.5em; } sitting in a stylesheet.
The new textIndent block support moves that logic into block.json and theme.json. It reads from Global Styles, and it gives a client a control in the sidebar instead of a CSS snippet to paste. It follows the same path as WordPress 7.0 dimensions support.
Opting in via block.json
To get a “Line Indent” control in the Typography panel of your own block, declare it in block.json. It lives in the typography supports object, next to letterSpacing and lineHeight.
{
"supports": {
"typography": {
"textIndent": true
}
}
}Ship that and the editor adds the control to the sidebar on its own. Whatever value the user picks is serialized as a text-indent CSS property on the block’s wrapper or selector.
The subsequent vs. all selector logic
The core Paragraph block is handled differently from a generic block here. Because of the conventions above, WordPress uses a typography.textIndent setting to decide which selector the style is written to. Most other block supports do not bother with that distinction.
- Subsequent, the default, writes to
.wp-block-paragraph + .wp-block-paragraph, so only a paragraph that follows another paragraph gets the indent. - All writes to
.wp-block-paragraphand indents every paragraph.
Handing that to a native CSS sibling selector instead of a JS check for “am I the first one?” means nothing extra runs on the front end. If you want more on how selectors are handled, I wrote about pseudo-selectors in theme.json.
Configuration in theme.json
I like to keep the editor sidebar short. If a design has no indentation in it, do not leave the control switched on for a client to find. Both the default value and whether the control shows up at all are set in theme.json.
{
"settings": {
"typography": {
"textIndent": true
}
},
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"textIndent": "2em"
}
}
}
}
}To force the “Indent All” mode across the site, which is what an RTL-first theme usually wants, change the setting from a boolean to the string "all". The official block supports documentation covers the rest of these opt-ins.
If textIndent block support is eating your dev hours, hand it over. I have been working with WordPress since the 4.x days.
The takeaway for developers
textIndent is another piece of styling moving out of a big monolithic stylesheet and into granular theme.json config, and this one handles internationalization properly instead of assuming English conventions. If a theme you maintain still carries a hand-written p + p rule, the native API can take it over.
