Classic theme preview: Potential issues with JavaScript loaded by themes

[carolinan]

Description

When a classic theme adds the theme support for editor-styles, a menu item called "Design" replaces the Pattern menu, and following this link shows the dark sidebar and an iframe with the site embedded.
The preview of the front of the site replaces the preview of the editor that is shown for block themes.

Many themes may load custom JavaScript, potentially causing errors on this screen.
For example, the theme Hello Elementor adds JavaScript for their admin notice, and there is a console error.

How can themes detect that the user is viewing this screen, and prevent loading JavaScript that is meant for other admin pages?
It does not seem possible with https://developer.wordpress.org/reference/functions/get_current_screen/

Step-by-step reproduction instructions

Activate a classic theme with support for editor-styles.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[t-hamano]

Let's add this to the 6.8 project board and explore how we can solve it.

[t-hamano]

Many themes may load custom JavaScript, potentially causing errors on this screen.
For example, the theme Hello Elementor adds JavaScript for their admin notice, and there is a console error.

I researched this issue and found that it has nothing to do with the classic theme preview directly. For example, if you activate this theme and reload your browser on the Patterns page (http://localhost:8888/wp-admin/site-editor.php?p=%2Fpattern) where there is no theme preview, you will get the same error.

The underlying issue is that the admin_notices action hook doesn't work properly in the site editor, and this issue has potentially been around for a long time.

It may be necessary to make the admin_notices hook work in the site editor, but since the admin_notices hook is PHP-based, this may be difficult.

The only workaround for now is to have your theme or plugin skip the site editor:

<?php
function my_admin_notices() {
	global $pagenow;
	if ( 'site-editor.php' === $pagenow ) {
		return;
	}
	?>
	<div class="notice">Show something...</div>
	<?php
}
add_action( 'admin_notices', 'my_admin_notices' );

Either way, I would like to remove this issue from the 6.8 project board as this issue is not new.

Also, the reason I came to this conclusion was that I investigated Hello Elementor's implementation to try to isolate where the issue was. If you want to learn more about what's going on, please see my findings below.

Details

• This theme injects an admin notification here, which consists of an element with a CSS class of .notice, and a script that attaches an event to it.
• In the site editor, the core common.js is loaded, which contains the handling of this admin notice.
• This script tries to move elements with a CSS selector such as .notice to after $headerEnd. Here, $headerEnd resolves to an element called h1.wp-heading-inline.
• The h1.wp-heading-inline element exists inside an element with an id of #site-editor. This means that the following HTML is generated:

  <div class="edit-site" id="site-editor">
  	<div class="wrap hide-if-js site-editor-no-js">
  		<h1 class="wp-heading-inline">Edit site</h1>
  		<!-- The notification element moved by common.js -->
  		<div class="notice updated is-dismissible hello-elementor-notice hello-elementor-install-elementor">		
  		</div>
  	</div>
  </div>

• The React app, i.e. the site editor, is rendered via the initializeEditor. Its root is the element with an id of #site-editor.
• As a result, the children of the element with an id of #site-editor are overwritten by the React app. This causes the notice injected by the Hello Elementor theme to disappear:

  <div class="edit-site" id="site-editor">
  	<div class="edit-site-layout">
  	</div>
  	<div style="display: none;"></div>
  </div>

• Now, an event is attempted to be attached to the element added by the admin_notices hook here. However, the element no longer exists because it has been overwritten in the React app, so an error occurs.