Issues preview of Margin / Padding on hovering (i.e. section)

Description:

If you hover over the values for i.e. a “section” in the Padding / Margin area, there are two errors:

  • In the editor a padding is graphically displayed, although no padding is supposedly stored (in the example of the screenshot “padding-top” / “padding-bottom”).
    EDIT: It seems to be that the preview show the padding of the .cc-wrapper, but isn’t that confusing because in the section the padding is zero?
  • Hovering over margin/padding creates flickering due to scrollbar appearing for a short time

Step-by-step reproduction instructions:

  1. Open the Post Editor/Site Editor
  2. I have inserted a section of the Cwicly library (see screenshot)
  3. Select the “section” in the navigator
  4. Hover with the mouse over the “Padding” input field

Screenshots, screen recording, code snippet

Environment info

  • WordPress version: 5.9.3
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.1.4
  • Cwicly Theme version: 1.0.3

EDIT:
I’m generally confused about the concept here,
I found a cc-wrapper class with some padding:
screenshot-inspector

… but in the frontend there is no padding at all between section top and the image:


Why is additional padding stored here with the .cc-wrapper?

Hey @Jugibur.

You can change these values here:

Keep in mind that you can override these anytime per block basis.

This is how the section block is designed and supposed to work.
There already were made some improvements that were introduced with the removal of the block defaults, like the rules which are attached to the cc-wrapper class globally, instead of adding them to each section block individually.

There were quite a few discussions in the past. You can find them here via search option, as well over on the Facebook group.
I think with the recent improvements the section block has become a stable and usable option.
Alternatively you can always build your sections with div blocks by yourself to gain 100% control and flexibility, but you’ll lose some of the convenience the section block offers by design.

Ah good to know Marius, thanks for the tips!

Just to add, here is a screenshot showing the scrollbar that appears when hovering the mouse over padding or margin. This surely also causes the somewhat protruding length in the shaded area that visually represents the value.
This coming and going of the scrollbar causes this kind of flickering.
appearing-scrollbar-hovering-padding-margin

Apparently, it’s related to the padding visualizer box.
Now, with the new improvement Change number spinning (click + drag) to icon/label instead of input field, it became quite fiddly under certain circumstances.

Not sure if this got overlooked @Louis, as the topic is general and addresses 2 different things.
If there are any additional info needed, please let me know.

Hi @Marius and @Jugibur,

Sorry this didn’t get more attention.
The padding and margin visualisers do need attention, I am aware of it and apologise for the inconvenience it may cause.
We’ll be reviewing them in the coming weeks to provide a more cohesive and homogeneous experience.

3 Likes

Thanks for confirming @Louis.
Just wanted to make sure it didn’t get lost :innocent:
Glad to hear there are improvements on its way as well.

1 Like

Hi there,

1.2.7.1 should help with fixing the issues encountered with the padding and margin visualisers.
There still is some work to be done on improving these, but they shouldn’t cause the flickering issue because of layout shift.

2 Likes