WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 3 weeks ago

#52623 assigned enhancement

Proposal: Add CSS variable for admin-bar height to core.

Reported by: nico23 Owned by: ryelle
Milestone: 5.8 Priority: normal
Severity: minor Version: 5.7
Component: Themes Keywords: has-patch
Focuses: ui, css Cc:

Description

I saw this is the 2021 theme. Thought it a great use of a CSS variable. Found out it did not work as expected and fixed it in: #52564

Could file this under Plugins/Themes/Toolbar not sure.

I initially thought it was already from core as I stumbled upon it in the devtools. I think it would be great for all plugin and theme developers to establish a variable in core we can use.

The patch I will be adding through GitHub will just add the variables in the admin-bar.css file. However, this will require the use of a , 0px like default when using the variable for CSS to work when the admin bar is not active.

.example-fixed-element {
	position: fixed;
	top: calc(.5rem + var(--wp-admin-bar-height, 0px));
}

It could be made universally usable without a default fallback value with

:root {
   --wp-admin-bar-height: 0px;
}

But because the admin-bar.css only loads when logged in it would make no sense to add it in that file.

Also in theory the variable could actually be used for the admin bar.css. Not sure it that makes sense, there is much more happening than just increasing the height in the media query. In theory the negation of the value and calculating other values in the file could be based on this variable.

There are 7 occurrences of the 32px/64px in the file. And it seems some other values would have to change with it. If it was a changeable value. The value could be like a base to dynamically control all elements sizes in the navbar.

I also do not know if WP has some aggressive backwards combat rules. CSS vars are supported by 95% of used browsers according to can-i-use https://caniuse.com/?search=variables.

Change History (10)

This ticket was mentioned in PR #1038 on WordPress/wordpress-develop by nextgenthemes.


2 months ago

  • Keywords has-patch added

This adds a variable for the admin-bar height as seen in the 2021 theme but in core for all plugins and themes to utilize.

Trac ticket: https://core.trac.wordpress.org/ticket/52623#ticket

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


8 weeks ago

#3 @ryelle
8 weeks ago

  • Milestone changed from Awaiting Review to 5.8
  • Owner set to ryelle
  • Status changed from new to assigned

Thanks for kicking this off with your PR @nico23!

There's some ongoing custom property discussion regarding colors, but I think this would be a good, self-contained use case to get support for custom properties into core.

We do support IE11, so in addition to adding the variable, we'll want to add a PostCSS plugin for fallbacks. There are two I know of, and both have drawbacks.

  • postcss-custom-properties is one option, but it doesn't support properties that are updated in media queries.
  • postcss-css-variables is another - this one does support media queries, but it also has a bug where it generates duplicate styles, so we'd need to also add postcss-discard-duplicates. This is the approach that was used in Twenty Twenty-One.
  • Another suggestion?

It's possible we'll drop support for IE11 (see #49696), but the timeline there is up in the air, so it's best to proceed assuming we need to support it.

Last edited 8 weeks ago by ryelle (previous) (diff)

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


7 weeks ago

#5 @desrosj
4 weeks ago

In 50602:

Build/Test Tools: Backport GitHub Action and build improvements to the 5.6 branch.

This backports several build and test tool improvements to the 5.6 branch. Most notably, this includes:

  • The changes required to allow each workflow to be triggered by the workflow_dispatch event so that tests can be run on a schedule [50590].
  • The ability to run PHPUnit tests from src instead of build [50441-50443].
  • Splitting single site and multisite tests into parallel jobs [50379].
  • Split slow tests into separate, parallel jobs for PHP 5.6 [50444].
  • Better branch and path scoping for GitHub Action workflows when running on pull_request [50432,50479].
  • Several devDependency updates.

Merges [50267,50299,50379,50387,50413,50416,50432,50435-50436,50441-50444,50446,50473-50474,50476,50479,50485-50487,50545,50579,50590,50592,50598] to the 5.6 branch.
See #50401, #51734, #51801, #51802, #52548, #52608, #52612, #52623, #52624, #52625, #52645, #52653, #52658, #52660, #52667, #52786.

#6 @desrosj
4 weeks ago

In 50603:

Build/Test Tools: Backport GitHub Action and build improvements to the 5.5 branch.

This backports several build and test tool improvements to the 5.5 branch. Most notably, this includes:

  • The changes required to allow each workflow to be triggered by the workflow_dispatch event so that tests can be run on a schedule [50590].
  • The ability to run PHPUnit tests from src instead of build [50441-50443].
  • Splitting single site and multisite tests into parallel jobs [50379].
  • Split slow tests into separate, parallel jobs for PHP 5.6 [50444].
  • Better branch and path scoping for GitHub Action workflows when running on pull_request [50432,50479].
  • Several devDependency updates.

Merges [50267,50299,50379,50387,50413,50416,50432,50435-50436,50441-50444,50446,50473-50474,50476,50479,50485-50487,50545,50579,50590,50592,50598] to the 5.5 branch.
See #50401, #51734, #51801, #51802, #52548, #52608, #52612, #52623, #52624, #52625, #52645, #52653, #52658, #52660, #52667, #52786.

#7 @desrosj
4 weeks ago

In 50604:

Build/Test Tools: Backport GitHub Action and build improvements to the 5.4 branch.

This backports several build and test tool improvements to the 5.4 branch. Most notably, this includes:

  • The changes required to allow each workflow to be triggered by the workflow_dispatch event so that tests can be run on a schedule [50590].
  • The ability to run PHPUnit tests from src instead of build [50441-50443].
  • Splitting single site and multisite tests into parallel jobs [50379].
  • Split slow tests into separate, parallel jobs for PHP 5.6 [50444].
  • Better branch and path scoping for GitHub Action workflows when running on pull_request [50432,50479].
  • Several devDependency updates.

Merges [50267,50299,50379,50387,50413,50416,50432,50435-50436,50441-50444,50446,50473-50474,50476,50479,50485-50487,50545,50579,50590,50598] to the 5.4 branch.
See #50401, #51734, #51801, #51802, #52548, #52608, #52612, #52623, #52624, #52625, #52645, #52653, #52658, #52660, #52667.

#8 @desrosj
4 weeks ago

In 50605:

Build/Test Tools: Backport GitHub Action and build improvements to the 5.3 branch.

This backports several build and test tool improvements to the 5.3 branch. Most notably, this includes:

  • The changes required to allow each workflow to be triggered by the workflow_dispatch event so that tests can be run on a schedule [50590].
  • The ability to run PHPUnit tests from src instead of build [50441-50443].
  • Splitting single site and multisite tests into parallel jobs [50379].
  • Split slow tests into separate, parallel jobs for PHP 5.6 [50444].
  • Better branch and path scoping for GitHub Action workflows when running on pull_request [50432,50479].
  • Several devDependency updates.

Merges [50267,50299,50379,50387,50413,50416,50432,50435-50436,50441-50444,50446,50473-50474,50476,50479,50485-50487,50545,50579,50590,50598] to the 5.3 branch.
See #50401, #51734, #51801, #51802, #52548, #52608, #52612, #52623, #52624, #52625, #52645, #52653, #52658, #52660, #52667.

#9 @desrosj
4 weeks ago

In 50606:

Build/Test Tools: Backport GitHub Action and build improvements to the 5.2 branch.

This backports several build and test tool improvements to the 5.2 branch. Most notably, this includes:

  • The changes required to allow each workflow to be triggered by the workflow_dispatch event so that tests can be run on a schedule [50590].
  • The ability to run PHPUnit tests from src instead of build [50441-50443].
  • Splitting single site and multisite tests into parallel jobs [50379].
  • Split slow tests into separate, parallel jobs for PHP 5.6 [50444].
  • Better branch and path scoping for GitHub Action workflows when running on pull_request [50432,50479].
  • Several devDependency updates.

Merges [50267,50299,50379,50387,50413,50416,50432,50435-50436,50441-50444,50446,50473-50474,50476,50479,50485-50487,50545,50579,50590,50598] to the 5.2 branch.
See #50401, #51734, #51801, #51802, #52548, #52608, #52612, #52623, #52624, #52625, #52645, #52653, #52658, #52660, #52667.

#10 @desrosj
3 weeks ago

Sorry for the noise above, I just realized I had the wrong ticket number in those commits. Those changesets are not related to this ticket.

Note: See TracTickets for help on using tickets.