Placeholders

[Morgan Kay]

I’m writing my own blocks, and for some reason placeholders aren’t working. Everything else about the editable fields is working, but the placeholders aren’t displayed.

This block has a lot of fields, so I won’t post all of the code for it… but here’s the code for the editable section:

<Editable
                                  tagName="h3"
                                  placeholder={ __( 'Enter the person\'s name' ) }
                                  onChange={ ( value ) => props.setAttributes( { title: value } ) }
                                  value={ props.attributes.title }
                                  focus={ props.focus }
                                  onFocus={ props.setFocus }
                              />,

In the source, I see this:
<h3 class="blocks-editable__tinymce" aria-label="Enter the person's name" id="mce_0" data-is-placeholder-visible="false"><br data-mce-bogus="1"></h3>

Any idea why the placeholder isn’t visible? If you need to see more of the code, I can post it.

[Morgan Kay]

Ah ha, I figured it out!

The problem is focus={ props.focus }: that puts the cursor in the field as soon as the block is added and removes the placeholder. Removing the automatic focus makes the placeholder appear.

[Author]

Posts