wp_editor() visual tab does not work when used in meta box

[kblizeck]

Description

Related to #5365 & #3302

Visual tab of wp_editor appears blank, and without ability to focus when used within a metabox
Text tab shows HTML content
If you click Text tab then refresh the page, the Visual tab then loads correctly

Step-by-step reproduction instructions

1. add_action for Meta box in page
2. add wp_editor field
3. Visit page editor - Visual tab blank
4. Choose Text tab, expected HTML content there
5. Refresh page
6. Visual Tab now loaded/populated as expected
7. Click to another page, back to original page and Visual Tab is blank and un-selectable again

Screenshots, screen recording, code snippet

add_action( 'add_meta_boxes', [ $this, 'add_meta_box' ] );

public function add_meta_box() {
    add_meta_box(
	'careers-meta-box',
	'Job Post Information',
	[ $this, 'job_post_info' ],
	'careers',
	'normal',
	'high',
	null
    );
}

public function job_post_info( $post ) {
?>
  <div class="components-base-control">
	  <?php wp_nonce_field( 'add_meta_box_careers', 'add_meta_box_careers_nonce' ); ?>
	  <div>
		  <label class="components-base-control__label" for="careers_meta_neon_user_id"><?php echo esc_html( 'Job Benefits' ); ?></label>
      <?php
    	  $jobBenefits = get_post_meta( $post->ID, 'careers_meta_benefits', true );
    	  wp_editor(
  			  wp_kses_post( $jobBenefits ),
  			  'careers_meta_benefits',
  			  array('media_buttons' => false, 'textarea_name' => 'careers_meta_benefits')
  		  );
  	  ?>
	  </div>
  </div>
<?php
}

Initial load of page - Visual tab empty

Text tab view

Refresh while Text tab selected - now Visual appears as expected

Environment info

• WordPress Version 5.9.3
• Gutenberg plugin not installed - just using the default Gutenberg that's included in WordPress core

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

[t-hamano]

Hi @kblizeck,

Sorry for late reply.

I've tested it, but I can't reproduce this issue.
If you have not yet solved this problem, could you try the following?

• Activate a default theme (Twenty Twenty Two or Twenty Twenty One)
• Disable all plugins

Then I prepared a minimal code for testing.
Please try this code as well, as it should work if pasted into the theme functions.php.

// Add meta box
add_action( 'add_meta_boxes', function() {
	add_meta_box(
		'my_meta',
		'My Meta',
		function ( $post ) {
			wp_nonce_field( 'my_nonce', 'my_nonce' );
			$my_editor = get_post_meta( $post->ID, 'my_editor', true );
			wp_editor( wp_kses_post( $my_editor ), 'my_editor' );
		}
	);
} );

// Update meta
add_action('save_post', function( $post_id ) {
	if ( ! isset( $_POST['my_nonce'] ) ) return;
	if ( ! wp_verify_nonce( $_POST['my_nonce'], 'my_nonce' ) ) return;
	update_post_meta( $post_id, 'my_editor', wp_kses_post( $_POST['my_editor'] ) );
} );

// Register meta
add_action( 'init', function() {
	register_post_meta( 'post', 'my_editor', [
		'show_in_rest' => true,
		'single' => true,
		'type' => 'string',
	] );
} );

Capture

3bceeb98c887baa9d8148fe21a8e48ea.mp4

Environment info

• Windows 11
• WordPress Version: 6.0.1
• Gutenberg Version 13.7.0-rc.2 (with or without)

[ansargafetdinov]

Solved the problem by adding define('CONCATENATE_SCRIPTS', false); wp-config.php
Server: nginx/1.18.0
Php: 7.4.3
WordPress Version: 6.0.1
Gutenberg Version: default, after installing wordpress

[t-hamano]

Glad to hear that it has been resolved.

If the CONCATENATE_SCRIPTS constant is set to false, JavaScript will not be concatenated as described in Common APIs Handbook.

The fact that this solved the problem means that either the theme or the plugin contained a JavaScript error, which led to this issue.

To get to the root of the problem, you can check the console tab of your browser to see what is causing the issue.

I think this is not Gutenberg issue, so I'll close this issue.
If you have any problems, please do not worry about it and reopen it.

[hipwebdesign]

@t-hamano Using a fresh WP install with the default Twenty Twenty-Three theme and no plugins, the console is producing the following error on any post/page edit screen:

Block validation: Block validation failed for `core/group` ( 
Object { name: "core/group", icon: {…}, keywords: (4) […], attributes: {…}, providesContext: {}, usesContext: [], supports: {…}, styles: [], variations: (3) […], save: save(e)
, … }
 ).

Content generated by `save` function:

<div class="wp-block-group alignfull has-contrast-color has-text-color" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--50)"></div>

Content retrieved from post body:

<div class="wp-block-group alignfull has-contrast-color has-text-color" style="min-height:40vh;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--50)">



</div>

If this error is blocking wp_editor from rendering correctly, it would seem something in the WP core is to blame.

[t-hamano]

@hipwebdesign
I think the problem you are encountering is the same problem reported in #48911.

[Colir]

I can confirm that the setting "define('CONCATENATE_SCRIPTS', false);" definitely solve this problem.
There is no theme or plugin js error...