Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CYS: Fix tooltip overlap with pattern (#49700) 

* CYS: Fix tooltip overlap with pattern

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-07-19 14:52:26 +02:00 committed by GitHub
parent 8313050d37
commit fd5362218a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 46 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
plugins/woocommerce-admin/client/customize-store/assembler-hub/block-pattern-list.jsx
View File

@ -1,146 +0,0 @@
// Reference: https://github.com/WordPress/gutenberg/blob/94ff2ba55379d9ad7f6bed743b20b85ff26cf56d/packages/block-editor/src/components/block-patterns-list/index.js#L1
/* eslint-disable @woocommerce/dependency-group */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/**
* External dependencies
*/
import {
VisuallyHidden,
__unstableComposite as Composite,
__unstableUseCompositeState as useCompositeState,
__unstableCompositeItem as CompositeItem,
Tooltip,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useMemo } from '@wordpress/element';
import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import BlockPreview from './block-preview';
import Iframe from './iframe';
const WithToolTip = ( { showTooltip, title, children } ) => {
if ( showTooltip ) {
return (
<Tooltip text={ title }>
<span>{ children }</span>
</Tooltip>
);
}
return <>{ children }</>;
};
function BlockPattern( { pattern, onClick, onHover, composite, showTooltip } ) {
const { blocks, viewportWidth } = pattern;
const instanceId = useInstanceId( BlockPattern );
const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
const originalSettings = useSelect(
( select ) => select( blockEditorStore ).getSettings(),
[]
);
const settings = useMemo(
() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
[ originalSettings ]
);
return (
<div>
<div className="block-editor-block-patterns-list__list-item">
<WithToolTip
showTooltip={ showTooltip }
title={ pattern.title }
>
<CompositeItem
role="option"
as="div"
{ ...composite }
className="block-editor-block-patterns-list__item"
onClick={ () => {
onClick( pattern, blocks );
onHover?.( null );
} }
onMouseEnter={ () => {
onHover?.( pattern );
} }
onMouseLeave={ () => onHover?.( null ) }
aria-label={ pattern.title }
aria-describedby={
pattern.description ? descriptionId : undefined
}
>
<BlockPreview
blocks={ blocks }
viewportWidth={ viewportWidth || 1200 }
additionalStyles=""
useSubRegistry={ true }
settings={ settings }
isScrollable={ false }
autoScale={ true }
CustomIframeComponent={ Iframe }
isPatternPreview={ true }
/>
{ ! showTooltip && (
<div className="block-editor-block-patterns-list__item-title">
{ pattern.title }
</div>
) }
{ !! pattern.description && (
<VisuallyHidden id={ descriptionId }>
{ pattern.description }
</VisuallyHidden>
) }
</CompositeItem>
</WithToolTip>
</div>
</div>
);
}
function BlockPatternPlaceholder() {
return (
<div className="block-editor-block-patterns-list__item is-placeholder" />
);
}
function BlockPatternList( {
isDraggable,
blockPatterns,
shownPatterns,
onHover,
onClickPattern,
orientation,
label = __( 'Block Patterns', 'woocommerce' ),
showTitlesAsTooltip,
} ) {
const composite = useCompositeState( { orientation } );
return (
<Composite
{ ...composite }
role="listbox"
className="block-editor-block-patterns-list"
aria-label={ label }
>
{ blockPatterns.map( ( pattern ) => {
const isShown = shownPatterns.includes( pattern );
return isShown ? (
<BlockPattern
key={ pattern.name }
pattern={ pattern }
onClick={ onClickPattern }
onHover={ onHover }
isDraggable={ isDraggable }
composite={ composite }
showTooltip={ showTitlesAsTooltip }
/>
) : (
<BlockPatternPlaceholder key={ pattern.name } />
);
} ) }
</Composite>
);
}
export default BlockPatternList;

4
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/index.tsx
View File

@ -10,8 +10,8 @@ import { memo, useCallback, useContext } from '@wordpress/element';
* Internal dependencies
*/
import { SidebarNavigationScreenColorPalette } from './sidebar-navigation-screen-color-palette';
import { SidebarNavigationScreenFooter } from './sidebar-navigation-screen-footer';
import { SidebarNavigationScreenHeader } from './sidebar-navigation-screen-header';
import { SidebarNavigationScreenFooter } from './sidebar-navigation-screen-footer/sidebar-navigation-screen-footer';
import { SidebarNavigationScreenHeader } from './sidebar-navigation-screen-header/sidebar-navigation-screen-header';
import { SidebarNavigationScreenHomepage } from './sidebar-navigation-screen-homepage';
import { SidebarNavigationScreenMain } from './sidebar-navigation-screen-main';
import { SidebarNavigationScreenTypography } from './sidebar-navigation-screen-typography';

4
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/style.scss
View File

@ -9,6 +9,10 @@
padding: 16px 24px 24px 24px;
overflow: auto;
.block-editor-block-preview__container {
margin-bottom: 2px;
}
.woocommerce-customize-store-edit-site-layout__sidebar-extra__pattern__header {
display: flex;
align-items: center;

21
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx → plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/sidebar-navigation-screen-footer.tsx
View File

@ -19,21 +19,26 @@ import { store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
*/
import { SidebarNavigationScreen } from './sidebar-navigation-screen';
import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
import { ADMIN_URL } from '~/utils/admin-settings';
import { useEditorBlocks } from '../hooks/use-editor-blocks';
import { usePatternsByCategory } from '../hooks/use-patterns';
import { HighlightedBlockContext } from '../context/highlighted-block-context';
import { useEditorScroll } from '../hooks/use-editor-scroll';
import { useSelectedPattern } from '../hooks/use-selected-pattern';
import { findPatternByBlock } from './utils';
import BlockPatternList from '../block-pattern-list';
import { useEditorBlocks } from '../../hooks/use-editor-blocks';
import { usePatternsByCategory } from '../../hooks/use-patterns';
import { HighlightedBlockContext } from '../../context/highlighted-block-context';
import { useEditorScroll } from '../../hooks/use-editor-scroll';
import { useSelectedPattern } from '../../hooks/use-selected-pattern';
import { findPatternByBlock } from '../utils';
import {
__experimentalBlockPatternsList as BlockPatternList,
// @ts-expect-error No types for this exist yet.
} from '@wordpress/block-editor';
import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
import { FlowType } from '~/customize-store/types';
import { footerTemplateId } from '~/customize-store/data/homepageTemplates';
import { useSelect } from '@wordpress/data';
import { trackEvent } from '~/customize-store/tracking';
import './style.scss';
const SUPPORTED_FOOTER_PATTERNS = [
'woocommerce-blocks/footer-with-3-menus',
'woocommerce-blocks/footer-simple-menu',

5
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer/style.scss Normal file
View File

@ -0,0 +1,5 @@
.woocommerce-customize-store__sidebar-footer-content {
.block-editor-block-preview__container {
margin-bottom: 2px;
}
}

21
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx → plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/sidebar-navigation-screen-header.tsx
View File

@ -20,20 +20,25 @@ import { store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
*/
import { SidebarNavigationScreen } from './sidebar-navigation-screen';
import { SidebarNavigationScreen } from '../sidebar-navigation-screen';
import { ADMIN_URL } from '~/utils/admin-settings';
import { usePatternsByCategory } from '../hooks/use-patterns';
import { useSelectedPattern } from '../hooks/use-selected-pattern';
import { useEditorBlocks } from '../hooks/use-editor-blocks';
import { HighlightedBlockContext } from '../context/highlighted-block-context';
import { useEditorScroll } from '../hooks/use-editor-scroll';
import { findPatternByBlock } from './utils';
import BlockPatternList from '../block-pattern-list';
import { usePatternsByCategory } from '../../hooks/use-patterns';
import { useSelectedPattern } from '../../hooks/use-selected-pattern';
import { useEditorBlocks } from '../../hooks/use-editor-blocks';
import { HighlightedBlockContext } from '../../context/highlighted-block-context';
import { useEditorScroll } from '../../hooks/use-editor-scroll';
import { findPatternByBlock } from '../utils';
import {
__experimentalBlockPatternsList as BlockPatternList,
// @ts-expect-error No types for this exist yet.
} from '@wordpress/block-editor';
import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
import { FlowType } from '~/customize-store/types';
import { headerTemplateId } from '~/customize-store/data/homepageTemplates';
import { trackEvent } from '~/customize-store/tracking';
import './style.scss';
const SUPPORTED_HEADER_PATTERNS = [
'woocommerce-blocks/header-centered-menu',
'woocommerce-blocks/header-essential',

5
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header/style.scss Normal file
View File

@ -0,0 +1,5 @@
.woocommerce-customize-store__sidebar-header-content {
.block-editor-block-preview__container {
margin-bottom: 2px;
}
}

4
plugins/woocommerce/changelog/49700-fix-tooltip-space Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
CYS: Fix the tooltip overlap with the pattern.