Patterns: Provide a way for users to opt out of the 'Choose a Pattern' modal when adding a page

[jordesign]

What problem does this address?

The new 'Choose a Pattern' modal is useful - but can become frustrating for users who don't want to use it, and still need to see it every time.

What is your proposed solution?

Provide a setting/option where this modal can be enabled/disabled.

[jordesign]

From user feedback in the forums:
https://wordpress.org/support/topic/how-do-i-disable-the-choose-a-pattern/

[MattrCoUk]

Just for those in whom that triggers anxiety as myself — I’ve created a quick and dirty workaround (use case scenario: e. g. a website with 200 pages to be re-created with a default pattern...)

Github:
https://github.com/MattrCoUk/mattr-dismiss-patterns-popup

Blog post:
https://mattr.co.uk/how-to-disable-the-choose-a-pattern-popup-in-wordpress-twentytwentyfour

[johnstonphilip]

I knew this existed and have even played with making my own patterns that use/enable it.

However, after not using the block editor for a while and coming back to it recently, I found it really jarring to have it pop-up automatically without my prompting.

[jasonbahl]

I spun up a new site today to reproduce an issue on a plugin I maintain, and I needed to create a handful of pages for the reproduction scenario.

I was welcomed by this modal on every page:

And while it was nice to know this new pattern selector is available, I don't want it to pop up every time I create a new page.

I would love to see some sort of "don't show this to me again" option on the modal, that updated a block editor preference that I could then change again later if I did find it helpful to have the modal on every page in the future.

[colorful-tones]

I just wanted to drop more Twitter/X dialogue around this issue. A few more folks are not keen on the page patterns modal.

X thread starts here: https://x.com/mishterkurth/status/1762655604945076271?s=46&t=qYMrgR5B4ui3KKMSqnKquA

[MattrCoUk]

@chairmanbrando While sharing frustrations can be understandable, this platform might be better suited for focused discussions on specific issues. By outlining the problem and suggesting potential solutions or workarounds, we can create a more constructive dialogue.

[jakobtrost]

I have a design suggestion inspired by @jasonbahl's idea:

I would love to see some sort of "don't show this to me again" option on the modal, that updated a block editor preference that I could then change again later if I did find it helpful to have the modal on every page in the future.

I included a checkbox at the bottom of the modal and a toggle inside the editor preferences. To avoid reinventing the wheel, I looked for similar components.

I was surprised to find that the “Choose a pattern” modal when creating a new template in the site editor does have a bottom bar with a skip button:

I used that and added a “Do not show me this again” checkbox on the left, de-selected by default. The word "me" emphasizes it’s user-specific.
The existing modal uses a simple text-button on the right for the skip action. Adding the checkbox and label on the left made me see the need to emphasize the skip button more. Making it an outlined button improves visibility, visual balance, and indicates interactivity.

I also created a version of the editor preferences that includes this as a new option:

I’d love to get some feedback on this suggestion to maybe get it ready for a PR in the future.

[Blindmikey]

How is this still an issue. Interrupting the user is bad UX. This should only pop up when prompted by the user to select a pattern.

[johnstonphilip]

What if instead of a modal, this replaced the default block being a Paragraph Block, and instead is just a placeholder block that allows you to replace it with a pattern, each of which is presented inside that block? That way nothing has to pop up. So something like this:

Type / to choose a block, or select a pattern below to get started

🌅 Pattern 1 | 🌄 Pattern 2 | 🛤️ Pattern 3

[noisysocks]

Just noting this older comment from #56307 (comment):

My instinct: we should not add this preference yet. The flow for creating new pages is still in flux, with the add new page modal in the site editor, some ideas on a pattern assembler discussed across various comments here, not yet having materialized. In that vein, adding this preference now is going to optimize for an interface that's going to already improve.

If after having refined those other flows such a preference is still desired, we can definitely add it.

@jasmussen: is this interface still in flux? Are there other options we can explore for letting users skip this modal? This feature seems highly requested so it would be good to move this forward.

[jasmussen]

is this interface still in flux? Are there other options we can explore for letting users skip this modal? This feature seems highly requested so it would be good to move this forward.

A little bit, yeah. One of the ideas is to continue to refine the zoom out + contentOnly combo, so when you add a new page, it can start in that interface. @richtabor has some thoughts here too. That said, both those behaviors could potentially have the same opt-out mechanism, which could live in preferences as suggested. This is similar to the pre-publish checks which you can toggle off:

[richtabor]

That said, both those behaviors could potentially have the same opt-out mechanism, which could live in preferences as suggested.

Yes, I'd consider these the same.

[luminuu]

This comment already has the design suggestion for it, although the setting has been put in the Interface section, not the Publishing section. I think we can discuss where it fits best, although I think Interface is the better section, as this setting would have only little to do with actual Publishing. cc @jasmussen

[richtabor]

as this setting would have only little to do with actual Publishing. cc @jasmussen

Other than publishing pages :)

[ramonjd]

Just stumbled into this. I'd almost call it a bug. 😄

Here's me trying to edit a page's template bits and moving back and forth:

Kapture.2024-09-04.at.11.56.01.mp4

Provide a setting/option where this modal can be enabled/disabled.

My vote would be, as well as a setting in preferences, to have the opt-out checkbox on the overlay itself, optionally with a note that it can be turned back on in preferences.

This hands the user immediate control without disrupting their flow.

The other option is to remove this popup in the site editor - what concrete value does it serve?

[ramonjd]

I threw up a PR based on @jakobtrost's designs above:

• Patterns: add opt out preference to the 'Choose a Pattern' modal when adding a page #65026

Kapture.2024-09-04.at.14.16.42.mp4

The previous attempt by @glendaviesnz was closed #56307 (comment) to avoid adding a preference to the preferences panel.

If this view still stands, I think we should still find a way to stop the panel reappearing unnecessarily.

[stokesman]

The opt out PR is much better yet may leave room for improvement. Once opted out, there’s no way to quickly engage the pattern picker modal for new pages. Then opting back in may serve okay if you’re about to go on a spree of creating new pages with starter patterns but you’ll likely opt out again soon after.

Could we consider not autolaunching the modal and instead making a prompt or button available on new pages that provides one-click access? In the Site editor, which already prompts for the page title, it seems like we could try an option to create the draft with a starter pattern. That way it’s quickly available when you want it and never when you don’t.

[johnstonphilip]

I already posted a rough mockup of this but I feel like this would better than a dismissable modal, because it never gets in your way, you never have to dismiss it, and it's there if/when you do want it:

If you were to start typing or add a different block, the patterns would disappear, just like the Type /... text disappears.

[stokesman]

@johnstonphilip, I do like your idea. It would have an advantage to a prompt/button that opens the modal because it’s one fewer click to insert a pattern. Perhaps it can be a bit more distracting then a simple prompt.

---

Here’s a demo of a prompt approach:

prompt-post-starter-patterns.mp4

I could make that a PR but haven’t yet. I do consider it better to not auto launch a modal.

[Blindmikey]

I do love the informative unobtrusive prompt approach; users learn about and can quickly access patterns, but doesn't interrupt them if they're not interested. However being able to silence the prompt all together is nice for those not using patterns at all.

[ramonjd]

Slightly related. Create a new page on a fresh WP install on trunk with a clean browser local storage:

2024-09-06.11.27.04.mp4

Probably worth auditing these modals and having some form of centralized control.

[johnstonphilip]

@stokesman Personally I don't like the snackbar for anything :D
#64622

[noisysocks]

I think the decision should move to the beginning of the flow.

Selecting Blank page opens the modal we currently have where you enter a title. Selecting Page from template opens a new modal which combines choosing a pattern and entering a title.

[ramonjd]

I think the decision should move to the beginning of the flow.

YES! Thanks for the screenshot too.

I think this makes sense for the site editor, where I'd expect the user to be more comfortable with the editing flows.

For pages created in the post editor? Not sure.

What about a placeholder similar to the suggestion above rather than another modal?

[johnstonphilip]

Selecting Blank page opens the modal we currently have where you enter a title. Selecting Page from template opens a new modal which combines choosing a pattern and entering a title.

I like this concept of moving it to the start of the flow, but if the user select "Blank Page", they shouldn't see the modal. They chose to start with a "Blank Page", so popping up a modal at that point doesn't make sense to me.

[alFrame]

Errrmmm. Make it go away. Please!

It's very very annoying. I work with Oxygen Builder. And every time I exit the builder I have to click twice to get rid of a window I never use.

[ramonjd]

It's very very annoying. I work with Oxygen Builder. And every time I exit the builder I have to click twice to get rid of a window I never use.

It's not just you 😄 @ellatrix has a plan to remove this modal:

• Zoom out: try pattern inserter instead of starter pattern modal for new pages #61489

In the meantime, you can switch the modal off completely using preferences:

• Patterns: add opt out preference to the 'Choose a Pattern' modal when adding a page #65026

[alFrame]

Actually there is a very easy solution. At least using the Oxygen Builder.

Without disabling the Oxygen Plugin
Go to Appearance -> Themes and add a new theme
Search for Intentionally Blank and install it
Ignore any warning by Oxygen that themes are disabled

Done. Popup gone!

I still hope this will be a setting in the future!

[mikes-bowden]

^ This

[stokesman]

I still hope this will be a setting in the future!

The future has shipped BTW it’s in WP 6.7 or I think could be enabled in 6.6 with the Gutenberg plugin.

[mikes-bowden]

I'm unsure if this helps anyone, but I had Claude help create a snippet that automatically presses the X. You have two options: using the snippet below or using what @alFrame suggested above. Setting the theme is cleaner and easier if you can. If you can't, the snippet below should suffice.

<?php
if (is_admin()) {
    add_action('admin_enqueue_scripts', function() {
        $current_screen = get_current_screen();
        if ($current_screen && $current_screen->id === 'page') {
            wp_add_inline_script('wp-edit-post', '
                function closePatternModal() {
                    const modal = document.querySelector(".components-modal__frame");
                    const closeButton = modal?.querySelector("button.components-button.has-icon");
                    
                    if (closeButton) {
                        closeButton.click();
                        return true;
                    }
                    return false;
                }

                let attempts = 0;
                const maxAttempts = 10;
                
                const intervalId = setInterval(() => {
                    if (closePatternModal() || attempts >= maxAttempts) {
                        clearInterval(intervalId);
                    }
                    attempts++;
                }, 500);
            ');
        }
    });
}