[RNMobile] Inner Block Navigate upward through hierarchy #17496

jbinda · 2019-09-20T11:21:55Z

Description

PR is connected with #1315 in gutenberg-mobile.

Please also refer to:

Related gutenberg-mobile PR
merge this PR first [RNMobile] FloatingToolbar

It presents Icon on Floating Toolbar component witch allow to select parent of selected block. It is visible only when some of the Inner Block is selected

How has this been tested?

Manual test on Android and iOS plus CI tests

Screenshots

Note here that selection frames and opacity will be applied in PR connected with this issue

Types of changes

add new icon button component and logic to select parent of currently selected block

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

packages/block-editor/src/components/block-list/block.native.js

packages/block-editor/src/store/selectors.js

pinarol · 2019-09-25T17:35:20Z

@iamthomasbishop should we be showing the navigating up button at the outer most block? I think that button is just making floating toolbar disappear in that case since there's no where else to navigate to.

iamthomasbishop · 2019-09-25T22:37:46Z

Yes, we should show that up button, it essentially just escapes the nesting. My original prototype had an X icon in that case but feedback mentioned it was confusing so we kept the same icon.

jbinda · 2019-09-26T05:53:51Z

During development I have noticed that it is comfortable to use this navigation-up button to clear the selection (specially when it will be combined with dashed borders on InnerBlocks) so I'm happy with that decision. Thanks !

gziolo · 2019-09-26T11:00:01Z

@mapk @jasmussen @kjellr - this PR is interesting to follow as it tries to solve the issue with navigating between the child and parent blocks. It would be great to align the approach between native and web mobile versions.

jasmussen · 2019-09-26T11:12:14Z

Nice.

So in current Gutenberg web it's super tricky to select parent blocks. We have for web two tickets to address this.

"Child first". You click/tap to select a block directly, and then "crawl upwards" in the hierarchy. Create breadcrumb bar for selecting parent block #17089 suggests a breadcrumb interface for this.
"Parent first" — you select the parent block first to "unlock" the contents inside, digging downwards in the hierarchy. We have this enabled for mobile at the moment, and in a previous iteration we had it enabled for desktop too but paused that bit pending further polish potentially in a "selection tool": Visually indicate navigation mode, and make mouse accessible #17088

1 is what this PR seems to get at. The GIF (thanks so much for providing that!) suggests the implementation at the moment is a little barebones, that's fine.

However would you be opposed to changing this behavior slightly so that instead of providing a gray popover with an up arrow in context of the selected block, you provide a bottom-fixed position gray popover with breadcrumbs inside? I believe I've seen a mockup from @iamthomasbishop showing this. The behavior would in effect be the same, only instead of an up arrow selecting the parent block, it would be the block icon of the parent block shown, in context of the block icon of the currently selected block.

jbinda · 2019-09-26T12:09:30Z

hi @jasmussen

Thank for reply. There is also second PR which provide feature to navigate down in the hierarchy after each click/press.

Also there are BreadCrumbs here and Hierarchy tree here provided by @dratwas

We are putting this all together right know and after merge all we have got it should cover all what you wrote.

iamthomasbishop · 2019-09-26T18:49:56Z

@jasmussen As @jbinda mentioned, this is just one part of a wider nested blocks effort – it's based off this prototype I worked on a while back.

With that in mind, our general approach is basically parent-first and this specific PR is facilitating the task of navigating from a nested child upward.

Also a side-note: the up arrow icon used here will end up being the subdirectory up icon. The toolbar will look like this at the end of the implementation.

jasmussen · 2019-09-26T18:58:14Z

Stellar! Love that, Thomas, thanks for sharing. All 👍 from me!

jbinda · 2019-10-03T14:33:47Z

@pinarol and @iamthomasbishop

I took return icon from material icon and rotate it. WDYT ?
I think it's look similar according to the figma example ?

I think it's look similar according to the figma example

iamthomasbishop · 2019-10-03T14:35:57Z

Awesome, that's exactly what I did in Figma 😄 I can also send an svg of the icon if need be, but that looks good to me! ~~One request: is there a way we can shift the icon up 1px so that it's more optically centered? I don't love adding conditional styling if we can avoid, so I understand if we don't want to do this.~~ Ignore this, let's just leave it 👍

jbinda · 2019-10-03T14:38:37Z

ok I will try to edit it and move 1px up

iamthomasbishop · 2019-10-03T15:03:09Z

ok I will try to edit it and move 1px up

It might look odd, but if you're already doing it let's give it a try and can revert if it doesn't look right 😄

jbinda · 2019-10-04T09:31:03Z

@iamthomasbishop

That's how it look with opacity on right pipe

iamthomasbishop · 2019-10-04T16:54:00Z

@jbinda Perfect, thank you! Can you do me a favor and check what size the tap area for the hierarchy up button is? I want to ensure we are affording at least 44x44 for each toolbar button.

jbinda · 2019-10-07T06:21:32Z

Hi @iamthomasbishop

Please check the screenshot from inspector:

iOS

Android

The tap area has exactly 44px :)

iamthomasbishop · 2019-10-07T16:10:32Z

Perfect! Thank you for checking.

koke · 2019-10-08T07:18:08Z

packages/block-editor/src/components/block-list/block.native.js

+								onClick={ () => this.props.onSelect( parentId ) }
+								icon={ NavigateUpSVG }
+							/>
+							<View style={ styles.pipe } />


I think this is fine for this one, but it should become the toolbar's border when we add the breadcrumbs

koke

I think this is looking good. I'm wondering if we should be showing the up button on top level blocks, since tapping on it seems to remove any selection.

jbinda · 2019-10-08T07:54:59Z

@koke thanks for review ! According to what you wrote - this is known issue with FloatingToolbar and here @lukewalczak makes progress to fix it

jbinda · 2019-10-08T08:41:07Z

can I merge it then ?

koke · 2019-10-08T08:45:18Z

Yes, if that will be handled on another pr go ahead and merge

jbinda requested review from ajitbohra, chrisvanpatten, ellatrix, gziolo, jorgefilipecosta, talldan and youknowriad as code owners September 20, 2019 11:21

jbinda changed the title ~~[RNMobile] Inner Block Navigate up through hierarchy~~ [RNMobile] Inner Block Navigate upward through hierarchy Sep 20, 2019

jbinda mentioned this pull request Sep 20, 2019

Feat: Navigation Upward in InnerBlocks wordpress-mobile/gutenberg-mobile#1371

Merged

1 task

jbinda commented Sep 20, 2019

View reviewed changes

packages/block-editor/src/components/block-list/block.native.js Outdated Show resolved Hide resolved

gziolo reviewed Sep 20, 2019

View reviewed changes

packages/block-editor/src/store/selectors.js Outdated Show resolved Hide resolved

jbinda mentioned this pull request Sep 24, 2019

[RNMobile] Inner Block Navigate down through hierarchy #17547

Merged

5 tasks

jbinda requested a review from gziolo September 25, 2019 11:43

gziolo 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 Sep 26, 2019

pinarol assigned jbinda Sep 26, 2019

gziolo requested review from jasmussen, kjellr and mapk September 26, 2019 10:58

etoledom removed request for jasmussen, chrisvanpatten, mmtr, nerrad, aduth, adamsilverstein, TimothyBJacobs, ellatrix, dmsnell, etoledom and jorgefilipecosta October 4, 2019 05:11

jbinda added 3 commits October 4, 2019 09:04

apply pipe opacity

f90aa6f

apply pipe opacity

57b82d9

fix

6395ff2

jbinda added 3 commits October 4, 2019 11:49

remove fill icon color prop

6e617fe

fix lint

1835ae6

adjust style

9fd9828

adjust tap area

0243f42

koke reviewed Oct 8, 2019

View reviewed changes

koke approved these changes Oct 8, 2019

View reviewed changes

jbinda merged commit 7a393af into WordPress:master Oct 8, 2019

jbinda deleted the rnmobile/navigate-up branch October 8, 2019 08:47

youknowriad added this to the Gutenberg 6.7 milestone Oct 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Inner Block Navigate upward through hierarchy #17496

[RNMobile] Inner Block Navigate upward through hierarchy #17496

jbinda commented Sep 20, 2019 •

edited

Loading

pinarol commented Sep 25, 2019

iamthomasbishop commented Sep 25, 2019

jbinda commented Sep 26, 2019

gziolo commented Sep 26, 2019

jasmussen commented Sep 26, 2019

jbinda commented Sep 26, 2019

iamthomasbishop commented Sep 26, 2019

jasmussen commented Sep 26, 2019

jbinda commented Oct 3, 2019 •

edited

Loading

iamthomasbishop commented Oct 3, 2019 •

edited

Loading

jbinda commented Oct 3, 2019

iamthomasbishop commented Oct 3, 2019

jbinda commented Oct 4, 2019 •

edited

Loading

iamthomasbishop commented Oct 4, 2019

jbinda commented Oct 7, 2019 •

edited

Loading

iamthomasbishop commented Oct 7, 2019

koke Oct 8, 2019

koke left a comment

jbinda commented Oct 8, 2019

jbinda commented Oct 8, 2019

koke commented Oct 8, 2019

[RNMobile] Inner Block Navigate upward through hierarchy #17496

[RNMobile] Inner Block Navigate upward through hierarchy #17496

Conversation

jbinda commented Sep 20, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

pinarol commented Sep 25, 2019

iamthomasbishop commented Sep 25, 2019

jbinda commented Sep 26, 2019

gziolo commented Sep 26, 2019

jasmussen commented Sep 26, 2019

jbinda commented Sep 26, 2019

iamthomasbishop commented Sep 26, 2019

jasmussen commented Sep 26, 2019

jbinda commented Oct 3, 2019 • edited Loading

iamthomasbishop commented Oct 3, 2019 • edited Loading

jbinda commented Oct 3, 2019

iamthomasbishop commented Oct 3, 2019

jbinda commented Oct 4, 2019 • edited Loading

iamthomasbishop commented Oct 4, 2019

jbinda commented Oct 7, 2019 • edited Loading

iamthomasbishop commented Oct 7, 2019

koke Oct 8, 2019

Choose a reason for hiding this comment

koke left a comment

Choose a reason for hiding this comment

jbinda commented Oct 8, 2019

jbinda commented Oct 8, 2019

koke commented Oct 8, 2019

jbinda commented Sep 20, 2019 •

edited

Loading

jbinda commented Oct 3, 2019 •

edited

Loading

iamthomasbishop commented Oct 3, 2019 •

edited

Loading

jbinda commented Oct 4, 2019 •

edited

Loading

jbinda commented Oct 7, 2019 •

edited

Loading