Design Patterns not Mobile Optimised

Hello there,

Many thanks for reaching out.

Are you able to provide a functioning URL of the site you’re working on please? I can take a closer a look at what’s happening there.

Many thanks in advance.

It’s in maintenance mode, but you’ll see it if you have a test site with videomaker installed. Add the ‘Offset Project Grid’ Design Pattern on a page.

The pattern uses spacer blocks to create the offsets.

These spacer blocks have their height set via the editor and are stored as a style attribute:-

<div style=”height:385px” aria-hidden=”true” class=”wp-block-spacer”></div>

Is an example. This creates a negative space in the middle of a post list that has stacked vertically for a mobile display.

Please note, this is without changing the settings or content for the design pattern.

My issue is, as the height is set as a style attribute, I can’t override it with a media query.

Which is a shame, The theme is awesome but this issue means this pattern is not ready, and my faith in the theme is shook. What other issues will crop up on small screens, are they easy to dodge. Would I have been quicker starting from scratch…

Is this a blip, or are these themes and patterns not being tested and therefore none of them are to be recommended to new users?

Appreciate any support or insight you can provide Adam ??

Hello there,

It’s in maintenance mode, but you’ll see it if you have a test site with videomaker installed. Add the ‘Offset Project Grid’ Design Pattern on a page.

Ok, are you able to provide a screenshot of what you’re seeing please? This can be shared via a link from https://snipboard.io/

Curiously, with videomaker uninstalled, or not active on the page – does this resolve?

It has been known for plugins to overwrite CSS that cause issues like this.

The screenshots have been taken with all plugins de activated.

A screenshot with videomaker active.
https://snipboard.io/azdp9s.jpg

With the twenty twenty two theme active.
https://snipboard.io/qjoRuf.jpg

How this pattern looks on a desktop, with videomaker active,
https://snipboard.io/XmzFGc.jpg

Issue is present in both mobile screenshots. It is the large negative space between posts. It is not present when the screen is wide enough to show the offset layout.

This is caused by the spacers used to create the offset look on desktop cannot. They shrink for a mobile view as they have their height set as a style attribute meaning they cannot be overwritten by adding a custom css class.

The issue with the layout is more an issue with the spacer block itself.

My real issue is with the testing process though – how was this allowed out the door?

Again, thanks for your help & support ??

Hello David,

Thank you for doing that additional testing and I see exactly what you mean. The spacers by rights, should reconfigure or disappear on a mobile.

As you’ve rightly pointed out, the attribute cannot be overwritten – so the next step would be to remove this altogether with custom CSS, as a temporary workaround.

In the Spacer block settings > Advanced > you should see a field for “Additional CSS Classes”, whereby these can targeted individually, using a media query.

For example, if you enter spacerone into this field, the CSS would be as follows:

.wp-block-spacer.spacerone {
    display: none;
}

Please see more about media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.php

Granted – this is extra work.

My real issue is with the testing process though – how was this allowed out the door?

I hear what you’re saying.

I’d argue that this is not so much an issue with the pattern, but instead specifically the fact that the spacer block is not responsive, and this is an issue which has been logged with the core Gutenberg editor here: https://github.com/WordPress/gutenberg/issues/10081

I do sympathise that, with the patterns seen on Videomaker, given the above – is perhaps not the most optimal use of the spacer block for its function.

The block editor, is constantly changing, along with patterns and themes, so I’m hoping the above adds a bit of insight/reassurance into the use of this theme.

Thanks Adam, trying to find all the spacers (black on black) was a pain so I settled for this fix,

@media only screen and (max-width:70em) {
	.wp-block-spacer{
			display:none;
	}

}

It’s handy as there are spacers used in other parts of the theme that don’t make so much sense.

I really appreciate you finding that active issue on github, I’m guessing the awesome videomaker theme devs knew about this issue and were hoping the bug would be fixed by theme launch.

Thanks again for your help ??