L'editor di TinyMCE sta rompendo il mio bellissimo HTML

Questo è praticamente un duplicato esatto di: Come far sì che Wordpress e TinyMCE accettino <a> tag che avvolgono elementi a livello di blocco come consentito in HTML5? e problema con HTML5, WordPress e Tiny MCE - l'avvolgimento del tag anchor attorno a div produce un output funky

Il mio problema è che la soluzione suggerita ( tiny_mce_before_initfiltro) non sembra risolvere il mio problema. Ho HTML che assomiglia a questo:

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

È perfettamente legale in HTML5. Tuttavia, l'editor WP non piace e lo trasforma in:

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

Questo, ovviamente, rompe il mio layout. Qualcuno sa come posso prevenire questo comportamento? Non posso rinunciare al componente Visual dell'editor e attenermi al testo normale. Eventuali suggerimenti sono ben accetti

Per essere chiari, quando uso il codice qui sotto ( suggerito qui ), i <p>tag possono rimanere all'interno delle ancore, ma viene aggiunto molto spazio aggiuntivo con  un'entità che si moltiplica ogni volta che passi dalla modalità Visual a quella Text.

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Indipendentemente da ciò che hai configurato come figli validi, WordPress gestisce i tag p e le interruzioni di riga in un modo davvero unico. Probabilmente noterai alla fine, se non l'hai già fatto, che quando passi dall'editor di testo all'editor visivo e viceversa, i tuoi <p>tag vengono rimossi, in modo simile a ciò che accade sul frontend. Un modo per impedire che ciò accada è quello di assegnare ai <p>tag una classe personalizzata.

<p class="text">This p tag won't get removed"</p>.

Mentre ↑ questo ↑ eviterà che il tag p venga rimosso, non risolverà il problema poiché il markup sul frontend viene ancora confuso. È possibile DISATTIVARE wpautop. Se lo fai E hai incluso p tra i figli validi, questo FISSA IL TUO NUMERO .

OPZIONE 1: Disabilita Autop e Imposta figli validi

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Dovrei avvertirti però che nel momento in cui passerai dall'editor HTML a TinyMCE il tuo HTML verrà distrutto. Una soluzione alternativa è disabilitare del tutto TinyMCE per alcuni tipi di post come nell'opzione 2 di seguito.

OPZIONE 2: Disabilita Auto P, TinyMCE e Imposta figli validi

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

Per la maggior parte delle persone però ↑ questo ↑ non è un'opzione.

Quindi quali altre opzioni ci sono? Una soluzione alternativa che ho notato funziona è utilizzare un tag span con una classe e assicurarsi che non ci sia spazio bianco tra i tag HTML . Se lo fai, puoi usare l'opzione 1 sopra ed evitare di disabilitare TinyMCE tutti insieme. Ricorda solo che dovrai anche aggiungere alcuni CSS al tuo foglio di stile per visualizzare correttamente l'intervallo.

OPZIONE 3: Opzione 1 + Tag di estensione in stile

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

CSS nel foglio di stile

.noautop {
    display: block;
}

Opzione 4: utilizzare lo shortcode di uploader multimediale incorporato

Inizialmente ho dimenticato questo, ma lo shortcode [didascalia] sarà simile al seguente:

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

L'output sarà simile al seguente:

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

Se non si desidera utilizzare tag figura, è possibile utilizzare un plug-in come shortcode contenuto personalizzato che consente di eseguire questa operazione:

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

Perché l'editor non può funzionare come voglio?

Ho passato innumerevoli ore a cercare di far funzionare bene tutto questo negli ultimi due anni. Di tanto in tanto mi viene in mente una soluzione che funziona perfettamente, ma poi WordPress invierà un aggiornamento che rovina tutto di nuovo. L'unica soluzione che abbia mai trovato per funzionare completamente come dovrebbe, mi porta alla migliore risposta che ho.

Opzione 5: preservato HTML Editor Markup Plus

Quindi risparmiati il ​​mal di testa e vai avanti con questo. Per impostazione predefinita, Preserved HTML Editor Markup Plus ha effetto solo sulle nuove pagine. Se vuoi cambiare le pagine già create, devi andare su www.example.com/wp-admin/options-writing.php e modificare le impostazioni del plugin. Sarai anche in grado di modificare il comportamento predefinito della nuova riga.

Nota: se decidi di utilizzare questo, assicurati di controllare il thread di supporto quando viene avviato un nuovo aggiornamento di WordPress. Di tanto in tanto, una modifica rovinerà le cose, quindi è meglio assicurarsi che il plugin funzioni sulle versioni più recenti.

Credito extra: debug del problema / modifica di altre opzioni TinyMCE

Se vuoi ispezionare e modificare facilmente le tue configurazioni TinyMCE manualmente, come fai con i filtri, puoi installare la configurazione avanzata di TinyMCE . Ti consente di visualizzare TUTTE le opzioni TinyMCE configurate e modificarle da una semplice interfaccia. Puoi anche aggiungere nuove opzioni proprio come faresti con i filtri. Rende le cose molto più facili da capire.

Ad esempio, ho sia quello che l'Editor HTML conservato Markup Plus. Lo screenshot seguente è della pagina di amministrazione Advanced TinyMCE Config. Mentre lo screenshot sta tagliando il 90% di ciò che è realmente lì, puoi vedere che mostra i figli validi disponibili per la modifica e quali Preserved HTML Editor Markup Plus aggiunti.

Questo è un modo estremamente utile non solo per personalizzare completamente il tuo editor, ma anche per vedere cosa sta succedendo. Potresti anche essere in grado di capire quale fosse la causa del tuo problema. Dopo aver esaminato personalmente i parametri mentre era abilitato Markup Editor HTML conservato, ho visto alcune opzioni aggiuntive che potevano essere aggiunte a un filtro personalizzato.

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

Purtroppo questo metodo non ha funzionato. Probabilmente c'è qualche regex o JavaScript che sta accadendo durante l'aggiornamento del post e / o il passaggio da un editor all'altro. Se dai un'occhiata al codice sorgente dell'Editor HTML conservato, puoi vedere che funziona un po 'di JavaScript sul lato amministratore, quindi il mio ultimo consiglio sarebbe quello di controllare come funziona il plugin se vuoi aggiungere questa funzionalità al tuo tema.

Ad ogni modo, scusami per chiunque sia arrivato così lontano nella mia risposta. Ho solo pensato di condividere le mie esperienze personali con l'editor di WordPress, quindi spero che altri non debbano passare ore a cercare di capirlo come ho fatto io!