Site Editor: Add get parameter to hide admin bar in classic theme site preview

[t-hamano]

Trac ticket: https://core.trac.wordpress.org/ticket/63076

This PR hides the admin bar if the get parameter wp_site_preview=1 is present. This PR sets IFRAME_REQUEST constant if the get parameter wp_site_preview=1 is present.

This PR is needed to hide the admin bar from the classic theme site preview in the site editor.

This PR cannot yet be tested in the site editor, but can be tested on the frontend.

• Admin bar is not visible:
  • http://localhost:8889/?wp_site_preview=1
• Admin bar is visible:
  • http://localhost:8889/
  • http://localhost:8889/?wp_site_preview=2

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, presstoke.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

I'm wondering whether the JS code that disables interactive elements should also be moved to this PR and output as an inline JS.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[stokesman]

I'm wondering whether the JS code that disables interactive elements should also be moved to this PR and output as an inline JS.

I think it’s a good idea because otherwise the elements can be interactive for a moment before the load event. Yet I also think we may want the flexibility to modify that logic without having to change core code. If so, we might make the inline JS merely post a message that the parent window can listen for.

[t-hamano]

@stokesman Thanks for the feedback!

I'm not familiar with the approach using postMessage, so could you provide a sample implementation?

By the way, I came up with a different approach that doesn't implement any custom JS code and simply wraps the iframe element in a Disabled component, what do you think?

This approach is used in various places, including the pattern preview.

[t-hamano]

By the way, I came up with a different approach that doesn't implement any custom JS code and simply wraps the iframe element in a Disabled component, what do you think?

This approach didn't work 😅 Because the <Disable> makes the iframe content unscrollable.

[t-hamano]

I'm wondering whether the JS code that disables interactive elements should also be moved to this PR and output as an inline JS.

Perhaps this can be addressed in a follow-up?

[stokesman]

I'm not familiar with the approach using postMessage, so could you provide a sample implementation?

The inline script would be something like this:

	add_action( 'wp_print_footer_scripts', function() {
		echo '<script>', <<<JS
			if ( window.parent ) {
				window.parent.postMessage( 'preview dom available' );
			}
		JS, '</script>';
	} );

The only important part of that is that it appears after any other elements we’ll want to manipulate through DOM methods.

Then the site-editor would listen for the message with something like this:

	const messageEffect = useRefEffect(
		( node ) => {
			const onMessage = ( event ) => {
				if (
					event.origin === siteUrl &&
					event.data === 'preview dom available'
				) {
					// Make interactive elements unclickable…
				}
			};
			const { defaultView } = node.ownerDocument;
			defaultView.addEventListener( 'message', onMessage );
			return () =>
				defaultView.removeEventListener( 'message', onMessage );
		},
		[ siteUrl ]
	);
	// attaching the ref callback to the iframe would follow…

That has to be done through the ref callback since it seems React doesn’t do onMessage. I'll go ahead and post a working example diff in the thread that started this.

[t-hamano]

@stokesman We found that some plugins load code into the preview. To solve this problem, it seems best to define IFRAME_REQUEST instead of filtering show_admin_bar hook. See trac ticket for more details.