Applying custom css to a shortcode block

You would need to add that using editor styles.

The best way to do it is to save it as a separate css file and link that to both your themes public output and to the editor area.

Thank you for your help. I added this to my functions.php file:

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

And then created a file: custom-editor-style.css

I put this in the file:

.lang-item{
display:inline;
padding-left:5px;
list-style:none;
}

But I’m not seeing any changes. I Know I’ve probably got the syntax wrong, I just don’t know what. Thanks again!

I read somemore about the 2023 theme and added this to my Child theme Functions.php file but it’s still not working:

/**
 * Registers support for editor styles & Enqueue it.
 */
function fse_child_styles() {
	wp_enqueue_style( 'fse-child-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'fse_child_styles' );

If anyone could help me solve this, I’d be very grateful ??

Did some one break in in the night and fix this because it’s working now! I woke up this morning and it was working, I think I was so tired yesterday I didn’t realize the menu had changed to how I wanted it. Just to recap for anyone else trying to add a language switcher for Polylang non pro version, I’m using a child of the Twenty TwentyThree theme created by CreateBlockTheme plugin.

Add a Functions.php file to the theme. Add these functions:

<?php

/**
 * Registers support for editor styles & Enqueue it.
 */
function fse_child_styles() {
	wp_enqueue_style( 'fse-child-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'fse_child_styles' );


/**
 * Polylang Shortcode - https://www.ads-software.com/plugins/polylang/
 * Add this code in your functions.php
 * Put shortcode [polylang_langswitcher] to post/page for display flags
 *
 * @return string
 */
function custom_polylang_langswitcher() {
	$output = '';
	if ( function_exists( 'pll_the_languages' ) ) {
		$args   = [
			'show_flags' => 0,
			'show_names' => 1,
			'echo'       => 0,
                        //'hide_current' => 1,
		];
		$output = '<ul class="polylang_langswitcher">'.pll_the_languages( $args ). '</ul>';
	}

	return $output;
}

add_shortcode( 'polylang_langswitcher', 'custom_polylang_langswitcher' );

?>

Add a Gutenberg Shortcode block where you want the language switcher and add this line to it:

[polylang_langswitcher]

Next in the child theme’s Style.css file add whatever styling you want, I added this:

.lang-item {
  display: inline;
  padding-left: 5px;
  list-style: none;
  
}

.lang-item a:link {
  text-decoration: none;
}

.lang-item a:visited {
  text-decoration: none;
}

.lang-item a:hover {
  text-decoration: underline;
}

.lang-item a:active {
  text-decoration: underline !important;
}

I had to clear the cache of my browser occasionally to see the changes.

• This reply was modified 1 year, 5 months ago by acp693.