Add list props to rich text in native. #18748
Conversation
# Conflicts: # packages/block-editor/src/components/rich-text/index.js
SergioEstevao
added
the
Mobile App - i.e. Android or iOS
SergioEstevao
requested review from
daniloercoli and
jorgefilipecosta
as code owners
| @@ -400,6 +400,8 @@ class RichTextWrapper extends Component { | |||
| __unstableUndo={ undo } | |||
| style={ style } | |||
| preserveWhiteSpace={ preserveWhiteSpace } | |||
| start={ start } | |||
| reversed={ reversed } | |||
There was a problem hiding this comment.
Both these props are already added further down to Editable.
There was a problem hiding this comment.
Would it be possible to make that work for native? Ideally all not rich text related props are directly passed to the editable element.
There was a problem hiding this comment.
So we don't have editable on native, and all of the props need to go trough rich text.
One thing that I was thinking was to create an TagAttributes property that will go along with TagName prop and controlled by the blocks.
What do you think @ellatrix ?
There was a problem hiding this comment.
Would it be possible to create an Editable on native?
There was a problem hiding this comment.
It will be possible, but it will take some considerable work to get there, and out of scope for this PR.
We basically will need to make our Native Aztec rich text component to be the Editable and respect all the API for it.
@koke and @hypest may have more thoughts about this, and when to give it to priority.
There was a problem hiding this comment.
I talked with @ellatrix and we agree to keep this as it is, and tackle it on a separate PR.
| typeToKeyboardType( type, step ) { | ||
| let keyboardType = `default`; | ||
| if ( type === `number` ) { | ||
| if ( step && Math.abs( step ) < 1 ) { | ||
| keyboardType = `decimal-pad`; | ||
| } else { | ||
| keyboardType = `number-pad`; | ||
| } | ||
| } | ||
| return keyboardType; | ||
| } |
There was a problem hiding this comment.
I was thinking first to have this in TextControl, but if it's something that could be used in other instances of Cell I think it's fine to be here.
I'm wondering, what is step used for?
The settings sends a step="1" and it seems to not be used by the Web TextControl or html textarea 🤔
There was a problem hiding this comment.
From what I see from the web the step prop is passed directly to HTML input element.
On the web step is used like this: https://www.w3schools.com/tags/att_input_step.asp
And from what I see TextControl on native uses Cell directly, how do you see it I can use it on the TextControl level of native?
There was a problem hiding this comment.
And from what I see TextControl on native uses Cell directly, how do you see it I can use it on the TextControl level of native?
Any extra prop we pass to Cell, will be added to the Cell's internal TextInput component via the valueProps here:
So if we pass keyboardType to Cell in TextControl it should work. Since Cell is more generic and TextControl is meant to be used as the text input component, maybe it would make sense. But I'm fine with keeping it in Cell how it is now too. Give a thought and you can decide :)
Thanks for the explanation, I didn't see the prop on the textarea docs but I see the arrows up and down in the Web settings UI, so that makes sense 👍
There was a problem hiding this comment.
Tested on iOS and works perfect 🎉
Thanks @SergioEstevao for a great work!
Let's be sure to not merge until we decide what to do with the Android implementation 👍
# Conflicts: # packages/block-editor/src/components/rich-text/index.js
Description
Implemented list-settings for the mobile project in RN.
@ellatrix can you check the way I'm passing reversed and start props, I found it curious the way we are passing those to richtext in the web version.
How has this been tested?
This can be tested using this PR in GB-Mobile: wordpress-mobile/gutenberg-mobile#1619
Screenshots
Types of changes
Compatibility with the mobile app RN version.
Checklist: