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","css":".flex{display:flex}.\\[\\\u0026_\\.lang\\]\\:flex .lang{display:flex}.flex-col{flex-direction:column}.\\[\\\u0026_\\.lang\\]\\:flex-row .lang{flex-direction:row}.gap-1{gap:var(\u002d\u002dspacing-1)}.\\[\\\u0026_\\.lang\\]\\:gap-1\\.5 .lang{gap:var(\u002d\u002dspacing-1_5)}.\\[\\\u0026_\\.lang\\]\\:justify-start .lang{justify-content:flex-start}.\\[\\\u0026_\\.lang\\]\\:items-center .lang{align-items:center}","t":1740957313},"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","css":".inline-block{display:inline-block}.\\[\\\u0026_\\.lang\\]\\:flex .lang{display:flex}.relative{position:relative}.\\[\\\u0026_\\.lang\\]\\:flex-row .lang{flex-direction:row}.\\[\\\u0026_\\.lang\\]\\:gap-1\\.5 .lang{gap:var(\u002d\u002dspacing-1_5)}.\\[\\\u0026_\\.lang\\]\\:justify-start .lang{justify-content:flex-start}.\\[\\\u0026_\\.lang\\]\\:items-center .lang{align-items:center}.\\[\\\u0026_button\\.lang\\]\\:px-3\\.5 button.lang{padding-inline:var(\u002d\u002dspacing-3_5)}.\\[\\\u0026_button\\.lang\\]\\:py-2\\.5 button.lang{padding-block:var(\u002d\u002dspacing-2_5)}.\\[\\\u0026_button\\.lang\\]\\:rounded button.lang{border-radius:var(\u002d\u002dradius)}.\\[\\\u0026_button\\.lang\\]\\:border button.lang{border-style:var(\u002d\u002dtw-border-style);border-width:1px}","t":1740957313},"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_button.lang]:[\u0026\u003e.label]:sr-only","css":".inline-block{display:inline-block}.\\[\\\u0026_\\.lang\\]\\:flex .lang{display:flex}.relative{position:relative}.\\[\\\u0026_\\.lang\\]\\:flex-row .lang{flex-direction:row}.\\[\\\u0026_\\.lang\\]\\:gap-1\\.5 .lang{gap:var(\u002d\u002dspacing-1_5)}.\\[\\\u0026_\\.lang\\]\\:justify-start .lang{justify-content:flex-start}.\\[\\\u0026_\\.lang\\]\\:items-center .lang{align-items:center}.\\[\\\u0026_button\\.lang\\]\\:px-3\\.5 button.lang{padding-inline:var(\u002d\u002dspacing-3_5)}.\\[\\\u0026_button\\.lang\\]\\:py-2\\.5 button.lang{padding-block:var(\u002d\u002dspacing-2_5)}.\\[\\\u0026_button\\.lang\\]\\:rounded button.lang{border-radius:var(\u002d\u002dradius)}.\\[\\\u0026_button\\.lang\\]\\:border button.lang{border-style:var(\u002d\u002dtw-border-style);border-width:1px}.\\[\\\u0026_button\\.lang\\]\\:\\[\\\u0026\\\u003e\\.label\\]\\:sr-only button.lang\u003e.label{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}","t":1740957313},"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:
/**
* 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