Editor: Contact Form - Basic TinyMCE plugin and create/edit dialog.

[rodrigoi]

This is the starting point for building a new contact form builder for Calypso's editor. This first incremental update includes a new contact-form-view for wpcom-view that will handle the contact form preview and a new contact-form TinyMCE plugin, to handle the create/edit dialog, state, serialization and deserialization.

Changes include:

Added a new feature flag, post-editor/contact-from, so this feature is only available in development mode. All the changes involving the feature flag will be reverted once this feature is production ready.

Changes on client/components/tinymce/index.jsx to add the new contact-form plugin and a new toolbar button.

Changes on client/components/tinymce/plugins/wpcom-view/views.js to load the new contact-form-view when [contact-form] is found.

Tentative styling of the toolbar button is on client/components/tinymce/style.scss and basic layout for the preview is on public/tinymce/skins/wordpress/wp-content.css.

what is new

A new component, contact-form-view, was created to render the form preview and lives on wpcom-view. It implements a series of static methods to match the [contact-form] shortcode, serialize it for the HTML view of the editor and handle the edit command.

A new TinyMCE plugin, contact-form, is in charge of setting up the editor and render the dialog to build and manage the form settings.

what is missing

To keep the size of this pull request small, the dialog just creates a default form. Also, the form preview is missing. Some placeholder messages are not being translated.

[aduth]

Hey @rodrigoi, glad to see that this is being worked on!

As you're developing the feature, please be mindful of the JavaScript coding guidelines for the Calypso project. Specifically, I'm observing quite a few issues related to spacing, line length, and variable declarations.

With regards to implementing the visible rendering of the contact form, you may want to take a look at the wpcom-view TinyMCE plugin, which currently manages rendering of galleries and embeds. I assume similar logic could be reused here and may help to save you some time in implementing the contact form.

Feel free to message me directly or drop a comment here if you have any questions.

[rodrigoi]

@aduth don't worry. This code is a 1-1 port from the cloudup editor, which didn't follow Calypso's guidelines. And it was only committed for the purpose of demonstrating how weird it looks and works on the new editor.

I'm working on an implementation that follows pretty much the same principles as the wpcom-view plugin. I'll let you know if I have any questions. Thanks!

[rodrigoi]

@aduth I have the first batch of changes ready for review. Let me know if you are the right person to review this or if I should assign it to somebody else. Thanks!

[aduth]

Not sure whether we'll expand this to include more feature-flagged items, but in the case that we do, it might be more maintainable if we were to construct it as an array and splice the feature-flagged items:

let toolbar1 = [ 'wpcom_add_media', 'formatselect', 'italic' /* ... */ ];
if ( config.isEnabled( 'post-editor/contact-form' ) ) {
    toolbar1.splice( 1, 0, 'wpcom_add_contact_form' );
}

tinymce.init( {
    toolbar1: toolbar1.join()
} );

[rodrigoi]

there won't be a need for more feature flags. This code is temporal and will be reverted as soon as this goes into production. I'd rather keep it as it is if you are ok with this.

[aduth]

there won't be a need for more feature flags.

What I had in mind was not exclusive to the contact form. We may have a need to expand upon this for other editor-related features to be added to the toolbar. I'm fine with addressing this when the time comes.

[rodrigoi]

In that case, I'll make the change.

[rodrigoi]

@aduth thanks for your feedback. Let me know if you have any more comments 😄

[aduth]

Was there a reason you chose to track visibility in state, rather than exclusively as a prop managed by the plugin? This is how it's managed in the wpcom-help plugin, which is preferable over trying to manage it separately as both a prop and state:

https://github.com/Automattic/wp-calypso/blob/master/client/components/tinymce/plugins/wpcom-help/plugin.js

[rodrigoi]

No particular reason. All the plugins that open a modal dialog do it slightly differently, and this is done much like to wplink.
I've changed it to match wpcom-help and wpcom-charmap.

[rodrigoi]

@aduth Feedback addressed. What do you think about changing the name of the plugin to wpcom-contact-form?

[aduth]

What do you think about changing the name of the plugin to wpcom-contact-form?

The prefix feels a bit superfluous, but I suppose it helps us to distinguish any potential third-party plugins we incorporate, and is consistent with other plugin naming. Might be a good idea.

Looks like this branch needs a rebase.

[aduth]

After a rebase, this looks good to go! 👍