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.

Sign up for GitHub

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

Updated code to set active pattern and its styling #66185

Closed
wants to merge 14 commits into from
Closed

Updated code to set active pattern and its styling #66185

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1015e15
Updated code to set active pattern and its styling
benazeer-ben Oct 7, 2024
c16a376
Fixes for linting issues on updated files
benazeer-ben Oct 8, 2024
b615175
Updated code based on the first round feedback points
benazeer-ben Oct 10, 2024
92b1723
Modification to highlight active iitem on focus
benazeer-ben Oct 11, 2024
09e25d9
Removed local/session storage
benazeer-ben Oct 14, 2024
81ab636
Remove unnecessary tabindex (composite already handles that)
ciampo Oct 16, 2024
d3d19c5
No need to call setActivePattern, since it's also called in the onCli…
ciampo Oct 16, 2024
fdf2d49
Move the is-selected classname to the composite item itself
ciampo Oct 16, 2024
5a6ba83
No need for an extra onClick handler, the one on Composite.Item is en…
ciampo Oct 16, 2024
3abb4e4
Fix the onCLick handler by accepting all the parameters needed
ciampo Oct 16, 2024
169af5c
Remove unnecessary comments, make sure that activePattern is selected
ciampo Oct 16, 2024
c22fc3c
Do not pass unnecessary / non-existing props to Composite
ciampo Oct 16, 2024
5b91306
Re-work styles, and show a light colored overlay to indicate selected…
ciampo Oct 16, 2024
76a666e
Update focus and hover styles
ciampo Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 9 additions & 19 deletions packages/block-editor/src/components/block-patterns-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@ function BlockPattern( {
showTitle = true,
showTooltip,
category,
isSelected, // new prop to manage active state
setActivePattern, // function to set the active pattern
isSelected,
} ) {
const [ isDragging, setIsDragging ] = useState( false );
const { blocks, viewportWidth } = pattern;
Expand Down Expand Up @@ -79,10 +78,7 @@ function BlockPattern( {
>
{ ( { draggable, onDragStart, onDragEnd } ) => (
<div
className={ clsx(
'block-editor-block-patterns-list__list-item',
{ 'is-selected': isSelected } // Apply 'is-selected' class if this pattern is active
) }
className="block-editor-block-patterns-list__list-item"
draggable={ draggable }
onDragStart={ ( event ) => {
setIsDragging( true );
Expand All @@ -97,10 +93,6 @@ function BlockPattern( {
onDragEnd( event );
}
} }
onClick={ () => {
onClick( pattern, blocks );
onHover?.( null );
} }
>
<WithToolTip
showTooltip={
Expand All @@ -113,7 +105,6 @@ function BlockPattern( {
render={
<div
role="option"
tabIndex={ 0 }
aria-label={ pattern.title }
aria-describedby={
pattern.description
Expand All @@ -127,13 +118,13 @@ function BlockPattern( {
pattern.type ===
INSERTER_PATTERN_TYPES.user &&
! pattern.syncStatus,
'is-selected': isSelected,
}
) }
/>
}
id={ id }
onClick={ () => {
setActivePattern( id ); // Set active pattern when clicked
onClick( pattern, blocks );
onHover?.( null );
} }
Expand Down Expand Up @@ -224,17 +215,15 @@ function BlockPatternsList(

setActiveCompositeId( firstCompositeItemId );
}, [ shownPatterns, blockPatterns ] );
const handleClickPattern = ( pattern ) => {
setActivePattern( pattern.name ); // Set the clicked pattern as active
onClickPattern( pattern ); // Original onClick logic
const handleClickPattern = ( pattern, blocks ) => {
setActivePattern( pattern.name );
onClickPattern( pattern, blocks );
};
return (
<Composite
orientation={ orientation }
activeId={ activeCompositeId }
setActiveId={ setActiveCompositeId }
selectedId={ activePattern }
setSelectedId={ setActivePattern }
role="listbox"
className="block-editor-block-patterns-list"
aria-label={ label }
Expand All @@ -253,8 +242,9 @@ function BlockPatternsList(
showTitle={ showTitle }
showTooltip={ showTitlesAsTooltip }
category={ category }
isSelected={ activePattern === pattern.name } // Highlight the active pattern
setActivePattern={ setActivePattern } // Function to set the active pattern
isSelected={
!! activePattern && activePattern === pattern.name
}
/>
) : (
<BlockPatternPlaceholder key={ pattern.name } />
Expand Down
26 changes: 12 additions & 14 deletions packages/block-editor/src/components/block-patterns-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,6 @@
&[draggable="true"] {
cursor: grab;
}

// Solution for "Add "selected" styling to selected pattern in the design selector."
// https: //github.com/WordPress/gutenberg/issues/65127

&.is-selected {
border: $border-width solid var(--wp-admin-theme-color);
}
}

.block-editor-block-patterns-list__item {
Expand Down Expand Up @@ -52,16 +45,21 @@
}
}

&:hover:not(:focus) .block-editor-block-preview__container::after {
outline-color: rgba($black, 0.3);
&:hover:not( [data-focus-visible] )
.block-editor-block-preview__container::after {
outline-color: rgba( $black, 0.3 );
}

&:focus .block-editor-block-preview__container::after {
outline-color: var(--wp-admin-theme-color);
outline-width: var(--wp-admin-border-width-focus);
outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
&[data-focus-visible] .block-editor-block-preview__container::after {
outline-color: var( --wp-admin-theme-color );
outline-width: var( --wp-admin-border-width-focus );
outline-offset: calc( ( -1 * var( --wp-admin-border-width-focus ) ) );
transition: outline 0.1s linear;
@include reduce-motion("transition");
@include reduce-motion( 'transition' );
}

&.is-selected .block-editor-block-preview__container::after {
background-color: rgba( var( --wp-admin-theme-color--rgb ), 0.04 );
}

.block-editor-patterns__pattern-details:not(:empty) {
Expand Down
Loading