ellatrix / wp-front-end-editor

Front-end Editor for WordPress
https://wordpress.org/plugins/wp-front-end-editor/
340 stars 87 forks source link

Scan for title merges additional title markup #253

Open NicktheGeek opened 9 years ago

NicktheGeek commented 9 years ago

I have a custom podcast solution setup with an embedded player. The player markup includes a title and looks more or less like this (there is additional markup but this is the relevant part)

<div class="player">
    <div class="player-image"><img src="" alt=""></div>

    <div class="player-controls">
        <div class="audio-title">
            Title<small>Author Name</small>
        </div>
        <!-- player shortcode -->
    </div>
</div>

It ends up grabbing the title inside .audio-title and inserting into the post title, which has this markup

<h1 class="entry-title" itemprop="headline">Title</h1>

When logged in and the front end editor is enabled, the resulting title ends up being

<h1 class="entry-title" itemprop="headline"><p>Title<small>Author Name</small></p></h1>

and the player ends up being altered like

<div class="rm-player">
    <div class="rm-player-image"><img src="" alt=""></div>

    <div class="rm-player-controls">
        <div class="audio-title fee-title mce-content-body" id="mce_4" contenteditable="false" spellcheck="false" style="position: relative;">
            <p>Title<small>Author Name</small></p>
        </div>

        <p class="fee-url" style="display: none;">http://example.com/podcast/<ins><span class="fee-slug mce-content-body" id="mce_5" contenteditable="false" spellcheck="false" style="position: relative;">title</span></ins>/</p>
    </div>
    <!-- player shortcode -->
</div>

I can change my player HTML but it appears this is a bug in the scan title functionality which will probably cause other conflicts.

ellatrix commented 9 years ago

How is this player added? Do you have some code?

NicktheGeek commented 9 years ago

@iseulde It can be added via a filter on the_content or manually as a shortcode. The code is generated in the same way.

    /**
     * Creates the audio player.
     *
     * @access public
     * @param mixed $src (default: false)
     * @param array $atts (default: array())
     * @return void
     */
    public function audio_player( $src = false, $atts = array() ) {

        if( is_feed() ){
            return;
        }

        $player = '';

        $defaults = array(
            'hide_image'   => false,
            'hide_author'  => false,
            'hide_title'   => false,
            'hide_share'   => false,
            'hide_embed'   => false,
            'hide_buttons' => false,
        );

        $atts = wp_parse_args( $atts, $defaults );

        extract( $atts );

        if( $src ) {

            $hide_buttons = empty( $_GET['embed'] ) ? $hide_buttons : true;

            $player .= '<div class="rm-player">';

            if( ! $hide_image && ( $image = $this->get_episode_image( array( 'size' => 'podcast', 'format' => 'url' ) ) ) ){
                $player .= '<div class="rm-player-image">
                    <img src="'. $image .'" alt="" />
                </div>';
            }

            $player .= '<div class="rm-player-controls">';

            $title  = $hide_title  ? '' : get_the_title();
            $author = $hide_author ? '' : sprintf( '<small>%s</small>', get_the_author() );

            if( $title || $author ) {
                $player .= sprintf( '<div class="audio-title">%s%s</div>', $title, $author );
            }

            // Get podcast
            $qry_args = array (
                'posts_per_page' => 1,
                'post_type'   => 'podcast',
                'meta_query'  => array(
                    array (
                        'key'     => 'enclosure',
                        'value'   => $src,
                        'compare' => '='
                    )
                )
            );

            $src_podcast = get_posts( $qry_args );

            $podcast_id = 0;
            $podcast_title = '';

            if ( $src_podcast ) {
                $current_podcast = $src_podcast[0];
                $podcast_id = $current_podcast->ID;
                $podcast_title = $current_podcast->post_title;
            }

            $player .= sprintf('<div class="mejs-container" data-id="%s" data-title="%s">', $podcast_id, esc_attr( $podcast_title ) );

            $preload = is_archive() ? 'metadata' : 'auto';

            $player .= wp_audio_shortcode( array( 'src' => $src, 'preload' => $preload ) );

            $player .= '</div>';

            $player .= '</div>

            </div>';

            return $player;

        }

        return false;

    }