Remove inline-block display from image anchor in style.scss

[yogeshbhutkar]

Fixes: #67366

What?

This PR removes the display: inline-block property from the image anchor that causes the caption anchors to not flow in continuation as described in the PR.

How?

The CSS rule causing the side-effect was removed.

Screenshots

Before:

After:

Screencast:

Screen.Recording.2024-11-28.at.12.32.16.PM.mov

[github-actions]

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: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
Co-authored-by: frkly <frkly@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!

When deleting code, it's a good idea to use something like Git blame to find out why it's there. This code is to fix the unintended focus outline that occurs when images are linked, so we can't delete this code entirely (See #62556):

More importantly, the HTML changes when we add left/right alignment to images in the classic theme.

No left/right alignment:

<figure class="wp-block-image">
  <a href="">
    <img>
  </a>
</figure>

With left:right alignment:

<div class="wp-block-image">
  <figure class="alignleft">
    <a href="">
      <img>
    </a>
  </figure>
</div>

With these things in mind, I think the following selector would be good to accurately target links to the image itself:

.wp-block-image {
	> a,
	> figure > a {
		display: inline-block;
	}
}

[t-hamano]

P.S. This issue also occurs when the images are wide and full width, but those issues will be fixed in #67392.

[yogeshbhutkar]

Thank you, @t-hamano, for reviewing the PR. I have addressed your feedback and made the necessary updates. The code has been tested and is functioning as expected. It is now ready for your review.

[t-hamano]

LGTM 👍