Add Typography: text orientation (writing mode) #50822
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
|
Size Change: +473 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 332fc1c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5307911851
|
carolinan
requested review from
spacedmonkey,
ellatrix,
ajitbohra,
ajlende,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
|
I think I got the two terms text-orientation and writing-mode confused. Do I need to rename this block support to writingMode, but keep the "Orientation" label for the control? |
|
This is great! Thank you for working on it. I will give it a review as soon as I have a moment. For the mean time, CC: @WordPress/gutenberg-design A quick thought: the writing-mode and text-orientation CSS properties I agree are a bit confusing. I would personally be okay with not adhering to those, and simply calling this "Orientation". Not a strong opinion. |
|
I think the writing-mode and the text-orientation would need to be two separate block supports but I will think some more about it and test a few things with the style engine. |
|
This looks neat, thanks for working on it. I think it might be worth trying the icons from the original issue, if not too much trouble. The |
|
Very neat! I'm wondering whether a more generic transform rotate setting (which looks like was explored previously) would be more valuable if the purpose behind this work is mainly for design tool reasons? Putting it another way, if we ever release a rotate setting (which other design tools have), how would that overlap with the function of typography orientation? |
|
I did not know there were more than one issue and a pull request, would have saved me some time if I would just have copied it 🤣 Reading from the discussion, there seems to be less support for a rotation setting. |
Can I copy those icons from Figma to the icon library? I did not find a link to the prototype in the issue. |
|
My apologies, the Figma is here, and here are SVG icons you can add to the library. text-vertical: text-horizontal: |
|
There's also #20926. @jasmussen can we consolidate all the issues and close them? |
|
Yep, I closed that one in favor of what this PR solves. |
|
The code here works super well, the feature has its prominence balanced through the ellipsis menu, and it's a really nice design tool. I broadened the ping range a bit as I'd love to see this land in 6.3. |
aristath
approved these changes
Jun 28, 2023
|
@jasmussen the code looks great - adds another piece, does nor introduce potential future legacy issues. Do you want to hold back on merging, because of doubts about the usefulness? |
|
No, I'm super antsy to get this in, I just don't want to press the green button on behalf of anyone :) |
Merged 👍 |
|
🚀 Thanks for working on this! |
justintadlock
added a commit
to x3p0-dev/x3p0-ideas
that referenced
this pull request
Jul 8, 2023
Adds support for vertical text-orientation in paragraphs. See: WordPress/gutenberg#50822
|
Can we also support bottom up direction? |
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
* Add Typography: text orientation (writing mode) * fix spacing CS issues * try to fix white space issue * Rename text orientation to writing mode * Add new text orientation icons
Yes, with transforms. I still need to figure out how to use more than one CSS property for one typography setting in the style engine. |
Related to this comment, and also as noted here, can we leverage the text-align buttons for this flipping? 
Essentially when you choose "text align right" in that case, it'd transform/flip the text. |
|
I like that! |
6 tasks
86 tasks
|
@carolinan I'm trying to test this change and can't find the orientation control in the typography panel for Paragraph blocks. Am I missing something? Does this have to be enabled in the theme? |
|
Yes, this setting is disabled by default and can be enabled for themes that include theme.json. It is in the testing instructions. |
|
Oooh I missed that somehow, thanks! |
This was referenced Mar 15, 2024
This was referenced Oct 8, 2024
Closed
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 a new text orientation option where text can be displayed horizontally or vertically.
Partial for #50319
Why?
To allow more design options.
How?
writing-modethrough the Style Engine.Testing Instructions
This setting is disabled by default and can be enabled for themes that include theme.json.
writingMode: trueTesting Instructions for Keyboard
Screenshots or screencast
orientation.mp4