Starscape: Block validation error

[carstingaxion]

Unfortunately this nice block-experiment is only working anymore within the editor, not on the frontend. And it tells us about it.

Bildschirmaufzeichnung vom 05.12.2023, 10:38:26.webm

In the rendered block-output the looong inline CSS for .wp-block-a8c-starscape__stars are missing the animation property, which do exist in the rendered component in the editor.

The console says:

Content generated by `save` function:

[...] <div class="wp-block-a8c-starscape__stars" style="box-shadow:[...(loong list of values)...]width:3px;height:3px;animation:wp-block-a8c-starscape-animation-rotate 39.67466772465781s linear infinite"></div><div class="wp-block-a8c-starscape__inner"></div></div>

Content retrieved from post body:

[...] <div class="wp-block-a8c-starscape__stars" style="box-shadow:[...(loong list of values)...]width:3px;height:3px"></div><div class="wp-block-a8c-starscape__inner"></div></div>

[ajlende]

@carstingaxion Can you share the full markup for the block? It can be copied from the block toolbar > options (⋮) > copy. Or from the code editor (command + option + shift + M or control + alt + shift + M) including everything from <!-- wp:a8c/starscape to <!-- /wp:a8c/starscape -->. Thank you!

[carstingaxion]

Can you share the full markup for the block?

Sure. Thanks for replying @ajlende.

Steps to reproduce

1. Create a new post/page
2. Add the Starscape block
3. Click "Save draft" button
4. Open code-editor

Markup after inserting the block

```html

```

5. Reload browser
6. See message about broken block
7. Open code editor again and find changed code

Markup that got saved to the DB

```html

```

[ajlende]

Thanks for the details @carstingaxion.

I haven't been able to reproduce the issue yet.

I'm testing with these versions.

WordPress: 6.4
Starscape: 2.0.0
Gutenberg: deactivated

What are you using for each of these?

(I'll be out for a few days, but when I get back I can take another look)

[ajlende]

I haven't made much progress, but I found another instance of the error.

Markup after inserting the block

```html

Atlas

A starscaped block theme.

```

Markup that got saved to the DB

```html

Atlas

A starscaped block theme.

```

The differences in this case are:

• The stars are positioned differently.
• Inner blocks start on the same line before and the next line after.

The differences in the earlier example are:

• opacity exists before, but not after.
• animation exists after, but not before.
• Inner blocks start on the same line before and the next line after.

The only thing that both have in common is that, somewhere along the line, newlines are getting added where they shouldn't on save. I wonder if it's related to block deprecations in Gutenberg instead of something here? Or maybe one of the block supports that we're using now modifies the content only on save, but not while editing?

I still haven't figured out what could be causing the other differences.