Simplify BlockPatternsSyncFilter with clearer labels and additional context #54838
Conversation
|
Size Change: +1.32 kB (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
richtabor
added
Backport to Gutenberg RC
|
In the same vein as @aaronrobertshaw's comment here, this tweak polishes up the copy to help make patterns more understandable for 6.4. Also, as a note — I don't think we should be referencing "core" in interface elements. It can be confusing for folks. |
richtabor
removed
the
[Type] Bug
There was a problem hiding this comment.
Tested well for me. @SaxonF do you want to give it a 👀 over from a design perspective?
The only thought I had is that not all the patterns come from the directory, some of them are bundled in the core release I believe, but I don't think that is an important enough distinction to confuse users over - I agree with Rich that the use of the term core is not that meaningful to most users.
|
I'm a big fan, nice iteration Rich! |
There was a problem hiding this comment.
I like the cleaner menu @richtabor, nice work ✨
A couple of quick thoughts came to mind.
-
As @glendaviesnz mentioned, the "Pattern directory" option doesn't really cover core patterns, but I also agree with not referencing "core" in the UI. Given this, I wonder if "Pattern directory" narrows expectations too much to only the .org pattern directory? If we are looking for alternatives, in other conversations someone suggested "WordPress" as an option.
-
Something that was already missing from the source filters was that plugins can register patterns as well as themes. Should that be noted in the help text at the bottom of the menu or via the menu items?
Nothing in those thoughts should block this PR but perhaps there is still some further tweaking we can do.
I believe the 6.4 beta 1 has been cut as well, so if this is intended for 6.4 we might need the Backport to WP Beta/RC label on this.
|
Thanks for the clarifications, just in terms of finding good names here, how are the sources distributed at the moment? It sounds like:
Are those 5 separate filters where 2 of them (from WordPress and from a plugin) are missing? Or are those filters implied in any of the existing filters (such as "Bundled & Pattern Directory", or "Themes & Plugins")? For what it's worth, removing the help text isn't about making it less verbose, it's about ensuring that the line-height of each item has equal weight, where previously "All" was the only one not having help text and therefore feeling less substantial. Because of that, I think we can definitely be more verbose with the main title of each filter, if we need to. |
The only one I think is missing from your list @jasmussen is user-created patterns. While they could be considered under "all", I suspect people will want to be able to filter by that source.
The current "Directory" filter includes both WordPress (core) and pattern directory patterns. Essentially, patterns that have one of the following sources:
The "Theme" filter currently includes all patterns that don't come from the above sources and aren't a user-created pattern. So as it stands now, that filter includes both theme and plugin patterns.
Thanks for the clarification 👍 |
|
👋 Just a nudge to please merge these changes if you'd like them included in Gutenberg 16.7. |
Ah yes of course.
Gotcha. I'll defer to Rich on any edits to this PR, but tentatively the list could be this: |
|
As this PR hasn't been merged yet and the latest version of Gutenberg is due to be released today, I'm going to remove the I'm going to add the |
mikachan
added
Backport to WP Beta/RC
Perhaps "Theme" could become "Theme & Plugins" (as there's only one active theme)?
@jasmussen I'm not following what the difference between "Bundled" and "Themes & Plugins" is? Are"bundled" patterns the curated patterns from the directory? |
It's my attempt to find a better word than "core". Essentially those that come with the software. It isn't clear to me if we actually need to call that out or not, and I'd be happy to keep the term just "Pattern Directory", mainly responding here to the comments by Aaron. |
Within WordPress there are patterns that get registered directly from files in core. These patterns are not in the WordPress.org Pattern Directory. In addition to these "core" patterns, additional patterns are loaded from the pattern directory. When you select the "Directory" filter, all of the above patterns are shown. That's why the help text prior to this PR stated "Pattern directory and core". Themes and plugins can register their own patterns (e.g. TT3's patterns). These sorts of patterns currently show when selecting the "Themes" filter. It's because plugin-registered patterns appear under this filter I noted that its current label is not 100% accurate. I only wanted to flag the gap in our terminology here. As @glendaviesnz noted, these finer points might not be worth the distinction in the UI if it could cause further confusion. I'm happy to defer to your collective wisdom here as I wasn't looking to block these improvements at all. |
This might be worth considering given the "Directory" patterns only include those authored by the WordPress.org user (IE the curated category). "Directory" alone could be misleading since community patterns aren't included? |
I think it's fine not declaring a difference between core and Pattern Directory. They're loaded from core, but only because we don't have support for blockTypes in the pattern directory yet (otherwise they would be directory). They're essentially directory patterns.
I'm ok with "WordPress" as a label, though I do think the more specific "Pattern Directory" connects the dots a bit better. |
|
I don't think "core" as it ships in trunk is meaningful. The Pattern Directory is WordPress.org, and aren't the bundled patterns sourced from there anyway? So to that end, with both the added is simplicity and the help text at the bottom, I think this one is fine to ship as is. |
|
Here's where it's at now. Good to go?
|
|
Nice work @richtabor |
|
I just cherry-picked this PR to the 6.4-beta3 branch to get it included in the next release: 05755f3 |
* Add help text & clearer labeling * Theme & Plugins
mikachan
removed
the
Backport to WP Beta/RC
* Add clearer labels and context to BlockPatternsSyncFilter (#54838) * Add help text & clearer labeling * Theme & Plugins * Font Library: use snake_case instead of camelCase on fontFamilies endpoint param (#54977) * use snake_case instead of camelCase on endpoint param * updating test * Fix output of Navigation block classnames in the editor. (#54992) * Block Editor: Avoid double-wrapping selectors when transforming the styles (#54981) * Block Editor: Avoid double-wrapping selectors when transforming the styles * Include space in the check * Don't display the navigation section in template parts details when a menu is missing (#54993) * Scripts: Properly use CommonJS for default Playwright config (#54988) * Fix path to `globalSetup` in default Playwright config Oversight from #54856 * `module.exports` * Fix default export usage * Add template replace flow to template inspector (#54609) * Add a modal to allow template switching * fetch template info * Allow switching to different patterns * Allow switching to different patterns * Add columns * move availble templates to the actions * filter for the correct templates * create the right data structure in the use select * move to a hook * inject theme attribute into pattern again * put the overlay over the top of the dropdown * fix the pattern to templates hook * set the template on click * Also set the blocks * remove calls to set template with the current template, since setting blocks correctly updates the content in the editor * serialize blocks so that we have correctly processed template parts * remove duplicated code * Remove unnecessary mapping * refactor * memoize the patterns * combine the useSelect * Update packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> * Fix ESLint error * Only show the button is there is more than 1 pattern * Copy update * Move the hook to a subdir * check that there are patterns * move the check * remove useCallback * change condition to show the button * change condition * move to use editEntityRecord * combine filters * add comments * Update packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> --------- Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> * List View: Fix performance issue when selecting all blocks (#54900) * List View: Fix performance issue when selecting all blocks within the editor canvas in long posts * Add a comment, rename const * Move block focus to be performed only once at the root of the list view, instead of within each block * Fix left and right aligmnent in children of Post Template (#54997) * Fix left and right aligmnent in children of Post Template * Add align center styles * Fix image placeholder disappearing * Site Editor: Avoid stale navigation block values when parsing entity record (#54996) * Removed unwanted space from the string (#54654) * Update styles.js Removed unwanted space with translation * Update deleted-navigation-warning.js Unwanted space at the end of the string shows translation warning. * Update inspector-controls.js Unwanted space at the end of the string shows translation warning * Fix Deleted Navigation Menu warning string (#55033) * [Inserter]: Fix reset of registered media categories (#55012) * [Inserter]: Fix reset of registered media categories * convert `useInserterMediaCategories` to selector and make private * Try fixing the flaky 'Toolbar roving tabindex' e2e test (#54785) * Try fixing the flaky 'Toolbar roving tabindex' e2e test * Add a link in the comment * Fallback to Twitter provider when embedding X URLs (#54876) * Fallback to Twitter provider when embedding X URLs * Avoid processing empty urls when trying a different provider * Update `react-native-editor` changelog # Conflicts: # packages/react-native-editor/CHANGELOG.md * Based on the efforts in #51761, remove caps case from Template Part and prefer sentence case. As all instances of this string are stand alone, it's okay to have Template capitalized as it's the start of a sentence. (#54709) * Update pattern import menu item (#54782) * Update pattern import menuitem * Revert label * Image Block: Fix browser console error when clicking "Expand on Click" (#54938) * Patterns: Remove category description in inserter panel? (#54894) * Media & Text: Fix React warning (#55038) * Block Style: Display default style labels correctly in the block sidebar (#55008) * Site Editor: Do not display 'trashed' navigation menus in Sidebar (#55072) * Site Editor: Do not display 'trashed' navigation menus in Sidebar * Extract selector into a hook Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Image: Fix Lightbox display bug in Classic Themes. (#54837) * If current theme is not a block theme add a default value for $background_color and $close_button_color. * Set lightbox buttons' background & border to none on hover & focus * Change logic to support lightbox in classic themes * Update logic to avoid unnecessary calls * Add style fixes * Remove unnecessary code * Fix close button color --------- Co-authored-by: Mario Santos <santosguillamot@gmail.com> Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com> * Latest Posts: add screen reader title text to Read more links and use alternative to excerpt_more filter (#55029) * In the editor: adds a screen reader text span with the post title in the i18n interpolator In the frontend: removes excerpt_more filter so we don't override themes and also replaces the default ellipsis with an accessible read more link * Removing "of" preposition in favour of a semi-colon. "Read more" is already translated so using a specifier to add it to the string * Fix Image block lightbox missing alt attribute and improve accessibility (#55010) * Move lightbox open button after the image. * Fix getting the lightbox image alt attribute. * Improve docblocks. * Do not render empty role attribute. * Remove unnecessary aria-hidden attribute. * Set aria-modal attribute dynamically. * More meaningful and simpler modal dialog aria-label. * Increase Close button target size. * Add enlarged image base64 encoded placeholder. * Better check for alt attribute as a string. * Update changelog. * Move changelog entry to the block library changelog. * Set lightbox dialog aria-label dynamically. * Hide background scrim container from assistive technology. * Remove obsolete code --------- Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com> # Conflicts: # packages/block-library/CHANGELOG.md * Patterns: Add category selector to pattern creation modal (#55024) --------- Co-authored-by: Kai Hao <kai@kaihao.dev> * Iframe: Fix positioning when dragging over an iframe (#55150) * Site Editor: Fix template part area listing when a template has no edits (#55115) * Alternative: Fix template part area listing when a template has no edits * Fix typos --------- Co-authored-by: Rich Tabor <hi@richtabor.com> Co-authored-by: Matias Benedetto <matias.benedetto@gmail.com> Co-authored-by: tellthemachines <tellthemachines@users.noreply.github.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Pascal Birchler <pascalb@google.com> Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: mujuonly <muju.only@yahoo.in> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com> Co-authored-by: Carlos Garcia <fluiddot@gmail.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Michal <mmczaplinski@gmail.com> Co-authored-by: Mario Santos <santosguillamot@gmail.com> Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: Kai Hao <kai@kaihao.dev>
What?
A follow-up to #54681 that:
Props @jasmussen.
Testing Instructions
Screenshots or screencast
Before
After