wp-front-end-editor
wp-front-end-editor copied to clipboard
Scan for title merges additional title markup
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.
How is this player added? Do you have some code?
@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;
}