Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.
https://themeshaper.com
GNU General Public License v2.0
907 stars 358 forks source link

[Baskerville 2] Image Block: slight margin added to Full-Size Image blocks on plugin-enabled sites #6329

Open pauljacobson opened 2 years ago

pauljacobson commented 2 years ago

Quick summary

Our user raised a concern about what seems to be a small amount of padding or margin that is added to an image in an Image Block like this:

https://user-images.githubusercontent.com/2912202/182549496-2c8a9dcd-c133-4551-8c8f-3aedf6d6dfe8.mp4

This doesn't seem to originate in the theme's CSS code, though. There also isn't an option to manage this in the user's post editor. This could be due to theme support, though. The user is using the Baskerville 2 theme.

This does seem to affect sites with plugins, though.

Steps to reproduce

  1. Open browser dev tools and inspect an Image Block with the classes wp-block-image size-full;
  2. Inspect this element, and the immediate child element;
  3. You should see the spacing, like this:

https://user-images.githubusercontent.com/2912202/182552449-ba36ee25-8d56-4455-b7a0-48a1f43b6e0f.mp4

What you expected to happen

The Image Block should not gain additional spacing. Here is a site that doesn't support plugins, and there is no additional spacing:

Uploading Capture_2022-08-03 at 10.43.36.mp4…

What actually happened

As you can see from the demonstrations before, on a WordPress.com site that supports plugins, there is extra space added to the Image Block.

Context

This was reported in 5427858-zen

Platform (Simple, Atomic, or both?)

Atomic

Theme-specific issue?

It affects Baskerville 2 although doesn't seem to be as a result of the theme.

Browser, operating system and other notes

Vivaldi 5.3.2679.70 (Stable channel) (arm64) macOS 12.5

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

Not aware of a workaround for this.

github-actions[bot] commented 2 years ago

Support References

This comment is automatically generated. Please do not edit it.

mriyazuddin commented 2 years ago

User has replied back saying this page is a good example of the space around the image: https://chrisbocay.com/master-the-law-of-attraction/

cuemarie commented 2 years ago

📌 SCRUBBING

📌 FINDINGS/SCREENSHOTS/VIDEO

Simple Test Site Screen Recording

https://user-images.githubusercontent.com/27249804/183147643-83a494dd-a098-4feb-9e8e-c26b474dd808.mov

AT Test Site Screenshots/Recordings

Baskerville 2

https://user-images.githubusercontent.com/27249804/183145930-8a64653e-dfa6-46c4-902e-5cc8f47b92df.mov

Twenty Sixteen

Screen Shot 2022-08-05 at 12 07 35 PM

Self-Hosted Test Site Screenshot

Screen Shot 2022-08-05 at 12 09 35 PM

📌 ACTIONS

ChrisBocay commented 2 years ago

Hello,

I am the original reporter of this phenomenon, which was done in a series of email messages to the Wordpress.com support team.

Unfortunately, not all details of my email messages have been transferred to this forum, so I am taking this opportunity to make this issue somewhat clearer.

THE ISSUE

Wordpress has always, to my knowledge, succeeded in downsizing any image on any post or page to exactly fit the particular content width of any theme, whether in Baskerville 2 or any other theme.

The issue is that, as of a few days ago (did it coincide with my upgrade to the Pro plan?), Wordpress suddenly does not always succeed in downsizing all my images on my posts and pages so that they fit the main content width (Baskerville 2: 756px); instead there is a 5px margin or padding to the left and right of the image, thus making the image not being left or right aligned with the text or the captions.

This happens consistently if the window is maximized on a normal landscape monitor (width=1920px) or on a normal portrait monitor (width=1080px).

It is not until I resize the width of my window (whether on a landscape or portrait monitor) so that it becomes less than approximately 900px or so that Wordpress spreads out the image over the whole content width. Thus, when the window size is 900px or less, there is no longer any 5px margin or padding, and the image then properly aligns with the main content width.

It is also noteworthy that this effect is seen, although my images typically are at least 1200px in width, and that my post settings for images always are set to "Full Size" in the image block settings. So this effect is NOT a result of that the original size of the images is less than the content width of the theme.

TEST PAGE

For live testing, the page https://chrisbocay.com/master-the-law-of-attraction/ is no longer showing the effect, since I have now replaced my WP Image blocks with my own HTML blocks instead (see my next comment below). But here is a picture of it, as it was prior to replacing the image blocks:

C_NewSystem_AlsoSeenInCaptions

This image is 1200px wide and was set to "Full Size" in the image block settings. By resizing the window width to more than 900px, the effect could be seen. And when resizing it to less than 900px, the image aligned nicely with the left and right column width.

Also note that the caption was NOT "synched" with the extra 5px margin/padding of the image. The caption was retaining its full content width, even if the image has an extra 5px margin/padding to the left and right when the window width is greater than 900px.

NEW LIVE TEST PAGE: you can use https://chrisbocay.com/your-belief-wall-does-it-promote-your-desired-manifestations/ to see the effect of the images getting an additional 5px margin/padding when the width of the window is greater than 900px.

ADDITIONAL INFO

  1. This issue is seen in all major browsers: Google Chrome, Firefox, Microsoft Edge, Avast Secure Browser.

  2. Test environment: Fujitsu Celsius workstation, Windows 10 Pro, BenQ landscape monitor, BenQ portrait monitor

  3. Active plugins: Redirection + standard Pro Plan plugins (Akismet Anti-Spam, Gutenberg, Jetpack, Jetpack Boost, Page Optimize, WordPress.com Editing Toolkit).

Best wishes! Chris Bocay https://chrisbocay.com/

ChrisBocay commented 2 years ago

Hello,

I have now conducted a test to see if I could manually "override" this problem by using a custom HTML block instead of an Image block.

And that test worked well, as seen in the following screenshot, where the top image is produced by my custom HTML block, and where the bottom image is produced by WP's Image block.

TwoImagesWithCaptions_LivePage

Not only does the top picture stretch out properly to the left, but also to the right (it aligns properly with the blue box of my Table of Contents above it). So that is a good feature.

The added bonus with this solution is that I now also can get nice captions, where I can left-align my text (something which is not possible with the captions in the WP image block, since they seem to be hard-coded being center-aligned).

The HTML code to produce the top image and its caption is seen in screenshot 2 below:

TwoImagesWithCaptions_WPEditor

The relevant CSS for the top image is:

CBClickToEnlargeImg_img

{ border: 0px; margin: 0px; padding: 0px; width: 100%;
height: auto;
}

Best wishes! Chris