Block validation failed error in console, but block working in editor...

[ihdk]

Hello, I'd like to ask if it's ok that block validation failed in browser console, where I can still see error validation message like:

Block validation: Block validation failed for .....
<div class="wp-block-services main-holder layout-box header-type-icon has-bg align-center" style="background-color:#ffdd57"><div class="service-header"><div class="service-icon" style="font-size:100px"><i class="fas fa-cogs" style="color:#b9b9b9"></i></div></div><div class="service-content"><h3 class="service-title">this is title</h3><p class="service-description">description text</p></div></div>

Actual:

<div class="wp-block-services main-holder align-center has-bg" style="background-color:#ffdd57"><div class="service-image"><img src="http://localhost/gutenberg/wp-content/uploads/2018/11/g-logo-white.png"/></div><h3 class="service-title">this is title</h3><p class="service-description">description text</p></div>

Deprecated block is defined and this error message doesn't break the editor so I can continue to edit blok with new options.
I am just curious if this error message in console would be there, or I am still doing something wrong even I can continue to use the block in editor. Block in editor doesn't crash and I do not need to convert block like before, while deprecated block was not defined.
Error message in console disappear, of course, immediately I change something in editor and update post.

Thanks for any info, Ivan.

[ihdk]

just to clarify, of course the html of whole block was changed except the main parent div where were changed just classes.
My deprecated parameter contains previously used save function exactly like it was before, and parameters which were used before + newly added parameters.

[ihdk]

after further research, I tried the simple example in documentation for Deprecated Blocks

const { registerBlockType } = wp.blocks;
const attributes = {
    text: {
        type: 'string',
        default: 'some random value',
    }
};

registerBlockType( 'gutenberg/block-with-deprecated-version', {

    // ... other block properties go here

    attributes,

    save( props ) {
        return <div>{ props.attributes.text }</div>;
    },

    deprecated: [
        {
            attributes,

            save( props ) {
                return <p>{ props.attributes.text }</p>;
            },
        }
    ]
} );

The result is same, block doesn't crash in editor after change, but I can still see validation error in console:

Expected:
<div class="wp-block-tester">some random value</div>
Actual:
<p class="wp-block-tester">some random value</p>

Thanks for any recommendation on how to get rid of the validation errors from console.

[garciaalvaro]

I think this is the default behaviour. At least is what happens with the simple example you posted. Once the post is updated the block updates and on the next page reload the error doesn't appear. But it is confusing at first.

[talldan]

Hi @ihdk - this is currently expected, the validation failure is logged regardless of whether a deprecation can be used as a fallback, but it should only happen if the post contains an old version of a block.

In the example, the post content would have contained a <p> tag instead of the <div> that the current version of the block expected. The validation fails against that version causing the warning to be logged. The validation process then performs the same logic against each of the deprecations, and will also log warnings if any of those fail, but as soon as one passes the validation is considered successful and the deprecation used as a fallback.

I think I recall seeing a discussion before about the warnings before, but can't find it now. It is potentially a bit confusing that this is logged as an error when a deprecation is successful. A potential improvement would be to log instead as a warning or info when a block falls back to a deprecation.

[ihdk]

Hello, thanks a lot for clarification. Really good to know it's expected behavior for now.
Another simple log message instead of error in console could be the good solution, because errors are pretty confusing now and force developers think there's something wrong with their block code.

Thanks again, Ivan.

[designsimply]

I am closing this issue since an answer has been provided (thank you @talldan!) and noting that there is some additional discussion about block validation, including potential tasks for improvement, at #11440 and that would be a good discussion to follow if you'd like.