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](https://i.stack.imgur.com/ZAliD.jpg)
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](https://i.stack.imgur.com/6vEjF.png)
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](https://i.stack.imgur.com/6vEjF.png)
Selecting A Block Immediately After A Right Aligned Image Block
.wp-block-image[data-align="right"] + * {
color: hotpink;
}
![enter image description here](https://i.stack.imgur.com/j5kj5.png)
Selecting A Block Immediately After A Center Aligned Image Block
.wp-block-image[data-align="center"] + * {
color: hotpink;
}
![enter image description here](https://i.stack.imgur.com/32ieA.jpg)
Selecting A Block Immediately After A Wide Aligned Image Block
.wp-block-image.alignwide + * {
color: hotpink;
}
![enter image description here](https://i.stack.imgur.com/c1bE5.png)
Selecting A Block Immediately After A Full Width Image Block
.wp-block-image.alignfull + * {
color: hotpink;
}
![enter image description here](https://i.stack.imgur.com/HC0wS.jpg)
Selecting A Block Immediately After An Image Block With No Alignment
.wp-block-image[data-align="none"] + * {
color: hotpink;
}
![enter image description here](https://i.stack.imgur.com/ZAliD.jpg)
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"] + * + * {