Proposal: Add ability to style text and add link in Image caption #574
Labels
[Type] Enhancement
Improves a current area of the editor
Milestone
Comments
iamthomasbishop
added
the
[Type] Enhancement
26 tasks
|
As we move to RichText, let's also test #590 and see if that gets fixed |
|
I am looking into this issue now. |
mchowning
added a commit
to mchowning/gutenberg
that referenced
this issue
Apr 10, 2019
Adds ability to style image caption with bold, italic, links, and strikethrough (wordpress-mobile/gutenberg-mobile#574). Adds ability for image captions to wrap to multiple lines instead of getting cut off (wordpress-mobile/gutenberg-mobile#590).
etoledom
pushed a commit
to WordPress/gutenberg
that referenced
this issue
Apr 27, 2019
* Add ability to style image caption Adds ability to style image caption with bold, italic, links, and strikethrough (wordpress-mobile/gutenberg-mobile#574). Adds ability for image captions to wrap to multiple lines instead of getting cut off (wordpress-mobile/gutenberg-mobile#590). * Address style errors from linter * Hide image toolbar controls if caption selected * Update state in componentDidMount The previous approach of setting the child component's `isSelected` prop at the time the child was rendered based on `this.props.isSelected && this.state.isCaptionSelected` did not work when: (a) the child was selected (so its `isSelected` prop was true); (b) the child component had no text; and (c) the parent's `isSelected` prop was changed to false (i.e., another block was selected). Because the child component is not rendered when both the parent's `isSelected` prop is false and the caption does not contain any text, the child component's `onBlur` prop function (the `onCaptionBlur function) would not be called and update the `isCaptionSelected` state to be false. This bug shows when a user selects an empty caption, then selects a different block (thereby hiding the caption since it is empty), and then re-selects the image with the empty caption. In that scenario, upon re-selecting the image with the empty caption, the empty caption would appear and immediately be selected instead of just appearing. This bug would not appear if there was any text in the caption, because then the caption would always render and its `onBlur` prop function would be called. * Add comment explaining isSelected guard * Update image caption tagname from p to figcaption This change brings mobile's handling of image captinos in line with the web. It also addresses a crash that was occurring when the enter key was tapped to enter a new line in an image caption. * Remove `onBlurCaption` function On iOS the display of the link UI modal was causing the `onBlurCaption` function to be called, which would update the image caption's `isSelected` prop to false. That would, in turn, immediately remove the just-displayed modal. Restructuring the logic to not like this to not use the image caption's `onBlur` function avoids that issue. * Remove tagName from caption RichText component Explicitly setting the tagName to figcaption caused an invalid block to be saved if a caption ended with an empty line.
etoledom
added a commit
to WordPress/gutenberg
that referenced
this issue
May 16, 2019
* [Mobile]: Add Image Caption Styling (#14883) * Add ability to style image caption Adds ability to style image caption with bold, italic, links, and strikethrough (wordpress-mobile/gutenberg-mobile#574). Adds ability for image captions to wrap to multiple lines instead of getting cut off (wordpress-mobile/gutenberg-mobile#590). * Address style errors from linter * Hide image toolbar controls if caption selected * Update state in componentDidMount The previous approach of setting the child component's `isSelected` prop at the time the child was rendered based on `this.props.isSelected && this.state.isCaptionSelected` did not work when: (a) the child was selected (so its `isSelected` prop was true); (b) the child component had no text; and (c) the parent's `isSelected` prop was changed to false (i.e., another block was selected). Because the child component is not rendered when both the parent's `isSelected` prop is false and the caption does not contain any text, the child component's `onBlur` prop function (the `onCaptionBlur function) would not be called and update the `isCaptionSelected` state to be false. This bug shows when a user selects an empty caption, then selects a different block (thereby hiding the caption since it is empty), and then re-selects the image with the empty caption. In that scenario, upon re-selecting the image with the empty caption, the empty caption would appear and immediately be selected instead of just appearing. This bug would not appear if there was any text in the caption, because then the caption would always render and its `onBlur` prop function would be called. * Add comment explaining isSelected guard * Update image caption tagname from p to figcaption This change brings mobile's handling of image captinos in line with the web. It also addresses a crash that was occurring when the enter key was tapped to enter a new line in an image caption. * Remove `onBlurCaption` function On iOS the display of the link UI modal was causing the `onBlurCaption` function to be called, which would update the image caption's `isSelected` prop to false. That would, in turn, immediately remove the just-displayed modal. Restructuring the logic to not like this to not use the image caption's `onBlur` function avoids that issue. * Remove tagName from caption RichText component Explicitly setting the tagName to figcaption caused an invalid block to be saved if a caption ended with an empty line. * iOS: Remove p tags from image caption paragraphs (#15366) * Add center alignment to image caption on mobile (#15257) * Adding missing style to video/style.native.scss This style was fetched from the Image block, and it was removed after replacing the TextInput with RichText on captions
|
Closed via #975 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Expected Behavior
As a user, I'd expect to be able to style text and add a link on a caption.
Current Behavior
We (mobile GB) don't currently offer any controls for customizing the style or linking on the caption.
Core GB currently offers an inline toolbar that looks like this:
Proposal
In the long-term we might want to explore a similar "floating" solution to Core's, but in the short-term I think it'd make sense to utilize the Quick Toolbar surface. Thinking of the caption as a "child" of the image block, I think we could approach it in this way:
bold,italic,link,strike,underlineif we add from this)The text was updated successfully, but these errors were encountered: