Skip to content

Featured Image Block: Don't include interactive elements within a element #69728

@t-hamano

Description

@t-hamano

See: #69716 (review)

The Featured Image block has the setting to link the image to the post:

Image

When the block doesn't have an image yet and this setting is enabled, the MediaPlaceholder component is wrapped with the a element. This structure isn't permitted by the HTML spec:

<figure class="wp-block-post-featured-image">
 <a>
   <div class="components-placeholder block-editor-media-placeholder is-large has-illustration">
     <div class="components-placeholder__fieldset">
       <div class="components-form-file-upload">
         <!-- ❌ This is an interactive element! -->
         <button type="button" class="components-button">Upload</button>
       </div>
       <!-- ❌ This is an interactive element! -->
       <button type="button" class="components-button" aria-label="Add a featured image"></button>
     </div>
   </div>
 </a>
</figure>

I believe the following behaviour is ideal:

  • If the block is not in the query context:
    • The placeholder has an upload button, so we can't wrap the placeholder with a element.
    • If the featured image is not set, don't show the link-related settings (Lint to Post, Open in new tab, Link Rel)
    • When the featured image is reset, initialize/disable all link-related attributes.
  • If the block is in the query context:
    • The placeholder doesn't have an upload button, and the featured image is set depending on the current context.
    • Link-related settings are always visible. When the block is linked, wrap the placeholder in an a element. This is safe because there are no interactive buttons inside the placeholder.

This should eliminate the need for the code added by #69716 to block the events.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] Post Featured ImageAffects the Post Featured Image Block[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions