Automattic / Automattic/jetpack

Image Compare: size issue when used inside CoBlocks accordion

Open
#16,105 1 comment 0 reactions 0 assignees View on GitHub
[Block] Image Compare [Pri] Low Bug Customer Report [LEGACY]
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

The Image Compare block has incorrect sizes on the surrounding HTML when used inside a CoBlocks accordion block.

#### Steps to reproduce

1. Starting at URL: AT site, add a CoBlocks accordion to the page
2. Add an Image Compare block with images inside the accordion
3. View published page

#### What I expected

Images should be the same size as they are in the editor:

![https://d.pr/i/UYVnN9](https://d.pr/i/UYVnN9+)

#### What happened instead

They are tiny:

![https://d.pr/i/iWmYvJ](https://d.pr/i/iWmYvJ+)

The issue is the size which is adding inline on the `juxtapose` DIV: `style="height: 100px; width: 100px;"`

![https://d.pr/i/Tl1MLx](https://d.pr/i/Tl1MLx+)

To compare, when this block is added outside of the accordion block it is `style="height: 1070px; width: 1070px;"`

![https://d.pr/i/wCehQb](https://d.pr/i/wCehQb+)

#### Context / Source

Reported 21757111-hc

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Image Compare block inside a CoBlocks accordion, then inspect the published page's juxtapose DIV and its inline dimensions. Compare this with the same block outside the accordion; done means the images have the expected size inside the accordion rather than 100px dimensions.

Written by the indexing model from the issue text.

Assessment

Tech stack
wordpress
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.