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.