.first-block-align-wide body class not showing with media-text block.

[jamiemitchell]

I'm not getting the '.first-block-align-wide' body class added when using the 'media-text block' set to 'alignwide', but the '-align-wide' body class does show with other blocks set to alignwide

'-align-full' gets added just fine with the 'media-text block'.

[nickcernis]

Thanks, @jamiemitchell.

The issue is caused by WordPress Core omitting the align attribute if the media-text block uses the default 'wide' alignment.

If you don't set any alignment (defaults to wide), the media block has a blank 'align' attribute:

array(3) { ["align"]=> string(0) "" ["mediaId"]=> int(448) ["mediaType"]=> string(5) "image" }

Which results in this body class at present in Genesis Sample:

first-block-align-

If you click the 'wide' alignment, the media block has these attributes (align attribute is missing):

array(2) { ["mediaId"]=> int(448) ["mediaType"]=> string(5) "image" }

…which results in no class at all.

If you set alignment to 'full', WP core then outputs the expected alignment attribute:

array(3) { ["align"]=> string(4) "full" ["mediaId"]=> int(448) ["mediaType"]=> string(5) "image" }

So the correct body class of first-block-align-full appears as expected in Genesis Sample.

I will report this as a bug in the Gutenberg repo. WordPress should output the alignment of the block, whether it's the default or manually selected.

For now, you can fix it by amending genesis_sample_blocks_body_classes in lib/gutenberg/init.php.

Replace this code near the end of the function:

if ( isset( $blocks[0]['attrs']['align'] ) ) {
    $classes[] = 'first-block-align-' . $blocks[0]['attrs']['align'];
}

With this:

    if ( isset( $blocks[0]['attrs']['align'] ) && $blocks[0]['attrs']['align'] ) {
        $classes[] = 'first-block-align-' . $blocks[0]['attrs']['align'];
    }

    // Workaround to add -align-wide class for media-text block.
    // See https://github.com/studiopress/genesis-sample/issues/327.
    if ( 'core/media-text' === $blocks[0]['blockName'] ) {
        if ( ! isset( $blocks[0]['attrs']['align'] ) || ! $blocks[0]['attrs']['align'] ) {
            $classes[] = 'first-block-align-wide';
        }
    }

You should then get the first-block-align-wide class you expect for the media-text block, whether 'wide' alignment has been explicitly set or the block is using the default wide alignment.

[nickcernis]

Found an existing issue in Gutenberg at https://github.com/WordPress/gutenberg/issues/16365. Noting it may affect other blocks that default to wide too.

The if statement above (if ( 'core/media-text' === $blocks[0]['blockName'] ) {) could be amended to call a function that checked if the block was one that defaults to wide. It would be best if this was fixed in Gutenberg, though, so that we don't have to independently maintain a list of blocks that default to wide, or handle edge cases where default alignment is altered, or account for non-default blocks that default to wide.

[jamiemitchell]

Nice job in tracing that bug @nickcernis

That code worked a treat, will do the job for now.

And thanks for the fast and detailed reply.