Only work on editor

Can I see the site where the piano block is embedded? I would also be happy if you could tell me where you inserted the piano block that should be displayed.

this is an exemple of page : https://www.melopie.com/annuaire-professeur-de-piano-anglais/cours-de-piano-montpellier-eveil-musical-2/

I checked your site. Are you using a cache plugin that combines JavaScript into one? As a result, the code for this plugin appears to no longer work.
Some cache plugins should have the ability to exclude certain files. If you exclude the following files, it will work correctly.

https://www.melopie.com/wp-content/plugins/piano-block/build/view.js

Yes I have a cache plugin. I have change its programmation, but now it can appear there is a bug in the presentation isn’t it ?
https://www.melopie.com/annuaire-professeur-de-piano-anglais/cours-de-piano-montpellier-eveil-musical-2/

his is because some styles defined by the theme affect this block.

It’s realistically impossible to make it work with all themes, but if it’s your theme, you can at least fix major layout errors by adding the following CSS.

.piano-block-keyboard .piano-block-keyboard__key--black {
	z-index: 1;
}

.piano-block-keyboard .piano-block-keyboard__key {
	margin: 0;
}

In future updates, we plan to make some style adjustments to the plugin side as well.

I added the CSS it’s a little better but still not quite good. I don’t know anything about CSS to modify it myself. Can you tell me what to change to improve the presentation?

Plz can you help me a last time. The black keys are ok just the white keys have a size bug.

https://www.melopie.com/annuaire-professeur-de-piano-anglais/cours-de-piano-montpellier-eveil-musical-2/

Try this code

.piano-block-keyboard .piano-block-keyboard__key--black {
	z-index: 1;
}

.piano-block-keyboard .piano-block-keyboard__key--white {
	margin: 0;
}

It works thanks a lot it is so cool !!!!