[Resolved] Responsive block controls bug going back to desktop size

[Author]

Posts

[nicholasM]

To reproduce in 2020 theme:
- create a toolset "container" block with a bg image and set the alignment to FULL width!
- click on preview with device width
- set to tablet view
- you will see the block shift inside the container due to wordpress's default styling pushing the block outside the wrapper.
- then when you are in desktop view your fullwidth blocks are shifted to the left causing a very confusing display for clients.

this also causes some issues when trying to turn off the preview in some instances.

[Christian Cox]

Hi, I'm afraid I do not quite understand the problem.
- Would it be possible for you to include a few more pictures to illustrate the blocks, images and wrappers you are referring to?
- When you say "click on preview with device width", are you referring to the three resolution screen icons in the top menu bar as shown in the attached preview.png?
- Could you explain a bit more about what you mean by "when trying to turn off the preview in some instances"?

I'll be glad to take a closer look with a bit more context. Thanks!

[nicholasM]

sure, here is the easiest way! Just add a "toolset container block", set it to align-full in advanced and give it a bg color so you can see the affect! then use the mobile controls and switch to tablet. Now inspect the element(container) is not sitting inside the padding but gets positions full left outside of the padding.

Don't worry about the "some instances" comment as they would be fixed if this issue was.

[nicholasM]

this image might help explain it too..

[nicholasM]

Have you been able to reproduce this bug now with the information provided?

[Shane]

Hi Nicholas,

Christian is currently on vacation at the moment so I will be handling this ticket for him.

I've not been able to reproduce this issue, as you can see from my screenshot I dont have the full width alignment setting.

I only have center, align left and align right.

Thanks,
Shane

[nicholasM]

Are you using the 2020 theme? Align-wide and Align-full are standard alignments that you can add to your theme https://developer.wordpress.org/block-editor/developers/themes/theme-support/#wide-alignment and are on 2020 theme by default .

Also are you saying there shouldn't be a way to make a "container" block either full width or the size of a wrapper. This seams like an even bigger issue if you are saying that it shouldn't be able to accept the align full class!

[Shane]

Hi Nicholas,

I was able to replicate the issue with your instructions and can confirm that the issue is in fact present.

However I did another test using the same alignment with the Default wordpress image block and the same results appear.

It seems that there is a bug with the block alignment for the theme itself.

To replicate with the image block:

1. Add an image block.
2. Add an image to the block itself.
3. Adjust the alignment for the image block.

See my screenshot for what it looks like for me. As you can see the behaviour is exactly the same.

Thanks,
Shane

[nicholasM]

I see that too, however the Bug lies in the Toolset responsive view controls, being not compatible with the align-full default back-end Gutenberg styling.

There is no bug in the block alignment if by default there are no controls to view a tablet view. This functionality is added by toolset. It also stays shifted when you go back from tablet to desktop view which makes it even worse.

[Shane]

Hi Nicholas,

Perhaps if you recorded a short video running through the steps with the Image block and Container block so that I can see what you are experiencing.

As for now I not able to see a difference. The block alignment settings for the container block only allows you to set what is applied to the different view ports. Given that the behaviour for the image block is similar then it would be safe to assume that the image block would perform the same if it had this viewport setting to change how it looks on mobile vs desktop.

Thanks,
Shane

[nicholasM]

Ok I hope this helps show my issue. I think no matter where the bug lies it's easy enough to be fixed on the toolset side. You will need audio on to make sense of my screen capture.

hidden link

[Shane]

Hi Nicholas,

I'm still checking in on the issue but will make a report to our team once you can confirm if the issue occurs on the frontend as well.

When viewing on the frontend does your styles adjust correctly to the view port ? Meaning if viewed on mobile, tablets etc it works fine ?

Once we can confirm that this is a backend issue we can go to the next step.

Thanks,
Shane

[nicholasM]

Correct, yes this is just in the back end, that padding is a gutenberg only style not a theme style at all. If your developers don't see this as a bug then at the very least a Class be applied based on the viewport toggle that is active in order to allow us to style the fix in our own themes would be appreciated.

[Shane]

Hi Nicholas,

Given this would be extremely low priority seeing that the frontend output would work fine. Perhaps you can target the container block by using the default class that is there .

For eg

.wp-block.tb-container{
/*mycss here*/
}

Which would target the container block.

I can still escalate this but I would need to explain thoroughly the issue as well as provide them with your video.

Please let me know what you think of the workaround.

Thanks,
Shane

[nicholasM]

This work around won't work because there is no way to make this work on desktop and when the button for view port change is clicked. This is why I would suggest at very least when the viewport button is changed and the wrapping div gets an inline width to simulate a tablet size, that a class name of .is-tablet-size or something also be applied so that we can fix this issue using css in the theme if it's not changed globally.

Please escalate the issue, and share the video thanks