Global Styles: Resolve link element styles in block inspector controls for blocks that are links

[andrewserong]

Part of:

• Displaying Global Styles element inheritance #80438

Follows:

• Block Editor: Reflect inherited Global Styles values in block inspector controls #77894
• Global Styles: Resolve per-level heading element styles in block inspector controls #80495

What?

Very similar to #80495 that added the logic to resolve per-heading element styles in block inspector controls, this PR takes the same approach but adds link for those core blocks that are links. As a result the included blocks will now reflect root typography link values set in global styles. I.e. a good example is setting Links > Typography > Appearance in global styles and seeing that the value is now reflected as an inherited value in the block inspector for the blocks included in this PR.

Out of scope for this PR: parent / ancestor blocks that define element styles.

Why?

Without this many of these blocks will show element color hierarchy in the editor but the typography controls display as if nothing is set in global styles. For these blocks that effectively are links, we should do our best to reflect element typography values in the UI.

Note that this only applies to some of the blocks in the linked issue. The purpose here is to iteratively add the behaviour, and these were the simplest ones to implement as they effectively are links. Included blocks:

How?

• Update the getElementLayers function to also include the list of core blocks that should be treated as links

Testing Instructions

• First up in global styles go to Typography > Links and set Appearance to something slightly unusual, e.g. Extra Bold Italic in TT5 so that it's obvious

The following Claude-generated table gives an overview of what can be made visible thanks to this PR

Block	What our link fold can surface
read-more	Text colour + typography
loginout	Link colour (passthrough) + typography
post-navigation-link	Link colour (passthrough) + typography
post-comments-link	Link colour (passthrough) + typography
query-pagination-next / -previous / -numbers	typography (no colour control)
comments-pagination-next / -previous / -numbers	typography (no colour control)
comment-edit-link	Link colour (passthrough) + typography
comment-reply-link	Link colour (passthrough) + typography

To test these blocks out, you can do so manually, or use the following markup to add to a post or page for testing.

Test markup that includes the affected blocks

<!-- wp:read-more /-->

<!-- wp:loginout /-->

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

<!-- wp:post-comments-link /-->

<!-- wp:query {"queryId":0,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->

<!-- wp:read-more /-->
<!-- /wp:post-template -->

<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->

<!-- wp:comments -->
<div class="wp-block-comments"><!-- wp:comment-template -->
<!-- wp:comment-author-name /-->

<!-- wp:comment-content /-->

<!-- wp:comment-reply-link /-->

<!-- wp:comment-edit-link /-->
<!-- /wp:comment-template -->

<!-- wp:comments-pagination -->
<!-- wp:comments-pagination-previous /-->

<!-- wp:comments-pagination-numbers /-->

<!-- wp:comments-pagination-next /-->
<!-- /wp:comments-pagination --></div>
<!-- /wp:comments -->

Screenshots or screencast

On trunk, note that Appearance looks as if it's empty:

Whereas in this branch it shows a default value when it's set at the link level in global styles:

Use of AI Tools

Claude Code with lots of manual verification

[github-actions]

Size Change: +103 B (0%)

Total Size: 7.75 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	428 kB	+103 B (+0.02%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in f293b7e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29983421767
📝 Reported issues:

• [Flaky Test] should allow user to add and remove multiple local font files #78760 in /test/e2e/specs/admin/font-library.spec.js
• [Flaky Test] should update the HTML only for the latest navigation #78835 in /test/e2e/specs/interactivity/router-navigate.spec.ts

[ramonjd]

This is working great for me, thanks for getting it up!

Before	After

Only site title wasn't working the way I expected both stand alone and in a query:

It was showing the text fallbacks (but not my link styles)

Not sure how tricky the following blocks are as well: tag-cloud, categories, archives. They contain <a> elements. Potential follow up.

Looking just at tag-cloud, it's server-side generated.

[ramonjd]

What does "get no link layer" mean here. Is it for blocks that have an isLink attribute (and control)?

For post author name, for example: /packages/block-library/src/post-author-name/block.json

[andrewserong]

Link "layer" here (the terminology isn't the best) refers to the layering from root to element to block and so on of the styles inheritance. So the goal of this comment is to try to capture that concept here:

I.e. we have a function called getElementLayers that returns a structure of elements that the block can use to resolve the hierarchy. These new additions "get" the link layer, and this comment is attempting to explain why some blocks rely on the inherited pass through of the link element color, whereas some get the explicit treatment here.

Gosh, this is hard to word... I'm not sure if my comment here is more opaque than the nudging I got Claude to do on this JSDoc!

Hope that somehow makes some sense.

[andrewserong]

Oh, here's a concrete example. Take the "Read more" block — it effectively is a link, so this inheritance allows us to reflect the link color as the text color, whereas for most other blocks, the link color will show up under Elements instead (i.e. for Paragraph):

[ramonjd]

You did great. Thanks for the explainer 😄

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[andrewserong]

Only site title wasn't working the way I expected both stand alone and in a query:

Thanks for flagging this, I think this one is hybrid as it can be both a heading and a link, I think I'll leave that to a follow-up exploration if it's okay!

Not sure how tricky the following blocks are as well: tag-cloud, categories, archives. They contain elements. Potential follow up.
Looking just at tag-cloud, it's server-side generated.

Good catches — I might leave these for follow-ups, too, and jot down any notes in the linked issue 👍

[ramonjd]

I think this one is hybrid as it can be both a heading and a link, I think I'll leave that to a follow-up exploration

Sounds good!

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: ed5daaf