render_block_data hook maybe conflicting with global styles

[ZafarKamal123]

Description

We've a plugin that basically depends on "render_block_data" hook to check if a block is nested (or not) on the frontend for some of the plugin logic.

After applying this particular filter (and appending some value to the parsed_block) the existing list color is completely overwritten with the global link colors.

Step-by-step reproduction instructions

1. Add the provided code snippet in your site.
2. Add some link color globally in the website via the site editor.
3. Paste the provided "List Layout" on your page.
4. The list item links will be overwritten with the global link color once the snippet is activated.

Screenshots, screen recording, code snippet

Code snippet

We're using the following work-around since there's no official way in the API (there's an open issue for this here) to access the parent block in the block renderer (as far as i know).

add_filter(
			'render_block_data',
			function( $parsed_block, $source_block, $parent_block ) {
				$parsed_block['is_nested'] = false;
				if ( ! empty( $parent_block->parsed_block ) ) {
					$parsed_block['is_nested'] = true;
				}
				return $parsed_block;
			},
			10,
			3
);

List Layout

<!-- wp:columns {"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"hide-on-mobile hide-on-tablet"} -->
<div class="wp-block-columns alignfull hide-on-mobile hide-on-tablet" style="margin-top:0;margin-bottom:0"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%","style":{"spacing":{"blockGap":"0"}},"fontSize":"small"} -->
<div class="wp-block-column has-small-font-size" style="flex-basis:50%"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","letterSpacing":"0.05em"},"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontFamily":"secondary"} -->
<p class="has-primary-color has-text-color has-link-color has-secondary-font-family" style="font-style:normal;font-weight:700;letter-spacing:0.05em">TKW Specialities</p>
<!-- /wp:paragraph -->

<!-- wp:list {"style":{"spacing":{"blockGap":"0","padding":{"left":"var:preset|spacing|40"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast","className":"has-link-text-decoration-none","fontSize":"small"} -->
<ul style="padding-left:var(--wp--preset--spacing--40)" class="has-link-text-decoration-none has-contrast-color has-text-color has-link-color has-small-font-size"><!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/air-fryer/">Air Fryer</a> (black)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/all-recipes/">All Recipes</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/asian-italian-mexican/">Asian/Italian/Mexican</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/bacon/">Bacon</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/bbq-grill-open-fire/">BBQ/Grill/Open Fire</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/breads-doughs/">Breads &amp; Doughs</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/burgers-sliders-tkw-specialities/">Burgers &amp; Sliders</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/comfort-foods/">Comfort Foods</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/dips-appetizers/">Dips</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast"} -->
<div class="wp-block-column has-contrast-color has-text-color has-link-color" style="flex-basis:50%"><!-- wp:list {"style":{"spacing":{"blockGap":"0","padding":{"left":"var:preset|spacing|40"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast","className":"has-link-text-decoration-none","fontSize":"small"} -->
<ul style="padding-left:var(--wp--preset--spacing--40)" class="has-link-text-decoration-none has-contrast-color has-text-color has-link-color has-small-font-size"><!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/healthy/">Healthy/Keto Friendly</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/pressure-cooking/">Instant Pot</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/pizza-tkw-specialities/">Pizza</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/salads-and-dressings/">Salads &amp; Dressings</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/sandwiches-wraps/">Sandwiches &amp; Wraps</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/sauces-marinades/">Sauces &amp; Marinades</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/sheet-pan/">Sheet Pan/Meal Prep</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/slow-cooker/">Slow Cooker</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/snacks-and-munchies/">Snacks &amp; Munchies</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/tkw-specialities/soups-and-chilis/">Soups &amp; Chilis</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0"}},"fontSize":"small"} -->
<div class="wp-block-column has-small-font-size" style="flex-basis:25%"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","letterSpacing":"0.05em"},"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontFamily":"secondary"} -->
<p class="has-primary-color has-text-color has-link-color has-secondary-font-family" style="font-style:normal;font-weight:700;letter-spacing:0.05em">Sweets &amp; Treats</p>
<!-- /wp:paragraph -->

<!-- wp:list {"style":{"spacing":{"blockGap":"0","padding":{"left":"var:preset|spacing|40"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast","className":"has-link-text-decoration-none","fontSize":"small"} -->
<ul style="padding-left:var(--wp--preset--spacing--40)" class="has-link-text-decoration-none has-contrast-color has-text-color has-link-color has-small-font-size"><!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/all-sweets-treats/">All Sweets &amp; Treats</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/bark/">Bark</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/bars/">Bars</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/brownies-sweets-treats/">Brownies</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/cakes/">Cakes</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/cookies/">Cookies</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/muffins-breads/">Muffins &amp; Breads</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/sweets-treats/pies-recipes/">Pies</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%","style":{"spacing":{"blockGap":"0"}},"fontSize":"small"} -->
<div class="wp-block-column has-small-font-size" style="flex-basis:25%"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","letterSpacing":"0.05em"},"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontFamily":"secondary"} -->
<p class="has-primary-color has-text-color has-link-color has-secondary-font-family" style="font-style:normal;font-weight:700;letter-spacing:0.05em">Courses/Types</p>
<!-- /wp:paragraph -->

<!-- wp:list {"style":{"spacing":{"blockGap":"0","padding":{"left":"var:preset|spacing|40"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast","className":"has-link-text-decoration-none","fontSize":"small"} -->
<ul style="padding-left:var(--wp--preset--spacing--40)" class="has-link-text-decoration-none has-contrast-color has-text-color has-link-color has-small-font-size"><!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/appetizers/">Appetizers</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/beef/">Beef</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/breakfast/">Breakfast</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/pork/">Pork</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/poultry/">Poultry</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/seafood/">Seafood</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/side-dishes/">Side Dishes</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://tkw.local/category/courses-types/vegetarian/">Vegetarian</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Environment info

• WordPress Version: 6.6-alpha-57801
• Gutenberg Plugin: Not installed

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

This isn't something I can reproduce 🤔

[ZafarKamal123]

Hi @talldan,

I've created a sandbox site that reproduces this issue for you.

Admin area URL: https://style-issue.s3-tastewp.com/wp-admin
Username: sunny
Password: 49gPYpZp384

This is where the layout is added for testing (currently incorrectly displaying orange links because the code snippet is active): https://style-issue.s3-tastewp.com/list-layout/

This is the code snippet (please try disabling this): https://style-issue.s3-tastewp.com/wp-admin/admin.php?page=edit-snippet&id=5

[talldan]

It seems like when you install the latest version of the gutenberg plugin, the problem is resolved, so that might imply it has already been fixed, but yet to be shipped in a WordPress core update.

It's a curious issue though, and very unexpected!

[talldan]

@ZafarKamal123 I managed to track this down with the help of @aaronrobertshaw.

This was indeed a bug that has already been fixed, and the fix will ship with WordPress 6.6.

The same issue occurred in the past when the render_block_data hook was used within Gutenberg to add a property in the same way you are. You can read more about the bug and fix here - #59462 (comment).

edit: I'll close the issue

[ZafarKamal123]

That's great to hear @talldan. Thank you for looking into this so quickly!