Hide WordPress logo animation for preview

[ducngyn]

Since the update to 4.1.0 #11022 there is now a WordPress logo animation appearing after hitting the preview button.

Is there any way to hide/change/remove this animation?
Maybe you could provide a filter to alter the animation.

I tried to access the CSS properties from within my own plugin, but to no avail.

[swissspidy]

The interstitial animation is defined here: https://github.com/WordPress/gutenberg/blob/f090e84828b18f2b1a21bebf68a9a1bdd85324de/packages/editor/src/components/post-preview-button/index.js. It's pretty much hardcoded.

Why do you want to remove the animation though?

Personally I like this little UX addition.

[ducngyn]

Because it is a Wordpress brand logo and I would like to put in my own logo, if that's possible.

[greatislander]

It may also be worth considering a reduced-motion alternative to respond to https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

[noisysocks]

I've written a proposal for a filter which would let one customise this UI in #12238.

[ducngyn]

Thanks a lot!
But is there a way to work around this before the filter is released?
I can't access the .editor-post-preview-button__interstitial-message class from any css-file and !important is also not working.

[noisysocks]

I'm not sure that there's a way to do this because the Preview button opens a new window with HTML that's built entirely from within the Preview button component.

A very very hacky approach might be to override window.open() with a function that injects your custom CSS:

var _open = window.open;
window.open = function() {
	var previewWindow = _open.apply( this, arguments );
	if ( /^wp-preview/.test( previewWndow.name ) ) {
		var style = document.createElement( 'style' );
		style.type = 'text/css';
		style.innerText = 'body { background: #222; } /*... more css ..*/';
		previewWindow.document.head.appendChild( style );
	}
	return previewWindow;
};