-
Notifications
You must be signed in to change notification settings - Fork 112
Scaffold View Transitions feature plugin #1998
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
felixarntz
merged 2 commits into
trunk
from
add/scaffold-view-transitions-plugin-basics
Apr 30, 2025
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<?php | ||
/** | ||
* Hook callbacks used for View Transitions. | ||
* | ||
* @package view-transitions | ||
* @since 1.0.0 | ||
*/ | ||
|
||
// @codeCoverageIgnoreStart | ||
if ( ! defined( 'ABSPATH' ) ) { | ||
exit; // Exit if accessed directly. | ||
} | ||
// @codeCoverageIgnoreEnd | ||
|
||
/** | ||
* Displays the HTML generator tag for the plugin. | ||
* | ||
* See {@see 'wp_head'}. | ||
* | ||
* @since 1.0.0 | ||
*/ | ||
function plvt_render_generator(): void { | ||
// Use the plugin slug as it is immutable. | ||
echo '<meta name="generator" content="view-transitions ' . esc_attr( VIEW_TRANSITIONS_VERSION ) . '">' . "\n"; | ||
} | ||
add_action( 'wp_head', 'plvt_render_generator' ); | ||
|
||
/** | ||
* Filters related to the View Transitions functionality. | ||
*/ | ||
add_action( 'after_setup_theme', 'plvt_polyfill_theme_support', PHP_INT_MAX ); | ||
add_action( 'wp_enqueue_scripts', 'plvt_load_view_transitions' ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
<?php | ||
/** | ||
* Theme related functions for View Transitions. | ||
* | ||
* @package view-transitions | ||
* @since 1.0.0 | ||
*/ | ||
|
||
/** | ||
* Polyfills theme support for 'view-transitions', regardless of the theme. | ||
* | ||
* In WordPress Core, the 'view-transitions' feature may end up as an optional feature, or it may be added by default. | ||
* In any case, in the scope of the plugin it does not make sense to have the feature as opt-in, since it is the entire | ||
* purpose of the plugin. | ||
* | ||
* Therefore, this function will unconditionally add support with the default configuration, unless the theme itself | ||
* actually added support for it already. | ||
* | ||
* This function must run at the latest possible priority for `after_setup_theme`. | ||
* | ||
* @since 1.0.0 | ||
*/ | ||
function plvt_polyfill_theme_support(): void { | ||
if ( current_theme_supports( 'view-transitions' ) ) { | ||
return; | ||
} | ||
add_theme_support( 'view-transitions' ); | ||
} | ||
|
||
/** | ||
* Loads view transitions based on the current configuration. | ||
* | ||
* @since 1.0.0 | ||
*/ | ||
function plvt_load_view_transitions(): void { | ||
if ( ! current_theme_supports( 'view-transitions' ) ) { | ||
return; | ||
} | ||
|
||
// Use an inline style to avoid an extra request. | ||
$stylesheet = '@view-transition { navigation: auto; }'; | ||
wp_register_style( 'wp-view-transitions', false, array(), null ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion | ||
wp_add_inline_style( 'wp-view-transitions', $stylesheet ); | ||
wp_enqueue_style( 'wp-view-transitions' ); | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<?xml version="1.0"?> | ||
<ruleset name="WPP-ViewTransitions"> | ||
<description>WordPress Coding Standards for View Transitions Plugin</description> | ||
|
||
<rule ref="../../tools/phpcs/phpcs.ruleset.xml"/> | ||
|
||
<config name="text_domain" value="view-transitions"/> | ||
|
||
<file>.</file> | ||
</ruleset> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
=== View Transitions === | ||
|
||
Contributors: wordpressdotorg | ||
Tested up to: 6.8 | ||
Stable tag: 1.4.0 | ||
License: GPLv2 or later | ||
License URI: https://www.gnu.org/licenses/gpl-2.0.html | ||
Tags: performance, view transitions, smooth transitions, animations | ||
|
||
Adds smooth transitions between navigations to your WordPress site. | ||
|
||
== Description == | ||
|
||
This plugin implements support for [cross-document view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/cross-document) in WordPress. This effectively replaces the hard transitions when navigating from one URL to the other with a smooth animation, by default using a fade effect. | ||
|
||
= Browser support = | ||
|
||
Cross-document view transitions are supported in a variety of browsers, including Chrome, Edge, and Safari. Users with browsers that currently do not support it should not see any adverse effects when the plugin is active. They will simply not benefit from the feature and continue to experience the traditional hard transitions between URLs. | ||
|
||
[Please refer to "Can I use..." for a comprehensive overview of browser support for the feature.](https://caniuse.com/mdn-css_at-rules_view-transition) | ||
|
||
== Installation == | ||
|
||
= Installation from within WordPress = | ||
|
||
1. Visit **Plugins > Add New**. | ||
2. Search for **View Transitions**. | ||
3. Install and activate the **View Transitions** plugin. | ||
|
||
= Manual installation = | ||
|
||
1. Upload the entire plugin folder to the `/wp-content/plugins/` directory. | ||
2. Visit **Plugins**. | ||
3. Activate the **View Transitions** plugin. | ||
|
||
== Frequently Asked Questions == | ||
|
||
= Where can I submit my plugin feedback? = | ||
|
||
Feedback is encouraged and much appreciated, especially since this plugin may contain future WordPress core features. If you have suggestions or requests for new features, you can [submit them as an issue in the WordPress Performance Team's GitHub repository](https://github.com/WordPress/performance/issues/new/choose). If you need help with troubleshooting or have a question about the plugin, please [create a new topic on our support forum](https://wordpress.org/support/plugin/view-transitions/#new-topic-0). | ||
|
||
= Where can I report security bugs? = | ||
|
||
The Performance team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions. | ||
|
||
To report a security issue, please visit the [WordPress HackerOne](https://hackerone.com/wordpress) program. | ||
|
||
= How can I contribute to the plugin? = | ||
|
||
Contributions are always welcome! Learn more about how to get involved in the [Core Performance Team Handbook](https://make.wordpress.org/performance/handbook/get-involved/). | ||
|
||
== Changelog == | ||
|
||
= 1.0.0 = | ||
|
||
* Initial release. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
<?php | ||
/** | ||
* Tests for the View Transitions plugin hooks.php file. | ||
* | ||
* @package view-transitions | ||
* @group view-transitions | ||
*/ | ||
|
||
class Test_ViewTransitions_Hooks extends WP_UnitTestCase { | ||
|
||
public function test_hooks(): void { | ||
$this->assertSame( 10, has_action( 'wp_head', 'plvt_render_generator' ) ); | ||
$this->assertSame( PHP_INT_MAX, has_action( 'after_setup_theme', 'plvt_polyfill_theme_support' ) ); | ||
$this->assertSame( 10, has_action( 'wp_enqueue_scripts', 'plvt_load_view_transitions' ) ); | ||
} | ||
|
||
public function test_plvt_render_generator(): void { | ||
$expected = '<meta name="generator" content="view-transitions ' . VIEW_TRANSITIONS_VERSION . '">' . "\n"; | ||
$output = get_echo( 'plvt_render_generator' ); | ||
$this->assertSame( $expected, $output ); | ||
} | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<?php | ||
/** | ||
* Tests for the View Transitions plugin includes/theme.php file. | ||
* | ||
* @package view-transitions | ||
* @group view-transitions | ||
*/ | ||
|
||
class Test_ViewTransitions_Theme extends WP_UnitTestCase { | ||
|
||
public function test_plvt_polyfill_theme_support(): void { | ||
// Test polyfill without support registered. | ||
remove_theme_support( 'view-transitions' ); | ||
plvt_polyfill_theme_support(); | ||
$this->assertTrue( current_theme_supports( 'view-transitions' ) ); | ||
$this->assertTrue( get_theme_support( 'view-transitions' ) ); | ||
|
||
// Test polyfill does not override theme support arguments if already provided by the actual theme. | ||
add_theme_support( 'view-transitions', array( 'custom_key' => 'custom_value' ) ); | ||
plvt_polyfill_theme_support(); | ||
$this->assertTrue( current_theme_supports( 'view-transitions' ) ); | ||
$this->assertSame( array( array( 'custom_key' => 'custom_value' ) ), get_theme_support( 'view-transitions' ) ); | ||
} | ||
|
||
public function test_plvt_load_view_transitions(): void { | ||
// Clear up style if it is already registered. | ||
if ( wp_style_is( 'wp-view-transitions', 'registered' ) ) { | ||
unset( wp_styles()->registered['wp-view-transitions'] ); | ||
} | ||
|
||
// Test that without theme support this does nothing. | ||
remove_theme_support( 'view-transitions' ); | ||
plvt_load_view_transitions(); | ||
$this->assertFalse( wp_style_is( 'wp-view-transitions', 'registered' ) ); | ||
$this->assertFalse( wp_style_is( 'wp-view-transitions', 'enqueued' ) ); | ||
|
||
// Test that with theme support it registers and enqueues the style. | ||
add_theme_support( 'view-transitions' ); | ||
plvt_load_view_transitions(); | ||
$this->assertTrue( wp_style_is( 'wp-view-transitions', 'registered' ) ); | ||
$this->assertTrue( wp_style_is( 'wp-view-transitions', 'enqueued' ) ); | ||
} | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<?php | ||
/** | ||
* Plugin Name: View Transitions | ||
* Plugin URI: https://github.com/WordPress/performance/tree/trunk/plugins/view-transitions | ||
* Description: Adds smooth transitions between navigations to your WordPress site. | ||
* Requires at least: 6.6 | ||
* Requires PHP: 7.2 | ||
* Version: 1.0.0 | ||
* Author: WordPress Performance Team | ||
* Author URI: https://make.wordpress.org/performance/ | ||
* License: GPLv2 or later | ||
* License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html | ||
* Text Domain: view-transitions | ||
* | ||
* @package view-transitions | ||
*/ | ||
|
||
// @codeCoverageIgnoreStart | ||
if ( ! defined( 'ABSPATH' ) ) { | ||
exit; // Exit if accessed directly. | ||
} | ||
|
||
// Define the constant. | ||
if ( defined( 'VIEW_TRANSITIONS_VERSION' ) ) { | ||
return; | ||
} | ||
|
||
define( 'VIEW_TRANSITIONS_VERSION', '1.0.0' ); | ||
|
||
require_once __DIR__ . '/includes/theme.php'; | ||
require_once __DIR__ . '/hooks.php'; | ||
// @codeCoverageIgnoreEnd |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be
1.0.0
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @mukeshpanchal27, I'll fix this as part of #1999.