1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
|
<?php
/**
* WordPress.com Block Editor
* Allow new block editor posts to be composed on WordPress.com.
* This is auto-loaded as of Jetpack v7.4 for sites connected to WordPress.com only.
*
* @package Jetpack
*/
/**
* WordPress.com Block editor for Jetpack
*/
class Jetpack_WPCOM_Block_Editor {
/**
* ID of the user who signed the nonce.
*
* @var int
*/
private $nonce_user_id;
/**
* Singleton
*/
public static function init() {
static $instance = false;
if ( ! $instance ) {
$instance = new Jetpack_WPCOM_Block_Editor();
}
return $instance;
}
/**
* Jetpack_WPCOM_Block_Editor constructor.
*/
private function __construct() {
if ( $this->is_iframed_block_editor() ) {
add_action( 'admin_init', array( $this, 'disable_send_frame_options_header' ), 9 );
add_filter( 'admin_body_class', array( $this, 'add_iframed_body_class' ) );
}
add_action( 'login_init', array( $this, 'allow_block_editor_login' ), 1 );
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_scripts' ), 9 );
add_action( 'enqueue_block_assets', array( $this, 'enqueue_styles' ) );
add_filter( 'mce_external_plugins', array( $this, 'add_tinymce_plugins' ) );
}
/**
* Checks if we are embedding the block editor in an iframe in WordPress.com.
*
* @return bool Whether the current request is from the iframed block editor.
*/
public function is_iframed_block_editor() {
global $pagenow;
// phpcs:ignore WordPress.Security.NonceVerification
return ( 'post.php' === $pagenow || 'post-new.php' === $pagenow ) && ! empty( $_GET['frame-nonce'] );
}
/**
* Prevents frame options header from firing if this is a whitelisted iframe request.
*/
public function disable_send_frame_options_header() {
// phpcs:ignore WordPress.Security.NonceVerification
if ( $this->framing_allowed( $_GET['frame-nonce'] ) ) {
remove_action( 'admin_init', 'send_frame_options_header' );
}
}
/**
* Adds custom admin body class if this is a whitelisted iframe request.
*
* @param string $classes Admin body classes.
* @return string
*/
public function add_iframed_body_class( $classes ) {
// phpcs:ignore WordPress.Security.NonceVerification
if ( $this->framing_allowed( $_GET['frame-nonce'] ) ) {
$classes .= ' is-iframed ';
}
return $classes;
}
/**
* Allows to iframe the login page if a user is logged out
* while trying to access the block editor from wordpress.com.
*/
public function allow_block_editor_login() {
// phpcs:ignore WordPress.Security.NonceVerification
if ( empty( $_REQUEST['redirect_to'] ) ) {
return;
}
// phpcs:ignore WordPress.Security.NonceVerification
$query = wp_parse_url( urldecode( $_REQUEST['redirect_to'] ), PHP_URL_QUERY );
$args = wp_parse_args( $query );
// Check nonce and make sure this is a Gutenframe request.
if ( ! empty( $args['frame-nonce'] ) && $this->framing_allowed( $args['frame-nonce'] ) ) {
// If SSO is active, we'll let WordPress.com handle authentication...
if ( Jetpack::is_module_active( 'sso' ) ) {
// ...but only if it's not an Atomic site. They already do that.
if ( ! jetpack_is_atomic_site() ) {
add_filter( 'jetpack_sso_bypass_login_forward_wpcom', '__return_true' );
}
} else {
$_REQUEST['interim-login'] = true;
add_action( 'wp_login', array( $this, 'do_redirect' ) );
add_action( 'login_form', array( $this, 'add_login_html' ) );
add_filter( 'wp_login_errors', array( $this, 'add_login_message' ) );
remove_action( 'login_init', 'send_frame_options_header' );
wp_add_inline_style( 'login', '.interim-login #login{padding-top:8%}' );
}
}
}
/**
* Adds a login message.
*
* Intended to soften the expectation mismatch of ending up with a login screen rather than the editor.
*
* @param WP_Error $errors WP Error object.
* @return \WP_Error
*/
public function add_login_message( $errors ) {
$errors->remove( 'expired' );
$errors->add( 'info', __( 'Before we continue, please log in to your Jetpack site.', 'jetpack' ), 'message' );
return $errors;
}
/**
* Maintains the `redirect_to` parameter in login form links.
* Adds visual feedback of login in progress.
*/
public function add_login_html() {
?>
<input type="hidden" name="redirect_to" value="<?php echo esc_url( $_REQUEST['redirect_to'] ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>" />
<script type="application/javascript">
document.getElementById( 'loginform' ).addEventListener( 'submit' , function() {
document.getElementById( 'wp-submit' ).setAttribute( 'disabled', 'disabled' );
document.getElementById( 'wp-submit' ).value = '<?php echo esc_js( __( 'Logging In...', 'jetpack' ) ); ?>';
} );
</script>
<?php
}
/**
* Does the redirect to the block editor.
*/
public function do_redirect() {
wp_safe_redirect( $GLOBALS['redirect_to'] );
exit;
}
/**
* Checks whether this is a whitelisted iframe request.
*
* @param string $nonce Nonce to verify.
* @return bool
*/
public function framing_allowed( $nonce ) {
$verified = $this->verify_frame_nonce( $nonce, 'frame-' . Jetpack_Options::get_option( 'id' ) );
if ( is_wp_error( $verified ) ) {
wp_die( $verified ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
if ( $verified && ! defined( 'IFRAME_REQUEST' ) ) {
define( 'IFRAME_REQUEST', true );
}
return (bool) $verified;
}
/**
* Verify that correct nonce was used with time limit.
*
* The user is given an amount of time to use the token, so therefore, since the
* UID and $action remain the same, the independent variable is the time.
*
* @param string $nonce Nonce that was used in the form to verify.
* @param string $action Should give context to what is taking place and be the same when nonce was created.
* @return boolean|WP_Error Whether the nonce is valid.
*/
public function verify_frame_nonce( $nonce, $action ) {
if ( empty( $nonce ) ) {
return false;
}
list( $expiration, $user_id, $hash ) = explode( ':', $nonce, 3 );
$this->nonce_user_id = (int) $user_id;
if ( ! $this->nonce_user_id ) {
return false;
}
$token = Jetpack_Data::get_access_token( $this->nonce_user_id );
if ( ! $token ) {
return false;
}
/*
* Failures must return `false` (blocking the iframe) prior to the
* signature verification.
*/
add_filter( 'salt', array( $this, 'filter_salt' ), 10, 2 );
$expected_hash = wp_hash( "$expiration|$action|{$this->nonce_user_id}", 'jetpack_frame_nonce' );
remove_filter( 'salt', array( $this, 'filter_salt' ) );
if ( ! hash_equals( $hash, $expected_hash ) ) {
return false;
}
/*
* Failures may return `WP_Error` (showing an error in the iframe) after the
* signature verification passes.
*/
if ( time() > $expiration ) {
return new WP_Error( 'nonce_invalid_expired', 'Expired nonce.', array( 'status' => 401 ) );
}
// Check if it matches the current user, unless they're trying to log in.
if ( get_current_user_id() !== $this->nonce_user_id && ! doing_action( 'login_init' ) ) {
return new WP_Error( 'nonce_invalid_user_mismatch', 'User ID mismatch.', array( 'status' => 401 ) );
}
return true;
}
/**
* Filters the WordPress salt.
*
* @param string $salt Salt for the given scheme.
* @param string $scheme Authentication scheme.
* @return string
*/
public function filter_salt( $salt, $scheme ) {
if ( 'jetpack_frame_nonce' === $scheme ) {
$token = Jetpack_Data::get_access_token( $this->nonce_user_id );
if ( $token ) {
$salt = $token->secret;
}
}
return $salt;
}
/**
* Enqueue the scripts for the WordPress.com block editor integration.
*/
public function enqueue_scripts() {
$debug = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
$version = gmdate( 'Ymd' );
$src_common = $debug
? '//widgets.wp.com/wpcom-block-editor/common.js?minify=false'
: '//widgets.wp.com/wpcom-block-editor/common.min.js';
wp_enqueue_script(
'wpcom-block-editor-common',
$src_common,
array(
'jquery',
'lodash',
'wp-blocks',
'wp-compose',
'wp-data',
'wp-dom-ready',
'wp-editor',
'wp-nux',
'wp-plugins',
'wp-polyfill',
'wp-rich-text',
),
$version,
true
);
wp_localize_script(
'wpcom-block-editor-common',
'wpcomGutenberg',
array(
'switchToClassic' => array(
'isVisible' => $this->is_iframed_block_editor(),
'label' => __( 'Switch to Classic Editor', 'jetpack' ),
'url' => Jetpack_Calypsoify::getInstance()->get_switch_to_classic_editor_url(),
),
'richTextToolbar' => array(
'justify' => __( 'Justify', 'jetpack' ),
'underline' => __( 'Underline', 'jetpack' ),
),
)
);
if ( $this->is_iframed_block_editor() ) {
$src_calypso_iframe_bridge = $debug
? '//widgets.wp.com/wpcom-block-editor/calypso-iframe-bridge-server.js?minify=false'
: '//widgets.wp.com/wpcom-block-editor/calypso-iframe-bridge-server.min.js';
wp_enqueue_script(
'wpcom-block-editor-calypso-iframe-bridge',
$src_calypso_iframe_bridge,
array(
'calypsoify_wpadminmods_js',
'jquery',
'lodash',
'react',
'wp-blocks',
'wp-data',
'wp-hooks',
'wp-polyfill',
'wp-tinymce',
'wp-url',
),
$version,
true
);
}
}
/**
* Enqueue WP.com block editor common styles.
*/
public function enqueue_styles() {
// Enqueue only for the block editor in WP Admin.
global $pagenow;
if ( is_admin() && ! in_array( $pagenow, array( 'post.php', 'post-new.php' ), true ) ) {
return;
}
// Enqueue on the front-end only if justified blocks are present.
if ( ! is_admin() && ! $this->has_justified_block() ) {
return;
}
$debug = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
$version = gmdate( 'Ymd' );
$src_styles = $debug
? '//widgets.wp.com/wpcom-block-editor/common.css?minify=false'
: '//widgets.wp.com/wpcom-block-editor/common.min.css';
wp_enqueue_style(
'wpcom-block-editor-styles',
$src_styles,
array(),
$version
);
}
/**
* Determines if the current $post contains a justified paragraph block.
*
* @return boolean true if justified paragraph is found, false otherwise.
*/
public function has_justified_block() {
global $post;
if ( ! $post instanceof WP_Post ) {
return false;
};
if ( ! has_blocks( $post ) ) {
return false;
}
return false !== strpos( $post->post_content, '<!-- wp:paragraph {"align":"justify"' );
}
/**
* Register the Tiny MCE plugins for the WordPress.com block editor integration.
*
* @param array $plugin_array An array of external Tiny MCE plugins.
* @return array External TinyMCE plugins.
*/
public function add_tinymce_plugins( $plugin_array ) {
if ( $this->is_iframed_block_editor() ) {
$debug = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
$src_calypso_tinymce = $debug
? '//widgets.wp.com/wpcom-block-editor/calypso-tinymce.js?minify=false'
: '//widgets.wp.com/wpcom-block-editor/calypso-tinymce.min.js';
$plugin_array['gutenberg-wpcom-iframe-media-modal'] = add_query_arg(
'v',
gmdate( 'YW' ),
$src_calypso_tinymce
);
}
return $plugin_array;
}
}
Jetpack_WPCOM_Block_Editor::init();
|