When a post is saved, check for tinymce and save any editors. (#12568)

* When a post is saved, check for tinymce and save any editors.

* Importing tinymce and using tinyMCE vs the object stored in window.tinymce.

* Updated version number and changelog.

* no longer importing tinymce since we use the tinyMCE global. tinyMCE.triggerSave works now. checking if tinyMCE exists before making the call just in case.

* Using typeof to check for tinyMCE and fixed issues brought up in travis run.

* using window.tinyMCE again to avoid warning RE undefined var

* Restore the package.json version.

* Add e2e tests for the custom wp_editor metaboxes

packages/edit-post/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.1.5 (Unreleased)
+
+### Bug Fixes
+ - Fix saving WYSIWYG Meta Boxes
+
 ## 3.1.4 (2018-11-30)
 
 ## 3.1.3 (2018-11-30)

packages/edit-post/src/store/effects.js

@@ -72,6 +72,11 @@ const effects = {
 		} );
 	},
 	REQUEST_META_BOX_UPDATES( action, store ) {
+		// Saves the wp_editor fields
+		if ( window.tinyMCE ) {
+			window.tinyMCE.triggerSave();
+		}
+
 		const state = store.getState();
 
 		// Additional data needed for backwards compatibility.

test/e2e/specs/__snapshots__/wp-editor-meta-box.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WP Editor Meta Boxes Should save the changes 1`] = `"<p>Typing in a metabox</p>"`;

test/e2e/specs/wp-editor-meta-box.test.js

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import { newPost, publishPost } from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+describe( 'WP Editor Meta Boxes', () => {
+	beforeAll( async () => {
+		await activatePlugin( 'gutenberg-test-plugin-wp-editor-meta-box' );
+		await newPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin( 'gutenberg-test-plugin-wp-editor-meta-box' );
+	} );
+
+	it( 'Should save the changes', async () => {
+		// Add title to enable valid non-empty post save.
+		await page.type( '.editor-post-title__input', 'Hello Meta' );
+
+		// Type something
+		await page.click( '#test_tinymce_id-html' );
+		await page.type( '#test_tinymce_id', 'Typing in a metabox' );
+		await page.click( '#test_tinymce_id-tmce' );
+
+		await publishPost();
+
+		await page.reload();
+
+		await page.click( '#test_tinymce_id-html' );
+		const content = await page.$eval(
+			'#test_tinymce_id',
+			( textarea ) => textarea.value
+		);
+
+		expect( content ).toMatchSnapshot();
+	} );
+} );

test/e2e/test-plugins/wp-editor-metabox.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, WP Editor Meta Box
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-wp-editor-metabox
+ */
+
+add_action( 'add_meta_boxes', function(){
+	add_meta_box( 'test_tinymce', 'Test TinyMCE', function( $post ){
+		 $field_value = get_post_meta( $post->ID, 'test_tinymce', true );
+		 wp_editor( $field_value, 'test_tinymce_id', array(
+			'wpautop'       => true,
+			'media_buttons' => false,
+			'textarea_name' => 'test_tinymce',
+			'textarea_rows' => 10,
+			'teeny'         => true
+		) );
+	}, null, 'advanced', 'high' );
+});
+add_action( 'save_post', function( $post_id ){
+	if ( ! isset( $_POST['test_tinymce'] ) ) {
+		return;
+	}
+	update_post_meta( $post_id, 'test_tinymce', $_POST['test_tinymce'] );
+});