Add Line Indent support #74863
Closed
Add Line Indent support #74863
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronrobertshaw
added
[Type] Enhancement
github-actions
bot
added
[Package] Blocks
This was referenced Jan 22, 2026
|
Size Change: +1.31 kB (+0.04%) Total Size: 3.09 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in fdc6c81. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21253383173
|
Contributor
Author
|
I believe this PR is functional but that doesn't mean the approach is sound. So I'd love to get some early feedback on this one. This Line Indent block support is a bit unique in that the one block support really needs to be able to be applied in different ways, meaning different CSS selectors depending on locale or an arbitrary toggle set by the user. Currently we don't have any mechanisms within Global Styles that allows us to change selectors on the fly as often when we are generating styles, we don't have access to the block context and current theme.json settings. In a nutshell, this PR add two block support properties to theme.json and global styles. They each map to the appropriate selector and the UI will move the indent value to the correct property when the toggle is changed. If there are better ways to achieve this I'd love to hear them. |
Contributor
|
I've only given this a quick skim so apologies if this idea has already been explored, but would it be possible for the Here's a very crude example, please excuse the names, this is just to show how it could potentially look: E.g. these might work like:
I'm not sure if we have a precedent for enum-style values in |
Contributor
Author
|
Appreciate you taking a quick look @andrewserong 🚀
Yeah, I've been too focused on the style properties side of the coin so far. The settings side of this should be straightforward enough to change to an enum. My greater concern at the moment is the need for two style properties; I hadn't really found a neat way to update the global styles based off a settings value initially. However, looking at this again, I probably was too close to where the styles were generated and could step back to the stylesheet level. If that works out I'll close this draft and put up an alternative. Won't hurt to leave this one separate for reference. |
Contributor
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Closes #37462
Follow up to #73114
Adds CSS
text-indentsupport for paragraph blocks with traditional typography conventions - subsequent paragraphs get first-line indented in LTR languages, with an option to indent all paragraphs (default for RTL languages).Why?
Text indentation is a fundamental typography feature that's been requested since 2021. Traditional print typography conventions dictate that only subsequent paragraphs (not the first) should have their first line indented in LTR languages, while RTL languages typically indent all paragraphs. This feature enables proper typographic styling that matches publishing standards.
How?
The previous attempt (#73114) was reverted due to unresolved edge cases where the use of a simple
pelement in the global styles selector would cause indentation to bleed into other undesired blocks.Since the original PR, paragraph blocks now get a
.wp-block-paragraphclass added to them enabling the Line Indent support to target this and restrict indentation to only paragraphs.Important: The desire to have this block support function differently in global styles in an arbitrary manner has led to an unusual approach involving essentially two separate theme.json properties.
The current approach allows for a setting to be toggled giving arbitrary control over the application of indentation (subsequent vs all paragraphs). This setting then moves the value between the two properties which then allows the correct selector for global styles to be used.
If there are better solutions I'm more than happy to explore them however this is the best I found so far
The implementation adds two complementary properties:
textIndent: Uses.wp-block-paragraph + .wp-block-paragraphselector (subsequent paragraphs only)textIndentAll: Uses.wp-block-paragraphselector (all paragraphs)Key features:
Technical implementation:
Testing Instructions
Basic Usage
Global Styles
RTL Testing
Example Theme.json
{ "settings": { "typography": { "textIndent": true } }, "styles": { "blocks": { "core/paragraph": { "typography": { "textIndent": "1.5em" } } } } }