Overriding HTML/CSS Classes of “Columns” block from Gutenberg editor

  • I generally use a custom CSS framework such as Bootstrap or UIKit which includes its own much more robust grid system. I would like to use this instead of WordPress’s CSS for the default Column block for starters.

    To override the layout of a Widget you just have to put something like this in the functions.php file:

    register_sidebar([
    ‘name’ => esc_html__($section, ‘u3’),
    ‘id’ => $section,
    ‘before_widget’ => ‘<div class=”uk-card uk-card-body widget %1$s %2$s”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<h3 class=”uk-card-title”>’,
    ‘after_title’ => ‘</h3>’
    ]);

    However, I can’t find any information post-Gutenberg for overriding the Columns Block focused on its default markup/classes.

    I’d like to force everything to be inside an extra div for padding purposes as well as override the container/row to use the UIKit styles.

    I did find this which may be relevant, https://www.ads-software.com/gutenberg/handbook/designers-developers/developers/filters/block-filters but I do not know Javascript and would like to do it in the functions file unless that isn’t possible. Can anyone steer me in the right direction? Or is creating custom block filters in Javascript the only way?

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

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

  • Hi @starcrescendo,

    Interesting question. While blocks are filterable, it’s not super easy to do and requires Javascript like in that Block Filters handbook page. What may be easier to do however is adding padding to the existing markup in the most appropriate fashion to add padding.

    There are alternatives to the core columns block, such as the Row block in my CoBlocks plugin. I built a control to let folks add padding to the block within the block sidebar (as well as gutter, background image/color, and margin). You can even drag-to-resize the columns – so they don’t have to be equal width. ??

    Here’s a screenshot.

    I hope this helps!

    @starcrescendo where you able to get something done with Uikit and this Gutenberg blocks?

    Thread Starter starcrescendo

    (@starcrescendo)

    @sadesades Unfortunately, no. My “workaround” was as @richtabor mentioned, I downloaded a block plugin. I didn’t see his full message so I never tried his CoBlocks plugin, but I downloaded a plugin called “Kadence Blocks”. With it, you can specify all the classes that you need.

    The only problem is this plugin also adds its own stylings so you end up having to undo their styling so the UiKit styles take affect.

    For an example, you end up having to explicitly set margins to 0 using the options the Kadence Blocks plugin supplies so that the default UIkit margins take effect. Or for buttons, you have to explicitly set the background to “none” using the plugin so the default uikit background color will be used.

    Its clunky, but it does work perfectly. It’s just not super user-friendly to hand over to a client when they are then like “well why does my button look different?”.

    I’m going to try this CoBlocks plugin but I don’t like having to subscribe to do so and it explicitly blocks mailinator email addresses which is kind of shady. I worry about adding plugins that do too much, and some of them seem to give you a billion options when really I just integration points for UIKit.

    This really should be something WordPress considers for the core. I never liked how it included its own code for aligning images to left and right and this is a major extension of that to all aspects of content.

    EDIT: I would not recommend CoBlocks as it just took my email address and does not redirect to a download of the file. Super shady. It explicitly says “Download” so I expected to be given a download file.

    EDIT2: Go here https://www.ads-software.com/plugins/coblocks/ instead of their website to download the plugin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Overriding HTML/CSS Classes of “Columns” block from Gutenberg editor’ is closed to new replies.