Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jordesign opened this issue Nov 16, 2023 · 31 comments · Fixed by #65026
Assignees
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.

Comments

@jordesign
Copy link
Contributor

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 jordesign added [Type] Enhancement A suggestion for improvement. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Nov 16, 2023
@jordesign
Copy link
Contributor Author

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

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Nov 19, 2023
@glendaviesnz glendaviesnz removed their assignment Nov 20, 2023
@glendaviesnz glendaviesnz removed the [Status] In Progress Tracking issues with work in progress label Nov 20, 2023
@aaronrobertshaw aaronrobertshaw moved this to Todo in Patterns Nov 21, 2023
@MattrCoUk
Copy link

MattrCoUk commented Jan 25, 2024

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
Copy link
Contributor

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
Copy link

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:

CleanShot 2024-02-14 at 11 00 25

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.

CleanShot 2024-02-14 at 11 31 46

@colorful-tones
Copy link
Member

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
Copy link

MattrCoUk commented Mar 14, 2024

@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
Copy link

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:

Screenshot-new-date-archive-template

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.

Choose a popup - default

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

Editor Preferences

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

@Blindmikey
Copy link

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
Copy link
Contributor

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 noisysocks moved this to 🗣️ In Discussion / Needs Decision in WordPress 6.7 Editor Tasks Aug 28, 2024
@noisysocks noisysocks added the Needs Decision Needs a decision to be actionable or relevant label Aug 28, 2024
@noisysocks
Copy link
Member

noisysocks commented Aug 28, 2024

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.

@noisysocks noisysocks added the Needs Design Needs design efforts. label Aug 28, 2024
@jasmussen
Copy link
Contributor

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:

Screenshot 2024-08-28 at 09 18 19

@richtabor
Copy link
Member

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
Copy link
Member

luminuu commented Aug 29, 2024

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
Copy link
Member

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

Other than publishing pages :)

@noisysocks noisysocks added Needs Dev Ready for, and needs developer efforts and removed Needs Design Needs design efforts. Needs Decision Needs a decision to be actionable or relevant labels Aug 30, 2024
@noisysocks noisysocks moved this from 🗣️ In Discussion / Needs Decision to 📥 Todo in WordPress 6.7 Editor Tasks Aug 30, 2024
@ramonjd
Copy link
Member

ramonjd commented Sep 4, 2024

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
Copy link
Member

ramonjd commented Sep 4, 2024

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

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
Copy link
Contributor

stokesman commented Sep 5, 2024

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
Copy link
Contributor

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:

Screenshot 2024-09-05 at 1 42 19 PM

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

@stokesman
Copy link
Contributor

@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
Copy link

Blindmikey commented Sep 5, 2024

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
Copy link
Member

ramonjd commented Sep 6, 2024

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
Copy link
Contributor

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

@noisysocks
Copy link
Member

noisysocks commented Sep 6, 2024

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

Create page from template

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
Copy link
Member

ramonjd commented Sep 6, 2024

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?

Screenshot 2024-09-06 at 3 39 03 PM

@johnstonphilip
Copy link
Contributor

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
Copy link

alFrame commented Oct 31, 2024

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
Copy link
Member

ramonjd commented Oct 31, 2024

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:

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

@alFrame
Copy link

alFrame commented Nov 12, 2024

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
Copy link

^ This

@stokesman
Copy link
Contributor

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.

Image

@mikes-bowden
Copy link

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);
            ');
        }
    });
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Status: Done