Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #39250
    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:

                                      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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.