Gutenberg: Blocks: Image block warns on invalid placeholder value

[aduth]

Describe the bug

When drag-dropping an image file, a warning may be logged to the developer tools console mentioning an invalid placeholder attribute value:

react-dom.24169eaf.js:526 Warning: Received false for a non-boolean attribute placeholder.

If you want to write it to the DOM, pass a string instead: placeholder="false" or placeholder={value.toString()}.

If you used to conditionally omit it with placeholder={condition && value}, pass placeholder={condition ? value : undefined} instead.

The warning occurs at this assignment:

https://github.com/WordPress/gutenberg/blob/b06a33569a2b860110cb8d3f113ccf6c2b36e492/core-blocks/image/edit.js#L301

It may be the case that image width or height could be unknown, in which case we cannot assign as placeholder.

This seems intermittent in my testing, most reliable with a drag-drop at the beginning of a session with no other content (not logging on subsequent drops).

To Reproduce

Steps to reproduce the behavior:

1. Navigate to Posts > Add New
2. Drag an image from your computer into the editor
3. Observe warning in developer tools console

Expected behavior

No warning.

Desktop (please complete the following information):

• OS: macOS 10.13.6 (17G65)
• Browser: Version 67.0.3396.99 (Official Build) (64-bit)

[noisysocks]

I haven't been able to reproduce this. What image are you dragging into the editor?

From looking at the code, it looks like the only way that this warning could happen is if this.image is false which is quite bizarre. Can you apply this diff and tell me what this.image is when the error happens?

https://gist.github.com/noisysocks/2aafa48cbbea2baab9e207c1ba1e77fd

[talldan]

I also had a go and couldn't reproduce @aduth

[aduth]

I'm still seeing this. If it helps, I originally witnessed it with an animated GIF, though it seems to happen for any image.

Some thoughts to check:

• Do you have the sidebar opened when dropping the image? The errors are specific to inspector controls.
• Are you running with SCRIPT_DEBUG constant set to true so that React will show appropriate warnings?

With debugging code, it wasn't tripping at all. Setting a manual conditional (props.placeholder === false) in the TextControl component, I'm thinking now it may actually be coming from this line:

https://github.com/WordPress/gutenberg/blob/4b7f8295055293772d79576917f81781e00f7d81/core-blocks/image/edit.js#L356

As evidenced in React's warning, it's probably caused by our cleverness with &&:

If you used to conditionally omit it with placeholder={condition && value}, pass placeholder={condition ? value : undefined} instead.

I suggest we use this convenience as sporadically as possible, because it often leads to unintentional value passing (many people don't realize that the falsey left-hand value is passed).

false && 'https://';
// false

null && 'https://';
// null

0 && 'https://';
// 0

The last one is particularly "fun" in a React context.