Make WordPress Core

Opened 11 months ago

Closed 11 months ago

Last modified 10 months ago

#58575 closed enhancement (fixed)

Block Supports: Add support for link hover colors to individual blocks.

Reported by: youknowriad's profile youknowriad Owned by: isabel_brison's profile isabel_brison
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch gutenberg-merge
Focuses: Cc:

Description

Themes can already define colors for link hover state in theme.json and global styles. That said, this is not supported yet for individual blocks.

In order to do so, we first need to update the block support style generation code before adding it to the frontend/UI of blocks.

Change History (9)

This ticket was mentioned in PR #4643 on WordPress/wordpress-develop by @youknowriad.


11 months ago
#1

  • Keywords has-patch added

This back ports the php changes from the following Gutenberg PR: https://github.com/WordPress/gutenberg/pull/48893

Trac ticket: https://core.trac.wordpress.org/ticket/58575

It basically adds style generation for link hover color to the elements block support and adds a few default values to the core theme.json files.

#2 @kebbet
11 months ago

  • Keywords gutenberg-merge added

@youknowriad commented on PR #4643:


11 months ago
#3

Does this need to support the other link pseudo classes?

Potentially later, but for now, this just brings parity with what we offer in the Global Styles UI to the block UI.

@peterwilsoncc commented on PR #4643:


11 months ago
#4

this just brings parity with what we offer in the Global Styles UI to the block UI.

Thanks, I figured as much but I'd sure feel silly if I didn't ask ;)

As an accessibility thing, it might be worth aliasing :hover to :focus for keyboard and assistive technology users to ensure they get visual feedback too.

If :focus styles are covered in another way then you can consider the PR approved (cc @tellthemachines for timezone reasons).

@youknowriad commented on PR #4643:


11 months ago
#5

As an accessibility thing, it might be worth aliasing :hover to :focus for keyboard and assistive technology users to ensure they get visual feedback too.
If :focus styles are covered in another way then you can consider the PR approved (cc @tellthemachines for timezone reasons).

It's a great idea to nudge people to have the right accessibility guidelines applies to their themes and content but I don't think that WordPress should be making this decision for theme authors or users just like we don't do it for font sizes or things like that. We should try to show hints like we do for color contrast and headings though, that would be a great addition.

That said, this is out of scope of this PR and I'd suggest that you open . This is merely a back port of a small change in Gutenberg to fix an inconsistency we had between the UI in global styles and the UI in the blocks. That capability to style hover colors for buttons has been on Core for some releases now.

@isabel_brison commented on PR #4643:


11 months ago
#6

If :focus styles are covered in another way

I would consider :focus covered by default browser styles unless the theme is actively unsetting them (which we can't really avoid because themes can add a stylesheet with whatever styles they like in it). We don't have any way of unsetting focus styles in the UI, so users can't accidentally make their site keyboard inaccessible.

#7 @isabel_brison
11 months ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from assigned to closed

In 56028:

Editor: add support for block-level link hover colors.

Adds the ability to set link hover colors for individual blocks from the block inspector color panel.

Props @youknowriad, @peterwilsoncc, @kebbet.
Fixes #58575.

@isabel_brison commented on PR #4643:


11 months ago
#8

Committed in r56028 / f571f45.

#9 @sabernhardt
10 months ago

  • Milestone changed from 6.4 to 6.3
Note: See TracTickets for help on using tickets.