/* Classi di formato assegnabili dalla tendina di textarea-custom (vedi assets/textarea-custom/). Fonte unica: caricato sia in wp-admin (dentro .tiptap, per il WYSIWYG in editing) sia in frontend (sul markup salvato) — stesso file, stesso risultato visivo in entrambi i posti, nessuna classe duplicata altrove. Solo selettori di classe, niente elementi nudi sciolti (body/h1/a/...): sicuro da caricare anche in wp-admin. Eccezioni sotto, MAI un elemento nudo da solo - sempre scoped dentro .tiptap/.txc-richtext o in coppia con una classe: il reset h1-h4, il reset color su (evidenziazione) e il reset font-weight su "strong .testo-*"/"strong .titolo-*"/"strong .label" (grassetto dentro un formato, vedi piu' sotto per entrambi). */ @import url("tokens.css"); :root { /* Rientro comune a elenco puntato e numerato, sia in editor (.tiptap) che in frontend (.txc-richtext): un solo valore, unica fonte perche' questo file (a differenza di textarea-custom.css) e' caricato in entrambi i posti - editor e sito pubblico restano sempre allineati. Non tocca l'elenco iconato, il cui rientro deriva da --txc-icon-size qui sotto e va per forza di pari passo con la dimensione icona scelta, non con questo valore. */ --txc-list-indent: 0px; } /* La select "Heading" del toolbar (H1-H4, vedi addHeadingSelect() in editor.js) cambia solo il TAG semantico del blocco (p -> h1..h4), non deve ereditare lo stile grosso/bold di h1/h2 definito in base.css (quello e' per i titoli VERI di pagina - index.php - che non passano da qui; slider-block__title era anche lui un'eccezione ma non piu': il campo "Titolo" del blocco Slider e' diventato un TextareaCustom a tutti gli effetti, vedi .slider-block__title in assets/css/slider.css). Risultato visivo resta comandato solo dalle classi qui sopra (titolo-big/medium/small). Scope: .tiptap = dentro l'editor wp-admin, .txc-richtext = sui 4 contenitori in frontend dove il markup TipTap viene stampato (vedi apply_filters('the_content', ...) in includes/blocks.php e includes/assets.php). Specificita' ".txc-wrap .tiptap" (due classi) e non solo ".tiptap": wp-admin ha di suo una regola sul titolo di pagina (".wrap h1", stessa specificita' 0-1-1 di ".tiptap h1") che altrimenti vince o perde a seconda dell'ordine di caricamento - qui deve vincere sempre noi. Azzerato tutto (padding/line-height/colore) invece di replicare i valori che wp-admin inietta di suo sui tag

(.nma-repeater__item p in blocks-admin.css: padding 0 10px: regola "p" di wp-admin/css/common.css: line-height 1.5) - h1-h4 non li ereditano restando a 0/normal, da qui lo scarto passando da paragrafo a titolo. Invece di rincorrere quei valori "magici" qui, li neutralizziamo anche sul paragrafo stesso (vedi .txc-wrap .tiptap p in textarea-custom.css): risultato indipendente dal CSS di wp-admin invece che agganciato a un suo dettaglio implementativo. !important necessario: wp-admin stila h2 (e in parte h1) dentro le sue metabox con selettori a ID ("#poststuff h2", "#poststuff .stuffbox > h3", specificita' 1-0-1) che nessuna combinazione di classi puo' battere - senza !important su h2 restava un padding 8px 12px + line-height 1.4 "regalati" dallo stile della postbox di WordPress, invisibili su h1/h3/h4 che quella regola non tocca (da qui il bug visibile solo su H2). */ .txc-wrap .tiptap h1, .txc-wrap .tiptap h2, .txc-wrap .tiptap h3, .txc-wrap .tiptap h4 { font: inherit !important; color: inherit !important; line-height: 1.5 !important; margin: 0 0 12px !important; /* stesso ritmo di .txc-wrap .tiptap p (textarea-custom.css) */ padding: 0 !important; } .txc-richtext h1, .txc-richtext h2, .txc-richtext h3, .txc-richtext h4 { font: inherit; margin: 0 0 1em; /* margine di default del browser per

, non sovrascritto in frontend */ } /* (evidenziazione di TextareaCustom, vedi createHighlightExtension() in assets/textarea-custom/src/editor.js): bug verificato con devtools, non un problema di dati/JS - il colore testo (mark "textStyle", classe .txc-color-* o style inline su uno ANTENATO del ) risultava sempre "colore predefinito" nonostante fosse salvato correttamente nel markup, sia in editor che sul sito pubblico. Causa: lo user-agent stylesheet del browser da' a un "color" TUTTO SUO (Chrome/Safari: "mark { background-color: yellow; color: black; }", nessun !important) - l'ereditarietà del color dallo antenato non e' una "regola" che compete per specificita' con quella dello UA, e' solo il fallback usato quando NESSUNA regola tocca la proprieta' sull'elemento stesso: dato che lo UA stylesheet la tocca (color:black), quello vince sempre sul , a prescindere da quanto sia "forte" il colore scelto sull'antenato. "color: inherit" qui sotto e' una regola d'AUTORE (basta un normal qualsiasi, anche a specificita' minima come "mark" nudo: l'origine "author" batte sempre "user agent" indipendentemente dalla specificita') che fa scomparire il color:black dello UA, lasciando il ereditare davvero dall'antenato come ci si aspetterebbe. Non tocca background-color: quello lo controllano le classi .txc-highlight-* (piu' specifiche di un mark nudo, vincono comunque). */ .txc-wrap .tiptap mark, .txc-richtext mark { color: inherit; } /* Mark "link" del rich text (TextareaCustom, bottone "Link" della toolbar - vedi RichLink in assets/textarea-custom/src/editor.js): ":not(.btn)" esclude i bottoni CTA, un del tutto diverso con gia' il proprio stile in assets/css/cta-buttons.css, mai questo qui. */ .txc-richtext a:not(.btn) { color: var(--color-primario, #2271b1); text-decoration: underline; } /* Parola dentro il link con un colore proprio (classe .txc-color-{slug} o style="color:..." inline, colore libero - vedi createNamedColorExtension() in editor.js): senza questa regola la sottolineatura resta comunque del colore dell' (sopra), qualunque colore si dia alla parola - verificato con devtools su sito pubblico (naimadigital.it/4yl2/assicurazioni/): testo nero, riga gialla (colore dell'). Causa: la riga sottolineata ereditata da un antenato con text-decoration e' un unico tratto disegnato DALL'ANTENATO stesso - ridichiarare solo text-decoration-color su un discendente non basta (il tratto resta quello ereditato, il browser non lo "ridisegna" a pezzi per colore); serve ridichiarare anche text-decoration-line li', cosi' il discendente apre un proprio tratto indipendente, colorato con il SUO currentColor (il color appena impostato sopra da .txc-color-* o dallo style inline) invece di quello ereditato dall'. Stesso principio del bug commentato sopra (color: inherit li'), un passo in piu' per la riga rispetto al colore. */ .txc-richtext a:not(.btn) [style*="color"], .txc-richtext a:not(.btn) [class*="txc-color-"] { text-decoration-line: underline; text-decoration-color: currentColor; } /* Riga vuota (Invio ripetuto nell'editor) salvata come

davvero vuoto, senza nemmeno un
dentro: in editing SI vede perche' ProseMirror inietta li' un
invisibile solo per poterci mettere il cursore (mai salvato in getHTML()), qui in frontend invece un

del tutto vuoto (0 righe di testo, niente border/padding) va in "self-collapsing" per spec CSS - i suoi stessi margin top/bottom collassano fra loro E con quelli dei paragrafi vicini, quindi PIU' righe vuote di fila spariscono tutte insieme in un unico spazio invece di sommarsi. min-height le esclude dal self-collapsing (basta un valore diverso da zero/auto) e le rende visibili quanto una riga di testo. */ .txc-richtext p:empty { min-height: 1em; } /* Rientro puntato/numerato in frontend: allinea il padding-left allo stesso --txc-list-indent dell'editor. L'iconato NON serve qui: stesso --txc-list-indent, ma gia' coperto dalla regola .txc-icon-list qui sopra (nessun ":not()", altrimenti l'iconato restava di nuovo sul default browser) - il suo marker e' un ::before dentro al

(hanging indent manuale), non il ::marker nativo qui sotto, quindi non ha bisogno dello spazio estra riservato dalla regola successiva. */ .txc-richtext ul, .txc-richtext ol { padding-left: var(--txc-list-indent); } /* list-style ESPLICITO (invece di lasciare il default browser, comunque "disc"/"decimal" per