Skip to content

Commit

Permalink
Remove duplicate views: Enhance notices (#40996)
Browse files Browse the repository at this point in the history 
Applies several enhancements to the notices displayed to users participating in the "Remove duplicate views" experiment:

- Removes the %s variable from the notices title since it can lead to translations issues (p1736515477431359/1736434378.836679-slack-C02AED43D) and hardcode the title instead.
- Updates the notices description to use the recommended possessive for WordPress: WordPress' (instead of WordPress's).
- Prevents the notices from appearing on new sites created after the experiment start date.
- Prevents the notices from appearing if they have been dismissed on a different site.
  • Loading branch information
@mmtr
mmtr authored Jan 14, 2025
1 parent af9a01e commit fb02c12
Show file tree
Hide file tree
Showing 4 changed files with 237 additions and 32 deletions.
4 changes: 4 additions & 0 deletions ...ts/packages/jetpack-mu-wpcom/changelog/update-remove-duplicate-views-notices-improvements
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove duplicate views: Enhance notices
15 changes: 14 additions & 1 deletion ...es/jetpack-mu-wpcom/src/features/wpcom-admin-interface/removed-calypso-screen-notice.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
@import "@wordpress/base-styles/breakpoints";

.components-modal__frame.removed-calypso-screen-notice {
width: 512px;

.removed-calypso-screen-notice__image {
height: 300px;
max-height: 300px;
flex-grow: 1;
background-color: #3858e9;
background-size: 30px;
display: flex;
Expand All @@ -17,6 +20,16 @@
padding: 48px;
border-radius: 12px;
box-sizing: content-box;
width: 72px;
height: 72px;
margin: 66px 0;

@media (max-height: #{ ($break-mobile) }) {
width: 24px;
height: 24px;
padding: 16px;
margin: 24px 0;
}
}

h1 {
Expand Down
157 changes: 136 additions & 21 deletions ...ges/jetpack-mu-wpcom/src/features/wpcom-admin-interface/removed-calypso-screen-notice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { Guide } from '@wordpress/components';
import { createRoot, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { __, hasTranslation as _hasTranslation, sprintf } from '@wordpress/i18n';
import {
Icon,
archive,
Expand All @@ -17,8 +17,135 @@ import { addQueryArgs } from '@wordpress/url';

import './removed-calypso-screen-notice.scss';

const hasTranslation = text => {
const currentLanguage = document.querySelector( 'html' )?.getAttribute( 'lang' );

if ( currentLanguage?.startsWith( 'en' ) ) {
return true;
}

return _hasTranslation( text, undefined, 'jetpack-mu-wpcom' );
};

const Notice = () => {
const [ isOpen, setIsOpen ] = useState( true );

const titleFallback = sprintf(
// translators: %s: page name
__( 'The %s view just got better', 'jetpack-mu-wpcom' ),
removedCalypsoScreenNoticeConfig.title
);

const descriptionFallback = sprintf(
// translators: %s: page name
__(
"We've adopted WordPress's main %s view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
),
removedCalypsoScreenNoticeConfig.title
);

const config = {
'edit.php': {
icon: verse,
title: hasTranslation( 'The Posts view just got better' )
? __( 'The Posts view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Posts view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Posts view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
'edit.php?post_type=page': {
icon: pages,
title: hasTranslation( 'The Pages view just got better' )
? __( 'The Pages view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Pages view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Pages view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
'edit.php?post_type=jetpack-portfolio': {
icon: archive,
title: hasTranslation( 'The Portfolio Projects view just got better' )
? __( 'The Portfolio Projects view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Portfolio Projects view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Portfolio Projects view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
'edit.php?post_type=jetpack-testimonial': {
icon: commentContent,
title: hasTranslation( 'The Testimonials view just got better' )
? __( 'The Testimonials view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Testimonials view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Testimonials view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
'edit-comments.php': {
icon: postComments,
title: hasTranslation( 'The Comments view just got better' )
? __( 'The Comments view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Comments view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Comments view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
'edit-tags.php?taxonomy=category': {
icon: category,
title: hasTranslation( 'The Categories view just got better' )
? __( 'The Categories view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Categories view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Categories view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
'edit-tags.php?taxonomy=post_tag': {
icon: tag,
title: hasTranslation( 'The Tags view just got better' )
? __( 'The Tags view just got better', 'jetpack-mu-wpcom' )
: titleFallback,
description: hasTranslation(
"We've adopted WordPress' main Tags view to bring improvements to you and millions of WordPress users worldwide."
)
? __(
"We've adopted WordPress' main Tags view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
)
: descriptionFallback,
},
};

const icons = {
'edit.php': verse,
'edit.php?post_type=page': pages,
Expand Down Expand Up @@ -57,35 +184,23 @@ const Notice = () => {
return (
<Guide
className="removed-calypso-screen-notice"
contentLabel={ title }
contentLabel={ config[ removedCalypsoScreenNoticeConfig.screen ].title }
finishButtonText={ __( 'Got it', 'jetpack-mu-wpcom' ) }
onFinish={ dismiss }
pages={ [
{
image: (
<>
<div className="removed-calypso-screen-notice__image">
<Icon
icon={ icons[ removedCalypsoScreenNoticeConfig.screen ] }
size={ 72 }
className="removed-calypso-screen-notice__icon"
></Icon>
</div>
</>
<div className="removed-calypso-screen-notice__image">
<Icon
icon={ config[ removedCalypsoScreenNoticeConfig.screen ].icon }
className="removed-calypso-screen-notice__icon"
></Icon>
</div>
),
content: (
<>
<h1>{ title }</h1>
<p>
{ sprintf(
// translators: %s: page name
__(
"We've adopted WordPress's main %s view to bring improvements to you and millions of WordPress users worldwide.",
'jetpack-mu-wpcom'
),
removedCalypsoScreenNoticeConfig.title
) }
</p>
<p>{ config[ removedCalypsoScreenNoticeConfig.screen ].description }</p>
</>
),
},
Expand Down
93 changes: 83 additions & 10 deletions ...ts/packages/jetpack-mu-wpcom/src/features/wpcom-admin-interface/wpcom-admin-interface.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,6 +455,23 @@ function wpcom_is_duplicate_views_experiment_enabled() {
* the first time.
*/
function wpcom_show_removed_calypso_screen_notice() {
if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
$blog_id = get_current_blog_id();
} else {
$jetpack_options = get_option( 'jetpack_options' );
if ( is_array( $jetpack_options ) && isset( $jetpack_options['id'] ) ) {
$blog_id = (int) $jetpack_options['id'];
} else {
$blog_id = get_current_blog_id();
}
}

// Do not show notice on sites created the experiment started.
// 240673796 is the ID of a site created on 2025-01-13.
if ( $blog_id > 240673796 ) {
return;
}

$admin_menu_class = wpcom_get_custom_admin_menu_class();
if ( ! $admin_menu_class ) {
return;
Expand All @@ -466,9 +483,51 @@ function wpcom_show_removed_calypso_screen_notice() {
return;
}

$dismissed_notices = get_user_option( 'wpcom_removed_calypso_screen_dismissed_notices' );
if ( is_array( $dismissed_notices ) && in_array( $current_screen, $dismissed_notices, true ) ) {
return;
if ( ( new Host() )->is_wpcom_simple() ) {
$preferences = get_user_attribute( get_current_user_id(), 'calypso_preferences' );
$is_dismissed = $preferences[ 'removed-calypso-screen-dismissed-notice-' . $current_screen ] ?? false;
if ( $is_dismissed ) {
return;
}
} else {
$notices_dismissed_locally = get_user_option( 'wpcom_removed_calypso_screen_dismissed_notices' );
if ( ! is_array( $notices_dismissed_locally ) ) {
$notices_dismissed_locally = array();
}

if ( in_array( $current_screen, $notices_dismissed_locally, true ) ) {
return;
}

if ( ! ( new Jetpack_Connection() )->is_user_connected() ) {
return;
}

$response = Client::wpcom_json_api_request_as_user( '/me/preferences', 'v2' );
if ( is_wp_error( $response ) ) {
return;
}

$response_code = wp_remote_retrieve_response_code( $response );
if ( 200 !== $response_code ) {
return;
}

$notices_dismissed_globally = array();
$preferences = json_decode( wp_remote_retrieve_body( $response ), true );
foreach ( $preferences as $key => $value ) {
if ( $value && preg_match( '/^removed-calypso-screen-dismissed-notice-(.+)$/', $key, $matches ) ) {
$notices_dismissed_globally[] = $matches[1];
}
}

if ( array_diff( $notices_dismissed_globally, $notices_dismissed_locally ) ) {
update_user_option( get_current_user_id(), 'wpcom_removed_calypso_screen_dismissed_notices', $notices_dismissed_globally, true );
}

if ( in_array( $current_screen, $notices_dismissed_globally, true ) ) {
return;
}
}

if ( ! wpcom_is_duplicate_views_experiment_enabled() ) {
Expand Down Expand Up @@ -531,18 +590,32 @@ function wpcom_get_custom_admin_menu_class() {
}

/**
* Handles the AJAX request to dismiss a notice of a removed Calypsos screen.
* Handles the AJAX request to dismiss a notice of a removed Calypso screen.
*/
function wpcom_dismiss_removed_calypso_screen_notice() {
check_ajax_referer( 'wpcom_dismiss_removed_calypso_screen_notice' );
if ( isset( $_REQUEST['screen'] ) ) {
$screen = sanitize_text_field( wp_unslash( $_REQUEST['screen'] ) );
$dismissed_notices = get_user_option( 'wpcom_removed_calypso_screen_dismissed_notices' );
if ( ! is_array( $dismissed_notices ) ) {
$dismissed_notices = array();
$screen = sanitize_text_field( wp_unslash( $_REQUEST['screen'] ) );
if ( ( new Host() )->is_wpcom_simple() ) {
$preferences = get_user_attribute( get_current_user_id(), 'calypso_preferences' );
$preferences[ 'removed-calypso-screen-dismissed-notice-' . $screen ] = true;
update_user_attribute( get_current_user_id(), 'calypso_preferences', $preferences );
} else {
Client::wpcom_json_api_request_as_user(
'/me/preferences',
'2',
array(
'method' => 'POST',
),
array( 'calypso_preferences' => (object) array( 'removed-calypso-screen-dismissed-notice-' . $screen => true ) )
);
$notices_dismissed_locally = get_user_option( 'wpcom_removed_calypso_screen_dismissed_notices' );
if ( ! is_array( $notices_dismissed_locally ) ) {
$notices_dismissed_locally = array();
}
$notices_dismissed_locally[] = $screen;
update_user_option( get_current_user_id(), 'wpcom_removed_calypso_screen_dismissed_notices', $notices_dismissed_locally, true );
}
$dismissed_notices[] = $screen;
update_user_option( get_current_user_id(), 'wpcom_removed_calypso_screen_dismissed_notices', $dismissed_notices, true );
}
wp_die();
}
Expand Down

0 comments on commit fb02c12

Please sign in to comment.