Change classname in Block Editor save function after compile

[jkang-moneyjet]

Hi,

I have a question about Gutenberg Block’s save function.

I am currently developing custom Gutenberg blocks using @wordpress/scripts + tailwind.

Since I am using tailwind, I use many utility classes on both edit and save function.

For example:

Snippet from Edit.js

<div className="mt-6 border-t border-gray-200">
    <InnerBlocks allowedBlocks={["core/paragraph"]} template={[["core/paragraph"]]} />
</div>

Snippet from Save.js

<div className="mt-6 border-t border-gray-200" data-module="accordion">
    <InnerBlocks.Content />
 </div>

Here is my question.

Let’s say that I added a registered custom block on the page and saved on my local setup.

While I am running npm run start and changing/adding/removing the class name from the Save.js, I noticed that the block that I created is no longer valid with following message This block contains unexpected or invalid content. I know I can add an new custom block but I want to avoid this process because I have to re-import content. I want to make my custom block to be valid even though I edit class name or add more components on Save.js

Is there a way to avoid this issue?

Any assistance would be greatly appreciated.

[t-hamano]

Hi @jkang-moneyjet,

I want to make my custom block to be valid even though I edit class name or add more components on Save.js

Basically, if you update the markup that is saved, i.e. the save.js function, you will need block deprecation to migrate to the new markup without breaking the block. Below are the relevant documents.

• Deprecation – Block Editor Handbook | Developer.WordPress.org
• Block deprecation – a tutorial – WordPress Developer Blog

[jkang-moneyjet]

Thanks @t-hamano, that's exactly what I am looking for!