css - How to add a class to a core block in both admin editor and frontend?

admin管理员组

文章数量:1122846

I'm having huge difficulties with the forced styling bundled in WP (using hybrid themes):

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

Because my themes uses its own width settings and whenever I add a group block the code above gets added (which is pure evil). I can't really use add_theme_support( 'disable-layout-styles' ); because then things like justification on buttons block won't work (in admin/editor).

I added

    "layout": {
        "contentSize": "100%",
        "wideSize": "100%"
    },

in my theme.json which sort of works but forces the users to manually set the blockwidth to fullwidth on each block.

My latest idea is to add the class "alignfull" to all group blocks programmatically instead. I use this snippet with success but render_block is frontend only (what I know).

add_filter( 'render_block', 'add_class_to_group_block', 10, 2 );

/**
 * Add .alignfull class on group blocks to get rid of the horrible !important margins on non-aligned blocks
 */
function add_class_to_group_block( $block_content, $block ) {

    if ( 'core/group' === $block['blockName'] ) {
        $block_content = new WP_HTML_Tag_Processor( $block_content );
        $block_content->next_tag();
        $block_content->add_class( 'alignfull' );
        $block_content->get_updated_html();
    }

    return $block_content;
}

Is there anything similar to render_block for admin/editor usage? Or can I solve this dilemma in another way?

本文标签： cssHow to add a class to a core block in both admin editor and frontend