BlockEditor: refactoring getBlockParentsByBlockName() selector

[retrofox]

Description

It re implements the getBlockParentsByBlockName() selector using the createSelector() function to memoize what t returns in order to avoid performance issues.

How has this been tested?

Manually

Create the following block structure

1. Create a column block (two columns)
2. Add a Navigation block inside
3. Add submenus
4. Set customs colors for text and background

Visually, something like this:

or paste the following code in the Code Editor mode

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"rgbTextColor":"#6ab2d1","rgbBackgroundColor":"#051922","itemsJustification":"left"} -->
<!-- wp:navigation-link {"label":"\u003cstrong\u003eAbout\u003c/strong\u003e","title":"Sample Page","type":"page","id":2,"url":"http://localhost:8889/?page_id=2"} -->
<!-- wp:navigation-link {"label":"Contact"} -->
<!-- wp:navigation-link {"label":"Work with Us!"} -->
<!-- wp:navigation-link {"label":"Contact!"} /-->

<!-- wp:navigation-link {"label":"Twenty-Twenty"} /-->

<!-- wp:navigation-link {"label":"Maywood"} /-->

<!-- wp:navigation-link /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Call Us!"} /-->

<!-- wp:navigation-link {"label":"Me"} /-->

<!-- wp:navigation-link {"label":"You!"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Contact"} -->
<!-- wp:navigation-link {"label":"Regie Miller"} /-->

<!-- wp:navigation-link {"label":"John Stockton"} /-->

<!-- wp:navigation-link {"label":"Penny Hardaway "} /-->

<!-- wp:navigation-link /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

When you inspect the nested Navigation Items, the colors should be propagated to all of them.

Also, you can check the behavior following the steps of this comment.

Unit tests

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code has proper inline documentation.

[marekhrabe]

I've tested this for regressions the same way I tested the previous implementation: I made a testing document to test this also outside the Navigation. Made Columns > Column > Cover > Paragraph and tried:

> currentBlock = wp.data.select('core/block-editor').getSelectedBlock().clientId
"203aef60-1cbc-466e-85a1-f98935188e53" // the deepest block - Paragraph

> wp.data.select('core/block-editor').getBlockParentsByBlockName(currentBlock, 'core/cover')
["b5740327-7582-49c5-920e-01199b1fbbd7"] // correctly returned parent Cover


> wp.data.select('core/block-editor').getBlockParentsByBlockName(currentBlock, 'core/columns')
["8086e200-37d5-4890-ab8d-880d587f17a8"] // correctly returned parent Columns


> wp.data.select('core/block-editor').getBlockParentsByBlockName(currentBlock, 'core/image')
[] // empty because there is no Image in parent list

Still getting expected results for both manual testing and the integration in Navigation

[youknowriad]

If I'm not mistaken we only care about state.blocks.parent[clientId]

[retrofox]

Maybe I misunderstood the dependant references here. I set state.blocks.parent because the selector depends on its parent, so if they change, it needs to clear the cache and regenerates.
However, it's already handled by getBlockParents() selector. Is this correct?

[youknowriad]

Unless I'm wrong the returned value on change if the parents of a specific block (clientId) change, right?

[youknowriad]

Actually, I'm wrong state.blocks.parent[ clientId ] doesn't exist, neighter state.blocks.parent. It should be state.blocks.parents as we can target all block parents at once.

[retrofox]

Beyond that .parent doesn't exist 🤦‍♂, is not already handled by the getBlockParents() selector?

oh, got it... we need to be totally specific about the dependant references. Since although it's true that the getBlockParents() selector cache depends on state.blocks.parents, if this selector depends just on the clientId, it's possible that it won't necessarily regenerate its cache if .parents tree changes.

[getdave]

Just noting that we're missing unit tests for this new selector.

[retrofox]

Just noting that we're missing unit tests for this new selector.

It's a very valid point. Going to try to add it asap.

[retrofox]

Just noting that we're missing unit tests for this new selector.

Added unit tests for getBlockParents() and getBlockParentsByBlockName()

[retrofox]

Thanks folks for the review. 🙇