class.jetpack-connection-banner.php
| 1 | <?php |
| 2 | |
| 3 | use Automattic\Jetpack\Assets; |
| 4 | use Automattic\Jetpack\Assets\Logo; |
| 5 | use Automattic\Jetpack\Constants; |
| 6 | |
| 7 | class Jetpack_Connection_Banner { |
| 8 | /** |
| 9 | * @var Jetpack_Connection_Banner |
| 10 | **/ |
| 11 | private static $instance = null; |
| 12 | |
| 13 | static function init() { |
| 14 | if ( is_null( self::$instance ) ) { |
| 15 | self::$instance = new Jetpack_Connection_Banner(); |
| 16 | } |
| 17 | |
| 18 | return self::$instance; |
| 19 | } |
| 20 | |
| 21 | /** |
| 22 | * Jetpack_Connection_Banner constructor. |
| 23 | * |
| 24 | * Since we call the Jetpack_Connection_Banner:init() method from the `Jetpack` class, and after |
| 25 | * the admin_init action fires, we know that the admin is initialized at this point. |
| 26 | */ |
| 27 | private function __construct() { |
| 28 | add_action( 'current_screen', array( $this, 'maybe_initialize_hooks' ) ); |
| 29 | } |
| 30 | |
| 31 | /** |
| 32 | * Given a string for the the banner was added, and an int that represents the slide to |
| 33 | * a URL for, this function returns a connection URL with a from parameter that will |
| 34 | * support split testing. |
| 35 | * |
| 36 | * @since 7.2 Event key format is now banner-connect-banner-72-dashboard or connect-banner-72-plugins. |
| 37 | * The param $slide_num was removed since we removed all slides but the first one. |
| 38 | * @since 4.4.0 |
| 39 | * |
| 40 | * @param string $jp_version_banner_added A short version of when the banner was added. Ex. 44 |
| 41 | * |
| 42 | * @return string |
| 43 | */ |
| 44 | function build_connect_url_for_slide( $jp_version_banner_added ) { |
| 45 | global $current_screen; |
| 46 | $url = Jetpack::init()->build_connect_url( |
| 47 | true, |
| 48 | false, |
| 49 | sprintf( 'connect-banner-%s-%s', $jp_version_banner_added, $current_screen->base ) |
| 50 | ); |
| 51 | // Add a tracks event corresponding to the A/B version displayed |
| 52 | $ab_test = Jetpack_Options::get_option( 'ab_connect_banner_green_bar' ); |
| 53 | if ( in_array( $ab_test, array( 'a', 'b' ), true ) ) { |
| 54 | $url = add_query_arg( 'ab_connect_banner_green_bar', $ab_test, $url ); |
| 55 | } |
| 56 | return add_query_arg( 'auth_approved', 'true', $url ); |
| 57 | } |
| 58 | |
| 59 | /** |
| 60 | * Will initialize hooks to display the new (as of 4.4) connection banner if the current user can |
| 61 | * connect Jetpack, if Jetpack has not been deactivated, and if the current page is the plugins page. |
| 62 | * |
| 63 | * This method should not be called if the site is connected to WordPress.com or if the site is in development mode. |
| 64 | * |
| 65 | * @since 4.4.0 |
| 66 | * @since 4.5.0 Made the new (as of 4.4) connection banner display to everyone by default. |
| 67 | * @since 5.3.0 Running another split test between 4.4 banner and a new one in 5.3. |
| 68 | * @since 7.2 B test was removed. |
| 69 | * |
| 70 | * @param $current_screen |
| 71 | */ |
| 72 | function maybe_initialize_hooks( $current_screen ) { |
| 73 | |
| 74 | // Kill if banner has been dismissed |
| 75 | if ( Jetpack_Options::get_option( 'dismissed_connection_banner' ) ) { |
| 76 | return; |
| 77 | } |
| 78 | |
| 79 | // Don't show the connect notice anywhere but the plugins.php after activating |
| 80 | if ( 'plugins' !== $current_screen->base && 'dashboard' !== $current_screen->base ) { |
| 81 | return; |
| 82 | } |
| 83 | |
| 84 | if ( ! current_user_can( 'jetpack_connect' ) ) { |
| 85 | return; |
| 86 | } |
| 87 | |
| 88 | add_action( 'admin_notices', array( $this, 'render_banner' ) ); |
| 89 | add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_banner_scripts' ) ); |
| 90 | add_action( 'admin_print_styles', array( Jetpack::init(), 'admin_banner_styles' ) ); |
| 91 | |
| 92 | if ( Jetpack::state( 'network_nag' ) ) { |
| 93 | add_action( 'network_admin_notices', array( $this, 'network_connect_notice' ) ); |
| 94 | } |
| 95 | |
| 96 | // Only fires immediately after plugin activation |
| 97 | if ( get_transient( 'activated_jetpack' ) ) { |
| 98 | add_action( 'admin_notices', array( $this, 'render_connect_prompt_full_screen' ) ); |
| 99 | delete_transient( 'activated_jetpack' ); |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | /** |
| 104 | * Enqueues JavaScript for new connection banner. |
| 105 | * |
| 106 | * @since 4.4.0 |
| 107 | */ |
| 108 | public static function enqueue_banner_scripts() { |
| 109 | wp_enqueue_script( |
| 110 | 'jetpack-connection-banner-js', |
| 111 | Assets::get_file_url_for_environment( |
| 112 | '_inc/build/jetpack-connection-banner.min.js', |
| 113 | '_inc/jetpack-connection-banner.js' |
| 114 | ), |
| 115 | array( 'jquery' ), |
| 116 | JETPACK__VERSION, |
| 117 | true |
| 118 | ); |
| 119 | |
| 120 | wp_localize_script( |
| 121 | 'jetpack-connection-banner-js', |
| 122 | 'jp_banner', |
| 123 | array( |
| 124 | 'ajax_url' => admin_url( 'admin-ajax.php' ), |
| 125 | 'connectionBannerNonce' => wp_create_nonce( 'jp-connection-banner-nonce' ), |
| 126 | ) |
| 127 | ); |
| 128 | } |
| 129 | |
| 130 | /** |
| 131 | * Enqueues JavaScript and CSS for new connect-in-place flow. |
| 132 | * |
| 133 | * @since 7.7 |
| 134 | */ |
| 135 | public static function enqueue_connect_button_scripts() { |
| 136 | global $is_safari; |
| 137 | |
| 138 | wp_enqueue_script( |
| 139 | 'jetpack-connect-button', |
| 140 | Assets::get_file_url_for_environment( |
| 141 | '_inc/build/connect-button.min.js', |
| 142 | '_inc/connect-button.js' |
| 143 | ), |
| 144 | array( 'jquery' ), |
| 145 | JETPACK__VERSION, |
| 146 | true |
| 147 | ); |
| 148 | |
| 149 | wp_enqueue_style( |
| 150 | 'jetpack-connect-button', |
| 151 | Assets::get_file_url_for_environment( |
| 152 | 'css/jetpack-connect.min.css', |
| 153 | 'css/jetpack-connect.css' |
| 154 | ) |
| 155 | ); |
| 156 | |
| 157 | $jetpackApiUrl = wp_parse_url( Jetpack::connection()->api_url( '' ) ); |
| 158 | |
| 159 | // Due to the limitation in how 3rd party cookies are handled in Safari, |
| 160 | // we're falling back to the original flow on Safari desktop and mobile. |
| 161 | if ( $is_safari ) { |
| 162 | $force_variation = 'original'; |
| 163 | } elseif ( Constants::is_true( 'JETPACK_SHOULD_USE_CONNECTION_IFRAME' ) ) { |
| 164 | $force_variation = 'in_place'; |
| 165 | } elseif ( Constants::is_defined( 'JETPACK_SHOULD_USE_CONNECTION_IFRAME' ) ) { |
| 166 | $force_variation = 'original'; |
| 167 | } else { |
| 168 | $force_variation = null; |
| 169 | } |
| 170 | |
| 171 | $tracking = new Automattic\Jetpack\Tracking(); |
| 172 | $identity = $tracking->tracks_get_identity( get_current_user_id() ); |
| 173 | |
| 174 | wp_localize_script( |
| 175 | 'jetpack-connect-button', |
| 176 | 'jpConnect', |
| 177 | array( |
| 178 | 'apiBaseUrl' => esc_url_raw( rest_url( 'jetpack/v4' ) ), |
| 179 | 'registrationNonce' => wp_create_nonce( 'jetpack-registration-nonce' ), |
| 180 | 'apiNonce' => wp_create_nonce( 'wp_rest' ), |
| 181 | 'apiSiteDataNonce' => wp_create_nonce( 'wp_rest' ), |
| 182 | 'buttonTextRegistering' => __( 'Loading...', 'jetpack' ), |
| 183 | 'jetpackApiDomain' => $jetpackApiUrl['scheme'] . '://' . $jetpackApiUrl['host'], |
| 184 | 'forceVariation' => $force_variation, |
| 185 | 'connectInPlaceUrl' => Jetpack::admin_url( 'page=jetpack#/setup' ), |
| 186 | 'dashboardUrl' => Jetpack::admin_url( 'page=jetpack#/dashboard' ), |
| 187 | 'plansPromptUrl' => Jetpack::admin_url( 'page=jetpack#/plans-prompt' ), |
| 188 | 'identity' => $identity, |
| 189 | 'preFetchScript' => plugins_url( '_inc/build/admin.js', JETPACK__PLUGIN_FILE ) . '?ver=' . JETPACK__VERSION, |
| 190 | ) |
| 191 | ); |
| 192 | } |
| 193 | |
| 194 | /** |
| 195 | * Performs an A/B test showing or hiding the green bar at the top of the connection dialog displayed in Dashboard or Plugins. |
| 196 | * We save which version we're showing so we always show the same to the same user. |
| 197 | * The "A" version displays the green bar at the top. |
| 198 | * The "B" version doesn't display it. |
| 199 | * |
| 200 | * @return void |
| 201 | */ |
| 202 | function get_ab_banner_top_bar() { |
| 203 | $ab_test = Jetpack_Options::get_option( 'ab_connect_banner_green_bar' ); |
| 204 | // If it doesn't exist yet, generate it for later use and save it, so we always show the same to this user |
| 205 | if ( ! $ab_test ) { |
| 206 | $ab_test = 1 === rand( 1, 2 ) ? 'a' : 'b'; |
| 207 | Jetpack_Options::update_option( 'ab_connect_banner_green_bar', $ab_test ); |
| 208 | } |
| 209 | if ( 'a' === $ab_test ) { |
| 210 | ?> |
| 211 | <div class="jp-wpcom-connect__container-top-text"> |
| 212 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z"/></g></svg> |
| 213 | <span> |
| 214 | <?php esc_html_e( 'You’re almost done. Set up Jetpack to enable powerful security and performance tools for WordPress.', 'jetpack' ); ?> |
| 215 | </span> |
| 216 | </div> |
| 217 | <?php |
| 218 | } |
| 219 | } |
| 220 | |
| 221 | /** |
| 222 | * Renders the new connection banner as of 4.4.0. |
| 223 | * |
| 224 | * @since 7.2 Copy and visual elements reduced to show the new focus of Jetpack on Security and Performance. |
| 225 | * @since 4.4.0 |
| 226 | */ |
| 227 | function render_banner() { |
| 228 | ?> |
| 229 | <div id="message" class="updated jp-wpcom-connect__container"> |
| 230 | <?php $this->get_ab_banner_top_bar(); ?> |
| 231 | <div class="jp-wpcom-connect__inner-container"> |
| 232 | <span |
| 233 | class="notice-dismiss connection-banner-dismiss" |
| 234 | title="<?php esc_attr_e( 'Dismiss this notice', 'jetpack' ); ?>"> |
| 235 | </span> |
| 236 | |
| 237 | <div class="jp-wpcom-connect__content-container"> |
| 238 | |
| 239 | <!-- slide 1: intro --> |
| 240 | <div class="jp-wpcom-connect__slide jp-wpcom-connect__slide-one jp__slide-is-active"> |
| 241 | |
| 242 | <div class="jp-wpcom-connect__content-icon jp-connect-illo"> |
| 243 | <?php |
| 244 | $logo = new Logo(); |
| 245 | echo $logo->render(); |
| 246 | ?> |
| 247 | <img |
| 248 | src="<?php echo plugins_url( 'images/jetpack-powering-up.svg', JETPACK__PLUGIN_FILE ); ?>" |
| 249 | class="jp-wpcom-connect__hide-phone-and-smaller" |
| 250 | alt=" |
| 251 | <?php |
| 252 | esc_attr_e( |
| 253 | 'Jetpack premium services offer even more powerful performance, security, ' . |
| 254 | 'and revenue tools to help you keep your site safe, fast, and help generate income.', |
| 255 | 'jetpack' |
| 256 | ); |
| 257 | ?> |
| 258 | " |
| 259 | height="auto" |
| 260 | width="225" |
| 261 | /> |
| 262 | </div> |
| 263 | |
| 264 | <div class="jp-wpcom-connect__slide-text"> |
| 265 | <h2><?php esc_html_e( 'Simplify your site security and performance with Jetpack', 'jetpack' ); ?></h2> |
| 266 | |
| 267 | <p> |
| 268 | <?php |
| 269 | esc_html_e( |
| 270 | 'Jetpack protects you against brute force attacks and unauthorized logins. Basic protection ' . |
| 271 | 'is always free, while premium plans add unlimited backups of your whole site, spam protection, ' . |
| 272 | 'malware scanning, and automated fixes.', |
| 273 | 'jetpack' |
| 274 | ); |
| 275 | ?> |
| 276 | </p> |
| 277 | |
| 278 | <p> |
| 279 | <?php |
| 280 | esc_html_e( |
| 281 | 'Activate site accelerator tools and watch your page load times decrease—we’ll ' . |
| 282 | 'optimize your images and serve them from our own powerful global network of servers, ' . |
| 283 | 'and speed up your mobile site to reduce bandwidth usage.', |
| 284 | 'jetpack' |
| 285 | ); |
| 286 | ?> |
| 287 | </p> |
| 288 | |
| 289 | <div class="jp-banner__button-container"> |
| 290 | <span class="jp-banner__tos-blurb"><?php jetpack_render_tos_blurb(); ?></span> |
| 291 | <a |
| 292 | href="<?php echo esc_url( $this->build_connect_url_for_slide( '72' ) ); ?>" |
| 293 | class="dops-button is-primary jp-banner__alt-connect-button"> |
| 294 | <?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?> |
| 295 | </a> |
| 296 | </div> |
| 297 | |
| 298 | </div> |
| 299 | </div> <!-- end slide 1 --> |
| 300 | </div> |
| 301 | </div> |
| 302 | </div> |
| 303 | <?php |
| 304 | } |
| 305 | |
| 306 | /** |
| 307 | * Renders the full-screen connection prompt. Only shown once and on plugin activation. |
| 308 | */ |
| 309 | public static function render_connect_prompt_full_screen() { |
| 310 | $current_screen = get_current_screen(); |
| 311 | if ( 'plugins' === $current_screen->base ) { |
| 312 | $bottom_connect_url_from = 'full-screen-prompt'; |
| 313 | } else { |
| 314 | $bottom_connect_url_from = 'landing-page-bottom'; |
| 315 | } |
| 316 | ?> |
| 317 | <div class="jp-connect-full__container"><div class="jp-connect-full__container-card"> |
| 318 | |
| 319 | <?php if ( 'plugins' === $current_screen->base ) : ?> |
| 320 | <?php |
| 321 | $logo = new Logo(); |
| 322 | echo $logo->render(); |
| 323 | ?> |
| 324 | |
| 325 | <div class="jp-connect-full__dismiss"> |
| 326 | <svg class="jp-connect-full__svg-dismiss" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Dismiss Jetpack Connection Window</title><rect x="0" fill="none" /><g><path d="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/></g></svg> |
| 327 | </div> |
| 328 | <?php endif; ?> |
| 329 | |
| 330 | <div class="jp-connect-full__step-header"> |
| 331 | <h2 class="jp-connect-full__step-header-title"><?php esc_html_e( 'Activate essential WordPress security and performance tools by setting up Jetpack', 'jetpack' ); ?></h2> |
| 332 | </div> |
| 333 | |
| 334 | <p class="jp-connect-full__tos-blurb"> |
| 335 | <?php jetpack_render_tos_blurb(); ?> |
| 336 | </p> |
| 337 | |
| 338 | <p class="jp-connect-full__button-container"> |
| 339 | <a href="<?php echo esc_url( Jetpack::init()->build_connect_url( true, false, $bottom_connect_url_from ) ); ?>" |
| 340 | class="dops-button is-primary jp-connect-button"> |
| 341 | <?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?> |
| 342 | </a> |
| 343 | </p> |
| 344 | |
| 345 | <div class="jp-connect-full__row" id="jetpack-connection-cards"> |
| 346 | <div class="jp-connect-full__slide"> |
| 347 | <div class="jp-connect-full__slide-card illustration"> |
| 348 | <img |
| 349 | src="<?php echo plugins_url( 'images/security.svg', JETPACK__PLUGIN_FILE ); ?>" |
| 350 | alt="<?php esc_attr_e( 'Security & Backups', 'jetpack' ); ?>" |
| 351 | /> |
| 352 | </div> |
| 353 | <div class="jp-connect-full__slide-card"> |
| 354 | <p> |
| 355 | <?php |
| 356 | esc_html_e( |
| 357 | 'Jetpack protects you against brute force attacks and unauthorized logins. ' . |
| 358 | 'Basic protection is always free, while premium plans add unlimited backups of your whole site, ' . |
| 359 | 'spam protection, malware scanning, and automated fixes.', |
| 360 | 'jetpack' |
| 361 | ); |
| 362 | ?> |
| 363 | </p> |
| 364 | </div> |
| 365 | </div> |
| 366 | <div class="jp-connect-full__slide"> |
| 367 | <div class="jp-connect-full__slide-card illustration"> |
| 368 | <img |
| 369 | src="<?php echo plugins_url( 'images/jetpack-speed.svg', JETPACK__PLUGIN_FILE ); ?>" |
| 370 | alt="<?php esc_attr_e( 'Built-in Performance', 'jetpack' ); ?>" |
| 371 | /> |
| 372 | </div> |
| 373 | <div class="jp-connect-full__slide-card"> |
| 374 | <p> |
| 375 | <?php |
| 376 | esc_html_e( |
| 377 | 'Activate site accelerator tools and watch your page load times decrease—' . |
| 378 | "we'll optimize your images and serve them from our own powerful global network of servers, " . |
| 379 | 'and speed up your mobile site to reduce bandwidth usage.', |
| 380 | 'jetpack' |
| 381 | ); |
| 382 | ?> |
| 383 | </p> |
| 384 | </div> |
| 385 | </div> |
| 386 | </div> |
| 387 | |
| 388 | <?php if ( 'plugins' === $current_screen->base ) : ?> |
| 389 | <p class="jp-connect-full__dismiss-paragraph"> |
| 390 | <a> |
| 391 | <?php |
| 392 | echo esc_html_x( |
| 393 | 'Not now, thank you.', |
| 394 | 'a link that closes the modal window that offers to connect Jetpack', |
| 395 | 'jetpack' |
| 396 | ); |
| 397 | ?> |
| 398 | </a> |
| 399 | </p> |
| 400 | <?php endif; ?> |
| 401 | </div> |
| 402 | </div> |
| 403 | <?php |
| 404 | } |
| 405 | |
| 406 | /** |
| 407 | * Renders the legacy network connection banner. |
| 408 | */ |
| 409 | function network_connect_notice() { |
| 410 | ?> |
| 411 | <div id="message" class="updated jetpack-message"> |
| 412 | <div class="squeezer"> |
| 413 | <h2> |
| 414 | <?php |
| 415 | echo wp_kses( |
| 416 | __( |
| 417 | '<strong>Jetpack is activated!</strong> Each site on your network must be connected individually by an admin on that site.', |
| 418 | 'jetpack' |
| 419 | ), |
| 420 | array( 'strong' => array() ) |
| 421 | ); |
| 422 | ?> |
| 423 | </h2> |
| 424 | </div> |
| 425 | </div> |
| 426 | <?php |
| 427 | } |
| 428 | } |
| 429 |