WP.com block editor: Exclude features from Jetpack sites

apps/wpcom-block-editor/README.md

@@ -4,32 +4,152 @@ This package provides utilities for the WordPress.com block editor integration.
 
 These utilities are intended to be built and then served from `widgets.wp.com`, so they can be loaded by a WordPress.com or a Jetpack connected site.
 
-## Environments
+## Editors
 
-There are two environments the block editor integration supports:
+There are two editors supported:
 
 - **WP Admin block editor**. The block editor loaded by the WP Admin interface on `https://<SITE_SLUG>/wp-admin/post-new.php`.
 - **Calypso block editor**. This is the block editor loaded by Calypso on `https://wordpress.com/block-editor/post/<SITE_SLUG>`. It is actually the WP Admin block editor embed on an iframe. We also refer to this implementation as _Gutenframe_.
-
-## File architecture
 
-- `/common`: Logic than runs on both environments (WP Admin and Calypso).
-- `/calypso`: Logic than runs only on the Calypso iframed block editor.  
+## Features
+
+The block editor integration provides features for the following combination of sites and editors:
+
+<table>
+  <tr>
+    <th>Feature</th>
+    <th>Editor</th>
+    <th>Simple site</th>
+    <th>Atomic site</th>
+    <th>Jetpack site</th>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/default/features/rich-text.js"><code>rich-text</code></a>:
+      Extensions for the Rich Text toolbar with the Calypso buttons missing on Core (i.e. underline, justify).
+    </td>
+    <td>WP Admin</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>✅</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>✅</td>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/default/features/switch-to-classic.js"><code>switch-to-classic</code></a>:
+      Appends a button to the "More tools" menu for switching to the classic editor.
+    </td>
+    <td>WP Admin</td>
+    <td>✅</td>
+    <td>❌</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>✅</td>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/wpcom/features/fix-block-invalidation-errors.js"><code>fix-block-invalidation-errors</code></a>:
+      Performs block attempt block recovery on editor load if validation errors are detected.
+    </td>
+    <td>WP Admin</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/wpcom/features/reorder-block-categories.js"><code>reorder-block-categories</code></a>:
+      Moves Jetpack and CoBlocks Block Categories below Core Categories.
+    </td>
+    <td>WP Admin</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/wpcom/features/tracking.js"><code>tracking</code></a>:
+      Adds analytics around specific user actions.
+    </td>
+    <td>WP Admin</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/calypso/features/iframe-bridge-server.js"><code>iframe-bridge-server</code></a>:
+      Server-side handlers of the different communication channels we establish with the client-side when Calypso loads the iframed block editor. See <a href="../../client/gutenberg/editor/calypsoify-iframe.tsx"><code>calypsoify-iframe.jsx</code></a>.
+    </td>
+    <td>WP Admin</td>
+    <td>❌</td>
+    <td>❌</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>✅</td>
+  </tr>
+  <tr>
+    <td rowspan="2">
+      <a href="./src/calypso/features/tinymce.js"><code>tinymce</code></a>:
+      Tiny MCE plugin that overrides the core media modal used on classic blocks with the Calypso media modal.
+    </td>
+    <td>WP Admin</td>
+    <td>❌</td>
+    <td>❌</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>Calypso</td>
+    <td>✅</td>
+    <td>✅</td>
+    <td>✅</td>
+  </tr>
+</table>
+
+## Structure
+
+Features in the `wpcom-block-editor/src` folder loosely follow this structure:
 
-### Common utilities
-
-- `disable-nux-tour.js`: Disable the pop-up tooltip tour that is displayed on first use.
-- `rich-text.js`: Extensions for the Rich Text toolbar with the Calypso buttons missing on Core (i.e. underline, justify).
-- `fix-block-invalidation-errors.js`: (Atomic/Simple) Performs block attempt block recovery on editor load if validation errors are detected.
-- `switch-to-classic.js`: Append a button to the "More tools" menu for switching to the classic editor.
-- `tracking`: Adds analytics around specific user actions for Simple, Jetpack and Atomic sites.
-- `reorder-block-categories`: (Atomic/Simple) Moves Jetpack and CoBlocks Block Categories below Core Categories
-- `unregister-experimental-blocks`: Removes some experimental blocks from the Gutenberg Plugin.
-
-### Calypso utilities
-
-- `iframe-bridge-server.js`: Server-side handlers of the different communication channels we establish with the client-side when Calypso loads the iframed block editor. See [`calypsoify-iframe.jsx`](https://github.com/Automattic/wp-calypso/blob/master/client/gutenberg/editor/calypsoify-iframe.jsx).
-- `tinymce.js`: Tiny MCE plugin that overrides the core media modal used on classic blocks with the Calypso media modal.
+```
+.
+└── bundle-name/
+	├── features    ← Directory with all features that are bundled under this group.
+	├── editor.js   ← script importing features that will be loaded only in the editor.
+	├── editor.scss ← stylesheet importing styles of features that will be loaded only in the editor.
+	├── view.js     ← script importing features that will be loaded in both editor and front-end.
+	└── view.scss   ← stylesheet importing styles of features that will loaded in both editor and front-end.
+```
 
 ## Build
 

apps/wpcom-block-editor/src/calypso/editor.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import './features/iframe-bridge-server';
+
+/**
+ * Style dependencies
+ */
+import './editor.scss';

apps/wpcom-block-editor/src/calypso/editor.scss

@@ -0,0 +1 @@
+@import './features/iframe-bridge-server';

apps/wpcom-block-editor/src/calypso/iframe-bridge-server.js → apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-/* global calypsoifyGutenberg */
+/* global calypsoifyGutenberg, Image, MessageChannel, MessagePort */
 
 /**
  * External dependencies
@@ -17,7 +17,7 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import { inIframe, sendMessage } from './utils';
+import { inIframe, sendMessage } from '../utils';
 
 const debug = debugFactory( 'wpcom-block-editor:iframe-bridge-server' );
 
@@ -72,7 +72,7 @@ function triggerConversionPrompt( calypsoPort ) {
  */
 function transmitDraftId( calypsoPort ) {
 	// Bail if we are not writing a new post.
-	if ( ! /wp-admin\/post-new.php/.test( location.href ) ) {
+	if ( ! /wp-admin\/post-new.php/.test( window.location.href ) ) {
 		return;
 	}
 

apps/wpcom-block-editor/src/common/style.scss → apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss

@@ -31,7 +31,3 @@ body.is-fullscreen-mode {
 .components-notice-list {
 	z-index: 29; // Ensure notices are placed behind the editor header (z-index: 30).
 }
-
-.has-text-align-justify {
-	text-align: justify;
-}

apps/wpcom-block-editor/src/calypso/features/tinymce.js

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+/**
+ * External dependencies
+ */
+import tinymce from 'tinymce/tinymce';
+
+/**
+ * Internal dependencies
+ */
+import { inIframe, sendMessage } from '../utils';
+
+function replaceMediaModalOnClassicBlocks() {
+	if ( ! inIframe() ) {
+		return;
+	}
+
+	tinymce.PluginManager.add( 'gutenberg-wpcom-iframe-media-modal', editor => {
+		editor.addCommand( 'WP_Medialib', () => {
+			sendMessage( {
+				action: 'classicBlockOpenMediaModal',
+				editorId: editor.id,
+			} );
+		} );
+
+		editor.buttons.wp_img_edit.onclick = () => {
+			const img = editor.selection.getNode();
+			const imageId = img.className.match( /wp-image-(\d+)/ )[ 1 ];
+			sendMessage( {
+				action: 'classicBlockOpenMediaModal',
+				editorId: editor.id,
+				imageId: imageId,
+			} );
+		};
+	} );
+}
+
+replaceMediaModalOnClassicBlocks();

apps/wpcom-block-editor/src/calypso/tinymce.js

@@ -1,36 +1,4 @@
-/**
- * External dependencies
- */
-import tinymce from 'tinymce/tinymce';
-
 /**
  * Internal dependencies
  */
-import { inIframe, sendMessage } from './utils';
-
-function replaceMediaModalOnClassicBlocks() {
-	if ( ! inIframe() ) {
-		return;
-	}
-
-	tinymce.PluginManager.add( 'gutenberg-wpcom-iframe-media-modal', editor => {
-		editor.addCommand( 'WP_Medialib', () => {
-			sendMessage( {
-				action: 'classicBlockOpenMediaModal',
-				editorId: editor.id,
-			} );
-		} );
-
-		editor.buttons.wp_img_edit.onclick = () => {
-			const img = editor.selection.getNode();
-			const imageId = img.className.match( /wp-image-(\d+)/ )[ 1 ];
-			sendMessage( {
-				action: 'classicBlockOpenMediaModal',
-				editorId: editor.id,
-				imageId: imageId,
-			} );
-		};
-	} );
-}
-
-replaceMediaModalOnClassicBlocks();
+import './features/tinymce';

apps/wpcom-block-editor/src/calypso/utils.js → apps/wpcom-block-editor/src/calypso/utils/index.js

@@ -2,7 +2,7 @@
  * Checks self and top to determine if we are being loaded in an iframe.
  * Can't use window.frameElement because we are being embedded from a different origin.
  *
- * @return {Boolean} Whether this script is loaded in a iframe.
+ * @returns {boolean} Whether this script is loaded in a iframe.
  */
 export function inIframe() {
 	try {
@@ -16,7 +16,7 @@ export function inIframe() {
  * Sends a message object to the parent. The object is extended to include a type that
  * identifies the source as Gutenberg related.
  *
- * @param {Object} message object containing the action to be performed on the parent and any require options
+ * @param {object} message object containing the action to be performed on the parent and any require options
  */
 export function sendMessage( message ) {
 	if ( ! window || ! window.parent ) {