As a SO/CE I need to have a block be visible or hidden depending on the type of display it is being viewed on (desktop, tablet, mobile)

[kevincrafts]

Context

When placing blocks on a page, the best region to place them in for desktop displays and mobile displays is not always the same.

For instance, having a lead generation form at the top of the sidebar is great for desktop, but ends up at the bottom of the page on a mobile display.

Process

Create duplicate blocks and add them in multiple locations, telling each block which display it should be shown/hidden on

Possible Solution

https://github.com/CuBoulder/express_responsive_visibility_bundle

[jwfuller]

@kevincrafts and I talked about potential accessibility issues with this feature.

We need to make sure that if a block has custom visibility settings, equivalents are set for all other display viewports.

If we don't enforce this, we run the risk of people hiding content for a particular subset of users. While this isn't much of an issue for a 'touch of whimsy' image, it is a serious accessibility issue for a block of text.

[kevincrafts]

So the ideal situation is the block gets placed in two different regions - the sidebar (for desktop) and main content (for mobile). Block gets configured to be visible in one, but invisible in the other.

But there could be other situations where someone tries to just put something in the sidebar for desktop displays and wants no content for mobile (wrong, I know)...

How do we go about enforcing that the block actually exists in both places? They may have made the proper visibility settings, but if they never placed the block in one of the regions, we still run into the issue @jwfuller mentions above.

[cathysnider]

https://www-dev.colorado.edu/feature/832

[cathysnider]

Verified: Changing the visibility mode of a text block works. As does events blocks and article blocks.

[cathysnider]

One problem: A block that is visible on mobile only is a block that will be forgotten about when the site-owner is working on their site in desktop view mode. A site could end up with all kinds of hidden blocks sprinkled around, that site-builders have forgotten about because they only edit in desktop view. Suggested improvement: All blocks appear to all logged in users, with some kind of indicator or flag on the blocks that display only on a narrower view; perhaps a pink background similar to that of unpublished pages.

[kevincrafts]

This should be using https://github.com/CuBoulder/express_responsive_visibility_bundle, not a branch of Express.

[kevincrafts]

There are ways to exploit this to where you can provide different content to different displays.

Not sure how we go about fixing this. Open to ideas.

[kevincrafts]

It was decided that while this module gives the opportunity to create different content on different displays, that this module will be added to the requested section and have further documentation and conversation on how to use properly.