Add view transitions in WP Admin #10699
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
| * @return string The CSS. | ||
| */ | ||
| function wp_get_view_transitions_admin_css(): string { | ||
| $css = <<<CSS |
There was a problem hiding this comment.
Better to use nowdoc.
| $css = <<<CSS | |
| $css = <<<'CSS' |
There was a problem hiding this comment.
Just curious: Why is it better? For transparency, I have absolutely zero background knowledge about this syntax.
There was a problem hiding this comment.
Heredocs do variable interpolation and are disallowed by Plugin Check. Nowdocs do no interpolation. Since there are no variables being interpolated, nowdoc is better.
| $css = <<<CSS | ||
| @view-transition { navigation: auto; } | ||
| #adminmenu > .menu-top { view-transition-name: attr(id type(<custom-ident>), none); } | ||
| CSS; |
There was a problem hiding this comment.
With the bump to PHP 7.4 happening momentarily, we'll be able to do this:
| CSS; | |
| CSS; |
There was a problem hiding this comment.
Fair, though I wouldn't want to block this based on that. If it so happens that the PHP 7.4 bump is made before this is ready, I think we can adjust, but otherwise I don't think it's that important.
There was a problem hiding this comment.
It just bugs me in PHP how the trailing boundary hasn't been able to have the same indent 😄
| * @return string The CSS. | ||
| */ | ||
| function wp_get_view_transitions_admin_css(): string { | ||
| $css = <<<CSS |
There was a problem hiding this comment.
Would it be better to have this CSS in a file and then load it? See what is being merged soon in #10676
This would enable CSS linting as well as minification.
There was a problem hiding this comment.
Great point! Will update to move this to a CSS file. Just would want to make sure that that file never gets loaded as its own HTTP request since that would be somewhat pointless with its 2 lines or so :)
There was a problem hiding this comment.
I started working on this locally, but I think because this is "very" modern CSS, I think Core's linters don't like it because they're probably outdated.
I'm not familiar with that tooling, so I'm unsure whether we can simply update it or whether that would introduce a new set of problems to address. Do you have any insights on this?
Specifically, it's complaining about the <custom-ident> bit: ") expected" 🤔
There was a problem hiding this comment.
Yeah, CSS validation in the Customizer and Site Editor are outdated I know. See Core-64418. With the CSS linter, can it be suppressed with a comment? Which tool is failing? Maybe we can update the dependency.
There was a problem hiding this comment.
Humm, I tried adding a src/wp-admin/css/view-transitions.css file containing:
@view-transition {
navigation: auto;
}
#adminmenu > .menu-top {
view-transition-name: attr( id type(<custom-ident>), none );
}Then I ran npm run build:dev and it successfully emitted a src/wp-admin/css/view-transitions.min.css containing:
/*! This file is auto-generated */
@view-transition{navigation:auto}#adminmenu>.menu-top{view-transition-name:attr(id type(<custom-ident>),none)}So it seems to be working fine.
2 participants
wp-view-transitions-adminwith inline CSS for basic view transitions in WP Admin, including smooth transitions between admin menu items.admin_enqueue_scriptsby default.view-transitions.phpfile rather than the genericscript-loader.phpfile.Trac ticket: https://core.trac.wordpress.org/ticket/64470
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.