Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52257 closed defect (bug) (fixed)

Twenty Twenty-One: Transparent png logo isn’t visible on focus

Reported by: bduclos's profile bduclos Owned by: antpb's profile antpb
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description

When you set a transparent png as the logo, the logo isn’t visible when the logo link is focused because a background color (white or black) appears.

https://i.imgur.com/FUDdqin.png

Attachments (5)

52257.patch (6.9 KB) - added by poena 3 years ago.
Remove background color when the custom logo link is in focus.
Transparent-logo-2021.gif (77.6 KB) - added by paaljoachim 3 years ago.
No extra background color after applying patch.
52257.1.diff (2.5 KB) - added by sabernhardt 3 years ago.
simplifying .custom-logo-link styles
52257.2.diff (3.6 KB) - added by sabernhardt 3 years ago.
setting only the text color for .meta-nav elements within links (plus the .custom-logo-link change)
52257.diff (9.4 KB) - added by ryelle 3 years ago.

Download all attachments as: .zip

Change History (23)

#1 @mukesh27
3 years ago

  • Component changed from Themes to Bundled Theme

@poena
3 years ago

Remove background color when the custom logo link is in focus.

#2 @poena
3 years ago

  • Focuses css added
  • Keywords has-patch needs-testing added
  • Milestone changed from Awaiting Review to 5.7
  • Version set to 5.6

This patch removes custom-logo-link styles from sass/06-components/header.scss.
(This also makes sense because the logo is available both in the site header and site footer.)

It adds background:none to the custom-logo-link when it is focused, both in the default color scheme and in dark mode.

I am not happy with the duplication in assets\sass\style-dark-mode.scss
where the focus style is added both to regular links and .meta-nav, this could be improved.

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
	background: #000;
	color: #fff;
	text-decoration: none;

	&.custom-logo-link {
		&:focus {
			background: none;
		}
	}
}

#3 @paaljoachim
3 years ago

Testing with a local site using Twenty Twenty One.
Made a transparent logo.
Uploaded it to the customizer.
On frontend: went to another page clicked the logo and noticed a white bar similar to what is reported.

Testing patch:

npm run grunt patch:52257

http://localhost:8889/

The patch works fine. I see no additional background white color show up.

@paaljoachim
3 years ago

No extra background color after applying patch.

This ticket was mentioned in Slack in #core by paaljoachim. View the logs.


3 years ago

#5 @hellofromTonya
3 years ago

  • Keywords commit added; needs-testing removed

In talking with @poena, this patch is ready for commit for 5.7 Beta 1. The duplication points can be addressed during the beta cycle.

This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.


3 years ago

#7 @antpb
3 years ago

  • Owner set to antpb
  • Resolution set to fixed
  • Status changed from new to closed

In 50154:

Twenty Twenty-One: Make transparent PNG logo visible on focus.

This ensures a transparent logo remains visible while focused.

Props bduclos, poena, paaljoachim, hellofromTonya.
Fixes #52257.

#8 @SergeyBiryukov
3 years ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to address the duplication concern from comment:2.

#9 @lukecarbis
3 years ago

@poena Is this something that you're likely able to address in the next week before RC1 is scheduled for release?

#10 @poena
3 years ago

I'd need input from someone who is awesome at CSS :)

This ticket was mentioned in Slack in #core-css by paaljoachim. View the logs.


3 years ago

@sabernhardt
3 years ago

simplifying .custom-logo-link styles

@sabernhardt
3 years ago

setting only the text color for .meta-nav elements within links (plus the .custom-logo-link change)

#12 @sabernhardt
3 years ago

@poena Is one of these options like how you wanted to simplify the focus styles?

52257.1.diff removes the .meta-nav.custom-logo-link style and the second :focus pseudo-class on the logo link.

	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link

52257.2.diff also sets the .meta-nav text color only, without the background and text-decoration styles given to the link elements. The white color needs to override the post navigation links' color var(--wp--style--color--link, var(--global--color-background)).

	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
		color: #fff;
	}

#13 @poena
3 years ago

  • Keywords commit added

Bot updates work, I think 52257.2.diff is easier to read.

@ryelle
3 years ago

#14 @ryelle
3 years ago

I have another cleanup suggestion — 52257.diff moves the dark mode overrides out of style-dark-mode.scss and merges them with the dark mode styles in links.scss.

This removes the dark mode's .custom-logo-link override, because it's not necessary anymore - the dark mode focus style specificity is lower now, so it's not overriding the default background:none;.

I also replaced var(--global--color-background) with var(--global--color-white) in the dark mode meta-nav link styles, since this was just being overridden with white later.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

#16 @SergeyBiryukov
3 years ago

  • Summary changed from Twenty Twenty-One:Transparent png logo isn’t visible on focus to Twenty Twenty-One: Transparent png logo isn’t visible on focus

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

#18 @adamsilverstein
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 50423:

Twenty Twenty-One: Improve transparent PNG logo visible on focus.

This ensures a transparent logo remains visible while focused. Also cleans up dark mode CSS, consolidating styles and removing overrides that are no longer needed.

Follow up to [50154].

Props poena, sabernhardt, ryelle.
Fixes #52257.

Note: See TracTickets for help on using tickets.