Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RNMobile] Use RichText component on Title block #13548

Merged
merged 16 commits into from
Feb 5, 2019
Merged

[RNMobile] Use RichText component on Title block #13548

merged 16 commits into from
Feb 5, 2019

Conversation

daniloercoli
Copy link
Contributor

@daniloercoli daniloercoli commented Jan 28, 2019 •
edited
Loading

This PR replace the TextInput component used as base layer for the Title block in favor of RichText that does have better handling of the Enter.key pressed event.

On a previous PR we've made the Title block with multiline=false prop, and detected the Enter.key with the default onSubmitEditing prop, given by the underlying TextInput RN component.

Despite onSubmitEditing is a very reliable way of detecting Enter.key on TextInput with multiline = false, and works on both HW and SW keyboard without the necessity of implementing hacks with TextWatchers and keyListeners - https://facebook.github.io/react-native/docs/textinput#onsubmitediting it does have some problems on Android where the Keyboard is dismissed, and there is no a simple way to get it back without seeing it down and immediately up for the end-user.

(We've had the same problem on Code and More block, and disabled them for the alpha, since the UX was not ideal).

To test:

  • Start the mobile demo app
  • Put the caret somewhere in the Title block
  • Tap enter on the soft keyboard, or on the hw keyboard
  • It should add a new empty (para) block after the current

Mobile side PR is here: wordpress-mobile/gutenberg-mobile#513

@daniloercoli
Use RichText component in Title block for mobile.
00ec3ca 
This is required to properly intercpet Enter.key on all platforms/keyboards. We decided to move to RichText since all of the work for Enter.key intercept was laready done there per Para and Heading blocks.
@daniloercoli
Fix lint
45f8bde
@daniloercoli daniloercoli added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Jan 28, 2019
@daniloercoli daniloercoli mentioned this pull request Jan 28, 2019
Merged
daniloercoli and others added 14 commits January 30, 2019 16:51
@daniloercoli
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
68b353c 
…rnmobile/372-use-RichText-on-Title-block

* 'master' of https://github.com/WordPress/gutenberg: (36 commits)
  Fixes plural messages POT generation. (#13577)
  Typo fix (#13595)
  REST API: Remove oEmbed proxy HTML filtering (#13575)
  Removed unnecessary className attribute. Fixes #11664 (#11831)
  Add changelog for RSS block (#13588)
  Components: Set type=button for TabPanel button elements. (#11944)
  Update util.js (#13582)
  Docs: Add accessbility specific page (#13169)
  Rnmobile/media methods refactor (#13554)
  chore(release): publish
  chore(release): publish
  Plugin: Deprecate gutenberg_get_script_polyfill (#13536)
  Block API: Parse entity only when valid character reference (#13512)
  RichText: List: fix indentation (#13563)
  Plugin: Deprecate window._wpLoadGutenbergEditor (#13547)
  Plugin: Avoid setting generic "Edit Post" title on load (#13552)
  Plugin: Populate demo content by default content filters (#13553)
  RichText: List: Fix getParentIndex (#13562)
  RichText: List: Fix outdent with children (#13559)
  Scripts: Remove npm run build from test-e2e default run (#13420)
  ...
@daniloercoli
Set font family, weight, and size via RN props for Title, Heading, an…
f332203 
…d Para blocks.
@daniloercoli
Fix lint
63586f1
@daniloercoli
Adds font* props to PlainText for mobile
06d9f84
@daniloercoli
Make serif default family for RichText on mobile
5a43ea9
@daniloercoli
Set the correct font family for Image caption on mobile
3f8f97c
@daniloercoli
Set the correct font family for Nextpage block on mobile
bd629d8
@daniloercoli
Set the correct font family for Code block on mobile
624b473
@daniloercoli
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
10ad47d 
…rnmobile/372-use-RichText-on-Title-block

* 'master' of https://github.com/WordPress/gutenberg:
  Try alternate list item jump fix. (#12941)
  Mobile bottom sheet component (#13612)
  Remove unintentional right-margin on last odd-item. (#12199)
  Introduce left and right float alignment options to latest posts block (#8814)
  Fix Google Docs table paste (#13543)
  Increase bottom padding on gallery image caption (#13623)
  Fix the editor save keyboard shortcut not working in code editor view (#13159)
  Plugin: Deprecate gutenberg_add_admin_body_class (#13572)
  Rnmobile/upload media failed state (#13615)
  Make clickOnMoreMenuItem not dependent on aria labels (#13166)
  Add: className prop support to server side render. (#13568)
  Fix: Categories Block: hierarchical Dropdown (#13567)
  Docs: Add clarification about git workflow (#13534)
  Plugin: Remove `user_can_richedit` filtering (#13608)
  eslint-plugin: Add rule `no-unused-vars-before-return` (#12828)
  Image settings button (#13597)
  Fixed wording for the color picker saturation (#13479)

# Conflicts:
#	packages/block-library/src/image/edit.native.js
@daniloercoli
set the correct font family for Image caption on mobile
63346cf
@daniloercoli
Remove extra fontFamily props.
c029cb4
@diegoreymendez @daniloercoli
Remaps some font names so that they work in iOS. (#13628)
8b52a1a 
* Remaps some font names so that they work in iOS.

* Improved the logic for picking the default font in some components.

* Modifies the logic that sets the default font for the code component.

* Changes the font family in a css file.

* Adds an import to have a default font for native.

* Standardizes the default font for the code component.

* Simplifies the default font for the code block.

* Simplifies the default font for the code block.

* Configures the default font for plain-text from a css file.

* Fixes the styling for the rich text components and restores a line that was removed by mistake.

* Fixes a linting problem.

* Fixes some linting issues.

* Fixes a linting issue.
@daniloercoli
Make sure PlainText takes in consideration the fontFamily passed via …
2a126ab 
…props before falling back to default styles
@daniloercoli
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
70836f1 
…rnmobile/372-use-RichText-on-Title-block

* 'master' of https://github.com/WordPress/gutenberg: (22 commits)
  Make the modal title styling consistent (#13669)
  Disable navigation block for text mode. (#12185)
  Fix: Linting problem in modal example code (#13671)
  Add myself as a code owner to the annotations (#13672)
  Add more reviewers to CODEOWNERS.md file (#13667)
  Plugin: Remove jQuery heartbeat-to-hooks proxying (#13576)
  Workflow: Add repository CODEOWNERS file (#13604)
  Add a mobile minimum size for form fields (#13639)
  Update edit-save documentation  (#13578)
  Alt image setting (#13631)
  Fix: Allow years lower than 1970 in DateTime component. (#13602)
  Using addQueryArgs to generate Manage All Reusable Blocks link (#13653)
  Bump plugin version to 5.0.0-rc.1 (#13652)
  Update lodash to 4.17.10 (#13651)
  Refreshed PR (#9469)
  Set default values of the width and height input fields according to the actual image dimensions (#7687)
  12647 fix css color picker (#12747)
  Remove "we" from messages (#13644)
  Fix: Font size picker max width on mobile (#13264)
  Fix/issue 12501 menu item aria label
  ...
diegoreymendez
diegoreymendez approved these changes Feb 5, 2019
View reviewed changes
Copy link
Contributor

@diegoreymendez diegoreymendez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was tested via gutenberg-mobile.

@diegoreymendez diegoreymendez merged commit a1d79a9 into master Feb 5, 2019
daniloercoli added a commit that referenced this pull request Feb 5, 2019
@daniloercoli
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
3ff3d9c 
…rnmobile/372-fix-image-caption-font-family

* 'master' of https://github.com/WordPress/gutenberg:
  [RNMobile] Use RichText component on Title block (#13548)

# Conflicts:
#	packages/block-library/src/image/edit.native.js
@youknowriad youknowriad added this to the 5.1 (Gutenberg) milestone Feb 15, 2019
This was referenced Feb 18, 2019
Merged
Merged
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@daniloercoli @youknowriad
[RNMobile] Use RichText component on Title block (#13548)
e1a1417 
* Use RichText component in Title block for mobile.
This is required to properly intercpet Enter.key on all platforms/keyboards. We decided to move to RichText since all of the work for Enter.key intercept was laready done there per Para and Heading blocks.

* Fix lint

* Set font family, weight, and size via RN props for Title, Heading, and Para blocks.

* Fix lint

* Adds font* props to PlainText for mobile

* Make `serif` default family for RichText  on mobile

* Set the correct font family for Image caption on mobile

* Set the correct font family for Nextpage block on mobile

* Set the correct font family for Code block on mobile

* set the correct font family for Image caption on mobile

* Remove extra fontFamily props.

* Remaps some font names so that they work in iOS. (#13628)

* Remaps some font names so that they work in iOS.

* Improved the logic for picking the default font in some components.

* Modifies the logic that sets the default font for the code component.

* Changes the font family in a css file.

* Adds an import to have a default font for native.

* Standardizes the default font for the code component.

* Simplifies the default font for the code block.

* Simplifies the default font for the code block.

* Configures the default font for plain-text from a css file.

* Fixes the styling for the rich text components and restores a line that was removed by mistake.

* Fixes a linting problem.

* Fixes some linting issues.

* Fixes a linting issue.

* Make sure PlainText takes in consideration the fontFamily passed via props before falling back to default styles
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@daniloercoli @youknowriad
[RNMobile] Use RichText component on Title block (#13548)
ce68f9d 
* Use RichText component in Title block for mobile.
This is required to properly intercpet Enter.key on all platforms/keyboards. We decided to move to RichText since all of the work for Enter.key intercept was laready done there per Para and Heading blocks.

* Fix lint

* Set font family, weight, and size via RN props for Title, Heading, and Para blocks.

* Fix lint

* Adds font* props to PlainText for mobile

* Make `serif` default family for RichText  on mobile

* Set the correct font family for Image caption on mobile

* Set the correct font family for Nextpage block on mobile

* Set the correct font family for Code block on mobile

* set the correct font family for Image caption on mobile

* Remove extra fontFamily props.

* Remaps some font names so that they work in iOS. (#13628)

* Remaps some font names so that they work in iOS.

* Improved the logic for picking the default font in some components.

* Modifies the logic that sets the default font for the code component.

* Changes the font family in a css file.

* Adds an import to have a default font for native.

* Standardizes the default font for the code component.

* Simplifies the default font for the code block.

* Simplifies the default font for the code block.

* Configures the default font for plain-text from a css file.

* Fixes the styling for the rich text components and restores a line that was removed by mistake.

* Fixes a linting problem.

* Fixes some linting issues.

* Fixes a linting issue.

* Make sure PlainText takes in consideration the fontFamily passed via props before falling back to default styles
@youknowriad youknowriad deleted the rnmobile/372-use-RichText-on-Title-block branch May 27, 2020 17:41
This was referenced Jul 16, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@diegoreymendez diegoreymendez diegoreymendez approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@etoledom etoledom Awaiting requested review from etoledom

@gziolo gziolo Awaiting requested review from gziolo

@hypest hypest Awaiting requested review from hypest

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

@koke koke Awaiting requested review from koke

@marecar3 marecar3 Awaiting requested review from marecar3

@mzorz mzorz Awaiting requested review from mzorz

@oandregal oandregal Awaiting requested review from oandregal

@pinarol pinarol Awaiting requested review from pinarol

@SergioEstevao SergioEstevao Awaiting requested review from SergioEstevao

@Soean Soean Awaiting requested review from Soean

@Tug Tug Awaiting requested review from Tug

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees
No one assigned
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Milestone
5.1 (Gutenberg)
Development

Successfully merging this pull request may close these issues.
3 participants
@daniloercoli @diegoreymendez @youknowriad