WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#36802 closed defect (bug) (invalid)

wp_editor doesn't display "Add Media" button in Firefox, Safari or Chrome

Reported by: jdorner Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.5
Component: Editor Keywords:
Focuses: ui, javascript Cc:
PR Number:

Description

When using wp_editor on the front end, the "Add Media" button shows when using Chrome on Windows, but not when using Firefox, MSIE 11 or Safari on Windows or Chrome on a Mac.

To reproduce, insert the following code in any theme template or front end script.

<form>
<?php wp_editor( 'content', 'editor_id'); ?>
</form>

It worked in version 4.4.3
It stopped working in version 4.5

Change History (11)

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


3 years ago

#2 @iseulde
3 years ago

Thank you for the ticket. This seems to work fine here in those browsers. What theme are you trying this with? Any JS errors?

#3 @iseulde
3 years ago

  • Keywords reporter-feedback added

#4 @azaozz
3 years ago

I find it very strange for the button to show in one browser but not in any other. Can you also look at the HTML source to see if it is there?

#5 @jdorner
3 years ago

I found it very strange too. @azaozz

@iseulde No JS errors.

To remove all issues, I created a new site (WP 4.6.1) and used the Twenty Sixteen theme.
I edited the Hello Dolly plugin to add the following code:

function custom_shortcode() {
  echo '<form>';
  wp_editor('test', 'test', array('media_buttons'=>true));
  echo '</form>';
}
add_shortcode('testing', 'custom_shortcode');

Then, I added the testing shortcode to a page and view the page in Chrome and Firefox.
I've duplicated this on two different Windows computers. One using XAMPP and the other using DesktopServer.
With Chrome, the "Add Media" button works. With Firefox, the "Add Media" doesn't exist, but everything else with the editor works fine.

Here's the HTML code form Firefox:

<form><div id="wp-test-wrap" class="wp-core-ui wp-editor-wrap tmce-active"><link rel='stylesheet' id='dashicons-css'  href='http://www.wordpress.dev/wp-includes/css/dashicons.min.css?ver=4.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='editor-buttons-css'  href='http://www.wordpress.dev/wp-includes/css/editor.min.css?ver=4.6.1' type='text/css' media='all' />
<div id="wp-test-editor-tools" class="wp-editor-tools hide-if-no-js"><div class="wp-editor-tabs"><button type="button" id="test-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="test">Visual</button>
<button type="button" id="test-html" class="wp-switch-editor switch-html" data-wp-editor-id="test">Text</button>
</div>
</div>
<div id="wp-test-editor-container" class="wp-editor-container"><div id="qt_test_toolbar" class="quicktags-toolbar"></div><textarea class="wp-editor-area" rows="20" autocomplete="off" cols="40" name="test" id="test">test</textarea></div>
</div>
</form>

Here's the code from Chrome:

<form><div id="wp-test-wrap" class="wp-core-ui wp-editor-wrap html-active"><link rel='stylesheet' id='editor-buttons-css'  href='http://www.wordpress.dev/wp-includes/css/editor.min.css?ver=4.6.1' type='text/css' media='all' />
<div id="wp-test-editor-tools" class="wp-editor-tools hide-if-no-js"><div id="wp-test-media-buttons" class="wp-media-buttons"><button type="button" id="insert-media-button" class="button insert-media add_media" data-editor="test"><span class="wp-media-buttons-icon"></span> Add Media</button></div>
<div class="wp-editor-tabs"><button type="button" id="test-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="test">Visual</button>
<button type="button" id="test-html" class="wp-switch-editor switch-html" data-wp-editor-id="test">Text</button>
</div>
</div>
<div id="wp-test-editor-container" class="wp-editor-container"><div id="qt_test_toolbar" class="quicktags-toolbar"></div><textarea class="wp-editor-area" rows="20" autocomplete="off" cols="40" name="test" id="test">test</textarea></div>
</div>
</form>

#6 @jdorner
3 years ago

  • Keywords reporter-feedback removed

#7 @jdorner
3 years ago

I initially discovered this problem when I updated from 4.4 to 4.5 on a linux server.

#8 @azaozz
3 years ago

Still cannot reproduce. It looks like you're not logged in when testing in the other browsers. In that case you have no permission to upload files, use the media library, etc. Unauthenticated users and even users with the "contributor" role cannot do that.

Last edited 3 years ago by azaozz (previous) (diff)

#9 @jdorner
3 years ago

  • Resolution set to invalid
  • Status changed from new to closed

DOH!!! Sorry to waste your time.

#10 @azaozz
3 years ago

No problems, glad it wasn't a regression.

#11 @swissspidy
3 years ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.