Custom Styling for Gutenberg

  • Resolved Justin McGuire

    (@vijustin)


    3 years, 1 month ago

    I’m running into a small issue with the Gutenberg block where if I apply custom styling to the front end of the site via my theme’s stylesheet that styling isn’t being reflected on the post / page editor screen and instead the block is loading with it’s default styling.

    Is there a way I can apply my custom CSS to both the front and back end for the slider so the user gets an accurate preview of what the slider will look like when the page or post is published?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    This is because you’re only enqueueing your theme’s CSS code to your front end which is how it is supposed to be.

    If you want your custom css to be included in your WordPress dashboard, you’d have to enqueue it into the backend as well.

    It should look something like this

    function enqueuing_admin_scripts(){
    wp_enqueue_style('admin-your-css-file-handle-name', get_template_directory_uri().'/css/your-css-file.css'); 
}
add_action( 'admin_enqueue_scripts', 'enqueuing_admin_scripts' );
    Thread Starter Justin McGuire

    (@vijustin)

    Thanks for the follow up. When looking at the slider preview generated by the Gutenberg Block everything looks like it was contained in an iframe. After some digging in the plugin I found a filter which appears to be responsible for dropping the styling into the iframe.

    add_filter('metaslider_preview_styles', array($this, 'preview_styles'));

    Tapping into that has allowed me to add my custom styling to the preview iframe and allows the backend Gutenberg block to match the front end now. I think this should resolve my issue unless there is some reason to avoid using that filter.

    Hi,

    Glad you were able to find a much better solution. There’s nothing wrong to using the filter. I’ll consider this issue as resolve.

    Have a great day!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Styling for Gutenberg’ is closed to new replies.

Tags