Footnotes: Add link, background and text color support

[mikachan]

What?

This adds link, background and text color support to the Footnotes block.

Why?

Closes #51991.

How?

Updates the Footnotes block.json file so that it includes supports.color.link, and also sets __experimentalDefaultControls.background and __experimentalDefaultControls.text to true.

I added the __experimentalDefaultControls settings so that the three color controls had the same configuration as the paragraph block, where background and text are shown by default, and the user needs to click into the Color Options menu to find the link controls:

Testing Instructions

1. Open the Post Editor
2. Add some text
3. Highlight some text, use the drop down menu in the block toolbar to add a footnote
4. Open block settings for the footnote and set a link color
5. The footnote arrow color should update to the correct color

Screenshots or screencast

[github-actions]

Flaky tests detected in 493c359.
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/5646848822
📝 Reported issues:

• [Flaky Test] Animation selector should appear if Behavior is Lightbox #52371 in /test/e2e/specs/editor/blocks/image.spec.js

[priethor]

Works as expected! However, I see some layout changes when adding background color:

Grabacion.de.pantalla.2023-07-24.a.las.19.04.54.mov

[ndiego]

Works as expected! However, I see some layout changes when adding background color:

Yeah, we need to add typography, dimensions, and border controls in 6.4 😅

[mikachan]

Thanks for testing!

However, I see some layout changes when adding background color:

This is the current intended behaviour when adding a background color to a block, but it can be confusing and unexpected, and there's a discussion/proposal here to improve it: #50813

[priethor]

Thanks for pointing me to that discussion, Sarah! 👀 I was sure it was unrelated, hence the ✅

[ellatrix]

Why aren't these controls added automatically to all blocks (with maybe an opt-out instead of opt-in)?

[ndiego]

Why aren't these controls added automatically to all blocks (with maybe an opt-out instead of opt-in)?

As far as I'm aware, they have always been opt-in via the supports section of block.json.

[mikachan]

Yeah, we need to add typography, dimensions, and border controls in 6.4

Should this PR add these controls, or would it be better to handle this separately in another PR? I'm happy to update this one if that works best.

[priethor]

Since the next RC is not coming until next Wednesday, I think it's ok to merge this PR and follow up in a second one, if that's easier for you.

[mikachan]

Thanks @priethor, will merge this now then!

[bph]

oops. Got the RC reference above wrong.
@priethor was referring to GB 16.4 RC
Nothing to see here

[richtabor]

What do you think about having Text and Link as the default controls, instead of Text and Background?

Seems Text and Link would be the most used color tools.

[ndiego]

What do you think about having Text and Link as the default controls, instead of Text and Background?

Seems Text and Link would be the most used color tools.

I agree, but the current implementation is consistent with the current settings on the Paragraph block. Perhaps that needs to change too. 🤔

[richtabor]

I agree, but the current implementation is consistent with the current settings on the Paragraph block. Perhaps that needs to change too. 🤔

I think that's probably fine that the paragraph block is treated a bit different. It won't always have links, where the Footnotes block will.

[mikachan]

I've opened a follow-up PR that adds the typography, dimensions, and border controls, and also sets text and link as the default color controls: #53044. Thanks all!