[Block Library - Navigation]: Fix vertical layout

[ntsekouras]

Fixes: #36902

This PR fixes a regression introduced here: #36292.

Testing instructions

1. In a page/post add a Navigation block and add a couple of items
2. Change the layout orientation to vertical (do not change content justification)
3. Save
4. View the frontend and observe that the Navigation is vertical now

In general I think something like this should be used to get the default block layout in edit function. Now in Navigation block we provide some layout defaults which seems that it shouldn't - I haven't checked in depth yet as the block itself is really convoluted.

The specific problem was that we needed the --layout-direction attribute which wasn't added if layout.justifyContent was empty.

The logic about setCascadingProperties needs more looking. I noticed the 'spread' of items in vertical orientation (Search in Navigation, Social Links) and I believe there must be similar css rules like this fix.

Screen.Recording.2021-11-30.at.8.39.43.PM.mov

[jasmussen]

Thanks for the PR. What's a good way to test it?

[ntsekouras]

Thanks for the PR. What's a good way to test it?

Sorry about that 😄 - I updated the PR's description

[jasmussen]

Thank you. Tests well for me. I can't speak well to the inner workings, but I'll be happy to give a thumbs up if you have high confidence in this one.

[ntsekouras]

Thank you. Tests well for me. I can't speak well to the inner workings, but I'll be happy to give a thumbs up if you have high confidence in this one.

In general we need to review the whole setCascadingProperties code as it seems to have coupled the layout abstraction with specific block needs. Until then though, this is needed, yes.