Skip to content

Commit

Permalink
Fix: Templates and patterns are nesting two elements with the button …
Browse files Browse the repository at this point in the history 
…role (#67801)

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: oandregal <[email protected]>
  • Loading branch information
@jorgefilipecosta @oandregal
3 people authored Dec 11, 2024
1 parent db42416 commit b658230
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 97 deletions.
52 changes: 11 additions & 41 deletions packages/edit-site/src/components/page-patterns/fields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,50 +15,25 @@ import {
} from '@wordpress/block-editor';
import { Icon } from '@wordpress/icons';
import { parse } from '@wordpress/blocks';
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
* Internal dependencies
*/
import {
PATTERN_TYPES,
TEMPLATE_PART_POST_TYPE,
PATTERN_SYNC_TYPES,
OPERATOR_IS,
} from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import { useAddedBy } from '../page-templates/hooks';
import { defaultGetTitle } from './search-items';

const { useLink } = unlock( routerPrivateApis );
const { useGlobalStyle } = unlock( blockEditorPrivateApis );

function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
return (
<button
className="page-patterns-preview-field__button"
type="button"
onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
aria-label={ defaultGetTitle( item ) }
aria-describedby={ ariaDescribedBy }
aria-disabled={ item.type === PATTERN_TYPES.theme }
>
{ children }
</button>
);
}

function PreviewField( { item } ) {
const descriptionId = useId();
const description = item.description || item?.excerpt?.raw;
const isUserPattern = item.type === PATTERN_TYPES.user;
const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
const [ backgroundColor ] = useGlobalStyle( 'color.background' );
const { onClick } = useLink(
`/${ item.type }/${
isUserPattern || isTemplatePart ? item.id : item.name
}?canvas=edit`
);
const blocks = useMemo( () => {
return (
item.blocks ??
Expand All @@ -73,23 +48,18 @@ function PreviewField( { item } ) {
<div
className="page-patterns-preview-field"
style={ { backgroundColor } }
aria-describedby={ !! description ? descriptionId : undefined }
>
<PreviewWrapper
item={ item }
onClick={ onClick }
ariaDescribedBy={ !! description ? descriptionId : undefined }
>
{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
{ ! isEmpty && (
<BlockPreview.Async>
<BlockPreview
blocks={ blocks }
viewportWidth={ item.viewportWidth }
/>
</BlockPreview.Async>
) }
</PreviewWrapper>
{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
{ ! isEmpty && (
<BlockPreview.Async>
<BlockPreview
blocks={ blocks }
viewportWidth={ item.viewportWidth }
/>
</BlockPreview.Async>
) }
{ !! description && (
<div hidden id={ descriptionId }>
{ description }
Expand Down
22 changes: 0 additions & 22 deletions packages/edit-site/src/components/page-patterns/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,6 @@
width: 96px;
flex-grow: 0;
}

.page-patterns-preview-field__button {
box-shadow: none;
border: none;
padding: 0;
background-color: unset;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
height: 100%;
border-radius: $grid-unit-05;

&:focus-visible {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}

&[aria-disabled="true"] {
cursor: default;
}
}
}

.edit-site-patterns__pattern-icon {
Expand Down
22 changes: 6 additions & 16 deletions packages/edit-site/src/components/page-templates/fields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { EditorProvider } from '@wordpress/editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
* Internal dependencies
Expand All @@ -25,7 +24,6 @@ import { useAddedBy } from './hooks';
import usePatternSettings from '../page-patterns/use-pattern-settings';
import { unlock } from '../../lock-unlock';

const { useLink } = unlock( routerPrivateApis );
const { useGlobalStyle } = unlock( blockEditorPrivateApis );

function PreviewField( { item } ) {
Expand All @@ -34,7 +32,6 @@ function PreviewField( { item } ) {
const blocks = useMemo( () => {
return parse( item.content.raw );
}, [ item.content.raw ] );
const { onClick } = useLink( `/${ item.type }/${ item.id }?canvas=edit` );

const isEmpty = ! blocks?.length;
// Wrap everything in a block editor provider to ensure 'styles' that are needed
Expand All @@ -50,19 +47,12 @@ function PreviewField( { item } ) {
className="page-templates-preview-field"
style={ { backgroundColor } }
>
<button
className="page-templates-preview-field__button"
type="button"
onClick={ onClick }
aria-label={ item.title?.rendered || item.title }
>
{ isEmpty && __( 'Empty template' ) }
{ ! isEmpty && (
<BlockPreview.Async>
<BlockPreview blocks={ blocks } />
</BlockPreview.Async>
) }
</button>
{ isEmpty && __( 'Empty template' ) }
{ ! isEmpty && (
<BlockPreview.Async>
<BlockPreview blocks={ blocks } />
</BlockPreview.Async>
) }
</div>
</EditorProvider>
);
Expand Down
18 changes: 0 additions & 18 deletions packages/edit-site/src/components/page-templates/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,6 @@
width: 100%;
border-radius: $radius-medium;

.page-templates-preview-field__button {
box-shadow: none;
border: none;
padding: 0;
background-color: unset;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
height: 100%;
border-radius: $radius-medium;

&:focus-visible {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}
}

.dataviews-view-list & {
.block-editor-block-preview__container {
height: 120px;
Expand Down

1 comment on commit b658230

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in b658230.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12274959116
📝 Reported issues:

Please sign in to comment.