Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Custom CSS style sheet in Editor Preview

  • I am adding custom classes to a child theme and enqueuing the style sheet. To see these styles visually in the editor, do they have to be part of the global styles system in generateblocks?

    I am using some code to help the headings render correctly. But if I add some container to make a section and wrapper and then apply a new blank style while in the editor to 1) apply the style and 2) convienntly be available in the future. However, I do not see the spacing properties being rendered.

    So, do I also have to add the spacing values to the blank generateblocks global style class to see the spacing? That is, GPP/GPB cannot use the values from the style sheet for the editor page preview?

    Thanks as always!

  • Hi there,

    WP editor does not load your style sheet by default; you will need to use PHP code to make it load your stylesheet.

    Is the CSS in your child theme’s style.css file?

  • I did enque them for the editor using this action.

    add_filter(‘generate_editor_styles’, ‘gp_mini_editor_styles’, 50);

    But that alone does not make my styles previewable when editing by adding a blank style.

    I need to do some more testing. I will come back to this a little later. But thank you for your reply.

  • Your code snippet tells WordPress where to look or how to handle editor styles; it doesn’t actually point to a CSS file or enqueue it. It is a filter hook, which is used to modify a list of styles, rather than a function that directly loads a file.

    Try this instead:

    add_filter( 'generate_editor_styles', 'gp_mini_editor_styles', 50 );
    function gp_mini_editor_styles( $editor_styles ) {
        // This adds your custom CSS file to the array of styles loaded by the theme
        $editor_styles[] = 'gp_mini_editor_styles.css';
        return $editor_styles;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.