Custom block style from plugin doesn’t work with this theme?

  • Resolved audunmb

    (@audunmb)


    2 years, 3 months ago

    Testing this theme now, and it seems like the custom styles I added to my website trough a plugin don’t take effect on the front end.

    I used the Gutenberg Block Styles plugin from Automattic’s github to create some custom styles for my website, but oddly with your theme they show in editor, while not on the front end. With other themes, like Twenty-Twenty-Two it’s the other way around (shows in front end, but not in editor).

    For instance, I made an lead text style (called ingress in Norwegian), so that the lead text in an article can be bold and somewhat larger than the rest of the text. Checking the code, the ‘is-style-ingress’-class is applied to the paragraph, but the CSS for this is not applied.

    Any idea why? And how to fix it? May be a naming issue maybe, where your theme has some stylesheet with the same name as the one from the plugin?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Carolina Nymark

    (@poena)

    Hi!
    This is difficult for me to troubleshoot.
    If the CSS is being printed on the page, but is overwritten by a style from the theme, then you can try a higher specificity or even try using !important.

    I apologize if this becomes too technical:
    I see that the plugin just uses the function register_block_style. The stylesheet the plugin is registering, block-styles-stylesheet does not have a naming conflict with the theme.

    You can also use register_block_style directly in a child theme’s functions.php file, and place the CSS inside the functions inline_style property without loading the extra CSS file.

    https://fullsiteediting.com/lessons/custom-block-styles/#h-registering-block-styles-using-php

    Thread Starter audunmb

    (@audunmb)

    The issue seems to be that with your theme (but no others), the CSS stylesheet is loaded in the editor instead of the front end. The is-style-class is applied to the paragraph correctly (both in the editor and front end), but the stylesheet isn’t loaded in the front end.

    I’m guessing that something in your theme causes different loading of block styles. Maybe this from functions.php:

    	/**
	 * Gutenberg 13.0 broke the loading of CSS in the Site Editor,
	 * this is a temporary(?) workaround.
	 */
	if ( function_exists( 'gutenberg_pre_init' ) ) {
		foreach ( $styled_blocks as $block_name ) {
			add_editor_style( "assets/css/min/blocks/$block_name.min.css" );
		}
	}
    Thread Starter audunmb

    (@audunmb)

    Now I have this issue with Twenty-Twenty-Two as well. And it seems like it is an issue with the plugin.

    Haven’t found a solution yet, but seems like it is not an issue with your theme.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom block style from plugin doesn’t work with this theme?’ is closed to new replies.