Heading block: Add support for writingMode #54351
Merged
Conversation
This file contains 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
carolinan
added
[Type] Enhancement
|
The extra editor.scss shouldn't be needed. Can someone tell me why or help by pointing out where to fix this issue?: Meaning, that I need to use two different selectors to make the text rotation work, in this case, it meant adding the new editor.scss file. |
|
Size Change: +405 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Thanks for the PR @carolinan ! It's working well; I left a couple suggestions below about the selector.
| @@ -7,4 +7,8 @@ h6 { | |||
| &.has-background { | |||
| padding: $block-bg-padding--v $block-bg-padding--h; | |||
| } | |||
| &.has-text-align-right[style*="writing-mode:vertical-rl"], | |||
| &.has-text-align-left[style*="writing-mode:vertical-lr"] { | |||
There was a problem hiding this comment.
We could make make this selector disregard the space by changing it to
&.has-text-align-right[style*="writing-mode"]:where([style*="vertical-rl"]),
&.has-text-align-left[style*="writing-mode"]:where([style*="vertical-lr"])
Alternatively we could drop the writing-mode altogether and just have e.g. &.has-text-align-right[style*="vertical-rl"] as I believe writing-mode is the only CSS property that accepts vertical-rl and vertical-lr values. That could break in the future if these values become valid for other properties though 😅
There was a problem hiding this comment.
I deleted my previous comment because I did not read the code correctly :)
It is working! Thank you.
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?
Adds block support for typography writingMode to the heading block.
Why?
To enable vertical text for headings.
This is needed for one of the block patterns in Twenty Twenty-Four.
Testing Instructions
Activate a block theme.
The writing mode setting is disabled by default; set it to true in theme.json settings > typography > writingMode:
Create a new post or page, and add a heading block.
Enable the vertical text orientation option in the typography panel.
Save and view the front.
Confirm that the text is now vertical in the editor and the front.
Use the block toolbar and set the text alignment to right (ltr) or left (rtl).
Confirm that the text is now "upside down": the first letter in the heading is at the bottom.
Screenshot