[Site Editor]: Add create pattern button in patterns page #60302
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ntsekouras
added
[Type] Enhancement
ntsekouras
requested review from
mcsf,
Mamaduka,
jameskoster,
SaxonF,
richtabor and
annezazu
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ntsekouras
force-pushed
the
add/create-pattern-button-in-patterns-page
branch
from
8896eb6 to
b8643fe
Compare
|
Size Change: +4.01 kB (+0.23%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
So excited to see this being worked on! Minor but, for consistency's sake, can we update this to "Add new pattern"? For context:
In reading through #58198, it seems like we're trying to move towards "Add new" which this doesn't do as well. As a result, for now, I'd argue for having it as "Add new pattern" and then updating all to "Add new" or whatever is decided upon in the future cc @jameskoster for a confidence check. |
|
It should probably read "Add pattern"—but I'm also not 100% about this big primary buttons to be honest. It's the same style as the save buttons, in nearly the same position; I think it makes the experience less predictable. And also, do we have a pattern of using a primary button as a popover container? Feels a bit unexpected, as every other primary button is a key action taken, not leading to a post-selection decision. Curious what @WordPress/gutenberg-design thinks as well. |
|
Based on the discussion in #58198, it seems like "Add new pattern" makes more sense than "Create pattern" following the logic in the core. In that case, should the popover menu items also be unified with "Add new"?
As mentioned in ToDo #58198, I think all additional buttons should eventually be replaced with As for the button itself, it looks like its position is slightly shifted upwards compared to other buttons, so we may need to adjust the CSS.
|
|
I updated the button's variant to |
Agree with this. "Add Template Part" gets verbose too, probably in translations too, it doesn't feel the most scalable pattern. |
|
@jasmussen, I think we need to keep "what" in the button labels. See #58198 (comment) and #58198 (comment). @ntsekouras, I think the label casing should match the other pages. The UX is very different from other "Add New" buttons. Maybe instead of a dropdown, we should display a new pattern modal? |
|
I don't have a strong opinion about the button labels, except that they should be consistent. "Add x" seems fine to me. I agree the button opening a menu is a bit clunky, but I think that's a short-term thing until patterns and templates converge more comprehensively. If it's a big deal, then we could try a split-button, as we've been exploring for save + publish: 
Eventually it should just open the 'Add pattern' UX (modal), and importing should probably be a secondary (or even tertiary) action. Speaking of secondary actions, if we keep the blue 
|
|
Buttons/links must have enough context for users. Add New is not good enough for accessibility, it's why we changed all of them in Core. I am good with Add New X or Add X but not just Add or Add New. https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html This applies more to links over buttons but I think we should keep the same patterns for UI/UX consistency. Thanks. |
youknowriad
reviewed
May 15, 2024
ntsekouras
force-pushed
the
add/create-pattern-button-in-patterns-page
branch
from
c9c6ea7 to
74f011e
Compare
This comment was marked as outdated.
This comment was marked as outdated.
|
This should be ready for another round of reviews, based on the updated description of the main issue. I can extract the labels update to remove the |
youknowriad
reviewed
May 20, 2024
youknowriad
reviewed
May 20, 2024
packages/edit-site/src/components/create-template-part-modal/index.js
Outdated
Show resolved
Hide resolved
|
Flaky tests detected in a629e26. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9175329171
|
youknowriad
reviewed
May 21, 2024
youknowriad
reviewed
May 21, 2024
| ) } | ||
| <HStack expanded={ false }> | ||
| <AddNewPattern /> | ||
| { !! patternCategory?.id && ( |
There was a problem hiding this comment.
I think this menu should move close to the "title" (left of the header) rather than staying on the right no? Anyway, not a blocker.
|
It would be really nice to use DropdownMenu V2 here (#61094). Fine to do that later/separately if it's not trivial. |
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jun 4, 2024
…60302) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> Co-authored-by: pablohoneyhoney <pablohoneyhoney@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
…60302) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> Co-authored-by: pablohoneyhoney <pablohoneyhoney@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Resolves: #59099
Resolves: #58198
This PR adds a
Create patternbutton in patterns page header and uses the same modal for creating patterns/template parts in the sidebar, as suggested here: #58198Testing Instructions
Create patternbuttonScreenshots or screencast