class.jetpack-connection-banner.php — Jetpack – WP Security, Backup, Speed, & Growth 7.6.1

jetpack / class.jetpack-connection-banner.php

jetpack Last commit date

class.jetpack-connection-banner.php

345 lines

1	<?php
2
3	use Automattic\Jetpack\Assets\Logo;
4	use Automattic\Jetpack\Assets;
5
6	class Jetpack_Connection_Banner {
7	/**
8	* @var Jetpack_Connection_Banner
9	**/
10	private static $instance = null;
11
12	static function init() {
13	if ( is_null( self::$instance ) ) {
14	self::$instance = new Jetpack_Connection_Banner();
15	}
16
17	return self::$instance;
18	}
19
20	/**
21	* Jetpack_Connection_Banner constructor.
22	*
23	* Since we call the Jetpack_Connection_Banner:init() method from the `Jetpack` class, and after
24	* the admin_init action fires, we know that the admin is initialized at this point.
25	*/
26	private function __construct() {
27	add_action( 'current_screen', array( $this, 'maybe_initialize_hooks' ) );
28	}
29
30	/**
31	* Given a string for the the banner was added, and an int that represents the slide to
32	* a URL for, this function returns a connection URL with a from parameter that will
33	* support split testing.
34	*
35	* @since 7.2 Event key format is now banner-connect-banner-72-dashboard or connect-banner-72-plugins.
36	* The param $slide_num was removed since we removed all slides but the first one.
37	* @since 4.4.0
38	*
39	* @param string $jp_version_banner_added A short version of when the banner was added. Ex. 44
40	*
41	* @return string
42	*/
43	function build_connect_url_for_slide( $jp_version_banner_added ) {
44	global $current_screen;
45	$url = Jetpack::init()->build_connect_url(
46	true,
47	false,
48	sprintf( 'connect-banner-%s-%s', $jp_version_banner_added, $current_screen->base )
49	);
50	// Add a tracks event corresponding to the A/B version displayed
51	$ab_test = Jetpack_Options::get_option( 'ab_connect_banner_green_bar' );
52	if ( in_array( $ab_test, array( 'a', 'b' ), true ) ) {
53	$url = add_query_arg( 'ab_connect_banner_green_bar', $ab_test, $url );
54	}
55	return add_query_arg( 'auth_approved', 'true', $url );
56	}
57
58	/**
59	* Will initialize hooks to display the new (as of 4.4) connection banner if the current user can
60	* connect Jetpack, if Jetpack has not been deactivated, and if the current page is the plugins page.
61	*
62	* This method should not be called if the site is connected to WordPress.com or if the site is in development mode.
63	*
64	* @since 4.4.0
65	* @since 4.5.0 Made the new (as of 4.4) connection banner display to everyone by default.
66	* @since 5.3.0 Running another split test between 4.4 banner and a new one in 5.3.
67	* @since 7.2 B test was removed.
68	*
69	* @param $current_screen
70	*/
71	function maybe_initialize_hooks( $current_screen ) {
72	// Kill if banner has been dismissed
73	if ( Jetpack_Options::get_option( 'dismissed_connection_banner' ) ) {
74	return;
75	}
76
77	// Don't show the connect notice anywhere but the plugins.php after activating
78	if ( 'plugins' !== $current_screen->base && 'dashboard' !== $current_screen->base ) {
79	return;
80	}
81
82	if ( ! current_user_can( 'jetpack_connect' ) ) {
83	return;
84	}
85
86	add_action( 'admin_notices', array( $this, 'render_banner' ) );
87	add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_banner_scripts' ) );
88	add_action( 'admin_print_styles', array( Jetpack::init(), 'admin_banner_styles' ) );
89
90	if ( Jetpack::state( 'network_nag' ) ) {
91	add_action( 'network_admin_notices', array( $this, 'network_connect_notice' ) );
92	}
93
94	// Only fires immediately after plugin activation
95	if ( get_transient( 'activated_jetpack' ) ) {
96	add_action( 'admin_notices', array( $this, 'render_connect_prompt_full_screen' ) );
97	delete_transient( 'activated_jetpack' );
98	}
99	}
100
101	/**
102	* Enqueues JavaScript for new connection banner.
103	*
104	* @since 4.4.0
105	*/
106	public static function enqueue_banner_scripts() {
107	wp_enqueue_script(
108	'jetpack-connection-banner-js',
109	Assets::get_file_url_for_environment(
110	'_inc/build/jetpack-connection-banner.min.js',
111	'_inc/jetpack-connection-banner.js'
112	),
113	array( 'jquery' ),
114	JETPACK__VERSION,
115	true
116	);
117
118	wp_localize_script(
119	'jetpack-connection-banner-js',
120	'jp_banner',
121	array(
122	'ajax_url' => admin_url( 'admin-ajax.php' ),
123	'connectionBannerNonce' => wp_create_nonce( 'jp-connection-banner-nonce' ),
124	)
125	);
126	}
127
128	/**
129	* Performs an A/B test showing or hiding the green bar at the top of the connection dialog displayed in Dashboard or Plugins.
130	* We save which version we're showing so we always show the same to the same user.
131	* The "A" version displays the green bar at the top.
132	* The "B" version doesn't display it.
133	*
134	* @return void
135	*/
136	function get_ab_banner_top_bar() {
137	$ab_test = Jetpack_Options::get_option( 'ab_connect_banner_green_bar' );
138	// If it doesn't exist yet, generate it for later use and save it, so we always show the same to this user
139	if ( ! $ab_test ) {
140	$ab_test = 1 === rand( 1, 2 ) ? 'a' : 'b';
141	Jetpack_Options::update_option( 'ab_connect_banner_green_bar', $ab_test);
142	}
143	if ( 'a' === $ab_test ) {
144	?>
145	<div class="jp-wpcom-connect__container-top-text">
146	<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>
147	<span>
148	<?php esc_html_e( 'You’re almost done. Set up Jetpack to enable powerful security and performance tools for WordPress.', 'jetpack' ); ?>
149	</span>
150	</div>
151	<?php
152	}
153	}
154
155	/**
156	* Renders the new connection banner as of 4.4.0.
157	*
158	* @since 7.2 Copy and visual elements reduced to show the new focus of Jetpack on Security and Performance.
159	* @since 4.4.0
160	*/
161	function render_banner() { ?>
162	<div id="message" class="updated jp-wpcom-connect__container">
163	<?php $this->get_ab_banner_top_bar(); ?>
164	<div class="jp-wpcom-connect__inner-container">
165	<span
166	class="notice-dismiss connection-banner-dismiss"
167	title="<?php esc_attr_e( 'Dismiss this notice', 'jetpack' ); ?>">
168	</span>
169
170	<div class="jp-wpcom-connect__content-container">
171
172	<!-- slide 1: intro -->
173	<div class="jp-wpcom-connect__slide jp-wpcom-connect__slide-one jp__slide-is-active">
174
175	<div class="jp-wpcom-connect__content-icon jp-connect-illo">
176	<?php
177	$logo = new Logo();
178	echo $logo->render();
179	?>
180	<img
181	src="<?php echo plugins_url( 'images/jetpack-powering-up.svg', JETPACK__PLUGIN_FILE ); ?>"
182	class="jp-wpcom-connect__hide-phone-and-smaller"
183	alt="<?php esc_attr_e(
184	'Jetpack premium services offer even more powerful performance, security, ' .
185	'and revenue tools to help you keep your site safe, fast, and help generate income.',
186	'jetpack'
187	); ?>"
188	height="auto"
189	width="225"
190	/>
191	</div>
192
193	<div class="jp-wpcom-connect__slide-text">
194	<h2><?php esc_html_e( 'Simplify your site security and performance with Jetpack', 'jetpack' ) ?></h2>
195
196	<p>
197	<?php
198	esc_html_e(
199	'Jetpack protects you against brute force attacks and unauthorized logins. Basic protection ' .
200	'is always free, while premium plans add unlimited backups of your whole site, spam protection, ' .
201	'malware scanning, and automated fixes.',
202	'jetpack'
203	);
204	?>
205	</p>
206
207	<p>
208	<?php
209	esc_html_e(
210	'Activate site accelerator tools and watch your page load times decrease—we’ll ' .
211	'optimize your images and serve them from our own powerful global network of servers, ' .
212	'and speed up your mobile site to reduce bandwidth usage.',
213	'jetpack'
214	);
215	?>
216	</p>
217
218	<div class="jp-banner__button-container">
219	<span class="jp-banner__tos-blurb"><?php jetpack_render_tos_blurb(); ?></span>
220	<a
221	href="<?php echo esc_url( $this->build_connect_url_for_slide( '72' ) ); ?>"
222	class="dops-button is-primary">
223	<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
224	</a>
225	</div>
226	</div>
227	</div> <!-- end slide 1 -->
228	</div>
229	</div>
230	</div>
231	<?php
232	}
233
234	/**
235	* Renders the full-screen connection prompt. Only shown once and on plugin activation.
236	*/
237	public static function render_connect_prompt_full_screen() {
238	$current_screen = get_current_screen();
239	if ( 'plugins' === $current_screen->base ) {
240	$bottom_connect_url_from = 'full-screen-prompt';
241	} else {
242	$bottom_connect_url_from = 'landing-page-bottom';
243	}
244	?>
245	<div class="jp-connect-full__container"><div class="jp-connect-full__container-card">
246
247	<?php if ( 'plugins' === $current_screen->base ) : ?>
248	<?php
249	$logo = new Logo();
250	echo $logo->render();
251	?>
252
253	<div class="jp-connect-full__dismiss">
254	<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>
255	</div>
256	<?php endif; ?>
257
258	<div class="jp-connect-full__step-header">
259	<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>
260	</div>
261
262	<div class="jp-connect-full__row">
263	<div class="jp-connect-full__slide">
264	<div class="jp-connect-full__slide-card illustration">
265	<img
266	src="<?php echo plugins_url( 'images/security.svg', JETPACK__PLUGIN_FILE ); ?>"
267	alt="<?php esc_attr_e( 'Security & Backups', 'jetpack' ); ?>"
268	/>
269	</div>
270	<div class="jp-connect-full__slide-card">
271	<p><?php
272	esc_html_e(
273	'Jetpack protects you against brute force attacks and unauthorized logins. ' .
274	'Basic protection is always free, while premium plans add unlimited backups of your whole site, ' .
275	'spam protection, malware scanning, and automated fixes.',
276	'jetpack'
277	);
278	?></p>
279	</div>
280	</div>
281	<div class="jp-connect-full__slide">
282	<div class="jp-connect-full__slide-card illustration">
283	<img
284	src="<?php echo plugins_url( 'images/jetpack-speed.svg', JETPACK__PLUGIN_FILE ); ?>"
285	alt="<?php esc_attr_e( 'Built-in Performance', 'jetpack' ); ?>"
286	/>
287	</div>
288	<div class="jp-connect-full__slide-card">
289	<p><?php
290	esc_html_e(
291	"Activate site accelerator tools and watch your page load times decrease—" .
292	"we'll optimize your images and serve them from our own powerful global network of servers, " .
293	"and speed up your mobile site to reduce bandwidth usage.",
294	'jetpack'
295	);
296	?></p>
297	</div>
298	</div>
299	</div>
300
301	<p class="jp-connect-full__tos-blurb">
302	<?php jetpack_render_tos_blurb(); ?>
303	</p>
304	<p class="jp-connect-full__button-container">
305	<a href="<?php echo esc_url( Jetpack::init()->build_connect_url( true, false, $bottom_connect_url_from ) ); ?>" class="dops-button is-primary">
306	<?php esc_html_e( 'Set up Jetpack', 'jetpack' ); ?>
307	</a>
308	</p>
309	<?php if ( 'plugins' === $current_screen->base ) : ?>
310	<p class="jp-connect-full__dismiss-paragraph">
311	<a>
312	<?php echo esc_html_x(
313	'Not now, thank you.', 'a link that closes the modal window that offers to connect Jetpack', 'jetpack'
314	); ?>
315	</a>
316	</p>
317	<?php endif; ?>
318	</div></div>
319	<?php
320	}
321
322	/**
323	* Renders the legacy network connection banner.
324	*/
325	function network_connect_notice() {
326	?>
327	<div id="message" class="updated jetpack-message">
328	<div class="squeezer">
329	<h2>
330	<?php
331	echo wp_kses(
332	__(
333	'<strong>Jetpack is activated!</strong> Each site on your network must be connected individually by an admin on that site.',
334	'jetpack'
335	),
336	array( 'strong' => array() )
337	);
338	?>
339	</h2>
340	</div>
341	</div>
342	<?php
343	}
344	}
345