Use --wp-admin--admin-bar--height variable in css

[tdrayson]

We have the css variable --wp-admin--admin-bar--height set and available, however the common.css file still uses a hard coded 32px value.

html.wp-toolbar {
	padding-top: 32px;
	box-sizing: border-box;
	-ms-overflow-style: scrollbar; /* See ticket #48545 */
}

Resolves - https://core.trac.wordpress.org/ticket/61898

[mukesh27]

Thanks for the ticket and PR!

The changes looks good as it will not affect anything as we just replace hardcoded to CSS var.

Moving to milestone for visibility and commit.

@SergeyBiryukov could you please take a look when you have moment?

This may need to be looked into further as there are other areas that use the hardcoded value for the admin bar height. For example the ​media query sets it to 46px hardcoded

I think there are other places that the hardcoded value is use too. The ​css variable has the media query value set for small breakpoints.

There is also the common-rtl.css that I know needs updating, and probably some other files that use the hardcoded value.

(wasn't sure how to leave a comment on the Trac ticket, sorry if this isn't the best place to leave)

This may need to be looked into further as there are other areas that use the hardcoded value for the admin bar height. For example the ​media query sets it to 46px hardcoded

I think there are other places that the hardcoded value is use too. The ​css variable has the media query value set for small breakpoints.

There is also the common-rtl.css that I know needs updating, and probably some other files that use the hardcoded value.

(wasn't sure how to leave a comment on the Trac ticket, sorry if this isn't the best place to leave)

[SergeyBiryukov]

In 58929:

Toolbar: Use CSS variable for the admin bar height in wp-admin/css/common.css.

Follow-up to [16600], [21025], [26072].

Props tdrayson, niravsherasiya7707, mukesh27.
See #61898.

[SergeyBiryukov]

Keeping the ticket open for now to see if there are any other instances to update, as per comment:3.

• Replaces hardcoded values with --wp-admin--admin-bar--height, including the media toolbar and admin skip links.
• Adds a consistent fallback for the variable in case it is undefined (if the core stylesheet is replaced).
• Removes the -ms-overflow-style rule because these changes would break the toolbar in Internet Explorer anyway.
• Adjusts the skip link position in the block editor at the 782px breakpoint so it is not hidden by overflow-y: auto at viewport widths between 600 and 782 pixels (​GB28959).

Trac 61898

[sabernhardt]

#54032 requested a similar change, mainly for the front-end bump, and I did not want to break the front end in old browsers then. I still think the front end needs a separate decision, and maybe later (though it has been two years already).

Fallback value

An undefined --wp-admin--admin-bar--height variable should be rare, but sites technically can deregister the core 'admin-bar' stylesheet and replace it. Most of the directory's ​plugins that deregister the stylesheet remove it without replacing the styles.

I do not have a preference between 32px or 46px, but I think the fallback should be consistent everywhere the property is used. PR 7358 has 32px because I already chose that in patches for #41155 and #54032.

Editor skip link

A fix for the mostly hidden skip links might belong in the Gutenberg styles instead, but I added the adjustment in common.css.

[jorbin]

Unfortunately, this is just missing the deadline for 6.7 Beta 1 so I'm optimistically milestoning it for 6.8.

[dilip2615]

according to my thoughts we can use and implement using bellow code

html.wp-toolbar
{

padding-top: var(--wp-admin--admin-bar--height, 32px);
box-sizing: border-box;
-ms-overflow-style: scrollbar;

}

[emmanuelkuebu]

Replying to dilip2615:

according to my thoughts we can use and implement using bellow code

html.wp-toolbar
{

padding-top: var(--wp-admin--admin-bar--height, 32px);
box-sizing: border-box;
-ms-overflow-style: scrollbar;

}

I believe the --wp-admin--admin-bar--height variable is set exclusively when a logged-in user with admin bar access is viewing the page. Therefore, implementing a fallback value would create an unnecessary gap above the header for users who are logged out or lack admin bar privileges.

[sabernhardt]

This ticket should only edit values within the admin, where everyone would be logged in and have the toolbar. Adding the common or admin-menu stylesheets on the front end could break the page in other ways.

However, plugins can add an editor on the front end, which could include the media dialog and media.css. I did not find the fixed class on the .attachments-browser element in WPBakery's front-end editor, but that had the dialog and stylesheet. Another plugin might be affected by the current PR, so maybe I should undo the changes to media.css.

[audrasjb]

As this one already has a commit, I'm closing it as fixed. Please open new tickets for follow-up changes!