A custom CSS framework such as Bootstrap or UIKit includes its own much more flexible grid system. I would like to use this instead of Wordpress's CSS for the default Column block.

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

            '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 or any default markup related to the new Gutenberg blocks.

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://wordpress.org/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 is possible. Can anyone steer me in the right direction? Or is creating custom block filters in Javascript the only way?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.