Alternatywa dla kontekstu w ekranie personalizacji motywu

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.