Description

This PR fixes an issue which was found by @getdave reviewing this PR):

...However, I noticed a potential coding issue where we're expecting the rootBlock to always be the Nav Block:

const rootBlock = getBlockParents( clientId )[ 0 ];

...when in actual fact I think it could actually be any parent Block that uses InnerBlocks (eg: Columms) as it will return the topmost Block in the hierarchy. Therefore if the Block is nested then this logic is problematic.

I tested this theory by:

• Adding a Column Block
• Add Nav Block within the first Column
• Setting Custom Colors
• Looking for style attribute set on the DOM on the Nav Link.

It appears in the above scenario it doesn't work as the style wasn't applied to the Navigation Link Block, only to the parent Navigation Block.

So, in order to fix this issue what we do is adding a new getBlockParentsByBlockName() selector, which returns an array of parent client IDs, but also filtered by block name. So in this way, will ensure to get the proper attributes of the parent block:

const parentNavigationIds = getBlockParentsByBlockName(
	clientId,
	'core/navigation'
);

Then it's a matter of getting the first item of the array and pick up the block attributes.

How has this been tested?

1. Adding a Column Block
2. Add Nav Block within the first Column
3. Setting Custom Colors
4. Looking for style attribute set on the DOM on the Nav Link.

before
5) The colors attributes of the Navigation block are not propagated to the NavigationLink and the colors are not applied to the sub-menus:

after
6) The colors are righty applied to the NavigationLink blocks

Types of changes

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.