Load WordPress Editor .css on Front End

Question

This issues seems to have cropped up for me after a recent WordPress udpate (I'm on 4.9.9) as I haven't had issues before.

I load wp_editor on the front end using the following code:

     $argswp = array(
    'textarea_rows' => 10,
    'teeny' => false,
    'quicktags' => false,
    'wpautop' => true,
    'media_buttons' => false,
    'tinymce' => array(
        'theme_advanced_buttons1' => 'custom1',
      ),
);
wp_editor( 'Write your content here...', 'postContent', $argswp ); ?> 

I am now having issues that when a regular non-admin user logs in and sees this editor, some buttons don't show and others don't work. For example, selecting insert/edit link causes the page to scroll down but nothing happens, the "pop-up" box that usually appears doesn't work.

After going through all the network requests (once as admin and once as regular user) I can see that regular users are not getting the following .css file:

/wp-includes/css/editor.min.css?ver=4.9.9

So I tried two things, I first tried to register and enqueue it in my php functions file and then I tried to add it directly to the html of the page as an external stylesheet link. This is the result for both:

The button is now working but they don't seem to be loading correctly now. Help is appreciated!

Answer 1

Fixed it! Although I still don't know why I have to now enqueue the specific stylesheet when I didn't before. If anyone knows why I'd definitely appreciate it.

But for now, my answer:

I had previously added in this code which was a bad idea. For some reason I didn't those specific icons were being used:

// remove dashicons as they don't need to be loaded on the front-end and are using 1400ms in render blocking
function wpdocs_dequeue_dashicon() {
    if (current_user_can( 'edit_published_posts' )) {
        return;
    }
    wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' ); 

Removing that fixed the icon issue.

And then I had to register and enqueue the style:

wp_register_style( 'tinymce_stylesheet', 'https://example.org/wp-includes/css/editor.min.css?ver=4.9.9' );

//Editor Stylesheet for Deck Submit
function editor_send_deck() {
    // only enqueue on specific page slug
    if ( is_page( 'front-end' ) ) {
        wp_enqueue_style( 'tinymce_stylesheet' );
    }
}
add_action( 'wp_enqueue_scripts', 'editor_send_deck' );