Skip to content

Commit e5d1290

Browse files
mukeshpanchal27mukeshpanchal27
authored
Merge pull request #2037 from WordPress/view-transitions/respect-theme-support
Inform the user if the current theme explicitly supports view transitions with its own configuration, and add a UI control to make overriding that configuration via settings optional
2 parents 8856a14 + 469b8f0 commit e5d1290

File tree

2 files changed

+94
-13
lines changed

2 files changed

+94
-13
lines changed

‎plugins/view-transitions/includes/settings.php‎

Lines changed: 84 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,11 @@ function plvt_get_view_transition_animation_labels(): array {
4545
* @since 1.0.0
4646
* @see plvt_sanitize_view_transitions_theme_support()
4747
*
48-
* @return array{ default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
48+
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
4949
* Default setting value.
5050
*
51+
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
52+
* the other frontend specific settings won't be applied.
5153
* @type string $default_transition_animation Default view transition animation.
5254
* @type string $header_selector CSS selector for the global header element.
5355
* @type string $main_selector CSS selector for the global main element.
@@ -59,6 +61,7 @@ function plvt_get_view_transition_animation_labels(): array {
5961
*/
6062
function plvt_get_setting_default(): array {
6163
return array(
64+
'override_theme_config' => false,
6265
'default_transition_animation' => 'fade',
6366
'header_selector' => 'header',
6467
'main_selector' => 'main',
@@ -74,9 +77,11 @@ function plvt_get_setting_default(): array {
7477
*
7578
* @since 1.0.0
7679
*
77-
* @return array{ default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
80+
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
7881
* Stored setting value.
7982
*
83+
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
84+
* the other frontend specific settings won't be applied.
8085
* @type string $default_transition_animation Default view transition animation.
8186
* @type string $header_selector CSS selector for the global header element.
8287
* @type string $main_selector CSS selector for the global main element.
@@ -96,9 +101,11 @@ function plvt_get_stored_setting_value(): array {
96101
* @since 1.0.0
97102
*
98103
* @param mixed $input Setting to sanitize.
99-
* @return array{ default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
104+
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
100105
* Sanitized setting.
101106
*
107+
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
108+
* the other frontend specific settings won't be applied.
102109
* @type string $default_transition_animation Default view transition animation.
103110
* @type string $header_selector CSS selector for the global header element.
104111
* @type string $main_selector CSS selector for the global main element.
@@ -140,9 +147,14 @@ function plvt_sanitize_setting( $input ): array {
140147
}
141148
}
142149

143-
// Sanitize "enable_admin_transitions" as a boolean.
144-
if ( isset( $input['enable_admin_transitions'] ) ) {
145-
$value['enable_admin_transitions'] = (bool) $input['enable_admin_transitions'];
150+
$checkbox_options = array(
151+
'override_theme_config',
152+
'enable_admin_transitions',
153+
);
154+
foreach ( $checkbox_options as $checkbox_option ) {
155+
if ( isset( $input[ $checkbox_option ] ) ) {
156+
$value[ $checkbox_option ] = (bool) $input[ $checkbox_option ];
157+
}
146158
}
147159

148160
return $value;
@@ -188,20 +200,26 @@ function plvt_register_setting(): void {
188200
* @since 1.0.0
189201
* @access private
190202
*
191-
* @global array<string, mixed> $_wp_theme_features Theme support features added and their arguments.
203+
* @global bool|null $plvt_has_theme_support_with_args Whether the current theme explicitly supports view transitions with custom config.
204+
* @global array<string, mixed> $_wp_theme_features Theme support features added and their arguments.
192205
*/
193206
function plvt_apply_settings_to_theme_support(): void {
194-
global $_wp_theme_features;
207+
global $plvt_has_theme_support_with_args, $_wp_theme_features;
195208

196209
// Bail if the feature is disabled.
197210
if ( ! isset( $_wp_theme_features['view-transitions'] ) ) {
198211
return;
199212
}
200213

214+
// Bail if the current theme explicitly supports view transitions and the option to override is turned off.
215+
$options = plvt_get_stored_setting_value();
216+
if ( $plvt_has_theme_support_with_args && ! $options['override_theme_config'] ) {
217+
return;
218+
}
219+
201220
$args = $_wp_theme_features['view-transitions'];
202221

203222
// Apply the settings.
204-
$options = plvt_get_stored_setting_value();
205223
$args['default-animation'] = $options['default_transition_animation'];
206224
$selector_options = array(
207225
'global' => array(
@@ -233,19 +251,33 @@ function plvt_apply_settings_to_theme_support(): void {
233251
*
234252
* @since 1.0.0
235253
* @access private
254+
*
255+
* @global bool|null $plvt_has_theme_support_with_args Whether the current theme explicitly supports view transitions with custom config.
236256
*/
237257
function plvt_add_setting_ui(): void {
258+
global $plvt_has_theme_support_with_args;
259+
238260
add_settings_section(
239261
'plvt_view_transitions',
240262
_x( 'View Transitions', 'Settings section', 'view-transitions' ),
241263
static function (): void {
264+
global $plvt_has_theme_support_with_args;
242265
?>
243266
<p class="description">
244-
<?php esc_html_e( 'This section allows you to control how view transitions are used to enhance the navigation user experience.', 'view-transitions' ); ?>
267+
<?php esc_html_e( 'This section allows you to control view transitions usage on your site to enhance the navigation user experience.', 'view-transitions' ); ?>
245268
<br>
246269
<?php esc_html_e( 'To reset any of the selector text inputs, clear the field and save the changes.', 'view-transitions' ); ?>
247270
</p>
248271
<?php
272+
if ( $plvt_has_theme_support_with_args ) {
273+
wp_admin_notice(
274+
__( 'Your theme already supports view transitions with its own adapted configuration. The settings below will override those.', 'view-transitions' ),
275+
array(
276+
'type' => 'info',
277+
'additional_classes' => array( 'inline' ),
278+
)
279+
);
280+
}
249281
},
250282
'reading',
251283
array(
@@ -254,44 +286,82 @@ static function (): void {
254286
)
255287
);
256288

289+
add_settings_section(
290+
'plvt_admin_view_transitions',
291+
_x( 'Admin View Transitions', 'Settings section', 'view-transitions' ),
292+
static function (): void {
293+
?>
294+
<p class="description">
295+
<?php esc_html_e( 'This section allows you to control view transitions usage in the WordPress admin area.', 'view-transitions' ); ?>
296+
</p>
297+
<?php
298+
},
299+
'reading',
300+
array(
301+
'before_section' => '<div id="admin-view-transitions">',
302+
'after_section' => '</div>',
303+
)
304+
);
305+
257306
$fields = array(
307+
'override_theme_config' => array(
308+
'section' => 'plvt_view_transitions',
309+
'title' => __( 'Override Theme Configuration', 'view-transitions' ),
310+
'description' => __( 'Override the theme provided configuration with the settings below.', 'view-transitions' ),
311+
),
258312
'default_transition_animation' => array(
313+
'section' => 'plvt_view_transitions',
259314
'title' => __( 'Default Transition Animation', 'view-transitions' ),
260315
'description' => __( 'Choose the animation that is used for the default view transition type.', 'view-transitions' ),
261316
),
262317
'header_selector' => array(
318+
'section' => 'plvt_view_transitions',
263319
'title' => __( 'Header Selector', 'view-transitions' ),
264320
'description' => __( 'Provide the CSS selector to detect the global header element.', 'view-transitions' ),
265321
),
266322
'main_selector' => array(
323+
'section' => 'plvt_view_transitions',
267324
'title' => __( 'Main Selector', 'view-transitions' ),
268325
'description' => __( 'Provide the CSS selector to detect the global main element.', 'view-transitions' ),
269326
),
270327
'post_title_selector' => array(
328+
'section' => 'plvt_view_transitions',
271329
'title' => __( 'Post Title Selector', 'view-transitions' ),
272330
'description' => __( 'Provide the CSS selector to detect the post title element.', 'view-transitions' ),
273331
),
274332
'post_thumbnail_selector' => array(
333+
'section' => 'plvt_view_transitions',
275334
'title' => __( 'Post Thumbnail Selector', 'view-transitions' ),
276335
'description' => __( 'Provide the CSS selector to detect the post thumbnail element.', 'view-transitions' ),
277336
),
278337
'post_content_selector' => array(
338+
'section' => 'plvt_view_transitions',
279339
'title' => __( 'Post Content Selector', 'view-transitions' ),
280340
'description' => __( 'Provide the CSS selector to detect the post content element.', 'view-transitions' ),
281341
),
282342
'enable_admin_transitions' => array(
343+
'section' => 'plvt_admin_view_transitions',
283344
'title' => __( 'WP Admin', 'view-transitions' ),
284345
'description' => __( 'Enable view transitions in the WordPress admin area.', 'view-transitions' ),
285346
),
286347
);
348+
349+
// Do not render the checkbox to override if there is nothing to override.
350+
if ( ! $plvt_has_theme_support_with_args ) {
351+
unset( $fields['override_theme_config'] );
352+
}
353+
287354
foreach ( $fields as $slug => $args ) {
355+
$section = $args['section'];
356+
unset( $args['section'] );
357+
288358
$additional_args = array(
289359
'field' => $slug,
290360
'label_for' => "plvt-view-transitions-field-{$slug}",
291361
);
292362

293-
// Remove 'label_for' for checkbox field to avoid duplicate label association.
294-
if ( 'enable_admin_transitions' === $slug ) {
363+
// Remove 'label_for' for checkbox fields to avoid duplicate label association.
364+
if ( 'override_theme_config' === $slug || 'enable_admin_transitions' === $slug ) {
295365
unset( $additional_args['label_for'] );
296366
}
297367

@@ -300,7 +370,7 @@ static function (): void {
300370
$args['title'],
301371
'plvt_render_settings_field',
302372
'reading',
303-
'plvt_view_transitions',
373+
$section,
304374
array_merge(
305375
$additional_args,
306376
$args
@@ -332,6 +402,7 @@ function plvt_render_settings_field( array $args ): void {
332402
$type = 'select';
333403
$choices = plvt_get_view_transition_animation_labels();
334404
break;
405+
case 'override_theme_config':
335406
case 'enable_admin_transitions':
336407
$type = 'checkbox';
337408
$choices = array(); // Defined just for consistency.

‎plugins/view-transitions/includes/theme.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,21 @@
2626
*
2727
* @since 1.0.0
2828
* @access private
29+
*
30+
* @global bool|null $plvt_has_theme_support_with_args Whether the current theme explicitly supports view transitions with custom config.
31+
* @global array<string, mixed> $_wp_theme_features Theme support features added and their arguments.
2932
*/
3033
function plvt_polyfill_theme_support(): void {
34+
global $plvt_has_theme_support_with_args, $_wp_theme_features;
35+
3136
if ( current_theme_supports( 'view-transitions' ) ) {
37+
// If the current theme actually supports view transitions with a custom config, set a flag to inform the user.
38+
if ( isset( $_wp_theme_features['view-transitions'] ) && true !== $_wp_theme_features['view-transitions'] ) {
39+
$plvt_has_theme_support_with_args = true;
40+
}
3241
return;
3342
}
43+
3444
add_theme_support( 'view-transitions' );
3545
}
3646

0 commit comments

Comments
 (0)