Update Navigation block in templates to use layout attributes

[tellthemachines]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

The Navigation block was updated in WordPress/gutenberg#36169 to use the new layout controls, such as Query loop, Row, Buttons and Social Icons blocks also use. This means that the attribute structure in Navigation block markup has changed slightly, so it would be good to update the Navigation blocks in Twenty Twenty Two templates accordingly.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Currently we have e.g.: <!-- wp:navigation {"itemsJustification":"right","isResponsive":true} --> . With layout, this should change to <!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->. (is-responsive is now on by default so it's no longer necessary to specify it.)

Nothing should break if using the old attributes, because there is a deprecation in place to handle them, but as this is the default theme shipping with 5.9 it would be nice to use the latest markup 🙂

[kjellr]

I tried giving this a go, but swapping out with the markup above (and a few other variations I tried) all threw markup errors:

Is that still the markup we should be using?

[tellthemachines]

Oh, I see the issue. Sorry, there's a typo in my snippet; it shouldn't have the closing slash because the navigation block in the template has a closing tag already 🤦

This should work:

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->

[kjellr]

Thanks @tellthemachines! I have a PR here: #260