Limit number of visible incompatible extensions in sidebar notice (https://github.com/woocommerce/woocommerce-blocks/pull/11972)
* Limit number of visible incompatible extensions in sidebar notice * Adjust link text * Ensure text-decoration works in Safari * Minor CSS tweaks * Refactor constant names * Adjust chevron position for opened state * Revert "Adjust chevron position for opened state" This reverts commit ff5142427738626837be887dd8d7e5d94c2432d4.
This commit is contained in:
Niels Lange
GitHub
parent
ccb6e1ecdc
commit
7ea98576bc
|
|
@ -14,6 +14,44 @@
|
|||
.wc-blocks-incompatible-extensions-notice__content {
|
||||
display: flex;
|
||||
|
||||
details {
|
||||
margin: 0;
|
||||
|
||||
&[open] {
|
||||
margin: 0 0 $gap;
|
||||
|
||||
summary {
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
display: block; // Remove marker for non Webkit-based browsers.
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
margin: 0 0 $gap;
|
||||
|
||||
span {
|
||||
color: $gray-700;
|
||||
text-decoration: underline; // Ensure text-decoration works in Safari.
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none; // Remove marker for Webkit-based browsers.
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
fill: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-incompatible-extensions-notice__warning-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -22,7 +60,7 @@
|
|||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0 0 1em 1.2em;
|
||||
margin: 0 0 0 1.2em;
|
||||
padding: 0;
|
||||
list-style: disc outside;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { __, _n, sprintf } from '@wordpress/i18n';
|
||||
import {
|
||||
Notice,
|
||||
ExternalLink,
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
useState,
|
||||
} from '@wordpress/element';
|
||||
import { Alert } from '@woocommerce/icons';
|
||||
import { Icon } from '@wordpress/icons';
|
||||
import { Icon, chevronDown } from '@wordpress/icons';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { createBlock, BlockInstance } from '@wordpress/blocks';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
|
|
@ -54,8 +54,8 @@ export function IncompatibleExtensionsNotice( {
|
|||
const [
|
||||
isVisible,
|
||||
dismissNotice,
|
||||
incompatiblePaymentMethods,
|
||||
numberOfIncompatiblePaymentMethods,
|
||||
incompatibleExtensions,
|
||||
incompatibleExtensionsCount,
|
||||
] = useCombinedIncompatibilityNotice( block );
|
||||
const [ isOpen, setOpen ] = useState( false );
|
||||
const openModal = () => setOpen( true );
|
||||
|
|
@ -95,7 +95,7 @@ export function IncompatibleExtensionsNotice( {
|
|||
|
||||
const noticeContent = (
|
||||
<>
|
||||
{ numberOfIncompatiblePaymentMethods > 1
|
||||
{ incompatibleExtensionsCount > 1
|
||||
? createInterpolateElement(
|
||||
__(
|
||||
'Some active extensions do not yet support this block. This may impact the shopper experience. <a>Learn more</a>',
|
||||
|
|
@ -114,7 +114,7 @@ export function IncompatibleExtensionsNotice( {
|
|||
'<strong>%s</strong> does not yet support this block. This may impact the shopper experience. <a>Learn more</a>',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
Object.values( incompatiblePaymentMethods )[ 0 ]
|
||||
Object.values( incompatibleExtensions )[ 0 ]
|
||||
),
|
||||
{
|
||||
strong: <strong />,
|
||||
|
|
@ -138,6 +138,9 @@ export function IncompatibleExtensionsNotice( {
|
|||
}
|
||||
};
|
||||
|
||||
const entries = Object.entries( incompatibleExtensions );
|
||||
const remainingEntries = entries.length - 2;
|
||||
|
||||
return (
|
||||
<Notice
|
||||
className="wc-blocks-incompatible-extensions-notice"
|
||||
|
|
@ -152,20 +155,49 @@ export function IncompatibleExtensionsNotice( {
|
|||
/>
|
||||
<div>
|
||||
<p>{ noticeContent }</p>
|
||||
{ numberOfIncompatiblePaymentMethods > 1 && (
|
||||
{ incompatibleExtensionsCount > 1 && (
|
||||
<ul>
|
||||
{ Object.entries( incompatiblePaymentMethods ).map(
|
||||
( [ id, title ] ) => (
|
||||
{ entries.slice( 0, 2 ).map( ( [ id, title ] ) => (
|
||||
<li
|
||||
key={ id }
|
||||
className="wc-blocks-incompatible-extensions-notice__element"
|
||||
>
|
||||
{ title }
|
||||
</li>
|
||||
) ) }
|
||||
</ul>
|
||||
) }
|
||||
|
||||
{ entries.length > 2 && (
|
||||
<details>
|
||||
<summary>
|
||||
<span>
|
||||
{ sprintf(
|
||||
// translators: %s is the number of incompatible extensions.
|
||||
_n(
|
||||
'%s more incompatibility',
|
||||
'%s more incompatibilites',
|
||||
remainingEntries,
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
remainingEntries
|
||||
) }
|
||||
</span>
|
||||
<Icon icon={ chevronDown } />
|
||||
</summary>
|
||||
<ul>
|
||||
{ entries.slice( 2 ).map( ( [ id, title ] ) => (
|
||||
<li
|
||||
key={ id }
|
||||
className="wc-blocks-incompatible-extensions-notice__element"
|
||||
>
|
||||
{ title }
|
||||
</li>
|
||||
)
|
||||
) }
|
||||
</ul>
|
||||
) ) }
|
||||
</ul>
|
||||
</details>
|
||||
) }
|
||||
|
||||
<Button
|
||||
variant={ 'secondary' }
|
||||
onClick={ () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue