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, joemcgill, peterwilsoncc, presstoke, mamaduka.

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

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

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.

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.

@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.

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.

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?

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.

@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.

The capability check makes sense, but I don't know if nonce is necessary. Unlike theme previews, this flag just renders the site front-end like iframe (which is already accessible when public); it doesn't override anything else.

I would be happy if this PR is committed before Beta 3. I think the following two suggestions could be considered in a follow-up:

• Use inline JS to make interactive elements unclickable instead of the onLoad prop of the iframe element
• Use a nonce for the value of the wp_site_preview query string parameter

The capability check makes sense, but I don't know if nonce is necessary. Unlike theme previews, this flag just renders the site front-end like iframe (which is already accessible when public); it doesn't override anything else.

Fair point, that works for me.

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 60003
GitHub commit: eaeda35

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.