Whitespace changes not shown in 'Resolve Block' diff when validation fails.

[tomjn]

Description

A block we're working on has started failing block validation, yet the diff that is shown has no observable difference.

A deeper inspection reveals that the cause is several blank spaces. These are collapsed by the browser into a single space, hiding the problem in the UI

Our blocks save component:

const Save = ( {
    attributes: {
        locale = '',
        locale_condition = '',
    },
    className,
} ) => {
    return (
        <div
            className={ className }
            data-locale={ locale }
            data-locale-condition={ locale_condition }
        ><InnerBlocks.Content /><span className={ `wp-block-language__end` } /></div>
    );
};

The resolver:

The difference between the two is that the <div> contains blank new lines ( we don't know where these come from ), and that the number of blank lines has changed from 65 to 63.

Expected behaviour

• Blank lines should not break block validation
• <InnerBlocks.Content /> should not insert phantom blank lines during validation
• whitespace changes should be shown in the diff when resolving block validation issues

WordPress information

• WordPress version: 5.6.1
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: Intel MBP 13"
• Operating system: MacOS 11.2
• Browser: Google Chrome 88

[tomjn]

This is related to https://github.com/WordPress/gutenberg/issues/10308 which is what causes the newlines issue

[getsource]

Hi @tomjn, and thanks for the report!

This issue was talked about in a triage session today.

It looks like, as you mentioned, the specific cause of the validation error was confirmed in #10308.

Since fixing the invalidation error wouldn't necessarily cover the problem of the diff not having an observable cause, folks present thought it might help to use this issue specifically for the issue with the diff (I'm guessing this might have been your initial intent anyway).

What do you think about renaming the title slightly to make it more clear that this issue covers whitespace in the diff, rather than the error in validation?

Reordering, maybe something like Whitespace changes not shown in 'Resolve Block' diff when validation fails.?

[tomjn]

What do you think about renaming the title slightly to make it more clear that this issue covers whitespace in the diff, rather than the error in validation?

This sounds fair, title updated!

[getsource]

Awesome, thanks!!