Skip to content

Commit

Permalink
WP.com block editor: Exclude features from Jetpack sites (#38248)
Browse files Browse the repository at this point in the history
We shouldn't expose all the common features from `wpcom-block-editor` to Jetpack sites, since some of them are intended specifically for WP.com users such as:
- Unregister experimental blocks.
- Reorder CoBlocks blocks.

This PR seeks to fix that by splitting the `common` features into 2 new bundles:
- `default`: loaded on all sites. 
- `wpcom`: loaded only on WP.com sites.

The `common` bundle is no longer maintained and it is replaced by the `default` bundle. Note that the `common` build needs to keep being served on `widgets.wp.com` since it will be still used by Jetpack and Atomic sites running Jetpack 8.0 or earlier.
  • Loading branch information
mmtr authored Dec 18, 2019
1 parent 64df89c commit 0fe9f9d
Show file tree
Hide file tree
Showing 28 changed files with 306 additions and 206 deletions.
160 changes: 140 additions & 20 deletions apps/wpcom-block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
9 changes: 9 additions & 0 deletions apps/wpcom-block-editor/src/calypso/editor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* Internal dependencies
*/
import './features/iframe-bridge-server';

/**
* Style dependencies
*/
import './editor.scss';
1 change: 1 addition & 0 deletions apps/wpcom-block-editor/src/calypso/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import './features/iframe-bridge-server';
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable import/no-extraneous-dependencies */
/* global calypsoifyGutenberg */
/* global calypsoifyGutenberg, Image, MessageChannel, MessagePort */

/**
* External dependencies
Expand All @@ -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' );

Expand Down Expand Up @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
38 changes: 38 additions & 0 deletions apps/wpcom-block-editor/src/calypso/features/tinymce.js
Original file line number Diff line number Diff line change
@@ -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();
34 changes: 1 addition & 33 deletions apps/wpcom-block-editor/src/calypso/tinymce.js
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 ) {
Expand Down
7 changes: 0 additions & 7 deletions apps/wpcom-block-editor/src/common/disable-nux-tour.js

This file was deleted.

This file was deleted.

11 changes: 0 additions & 11 deletions apps/wpcom-block-editor/src/common/index.js

This file was deleted.

Loading

0 comments on commit 0fe9f9d

Please sign in to comment.