Editor: Add WordPress.com integrations to the block editor (#12070)

Load the scripts of the [WordPress.com block editor integrations](https://github.com/Automattic/wp-calypso/tree/master/apps/wpcom-block-editor) that enhances the block editor with the features available in WordPress.com sites

**Calypso Iframed block editor:**
- URL is updated with the draft ID when the post is saved.
- Trashing a post redirects to the list of trashed posts in Calypso displaying a success notification.
- Revisions are managed with the Calypso revisions modal.
- Reblogging a post from the Calypso reader creates a post in Calypso with the except title and content.
- Media items are managed with the Calypso media modal.
- Posts are previewed with the Calypso preview modal.
- Back button on the header ("View posts") redirects to the list of posts in Calypso.
- Media items inserted in classic blocks are managed with the Calypso media modal.

**WP Admin block editor** (also included in the iframed block editor):
- Support for the underline and justified text formats.

modules/wpcom-block-editor/class-jetpack-wpcom-block-editor.php

@@ -35,8 +35,24 @@ public static function init() {
 	 * Jetpack_WPCOM_Block_Editor constructor.
 	 */
 	private function __construct() {
-		add_action( 'admin_init', array( $this, 'disable_send_frame_options_header' ), 9 );
-		add_filter( 'admin_body_class', array( $this, 'add_iframed_body_class' ) );
+		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( 'enqueue_block_editor_assets', array( $this, 'enqueue_scripts' ) );
+		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() {
+		$is_calypsoify = 1 === (int) get_user_meta( get_current_user_id(), 'calypsoify', true );
+		global $pagenow;
+		// phpcs:ignore WordPress.Security.NonceVerification
+		return ( 'post.php' === $pagenow || 'post-new.php' === $pagenow ) && ! empty( $_GET['frame-nonce'] ) && $is_calypsoify;
 	}
 
 	/**
@@ -73,12 +89,12 @@ public function framing_allowed() {
 		}
 
 		$verified = $this->verify_frame_nonce(
-			$_GET['frame-nonce'],  // phpcs:ignore WordPress.Security.NonceVerification
+			$_GET['frame-nonce'], // phpcs:ignore WordPress.Security.NonceVerification
 			'frame-' . Jetpack_Options::get_option( 'id' )
 		);
 
 		if ( is_wp_error( $verified ) ) {
-			wp_die( $verified );
+			wp_die( $verified ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		}
 
 		if ( $verified && ! defined( 'IFRAME_REQUEST' ) ) {
@@ -162,6 +178,73 @@ public function filter_salt( $salt, $scheme ) {
 
 		return $salt;
 	}
+
+	/**
+	 * Enqueue the scripts for the WordPress.com block editor integration.
+	 */
+	public function enqueue_scripts() {
+		$debug         = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
+		$version       = gmdate( 'YW' );
+		$is_calypsoify = 1 === (int) get_user_meta( get_current_user_id(), 'calypsoify', true );
+
+		$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( 'lodash', 'wp-compose', 'wp-data', 'wp-editor', 'wp-rich-text' ),
+			$version,
+			true
+		);
+		wp_localize_script(
+			'wpcom-block-editor-common',
+			'wpcomGutenberg',
+			array(
+				'switchToClassic' => array(
+					'isVisible' => false,
+				),
+				'isCalypsoify'    => $is_calypsoify,
+				'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-tinymce', 'wp-url' ),
+				$version,
+				true
+			);
+		}
+	}
+
+	/**
+	 * 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();