Add filter for preview interstitial markup

[swissspidy]

Description

This uses applyFilters to make the preview interstitial markup filterable.

Fixes #12238.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[jorgefilipecosta]

I tried the filter with the following sample and it worked correctly:

wp.hooks.addFilter( 'editor.interstitialMessage', 'myplugin/preview', function() {
    return '<b>Post preview is being generated! 💃</b>';
} );

Would it be possible to add some docs to the filter?

[swissspidy]

@jorgefilipecosta You mean in the handbook?

[chrisvanpatten]

@swissspidy I don't know whether Jorge meant inline docs or in the handbook but this page would be a good spot for a note either way: https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/filters/editor-filters.md

:)

[swissspidy]

Ugh. We really need to automate that stuff.

[jorgefilipecosta]

The filter works great and the sample tests correctly. I think this is the right place to document the filter. The code looks great to me.
cc: @gziolo as he has a more high-level view on our extensibility efforts, and may have some comments on this new API.

[gziolo]

editor.interstitialMessage - my only concern would be the name of this filter. it doesn't contain any information about the context. What do you think about:
editor.PostPreview.interstitialMarkup

It is referenced much often as markup than message in the PR.

[swissspidy]

editor.PostPreview.interstitialMarkup sounds great. Will change it accordingly.

[gziolo]

I scheduled this PR for 4.8 (WordPress 5.0.2) as it is a new feature.

[gziolo]

Nice one, thanks for iterations. It looks good to go 👍

[leomuniz]

Hey guys.
You provided an example of how to use this filter, but I couldn't make it probably due to my lack of experience with Gutenberg. So I would appreciate if someone can offer a more complete solution than only the JS part.

I created a very simple plugin with 2 files only and without React to handle this:

my-plugin.php

<?php
/**
 * Plugin Name: My First Plugin
 * Plugin URI: http://www.mywebsite.com/my-first-plugin
 * Description: The very first plugin that I have ever created.
 * Version: 1.0
 * Author: Your Name
 * Author URI: http://www.mywebsite.com
 */

function enqueue_gutenberg_js() {
		wp_enqueue_script(
				'replace-animation-script',
				plugins_url( 'my-plugin.js', __FILE__ ),
				array( 'wp-element', 'wp-editor', 'wp-hooks' ),
				filemtime( plugin_dir_path( __FILE__ ) . '/my-plugin.js' )
		);
	}

 add_action( 'enqueue_block_editor_assets',  'enqueue_gutenberg_js' );

my-plugin.js

var customPreviewMessage = function() {
    return '<b>Post preview is being generated!</b>';
};

wp.hooks.addFilter( 'editor.PostPreview.interstitialMarkup', 'my-plugin/custom-preview-message', customPreviewMessage );

Of course it's not working and I'm still seeing the default Wordpress logo animation with the same text below it (otherwise I wouldn't be here). But my JS file is loaded successfully when loading Gutenberg Editor (I also added a console.log('test'); after wp.hooks.addFilter and it worked). There is no JS error in console and neither in PHP log files. Does anyone knows what I'm doing wrong? I can think about some possibilities like:

• Is the enqueue_block_editor_message the proper hook?
• Are wp-element, wp-editor and wp-hooks the needed dependencies?
• Is React needed somehow? Even with my JS code being executed with no errors?

Thank you very much

[swissspidy]

@leomuniz would you mind creating a new issue for this? Otherwise this gets easily lost

[leomuniz]

Just opened. Tried to use as many as keywords possible to facilitate other people with similar problem: How to change or hide the Wordpress Animated Logo when loading a a post/page preview #16326

Thank you very much