-
Notifications
You must be signed in to change notification settings - Fork 9
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
Theme previewer: Use listbox for theme patterns & style variation lists to improve selection UX #126
Merged
Merged
Theme previewer: Use listbox for theme patterns & style variation lists to improve selection UX #126
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
83cd848
Initial pass for listbox controls
ryelle f1f5fdd
Trigger the iframe navigation on selection
ryelle 991c3eb
Add a click handler
ryelle df2dd93
Add "unselect" behavior
ryelle a1eaa3d
Move assorted screenshot styles to single `listbox` file, update styl…
ryelle 2aa4620
Add title to iframe, announce when navigation happens
ryelle dcbaace
Set the initial selected item if there is one
ryelle 052453d
Trigger the navigation when selected outside of the previewer
ryelle 38b37a0
Scroll the focused element into the viewport
ryelle c073150
Minor style fixes
ryelle d67081f
Add docs to the functions
ryelle 2e84235
Fix lint issues
ryelle 33ce59e
Remove unnecessary code
ryelle File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
70 changes: 70 additions & 0 deletions
70
source/wp-content/themes/wporg-themes-2024/src/style/_listbox.scss
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /* Screenshot block styles */ | ||
| .wp-block-wporg-screenshot-preview { | ||
| border-color: var(--wp--preset--color--light-grey-1); | ||
| } | ||
|
|
||
| .wp-block-wporg-screenshot-preview:not(.is-preview-image):hover img { | ||
| transform: scale(1.15); | ||
| } | ||
|
|
||
| /* Listbox interaction styles */ | ||
| .wporg-theme-listbox:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| .wporg-theme-listbox .wp-block-wporg-screenshot-preview { | ||
| position: relative; | ||
| border: none; | ||
| } | ||
|
|
||
| .wporg-theme-listbox .wp-block-wporg-screenshot-preview::after { | ||
| content: ""; | ||
| position: absolute; | ||
| z-index: 1; | ||
| inset: 0; | ||
| border-color: var(--wp--preset--color--light-grey-1); | ||
| border-style: solid; | ||
| border-width: 1.5px; | ||
| border-radius: 3px; | ||
| } | ||
|
|
||
| .wporg-theme-listbox:where(:focus) .is-focus .wp-block-wporg-screenshot-preview::after { | ||
| border-color: var(--wp--preset--color--blueberry-1); | ||
| box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--light-grey-1); | ||
| } | ||
|
|
||
| .wporg-theme-listbox [aria-selected="true"] .wp-block-wporg-screenshot-preview::after { | ||
| border-color: var(--wp--preset--color--charcoal-1); | ||
| box-shadow: inset 0 0 0 3px var(--wp--preset--color--light-grey-1); | ||
| } | ||
|
|
||
| .wporg-theme-listbox:where(:focus) [aria-selected="true"].is-focus .wp-block-wporg-screenshot-preview::after { | ||
| border-color: var(--wp--preset--color--blueberry-1); | ||
| box-shadow: inset 0 0 0 3px var(--wp--preset--color--light-grey-1); | ||
| } | ||
|
|
||
| /* Screenshot & listbox in the Previewer */ | ||
| :where(body.wporg-theme-preview) { | ||
| .wp-block-wporg-screenshot-preview { | ||
| background-color: var(--wp--preset--color--white); | ||
| } | ||
|
|
||
| .wporg-theme-listbox .wp-block-wporg-screenshot-preview::after { | ||
| border-color: transparent; | ||
| } | ||
|
|
||
| .wporg-theme-listbox:where(:focus) .is-focus .wp-block-wporg-screenshot-preview::after { | ||
| border-color: var(--wp--preset--color--blueberry-2); | ||
| box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--charcoal-1); | ||
| } | ||
|
|
||
| .wporg-theme-listbox [aria-selected="true"] .wp-block-wporg-screenshot-preview::after { | ||
| border-color: var(--wp--preset--color--white); | ||
| box-shadow: inset 0 0 0 3px var(--wp--preset--color--charcoal-1); | ||
| } | ||
|
|
||
| .wporg-theme-listbox:where(:focus) [aria-selected="true"].is-focus .wp-block-wporg-screenshot-preview::after { | ||
| border-color: var(--wp--preset--color--blueberry-2); | ||
| box-shadow: inset 0 0 0 3px var(--wp--preset--color--charcoal-1); | ||
| } | ||
| } | ||
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
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
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
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
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
54 changes: 25 additions & 29 deletions
54
source/wp-content/themes/wporg-themes-2024/src/theme-patterns/view.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,34 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { getContext, getElement, store } from '@wordpress/interactivity'; | ||
| import { addQueryArgs } from '@wordpress/url'; | ||
|
|
||
| store( 'wporg/themes/theme-patterns', { | ||
| state: { | ||
| get buttonCSS() { | ||
| return getContext().hideOverflow ? false : 'none'; | ||
| }, | ||
| }, | ||
| actions: { | ||
| showAll() { | ||
| const context = getContext(); | ||
| const { ref } = getElement(); | ||
| context.hideOverflow = false; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import wporgListbox from '../utils/listbox'; | ||
|
|
||
| const container = ref.closest( '.wp-block-wporg-theme-patterns' ); | ||
| if ( ! container ) { | ||
| return; | ||
| } | ||
| window.addEventListener( 'load', () => { | ||
| const containers = document.querySelectorAll( '.wp-block-wporg-theme-patterns' ); | ||
| if ( ! containers ) { | ||
| return; | ||
| } | ||
|
|
||
| // Trigger the custom "show" event on each image. | ||
| container.querySelectorAll( '.wp-block-wporg-screenshot-preview' ).forEach( ( element ) => { | ||
| const event = new Event( 'wporg-show' ); | ||
| element.dispatchEvent( event ); | ||
| } ); | ||
| containers.forEach( ( container ) => { | ||
| const state = JSON.parse( container.dataset.initialState ); | ||
| new wporgListbox( container, state ); | ||
|
|
||
| // Move focus from the now-removed button to the first-visible element. | ||
| setTimeout( () => { | ||
| const firstNewElement = container.querySelectorAll( 'a' )[ context.initialCount ]; | ||
| if ( firstNewElement ) { | ||
| firstNewElement.focus(); | ||
| // Not in the previewer, use the select event to navigate to the previewer. | ||
| if ( ! container.closest( '.wp-block-wporg-theme-previewer' ) ) { | ||
| container.querySelector( '[role="listbox"]' ).addEventListener( 'wporg-select', ( event ) => { | ||
| const ref = event.selectedElement; | ||
| if ( ref && ref.dataset ) { | ||
| let url = window.location.toString(); | ||
| url = url.replace( /\/$/, '' ) + '/preview/'; | ||
| url = addQueryArgs( url, { pattern_name: ref.dataset.pattern_name } ); | ||
| window.location = url; | ||
| } | ||
| }, 0 ); | ||
| }, | ||
| }, | ||
| } ); | ||
| } | ||
| } ); | ||
| } ); |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,4 +17,4 @@ function Edit() { | |
| registerBlockType( metadata.name, { | ||
| edit: Edit, | ||
| save: () => null, | ||
| } ); | ||
| } ); | ||
Oops, something went wrong.
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.
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 find it a bit strange when hovering not to get a pointer style cursor, for elements I can interact with.
Goes for both variations and patterns.
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.
Yeah, the cursor was raised in #128, so that'll be fixed.