-
Notifications
You must be signed in to change notification settings - Fork 351
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
Illustratr, Toujours, other themes: No margins between Image blocks on live site #6611
Comments
Support References This comment is automatically generated. Please do not edit it.
|
I can confirm that this issue affects the Editor theme too: The recommended CSS workaround above does fix the issue, but similarly, the user does not have a paid plan to implement this. Regarding https://wordpress.com/forums/topic/what-is-up-with-the-spacing/?view=all |
Applied the workaround. We will want to remove that CSS code once the issue is fixed. 5586567-zd-woothemes |
User report (Illustratr). I shared the CSS workaround: 5584984-zd-woothemes |
User report (Tonal). Applied CSS workaround. |
Another one at zd-5695869 Theme: Toujours Cannot apply the CSS workaround as they have a Personal plan. |
Quick summary
On Illustratr and several other themes, when a page or post has two or more Image blocks one above another, there is normally a space between those images in the block editor. On a live site (and assuming the Image blocks do not have captions), those margins disappear, and the images touch directly.
A short list of themes I found that are affected by this; I haven't checked all themes so there may be more. There doesn't seem to be a pattern other than that they're all Classic themes; no FSE themes that I tried were affected, and other Classic themes like Twenty Twelve and Stratford were also unaffected.
This issue was reported specifically for Toujours back in June: Automattic/wp-calypso#64994
It was supposedly fixed by this Gutenberg merge: WordPress/gutenberg#42005
But I also tried Toujours on my test site, and there are no margins between the images there, either.
This appears to be caused by a
coming from one of the inline stylesheets; deactivating the
margin: 0
in the inspector, or overriding it with CSS, restores the margins.On my Atomic test site, I notice the "figure margin: 0" is already being overridden by this (tested with both Illustratr and Toujours):
So on Atomic the margins seem to work, while on Simple the images run together. Maybe the Gutenberg fix above only applied to Atomic sites for some reason, or has somehow been reverted for Simple?
Steps to reproduce
What you expected to happen
The images should display with margins between them, as they do in the editor:
What actually happened
The images do not have any margins/space separating them.
Context
Customer report in 5573795-zen
Platform (Simple, Atomic, or both?)
Simple
Reproducibility
Consistent
Severity
Some (< 50%)
Available workarounds?
Yes, easy to implement
Workaround details
It should be possible to use the same CSS that the Atomic sites are using to fix this on an individual site:
However, this will only work for Premium site plans (or Simple Business plans). The customer who reported this to us is on Personal.
The text was updated successfully, but these errors were encountered: