Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Block: Focus outline doesn't clear floated blocks #28570

Open
obenland opened this issue Jan 28, 2021 · 3 comments
Open

Image Block: Focus outline doesn't clear floated blocks #28570

obenland opened this issue Jan 28, 2021 · 3 comments
Labels
[Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended

Comments

@obenland
Copy link
Member

Description

Step-by-step reproduction instructions

  1. Create a new post/page
  2. Add two Image blocks, one after another
  3. Set a Left alignment on the first Image block
  4. Click on the second block to trigger focus outline

Expected behaviour

The focus outline appears around the selected block.

Actual behaviour

The focus outline appears around the selected block and the floated block ahead of it.

Screenshots or screen recording (optional)

Screen Shot 2020-04-09 at 07 09 24

Code snippet (optional)

<!-- wp:image {"align":"left","id":353,"sizeSlug":"medium","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignleft size-medium"><img src="https://images.pexels.com/photos/1002064/pexels-photo-1002064.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=300" alt="concrete building under blue sky" class="wp-image-353"/><figcaption>Photo by Jeffrey Czum on <a href="https://www.pexels.com/photo/concrete-building-under-blue-sky-4004305/" rel="nofollow">Pexels.com</a></figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":340,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://images.pexels.com/photos/1054391/pexels-photo-1054391.jpeg?cs=srgb&amp;dl=pexels-josh-sorenson-1054391.jpg&amp;fm=jpg" alt="top view photo of ocean waves" class="wp-image-340"/><figcaption>Photo by Josh Sorenson on <a href="https://www.pexels.com/photo/top-view-photo-of-ocean-waves-1054391/" rel="nofollow">Pexels.com</a></figcaption></figure>
<!-- /wp:image -->

WordPress information

  • WordPress version: 5.7-alpha
  • Gutenberg version: Not active and 9.8.2
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty

Device information

  • Device: Desktop
  • Operating system: macOS 11.1
  • Browser: Chrome, Safari
@obenland obenland added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels Jan 28, 2021
@skorasaurus
Copy link
Member

still reproducible in Gutenberg 11.5.1

@kathrynwp
Copy link

I'm still able to replicate this with:

WordPress 6.0.1
Gutenberg 13.8.1 active or inactive
No other plugins active

Twenty Twenty-Two 1.6

Firefox 103.0.1
macOS 12.2.1

Add_New_Page_‹Self-hosted_Test—_WordPress

@jordesign
Copy link
Contributor

Still present in WP 6.3 and GB16.5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

4 participants