wp_editor() conflict when meta description or social description field is blank

[maurisrx]

• I've read and understood the contribution guidelines.
• I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

To Reproduce

Step-by-step reproduction instructions

1. Log in as an administrator.
2. Activate only Yoast SEO (wordpress-seo) plugin and deactivate other plugins.
3. Activate storefront theme.
4. Enable Yoast SEO Open Graph data & X card data settings from this URL wp-admin/admin.php?page=wpseo_page_settings
5. To add wp_editor() instance on front end, add the following snippet to add tinymce editor to a frontend content. It can be added via code snippets plugin or active theme’s functions.php:

add_filter( 'the_content', function( $content ) {
  ob_start();
  
  $content   = '';
  $editor_id = 'test';
  $settings  = array(
    'media_buttons' => false,
    'textarea_rows' => 10,
     'required'      => 'required',
    'quicktags'     => false,
  );
  
  wp_editor( $content, $editor_id, $settings );
  
  return $content . ob_get_clean();
} );

6. Visit any WP post on frontend.
7. Check the icons on the WP admin toolbar and they will not load properly.

8. This also cause conflicts with other plugins that add wp_editor() instance on the frontend.

Expected results

1. The icons on the WP load properly.

Actual results

1. The icons on the WP load don't load properly.

Steps to fix the issue

I've looked at the Yoast SEO source code and found that doing these steps will fix the issue.

1. Go to src/presenters/twitter/description-presenter.php:32 and src/presenters/open-graph/description-presenter.php:33 inside Yoast SEO (wordpress-seo) plugin file.
2. Change the $this->presentation->twitter_description to $this->presentation->context->indexable->twitter_description and $this->presentation->open_graph_description to $this->presentation->context->indexable->open_graph_description in the files respectively.
3. I checked in the both files that $this->presentation refers to Yoast\WP\SEO\Presentations\Indexable_Post_Type_Presentation object.
4. Alternatively, removing both Open_Graph\Description at src/integrations/front-end-integration.php:97 and Twitter\Description at src/integrations/front-end-integration.php:127 also fix the issue.

Screenshots, screen recording, code snippet

add_filter( 'the_content', function( $content ) {
  ob_start();
  
  $content   = '';
  $editor_id = 'test';
  $settings  = array(
    'media_buttons' => false,
    'textarea_rows' => 10,
     'required'      => 'required',
    'quicktags'     => false,
  );
  
  wp_editor( $content, $editor_id, $settings );
  
  return $content . ob_get_clean();
} );

Technical info

• If relevant, which editor is affected (or editors):

• Block Editor
• Gutenberg Editor
• Elementor Editor
• Classic Editor
• Other:

• Which browser is affected (or browsers):

• Chrome
• Firefox
• Safari
• Other:

Used versions

• Device you are using: Docker setup in Macbook M1 Pro
• Operating system: Linux in Docker, MacOS in device
• PHP version: PHP 8.2.17
• WordPress version: 6.5.2
• WordPress Theme: storefront
• Yoast SEO version: 22.5
• Gutenberg plugin version:
• Elementor plugin version:
• Classic Editor plugin version:
• Relevant plugins in case of a bug:

[josevarghese]

Hi @maurisrx

Thanks for using the Yoast SEO plugin and also for creating the issue.

I enabled the Open graph and X card via the Yoast SEO settings page and added the filter function you have shared above on the active theme's function.php. I initially noticed this issue even without the Yoast SEO plugin installed. However, when activating the Yoast SEO plugin, I noticed the icons on the front end from WordPress are loading correctly.

I also noticed that the TinyMCE editor is loading on the front end, and the Yoast and other WP icons are loading without any issues after that. See the screenshot below for your reference:

So, can you please try to reactivate the Yoast SEO plugin to check whether it helps?

[maurisrx]

Thanks @josevarghese for the test and reply!

I mistakenly assumed the wrong theme it has conflict with. The actual theme the issue has conflict with is storefront. Do you think I should also contact the Storefront theme support to let them know the issue?

[josevarghese]

Hi @maurisrx

I again tested using the Storefront theme and noticed that the admin menu bar icons are loading without any issues.
. So can you try this on another website, which is hosted on another server? As you already know, you can create free sites using the instawp.com and Local WP

Details of the testing environment at which I tested:
PHP version: 8.2.10
WP version: 6.5.2
Yoast SEO: 22.5
Web server: nginx/1.16.0

[maurisrx]

@josevarghese Thanks for getting back to me. Let me try to create a site there to replicate the issue.

[maurisrx]

@josevarghese I managed to replicate the issue consistently in an instawp site with storefront and astra theme:

Here are the testing environment details:

PHP version: 8.0.29
WP version: 6.5.2
Yoast SEO: 22.5

Is there a way I can give you the login link to the instawp site privately?

[josevarghese]

Hi @maurisrx

Thanks for getting back to us. Now, I can replicate the issue on some themes like Astra and Twenty Twenty-Four. However, the issue is not reproducible on themes like Twenty Twenty-Two and Twenty Twenty-Three.

Also, I noticed why I could not replicate the issue before on the theme 'Storefront' as I added a meta description via the Yoast SEO > Settings > Content types > Post > meta description field. It seems like the issue occurs only when none of the values are present in the meta-description field. So, to confirm the same, can you please edit the page and try to add some text either to the meta description or to the "Social description" field within the Social tab and check whether the issue persists or not?

[maurisrx]

Thanks a lot @josevarghese for the confirmation.

I can confirm that filling out and saving the meta description field for affected post types via Yoast SEO > Settings > Content types > {post type} > meta description field resolve the issue.

With empty meta description field:

With filled out meta description field:

[josevarghese]

Thanks for letting us know. So kindly add a meta description to the page or post at which you are adding wp_editor() as a workaround.

[josevarghese]

Details about the issue (for developers):
If the meta description or the social description field is empty and if we have added the wp_editor() to show on the page/post, then the admin bar icons are not showing on the themes like Astra and Twenty Twenty-Four.

Steps to reproduce:

1. Install the Yoast SEO plugin and install and activate the theme Astra
2. Add the filter mentioned by the user below:

add_filter( 'the_content', function( $content ) {
  ob_start();
  
  $content   = '';
  $editor_id = 'test';
  $settings  = array(
    'media_buttons' => false,
    'textarea_rows' => 10,
     'required'      => 'required',
    'quicktags'     => false,
  );
  
  wp_editor( $content, $editor_id, $settings );
  
  return $content . ob_get_clean();
} );

3. Ensure that the admin menu bar for Yoast SEO is activated
4. Create a new post or page (ensure that the fields for meta description and social description are blank)
5. View the page and you can notice the admin menu bar icons are broken
6. Once if you add some text to the meta description or the social description, the icon will be shown correctly.