-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Library - make pattern title clickable #51898
Conversation
Note: I'm not sure about the visuals here. I guess the text should be white and then go to standard link blue color on hover/focus? |
Size Change: +96 B (0%) Total Size: 1.43 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! I think maybe the whole grid item should be clickable, and maybe there should be some kind of hover effect about it. But that can be a whole other story. @SaxonF WDYT?
<Heading level={ 5 }>{ item.title }</Heading> | ||
<Heading level={ 5 }> | ||
<Button | ||
href={ href } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we need the href
, do we?
Potentially the title element could be moved within the Not against merging this PR as an interim fix though. |
e1a2e3e
to
6240e40
Compare
Flaky tests detected in 6240e40. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5389014633
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it introduces more rough edges, than it does clean them.
If the title are links, I wouldn't expect that these are styled as such. I think they should maintain the styling as seen in trunk.
CleanShot.2023-06-27.at.07.43.38.mp4
Yup, thus #51898 (comment). Thanks for the actionable feedback 👍 TBH I should have spotted this. |
@richtabor I updated the styling in 260ff9f. I took the liberty of including a subtle effect on |
Perhaps |
@richtabor Colors updated. Now seeking your ✅ |
The title should only act as a link for editable entries. Currently it is applied to everything, meaning I can open a theme pattern in the editor which leads to a very broken experience. |
Excellent catch. I feel like I'm diving in here without sufficient context around how Library works. Glad I've exercised caution here to ensure these types of errors don't creep in. |
Yea, theme patterns can't be edited (yet). Eventually they'll be treated similar to template parts, where you can edit/copy/customize them. |
dffd756
to
c9edace
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I rebased this and updated the logic so that it only shows the link if it's not a pattern. I think we can bring this in.
* Use button inside title * Remove href * Preserve roving tab index * Fix link colors to match trunk $gray-600 * Remove redundant var * Amend colors as per review * remove old files again --------- Co-authored-by: scruffian <ben@scruffian.com>
I just cherry-picked this PR to the update/beta-4-second-round branch to get it included in the next release: 967ce9a |
* Post and Comment Template blocks: Change render_block_context priority to 1 (#52364) * Footnotes: fix lingering format boundary attr (#52439) * Footnotes: Fix incorrect anchor position in Firefox (#52425) * Scope CSS rules for the wp admin reset to js support only. (#52376) * Fix: Patterns & template parts: remove "apply globally" option from block settings (#52160) * Advanced styles panel: add an early return * Update index.js * Minor styling changes * Use array of features --------- Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> * make the body of the editor minimmum viewport height so that smaller contents maintain clickability (#52406) * Patterns: Add renaming, duplication, and deletion options (#52270) * Patterns: Update manage pattern links to go to site editor if available (#52403) * [Patterns] Separate sync status into a filter control (#52303) Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com> * Patterns: Add missing decoding entities processing in Patterns and Template/Parts pages (#52449) * Fix document title icon appearance (#52424) * Quote block: Add transform to paragraph (#51809) * Add ungroup transform as transform to p * Lint * Update test and snapshot. --------- Co-authored-by: Juan Aldasoro <juanfraa@gmail.com> * remove sidebar group descriptions (#52453) * Patterns: alternative grid layout to improve keyboard accessibility (#52357) * add sync tooltip (#52458) * Patterns: Update section heading levels (#52273) * Ensure that the unsaved title is not persisted when reopening the modal (#52473) * Iframe: avoid asset parsing & fix script localisation (#52405) * Iframe: avoid asset parsing & fix script localisation * Add e2e test for script localisation * Update descriptions (#52468) * Footnotes: show in inserter and placehold (#52445) * Footnotes: show in inserter and placehold * Fix placeholder block membrane; fix copy; add icon, label --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Fix: Focus loss on navigation link label editing on Firefox. (#52428) * Update tooltip (#52465) * Refactor, document, and fix image block deprecations (#52081) * Refactor, document, and fix image block deprecations * Fix v5 attributes & supports * Fix v1 & v2 deprecation tests * Rename deprecated test descriptions * Respect custom aspect ratio (#52286) * add image width and height via css inline style, update width and height attrs to be string * keep width and height as attributes too, keep the attributes as numbers * updates image fixtures * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content (#52241) * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Footnotes: save numbering through the entity provider (#52423) * Footnotes: save numbering through the entity provider * Add sup so no styling is needed at all * Migrate old format * Restore old styles, fix nested attribute queries * Fix anchor selection * Migrate markup in entity provider instead * Fix tests * Fix typo * Fix comment --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Revert "Post editor: Require confirmation before removing Footnotes (#52277)" (#52486) This reverts commit e6426ea. * List block: Fix selected type option (#52472) * Library - make pattern title clickable (#51898) * Use button inside title * Remove href * Preserve roving tab index * Fix link colors to match trunk $gray-600 * Remove redundant var * Amend colors as per review * remove old files again --------- Co-authored-by: scruffian <ben@scruffian.com> * remove status icon (#52457) * Rename block theme activation nonce variable. (#52398) --------- Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com> Co-authored-by: Carolina Nymark <myazalea@hotmail.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com> Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Rich Tabor <hi@richtabor.com> Co-authored-by: Juan Aldasoro <juanfraa@gmail.com> Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: Héctor <27339341+priethor@users.noreply.github.com> Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: scruffian <ben@scruffian.com> Co-authored-by: Peter Wilson <519727+peterwilsoncc@users.noreply.github.com>
@getdave 👋 I see you marked this PR with the "Backport to Gutenberg RC" label. However, when trying to cherry-pick the merge commit to the Can you advise whether those changes should also be included in 16.2 (and if so, ideally help file a PR against the cc/ @fullofcaffeine |
Warning: Type of PR label error To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. |
What?
Makes the title of a pattern in the Library clickable as well as the preview
Why?
The previews for Patterns in the library can take time to load/render. This means you have to wait to be able to click through to the pattern. It's inherently unstable UX.
By making the pattern title also clickable, we allow users to click through even if:
I also prefer the UX as I expected the pattern title to be clickable and it wasn't.
How?
Uses a Button in
link
variant form, to click through to the same route as the preview click through.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast