[Mobile]: Add center alignment to image caption on mobile #15257
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
etoledom
added
the
Mobile App - i.e. Android or iOS
etoledom
added a commit
that referenced
this pull request
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
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 center text alignment to the image caption on mobile.
How has this been tested?
Tested steps included in related gutenberg-mobile PR.
Screenshot
See gutenberg-mobile PR.
Checklist: