Block pattern conflict with custom block

Question

I have created a custom block named testimonials and saved it as a pattern. The problem is when I make some modifications to the block save function it doesn't match with the pattern anymore and I get block validation JS error:

Block validation: Block validation failed for `deoblocks/testimonials`
Content generated by `save` function:
<div class="swiper-pagination" style="--swiper-pagination-color: var(--wp--preset--color--primary)"></div>

Content retrieved from post body:
<div class="swiper-pagination" style="--swiper-pagination-color: undefined"></div>

My understanding is that WordPress is loading the pattern with the custom block testimonials, but the save function generates different content.

How this can be fixed?

Answer 1

After more debugging, I finally fixed it. The solution was to match the block markup with the pattern markup. So if my block has style="--swiper-pagination-color: undefined" the same style should exist in the pattern.