Implement customizable transition animation duration setting#2321
Implement customizable transition animation duration setting#2321sarthak-19 wants to merge 9 commits intoWordPress:trunkfrom
Conversation
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## trunk #2321 +/- ##
==========================================
+ Coverage 69.17% 69.30% +0.12%
==========================================
Files 90 90
Lines 7708 7763 +55
==========================================
+ Hits 5332 5380 +48
- Misses 2376 2383 +7
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
westonruter
added
the
[Plugin] View Transitions
westonruter
added
the
[Type] Enhancement
|
Comment from @sarthak-19 in Slack:
|
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @sarthak.jaiswal@rtCamp.com. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
This comment was marked as resolved.
This comment was marked as resolved.
|
Another polishing idea: there could be validation added to the input fields for the CSS selectors. Maybe this would be as simple as a |
|
@westonruter I'm not able to figure out why unit test is failing for PHP 8.3+. Running as single site... To run multisite, use -c tests/phpunit/multisite.xml
Not running ajax tests. To execute these, use --group ajax.
Not running ms-files tests. To execute these, use --group ms-files.
Not running external-http tests. To execute these, use --group external-http.
PHPUnit 8.5.42 by Sebastian Bergmann and contributors.
Runtime: PHP 8.3.30
Time: 798 ms, Memory: 42.50 MB
OK (18 tests, 39 assertions)
✔ Ran `composer test:view-transitions` in 'tests-cli'. (in 2s 284ms)Any ideas ? |
|
@sarthak-19 Ah, it's because view transitions were added to the admin already in However, given that this has landed in the admin, I'm not sure we should actually add a setting for that part since it has already shipped, essentially. |
| try { | ||
| document.querySelector( selector ); | ||
| return { valid: true }; | ||
| } catch ( error ) { | ||
| return { | ||
| valid: false, | ||
| message: 'Invalid CSS selector: ' + error.message, | ||
| }; | ||
| } |
There was a problem hiding this comment.
Gemini pointed out to me that there is a newish better way to do this via CSS.supports:
| try { | |
| document.querySelector( selector ); | |
| return { valid: true }; | |
| } catch ( error ) { | |
| return { | |
| valid: false, | |
| message: 'Invalid CSS selector: ' + error.message, | |
| }; | |
| } | |
| return CSS.supports( `selector(${selector})` ); |
It is supported by all browsers that WP supports: https://caniuse.com/css-supports-api
This being the case, we can change this to just return a boolean.
| * Validates a CSS selector by attempting to use it with document.querySelector. | ||
| * | ||
| * @param {string} selector The CSS selector to validate. | ||
| * @return {Object} Object with 'valid' boolean and optional 'message' string. |
There was a problem hiding this comment.
| * @return {Object} Object with 'valid' boolean and optional 'message' string. | |
| * @return {boolean} Whether the selector is valid. |
| existingError.remove(); | ||
| } | ||
| } else { | ||
| input.setCustomValidity( result.message ); |
There was a problem hiding this comment.
| input.setCustomValidity( result.message ); | |
| input.setCustomValidity( 'Invalid selector' ); // TODO: translate me! |
But… the message will need to be translated.
| ?> | ||
| <style> | ||
| @view-transition { navigation: auto; } | ||
| ::view-transition-group(*) { --plvt-view-transition-animation-duration: <?php echo (int) $duration; ?>ms; } |
There was a problem hiding this comment.
| ::view-transition-group(*) { --plvt-view-transition-animation-duration: <?php echo (int) $duration; ?>ms; } | |
| ::view-transition-group(*) { --plvt-view-transition-animation-duration: <?php echo absint( $options['default_transition_animation_duration'] ); ?>ms; } |
Let's remove $duration = absint( $options['default_transition_animation_duration'] ); with suggested change we can remove the int casting.
4 participants
Part of a polishing issue : #2317
Summary
This PR implements the transition animation duration setting that was previously added to the UI but wasn't functional. The duration setting now properly affects view transitions on both the frontend and WordPress admin area.