Discussion - Modals / Off Canvas Use Cases

[alexander]

So now that we can build inside these offscreen areas, I’m curious what kinds of use cases come to mind, or how you might plan on using the features.

We’re also looking to flesh out some ideas to improve on Modals in general. For example, imagine you wanted to do something like the video lock extension:

• Modal automatically opens on page load
• Video autoplays
• Modal can’t be closed
• Close button appears after a set number of seconds

These little incremental changes are things we want to start inventorying so we can see how that might fit into a future update. I’ve got another discussion thread for discussing a potential implementation for some of these but here we can just get some ideas out there without worrying about how we solve building it.

Looking forward to hearing your ideas!

[Misho]

I love the new elements!

I know this is somewhere down the line, but New buildable Tabs now make even more sense.

Here’s an example of a Mega Menu I have built with Ubermenu (Animated GIF on click):

Live here: https://www.dentagra.hr/

So that’s basically a tab element with tabs on the side that rect on hover. On mobile, Tabs are assuming Accordion look, which is an excellent solution for UX.

About the ones you mention above:

Modal automatically opens on page load
This could have various use-cases. If you are going to make a pre-built one, I recommend taking into account Google Interstitial guidelines.

Video autoplays
Yes! An auto-play once the modal was clicked is great.

Modal can’t be closed
Hmm, not sure where could this be used. Maybe if it cannot be closed until a button is clicked, like an age-verification?

Close button appears after a set number of seconds
Highjacking from user’s choice. Bad UX. I guess some more aggressive marketers would enjoy it, at cost of higher bounce-rate.

[deranaloge]

i think a great usage are popups. eg for newsletter, information, discounts.

what comes into my mind: trigger one popup to another popup, eg:
in the first popup there are several informations with 3 buttons. each button is triggering a new modal popup. or a kind of tabs in a modal?
for this case the modal auto open after x seconds is great!
video autoplay: yes thats also a great idea.

[scotbaston]

Loving the idea of Tabs that @Misho has suggested, that would be a great addition

not had a chance to ‘play’ with the new beta yet as under deadlines for a few sites and my sanity is a little ragged right now

[devinelston]

Just gotten a chance to play with the new elements, and I’m loving them so far (and controls over the close buttons ).

A couple use cases I’ve been thinking about are “quick look” modals. For example, on a Blog or All Products page, letting users preview the content in a modal rather than having to go to the full post or product pages for details. (I assume something like this runs the risk of making the page much heavier… just something I’ve been thinking about).

+1 to the video autoplay use case as well. I’ve created that using nested global blocks on older versions, but look forward to using the new stuff for that as well.

One thing I’ve always wished would be possible is to change the type of off-canvas elements at different breakpoints. For example, on desktop screens I might like something to be a modal in the center of the screen – but on mobile breakpoints switch to the Off-Canvas styling to better take advantage of the screen real estate. Obviously not possible in its current implementation, just sharing…

[alexander]

Thanks for the feedback everyone! Loving the ideas/suggestions here.

@Misho thanks for sharing that specific menu. Really good to see some real life use cases. I could see us adding some kind of “full width” option to the Dropdown element. Then with toggleable areas / custom tabs it would be possible to make something like you’re depicting.

@deranaloge

what comes into my mind: trigger one popup to another popup, eg:
in the first popup there are several informations with 3 buttons. each button is triggering a new modal popup. or a kind of tabs in a modal?

Great idea!

@devinelston

A couple use cases I’ve been thinking about are “quick look” modals. For example, on a Blog or All Products page, letting users preview the content in a modal rather than having to go to the full post or product pages for details. (I assume something like this runs the risk of making the page much heavier… just something I’ve been thinking about).

This is really interesting. To load the “full content” it would be technically challenging (getting all the CSS, markup properly pulled through)and yes, a potential performance issue. Another issue is that media queries run based on the viewport so the styling wouldn’t look quite right. I don’t think this is something we’d do as a native option but there might be alternatives. With some coercing and customization it could probably be done by using Dynamic Rendering in Content Area Modal to load an iframe of the page with pointer-events: none;. Or maybe just create a lite version of the post design and use Loopers to consistently repeat it. If you use a Modal/Off Canvas the elements inside will have access to the Looper data.

@devinelston

One thing I’ve always wished would be possible is to change the type of off-canvas elements at different breakpoints. For example, on desktop screens I might like something to be a modal in the center of the screen – but on mobile breakpoints switch to the Off-Canvas styling to better take advantage of the screen real estate. Obviously not possible in its current implementation, just sharing…

Good point here - can definitely see how that would help fine tune things. It’s a bit of a hard edge with the current elements, but we’ll certainly keep the use case in mind in case there’s a way to do something more hybrid.

[Misho]

@alexander

I could see us adding some kind of “full width” option to the Dropdown element.

Absolutely. The current problem with dropdowns is that they are going to interpret vw from their toggle’s position towards their further viewport side. So something like 80 vw (or a fixed width, doesn’t matter) will drive the dropdown out of the viewport. (Not on all breakpoints though, there is some inconsistency there).

Megamenus need to be able to assume width independently from the toggle, and take the actual viewport into the account more. This means growing to the both sizes of the toggle. Percentages should work as well, with left-right margins from the viewport sides. If they act like Rows we can build using the same principles and reduce the possibility of errors.

[JvP]

Cool ideas. I’ve seen some marketing and conversion specialists do something similar to your button example. They had a page with a video on it where the CTA button appeared when you got to a certain point in the video. They timed the appearance of the CTA button with the exact moment they started to talk about their offer.

Another idea I can think of right now is what YouTube has done with their off-canvas navigation panel. Well, it’s not strictly off-canvas because when you press the hamburger button the panel collapses to show a more compact graphic + label view. This could be a nice enhancement to the off-canvas element where you could choose to show an alternative, more compact view, instead of hiding it entirely.

[alexander]

@Misho,

Yes, that’s what I meant. Like your UberMenu example, If it’s “full width” it would use the dropdown’s Y position as a starting point but be able to fill a container or be based on the viewport width minus some kind of inset value. Not sure how/what that looks like from Inspector controls just yet.

@JvP

Cool ideas. I’ve seen some marketing and conversion specialists do something similar to your button example. They had a page with a video on it where the CTA button appeared when you got to a certain point in the video. They timed the appearance of the CTA button with the exact moment they started to talk about their offer.

Yeah, that’s kinda what I’m getting at. There are some very specific marketing funnel use cases out there like this and the problem is no single plugin with a finite set of customization options can really solve all of them. But if it’s approached from a lower level perspective, we could create any number of funnels like that with some basic building blocks.

@JvP

Another idea I can think of right now is what YouTube has done with their off-canvas navigation panel. Well, it’s not strictly off-canvas because when you press the hamburger button the panel collapses to show a more compact graphic + label view. This could be a nice enhancement to the off-canvas element where you could choose to show an alternative, more compact view, instead of hiding it entirely.

This is interesting! So it’s like one toggle is alternating between two different areas. Our current toggle interaction system is heavily based around 1:1 ratio of toggle buttons to toggleable areas so I’ll have to think some more about how that could be worked out.

[Misho]

@alexander, I think there might be a relatively cheap way to further improve the new Search element:

It searches for posts, and that’s it.

Would it be possible to add a setting that lists the post types, so we can choose what to search? This is especially important for the products, so we don’t have to drop the WooCommerce Search widget, or use special plugins.

Thanks!

[JvP]

Would be nice. Even nicer would be to ship Pro with a search plugin like SearchWP.

[alexander]

@Misho is it possible your post type isn’t public? The Search elements are just wrappers around the native WordPress search functionality. When you search it should send you to example.com/?s=something and output all the results there using the theme’s search results template (could be an assigned Layout). I’ve tested this and it picks up WooCommerce products as well.

[Misho]

@alexander my bad, sorry. You are right, it does mix everything.

Part of my point was an ability to select post types to search. In my case I’d like it to return products only. I guess I will install Relevanssi to control this for now.

Thanks!

[alexander]

Gotcha ok! I don’t think that’s something we’d add to the search element because when the user submits the form, we don’t know anything about the search element anymore. There are ways with custom code to tweak how the search works on a site. Here’s an example from the WordPress codex on removing Pages from search: https://developer.wordpress.org/reference/hooks/pre_get_posts/#exclude-pages-from-search-results

And here’s a variation of that to search posts and products, and another arbitrary type:

add_action( 'pre_get_posts', function($query) {
  if ( ! is_admin() && $query->is_main_query() ) {
    if ( $query->is_search ) {
      $query->set( 'post_type', ['post', 'product', 'something-else'] );
    }
  }
} );

[samc]

The new modal system is another great addition. Good job!

I was wondering with the Mega Menu now you have instances you will want to break up your navigation into much smaller pieces as the items go into different Mega Menu’s

Navigation Inline component would benefit from a new feature so they could display children of a menu item. Then you can keep the menu as one (Which will help for Navigation collapsed version)
Maybe while we were here you could also have a depth level. if you don’t want to show more than x amount of nested levels.

I’ve had a look at https://developer.wordpress.org/reference/functions/wp_nav_menu/
I can see unfortunately it doesn’t include that feature but does have depth. somone did make a plugin (wp-nav-menu-extended)

Is it just a case of having multiple menu’s and keeping the mobile version up to date?

[alexander]

Yes, unfortunately some cases where the markup needs to be different on Desktop and Mobile will still require making additional elements that are hidden at the different breakpoints.

All of our base menu elements are powered by wp_nav_menu but it will always output the top level items and recursively show all the sub menus.

I think the way that we will eventually add additional control is by using Loopers and Dynamic Content. We could create Looper Providers for WordPress menus which would allow you to fully construct your own navigation systems with builder elements. This would open up many more possibilities. It’s just got some unique challenges like managing active states (which link is currently active).

[samc]

@alexander

It’s just got some unique challenges like managing active states (which link is currently active).

Yes this would be great having a simple provider to start with then maybe things can evolve from there. the fact you can loop on nested data might allow for some interesting ways of making it work.

[alexander]

Definitely. It would really open up some possibilities on interesting menu styles that could be created without having to rely on the existing elements.

[devinelston]

Sorry if I missed this discussed somewhere… but will you guys be updating the tab/accordion/etc elements at some point to allow us to build directly inside them as well?

[alexander]

Yes, although I’m not sure how we’re going to do it just yet. It could be that we make new Accordion and Tab elements with dropzone support, or it could be that we build out a way to make custom toggleable areas and provide prefab elements that are preconfigured for this.