Featured Image Block: Prevent default action on image click to fix linking to post #69716

Mayank-Tripathi32 · 2025-03-26T12:14:27Z

What?

Fixes an issue where the link inside the Featured Image block remains functional even when no image is set.

Why?

Currently, if you click the button from the image placeholder without setting a featured image, the link still works. This is unexpected behavior and may lead to confusion.

A related PR: #68775

How?

Add PreventDefault to button from further opening the link inside editor.

  <Button
  __next40pxDefaultSize
  icon={ upload }
  variant="primary"
  label={ label }
  showTooltip
  tooltipPosition="top center"
  onClick={ ( e ) => {
	   e.preventDefault();
	   open();
   } }
   />

Testing Instructions

Open a post or page.
Insert a Featured Image block.
Setting a link without setting a featured image
When I try to add an image the link works.

Screencast

Test.FI.mp4

github-actions · 2025-03-26T12:19:56Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

t-hamano

Thanks for the PR! This PR works well for me.

However, note that this PR is a temporary fix for 6.8. I think the fundamental problem is that the a element includes interactive element (button) even though it is not permitted by the HTML specification:

<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">
          <button type="button" class="components-button">Upload</button>
        </div>
        <button type="button" class="components-button" aria-label="Add a featured image"></button>
      </div>
    </div>
  </a>
</figure>

I believe the following approach is the ideal solution:

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.

Doing these things in 6.8 may be risky, so it would be a good idea to explore the ideal solution after shipping this PR.

t-hamano · 2025-03-27T02:18:00Z

This PR fixes a regression that is new to 6.8, so I think we need to backport this PR.

I'd be happy to get additional review/approval as we are in the RC phase.

Mamaduka

Makes sense going with the hotfix for WP 6.8 ✅

Mayank-Tripathi32 · 2025-03-27T07:55:49Z

I would be happy to work on finding ideal solution in background after hot-fix is merged 🙌🏻

Mamaduka · 2025-03-27T08:43:07Z

@t-hamano, do you mind creating a new issue based on your comment?

…to post (#69716) Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>

github-actions · 2025-03-27T09:39:52Z

I just cherry-picked this PR to the wp/6.8 branch to get it included in the next release: 3e457a2

… added checks for link to be shown only if featured image is set.

…ment (#69730) * Feat: removed the code from #69716 and fixed html structure, added checks for link to be shown only if featured image is set. * Fix: Update conditions for displaying link options in Post Featured Image edit panel * Refactor: Add conditional rendering to inspector controls * feat: add templates for single page templates Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * feat: add sizeSlug prop to reset handler --------- Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

…to post (WordPress#69716) Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>

…ment (WordPress#69730) * Feat: removed the code from WordPress#69716 and fixed html structure, added checks for link to be shown only if featured image is set. * Fix: Update conditions for displaying link options in Post Featured Image edit panel * Refactor: Add conditional rendering to inspector controls * feat: add templates for single page templates Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * feat: add sizeSlug prop to reset handler --------- Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

Fix: Prevent default action on image click to fix linking issue

f8d69df

Mayank-Tripathi32 marked this pull request as ready for review March 26, 2025 12:19

Mayank-Tripathi32 requested review from ajitbohra and fabiankaegy as code owners March 26, 2025 12:19

Mamaduka added [Type] Bug An existing feature does not function as intended [Block] Post Featured Image Affects the Post Featured Image Block labels Mar 26, 2025

t-hamano approved these changes Mar 27, 2025

View reviewed changes

t-hamano added the Backport to WP 6.8 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 27, 2025

t-hamano added this to WordPress 6.8 Editor Tasks Mar 27, 2025

github-project-automation bot moved this to 🔎 Needs Review in WordPress 6.8 Editor Tasks Mar 27, 2025

Mamaduka approved these changes Mar 27, 2025

View reviewed changes

Mamaduka merged commit bdb1679 into WordPress:trunk Mar 27, 2025
71 of 74 checks passed

github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 6.8 Editor Tasks Mar 27, 2025

github-actions bot added this to the Gutenberg 20.6 milestone Mar 27, 2025

github-actions bot removed the Backport to WP 6.8 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 27, 2025

github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 27, 2025

t-hamano mentioned this pull request Mar 27, 2025

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

Closed

Mayank-Tripathi32 added a commit to Mayank-Tripathi32/gutenberg that referenced this pull request Mar 27, 2025

Feat: removed the code from WordPress#69716 and fixed html structure,…

22ee095

… added checks for link to be shown only if featured image is set.

Mamaduka mentioned this pull request Apr 1, 2025

Editor: Update packages for 6.8 RC 2 WordPress/wordpress-develop#8628

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Featured Image Block: Prevent default action on image click to fix linking to post #69716

Featured Image Block: Prevent default action on image click to fix linking to post #69716

Uh oh!

Mayank-Tripathi32 commented Mar 26, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 26, 2025 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

t-hamano commented Mar 27, 2025

Uh oh!

Mamaduka left a comment

Uh oh!

Mayank-Tripathi32 commented Mar 27, 2025

Uh oh!

Mamaduka commented Mar 27, 2025

Uh oh!

Uh oh!

github-actions bot commented Mar 27, 2025

Uh oh!

Uh oh!

Featured Image Block: Prevent default action on image click to fix linking to post #69716

Featured Image Block: Prevent default action on image click to fix linking to post #69716

Uh oh!

Conversation

Mayank-Tripathi32 commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screencast

Uh oh!

github-actions bot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Mar 27, 2025

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Mayank-Tripathi32 commented Mar 27, 2025

Uh oh!

Mamaduka commented Mar 27, 2025

Uh oh!

Uh oh!

github-actions bot commented Mar 27, 2025

Uh oh!

Uh oh!

Mayank-Tripathi32 commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading