Junaid Bhura a web developer in Melbourne, Australia - specializing in WordPress development.

block-editorgutenbergwordpress

Turn off WordPress 6 block layout classes and styles


I actually can't believe this feature was shipped in WordPress core. To be fair, it is marked as "experimental". But I've encountered problems on a couple of sites already.

Anyway, here's a suggestion for a much better implementation (in my opinion):

<?php
// This returns the site back to normal.
remove_filter( 'render_block', 'wp_render_layout_support_flag' );

// Add alignment classes instead.
// Support the new layout features using classes.
add_filter( 'render_block', 'jb_add_alignment_classes', 10, 2 );

/**
 * Add alignment classes to blocks.
 *
 * @param string|null $block_content Original block content.
 * @param array       $block Block data.
 *
 * @return string|null
 */
function jb_add_alignment_classes( ?string $block_content = '', array $block = [] ): ?string {
    // Check for block name.
    if ( empty( $block['blockName'] ) ) {
        return $block_content;
    }

    // Build classes.
    $classes = [];
    if ( ! empty( $block['attrs']['layout']['type'] ) ) {
        $classes = [
            'wp-block--display-' . $block['attrs']['layout']['type'],
        ];

        if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) {
            $classes[] = 'wp-block--justify-content-' . $block['attrs']['layout']['justifyContent'];
        }

        if ( ! empty( $block['attrs']['layout']['verticalAlignment'] ) ) {
            $classes[] = 'wp-block--vertical-alignment-' . $block['attrs']['layout']['verticalAlignment'];
        }
    }

    // Check for classes.
    if ( empty( $classes ) ) {
        return $block_content;
    }

    // Add classes to block content.
    // You may have to update this to suit your needs.
    $block_content = str_replace(
        'class="wp-block-',
        sprintf(
            'class="%s wp-block-',
            implode( ' ', $classes ),
        ),
        $block_content
    );

    // Return updated content.
    return $block_content;
}

And the (S)CSS:

.wp-block--display-flex {
    display: flex;
}

.wp-block--justify-content {

    &-center {
        justify-content: center;
    }

    &-left {
        justify-content: start;
    }

    &-right {
        justify-content: flex-end;
    }
}

.wp-block--vertical-alignment {

    &-top {
        align-items: start;
    }

    &-middle {
        align-items: center;
    }

    &-bottom {
        align-items: flex-end;
    }
}