How can I check if the first block is an image aligned left or right?

by

Your problem can be solved using CSS and a small filter. Your proposed solution is not viable.

You can check the attributes of some blocks but changing those attributes will not re-render the block if its HTML was generated by javascript. This means the majority of the standard blocks cannot be modified this way, and modifying the class attribute will not change the markup on the frontend.

However, it is not necessary. CSS can handle every situation using the various CSS3+ selectors. Since you won’t share the specifics of your problem, I’ve been forced to brute force the solution by detailing every possible combination.

Adding An Alignment Data Attribute To Image Blocks

But first, left and right aligned images don’t have a class on their parent container, only fullwidth and wide images, so we’re going to fix that by adding a data attribute:

/**
 * Ensure all image blocks have an alignment class.
 *
 * @param string $block_content The block content about to be appended.
 * @param array  $block         The full block, including name and attributes.
 * @return string Modified block content.
 */
function tomjn_add_align_class( $block_content, $block ) {
    $alignment="none";
    if ( ! empty( $block['attrs']['align'] ) ) {
        $alignment = $block['attrs']['align'];
    }
    $content = str_replace(
        'class="wp-block-image',
        'data-align="' . esc_attr( $alignment ) .'" class="wp-block-image',
        $block_content
    );
    return $content;
}
add_filter( 'render_block_core/image', 'tomjn_add_align_class', 10, 2 );

This allows us to use pure CSS for the rest. Note that we have no way of knowing which block is next when using the block rendering filters, so this can’t be used to implement the original proposed solution. This would also lead to problems when more than one post is being rendered, e.g. if the last block of a post is an image, the first block of the next post would incorrectly get the class.

Styling The Blocks

Selecting A Block Immediately After An Image Block

.wp-block-image + * {
    color: hotpink;
}

enter image description here

Selecting A Block Imediatley After An Image Block That The First Block In A Post

.entry-content > .wp-block-image:first-child + * {
    color: hotpink;
}

enter image description here

Note the > is necessary, without it the first image blocks inside nested blocks will also be selected. Adjust .entry-content to the class that contains your content.

Selecting A Block Immediately After A Left Aligned Image Block

.wp-block-image[data-align="left"] + * {
    color: hotpink;
}

enter image description here

Selecting A Block Immediately After A Right Aligned Image Block

.wp-block-image[data-align="right"] + * {
    color: hotpink;
}

enter image description here

Selecting A Block Immediately After A Center Aligned Image Block

.wp-block-image[data-align="center"] + * {
    color: hotpink;
}

enter image description here

Selecting A Block Immediately After A Wide Aligned Image Block

.wp-block-image.alignwide + * {
    color: hotpink;
}

enter image description here

Selecting A Block Immediately After A Full Width Image Block

.wp-block-image.alignfull + * {
    color: hotpink;
}

enter image description here

Selecting A Block Immediately After An Image Block With No Alignment

.wp-block-image[data-align="none"] + * {
    color: hotpink;
}

enter image description here

And so on, you can expand this further:

  • Using ~ instead of + will select all blocks rather than the next adjacent block
  • You can change + * with a more specific selector e.g. .wp-block-image[data-align="none"] + ul { will select all lists that come after an image block with no alignment
  • You can chain them together, e.g. you can select not the next block but the one after that with .wp-block-image[data-align="none"] + * + * {