Language switcher

The Language switcher block can display a placeholder language switcher when a multilingual plugin isn’t installed yet, but will switch to using languages from WPML or Polylang once detected.

Language list

<!-- wp:ska/language-switcher {"skaBlocks":{"cx":"flex [\u0026_.lang]:flex flex-col [\u0026_.lang]:flex-row gap-1 [\u0026_.lang]:gap-1.5 [\u0026_.lang]:justify-start [\u0026_.lang]:items-center","t":1709756495,"css":".flex{display:flex}.flex-col{flex-direction:column}.gap-1{gap:var(\u002d\u002dska-spacing-1)}.\\[\\\u0026_\\.lang\\]\\:flex .lang{display:flex}.\\[\\\u0026_\\.lang\\]\\:flex-row .lang{flex-direction:row}.\\[\\\u0026_\\.lang\\]\\:items-center .lang{align-items:center}.\\[\\\u0026_\\.lang\\]\\:justify-start .lang{justify-content:flex-start}.\\[\\\u0026_\\.lang\\]\\:gap-1\\.5 .lang{gap:var(\u002d\u002dska-spacing-1\\.5)}"},"skaBlocksSelectors":{"[\u0026_.lang]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"1.5"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"start"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksGap":{"v":{"$":{"@":"1"}}}} /-->

Language dropdown

<!-- wp:ska/language-switcher {"mode":"dropdown","skaBlocks":{"cx":"inline-block [\u0026_.lang]:flex relative [\u0026_.lang]:flex-row [\u0026_.lang]:gap-1.5 [\u0026_.lang]:justify-start [\u0026_.lang]:items-center [\u0026_button.lang]:px-3.5 [\u0026_button.lang]:py-2.5 [\u0026_button.lang]:rounded [\u0026_button.lang]:border","t":1709756495,"css":".relative{position:relative}.inline-block{display:inline-block}.\\[\\\u0026_\\.lang\\]\\:flex .lang{display:flex}.\\[\\\u0026_\\.lang\\]\\:flex-row .lang{flex-direction:row}.\\[\\\u0026_\\.lang\\]\\:items-center .lang{align-items:center}.\\[\\\u0026_\\.lang\\]\\:justify-start .lang{justify-content:flex-start}.\\[\\\u0026_\\.lang\\]\\:gap-1\\.5 .lang{gap:var(\u002d\u002dska-spacing-1\\.5)}.\\[\\\u0026_button\\.lang\\]\\:rounded button.lang{border-radius:var(\u002d\u002dska-border-radius)}.\\[\\\u0026_button\\.lang\\]\\:border button.lang{border-width:1px}.\\[\\\u0026_button\\.lang\\]\\:px-3\\.5 button.lang{padding-left:var(\u002d\u002dska-spacing-3\\.5);padding-right:var(\u002d\u002dska-spacing-3\\.5)}.\\[\\\u0026_button\\.lang\\]\\:py-2\\.5 button.lang{padding-top:var(\u002d\u002dska-spacing-2\\.5);padding-bottom:var(\u002d\u002dska-spacing-2\\.5)}"},"skaBlocksSelectors":{"[\u0026_button.lang]":{"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"3.5","y":"2.5"}},"t":"axis"},"skaBlocksSelectors":[]},"[\u0026_.lang]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"1.5"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"start"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"inline-block"}}},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}}} /-->

Flag dropdown

<!-- wp:ska/language-switcher {"mode":"dropdown","dropdownActivation":"click","dropdownPlacement":"bottom-start","skaBlocks":{"cx":"inline-block [\u0026_.lang]:flex relative [\u0026_.lang]:flex-row [\u0026_.lang]:gap-1.5 [\u0026_.lang]:justify-start [\u0026_.lang]:items-center [\u0026_button.lang]:px-3.5 [\u0026_button.lang]:py-2.5 [\u0026_button.lang]:rounded [\u0026_button.lang]:border [\u0026\u003e.label]:[\u0026_button.lang]:sr-only","t":1709756495,"css":".relative{position:relative}.inline-block{display:inline-block}.\\[\\\u0026_\\.lang\\]\\:flex .lang{display:flex}.\\[\\\u0026_\\.lang\\]\\:flex-row .lang{flex-direction:row}.\\[\\\u0026_\\.lang\\]\\:items-center .lang{align-items:center}.\\[\\\u0026_\\.lang\\]\\:justify-start .lang{justify-content:flex-start}.\\[\\\u0026_\\.lang\\]\\:gap-1\\.5 .lang{gap:var(\u002d\u002dska-spacing-1\\.5)}.\\[\\\u0026_button\\.lang\\]\\:rounded button.lang{border-radius:var(\u002d\u002dska-border-radius)}.\\[\\\u0026_button\\.lang\\]\\:border button.lang{border-width:1px}.\\[\\\u0026_button\\.lang\\]\\:px-3\\.5 button.lang{padding-left:var(\u002d\u002dska-spacing-3\\.5);padding-right:var(\u002d\u002dska-spacing-3\\.5)}.\\[\\\u0026_button\\.lang\\]\\:py-2\\.5 button.lang{padding-top:var(\u002d\u002dska-spacing-2\\.5);padding-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\\u003e\\.label\\]\\:\\[\\\u0026_button\\.lang\\]\\:sr-only button.lang\u003e.label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}"},"skaBlocksSelectors":{"[\u0026_button.lang]":{"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"3.5","y":"2.5"}},"t":"axis"},"skaBlocksSelectors":[],"skaBlocksScreenReaders":{"v":{"$":{"@":""},"[\u0026\u003e.label]":{"@":"sr-only"}}}},"[\u0026_.lang]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"1.5"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"start"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"inline-block"}}},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}}} /-->

Block options

Mode

The block can be in “List” mode to render a basic <ul> > <li> of the languages, or in “Dropdown” mode which utilizes the Dropdown module to show other languages in a dropdown.

Label

Allows to choose which language label to render: Name, Native name, Translated name, language Code or none. Additional customizations can be made with the following filter:

Custom language switcher labelPHP

/**
 * Language structure ($lang):
 *	[
 *		'id' => string,
 *		'code' => string,
 *		'name' => string,
 *		'native_name' => string,
 *		'translated_name' => string,
 *		'is_active' => boolean,
 *		'has_translation' => boolean,
 *		'url' => string,
 *		'flag_url' => string,
 *	]
 */
add_filter('ska_blocks_language_switcher_label', function($label, $lang) {
	return sprintf(
		'%1$s (%2$s)', 
		esc_attr($lang['native_name']), 
		esc_attr($lang['translated_name'])
	);
}, 10, 2);

Toggles

Show language flag
Show active languages
Show inactive languages
Show missing languages