Inspiracją do tego wpisu było pytanie jednego z użytkowników, który przysłał mi maila z prośbą o przywrócenie na kilka minut opcji wyłączania poszczególnych elementów wpisu. Jak twierdził opcje te „nagle zniknęły”. Po krótkiej analizie treści maila zrozumiałem, że użytkownik ten padł ofiarą kontekstu w ekranie personalizacji. Dlatego wpadłem na prosty pomysł jak tego problemu uniknąć (w określonych wypadkach).
Dla przypomnienia: kontekst w ekranie personalizacji służy do pokazywania/ukrywania określonych elementów w zależności od tego jaka strona jest aktualnie wyświetlana w podglądzie. Dzięki temu nie są wyświetlane opcje, które nie będą (a przynajmniej nie powinny) mieć wpływu na wygląd podglądu. Dopóki użytkownik się nie oswoi z istnieniem kontekstu, może mieć wrażenie, że niektóre opcje nie istnieją albo jak w opisywanym przypadku „nagle znikają”.
Moja propozycja rozwiązania problemu?
Wyświetlanie wszystkich opcji od razu z wizualnym zaznaczeniem, że niektóre elementy są nieaktywne. Ale sprawdzi się to oczywiście tylko wtedy gdy nie mamy zbyt dużej liczby sekcji i paneli, bo kontekst powstał między innymi po to aby interfejs ekranu personalizacji odciążyć od zbędnych ustawień.
Sama implementacja jest trywialna
Skorzystamy z dwóch rzeczy:
- W WordPressie 4.1 do sekcji i paneli dodano parametr type, który pozwala zmodyfikować nazwy klas elementu
- Kontekst jest realizowany w ten sposób, że wszystkie elementy są wyświetlane zawsze i jedynie ukrywane poprzez kod CSS
Zatem jedyne co musimy zrobić to określić typ sekcji i paneli, które mogą być ukrywane oraz dodać niezbędny kod CSS.
Przykładowo do sekcji z ustawieniami wyświetlania wpisu dodam typ not-hidden:
$wp_customize->add_section( 'portfolio_post_options', array( 'type' => 'not-hidden', 'title' => __('Post display', 'portfolio'), 'priority' => 400, 'active_callback' => 'portfolio_is_singular' ) );
Następnie korzystając z akcji customize_controls_enqueue_scripts dodam kod CSS:
function not_hidden_css() { ?> <style> .control-section-not-hidden { display: block!important; } .control-section-not-hidden[style='display: none;'] { opacity: 0.5; } </style> <?php } add_action('customize_controls_enqueue_scripts', 'not_hidden_css');
Jak widać powyższy kod wymusza styl blokowy dla sekcji typu not-hidden a w wypadku gdy jest ona ukryta, nadaje jej przezroczystość na poziomie 50%.
Efekt widoczny jest w ikonie tego wpisu.