Wersja 6.3 silnika WordPress dodała do sporej już listy bloków kolejny. Ten nowy nazywa się Szczegóły i pozwala na ukrycie treści za podsumowaniem.

Od razu pomyślałem o wykorzystaniu go do chowania treści drażliwych, do czego do tej pory używałem bloku Expand/Show More dostarczanego przez wtyczkę Responsive Blocks.

Kod HTML Szczegółów wygląda tak:

<details class="wp-block-details">
    <summary>Widoczne podsumowanie</summary>
    <p>Ukrywana treść</p>
</details>

Po kliknięciu podsumowanie blok zostaje rozwinięty i dostaje atrybut open="", który można użyć przy tworzeniu CSS.

Musiałem zacząć od dodania marginesów (bo motyw używany na „silva rerum” nie wie, jak traktować nowy blok i zlewa go z resztą treści):

details[open], summary {
    margin-bottom: 1em;
}

Po dołożeniu odstępów blok wygląda tak:

Całkiem eleganckie rozwiązanie, ale nie do końca wygląda jak ukrywanie czegoś, co powinno być schowane za Content Warning. Trzeba trochę to dopasować.

Nie chciałem się pozbawiać możliwości użycia zwykłego spoilera, więc przygotowałem CSS dla klasy cw (skrót od „content warning”, oczywiście), którą w edytorze WordPress można ustawić w zaawansowanych właściwościach bloku.

Na początek ikonki. Zamykająca:

details.cw[open] ::marker {
    content: url(ścieżka/oko-zamkniete.svg)" ";	
}

I otwierająca:

details.cw ::marker {
    content: url(ścieżka/oko-otwarte.svg)" ";
}

Uznałem też, że chciałbym odróżnić odsłoniętą treść od reszty wpisu. Dodałem delikatne tło i padding dookoła.

details.cw[open] {
    background-color: #fcfcfc;
}

details.cw {
    padding: 0.5em;		
}

Po tych zabiegach blog z treścią drażliwą wygląda tak:

A teraz, dzięki tej odrobinie dłubania, mogę odinstalować niepotrzebną wtyczkę.