Image: Add caption positioning #31814
Closed
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
Mamaduka
added
[Type] Enhancement
Mamaduka
commented
May 14, 2021
| @@ -394,6 +397,17 @@ export default function Image( { | |||
| </> | |||
| ); | |||
|
|
|||
| const captionControls = ( | |||
| <Fill name="RichText.ToolbarControls.text-color"> | |||
There was a problem hiding this comment.
I'm using a reserved slot for text-color, but we should probably add a custom one for text-alignment.
Mamaduka
commented
May 14, 2021
| @@ -557,6 +571,7 @@ export default function Image( { | |||
| which causes duplicated image upload. */ } | |||
| { ! temporaryURL && controls } | |||
| { img } | |||
| { isSelected && captionControls } | |||
There was a problem hiding this comment.
The fill is only added when the image block is selected to avoid duplicated controls. When the "Styles" panel is open, or there are other images in the editor.
Probably there's a better way to solve this. 🙇
|
Size Change: +199 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
|
Purely from a data perspective, putting the alignment button among the rich text buttons doesn't make sense because alignment affects the caption (wrapper), while rich text buttons are for the content. I think we might need to divide the toolbar like we do with the block toolbar:
|
|
Thank you, @ellatrix That makes sense. I will work on an update. Does using |
It's not great. I think we'll need to do something like this first: #31823. |
|
Closing this in favor of #31823. I think alignment controls can be a part of the new Caption block. |
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.
Description
Adds text alignment control to image caption's inline toolbar.
I'm not 100% sure if this is the best way to add this feature, but I couldn't think of anything else without modifying RichText and having access to block attributes.
I would appreciate the sanity check of new caption positioning styles.
Fixes #12997.
How has this been tested?
Screenshots
CleanShot.2021-05-14.at.09.50.24.mp4
Types of changes
New feature
Checklist:
*.native.jsfiles for terms that need renaming or removal).