Skip to content

Donations: Avoid using buttons elements in block output #16743

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

Merged
mmtr merged 6 commits into from
Aug 10, 2020
Merged

Donations: Avoid using buttons elements in block output #16743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
323a2ab
Donations: Avoid using buttons elements in block output
mmtr Aug 6, 2020
ee65155
Fix placeholder color
mmtr Aug 6, 2020
44756a8
Use a div element for the custom amount input
mmtr Aug 6, 2020
d140ebd
Rename placeholder data attribute to empty-text
mmtr Aug 10, 2020
25f61ed
Remove contenteditable attribute from saved content
mmtr Aug 10, 2020
4ef0c99
Remove data-interval attribute from amounts
mmtr Aug 10, 2020
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
58 changes: 28 additions & 30 deletions extensions/blocks/donations/amount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,36 +110,34 @@ const Amount = ( {
}, [ currency, isFocused, isInvalid, setAmount, value ] );

return (
<div className={ classnames( 'wp-block-button', 'donations__amount', className ) }>
<div
className={ classnames( 'wp-block-button__link', {
'has-focus': isFocused,
'has-error': isInvalid,
} ) }
onClick={ setFocus }
onKeyDown={ setFocus }
role="button"
tabIndex={ 0 }
>
{ CURRENCIES[ currency ].symbol }
{ ! disabled ? (
<RichText
allowedFormats={ [] }
aria-label={ label }
keepPlaceholderOnFocus={ true }
multiline={ false }
onChange={ amount => setAmount( amount ) }
placeholder={ formatCurrency( defaultValue, currency, { symbol: '' } ) }
ref={ richTextRef }
value={ editedValue }
withoutInteractiveFormatting
/>
) : (
<span className="donations__amount-value">
{ formatCurrency( value ? value : defaultValue, currency, { symbol: '' } ) }
</span>
) }
</div>
<div
className={ classnames( 'donations__amount', 'wp-block-button__link', className, {
'has-focus': isFocused,
'has-error': isInvalid,
} ) }
role="button"
tabIndex={ 0 }
onClick={ setFocus }
onKeyDown={ setFocus }
>
{ CURRENCIES[ currency ].symbol }
{ disabled ? (
<div className="donations__amount-value">
{ formatCurrency( value ? value : defaultValue, currency, { symbol: '' } ) }
</div>
) : (
<RichText
allowedFormats={ [] }
aria-label={ label }
keepPlaceholderOnFocus={ true }
multiline={ false }
onChange={ amount => setAmount( amount ) }
placeholder={ formatCurrency( defaultValue, currency, { symbol: '' } ) }
ref={ richTextRef }
value={ editedValue }
withoutInteractiveFormatting
/>
) }
</div>
);
};
Expand Down
47 changes: 19 additions & 28 deletions extensions/blocks/donations/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,30 @@
flex-grow: 1;
text-align: center;
font-size: 16px;
padding: 16px;
height: auto;
border-radius: 0;
padding: 16px 24px;
border: none;
border-left: 1px solid $light-gray-700;
background-color: $white;
background: $white;
color: $dark-gray-800;
box-shadow: none;
cursor: pointer;
border-radius: 0;
text-transform: none;
text-decoration: none;
outline: none;

&:focus,
&:active {
border-radius: 0;
}

&:first-child {
border-left: none;
}

// Complex selector needed to override specificity.
&:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
background-color: $light-gray-100;
box-shadow: none;
&:hover {
background: $light-gray-100;
color: $dark-gray-800;
}

// Complex selector needed to override specificity.
&.is-active,
&.is-active:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
background-color: $blue-wordpress-700;
box-shadow: none;
&.is-active {
background: $blue-wordpress-700;
color: $white;
cursor: default;
}
}

Expand All @@ -58,21 +50,18 @@
.donations__amounts {
margin-top: 30px;
margin-bottom: 30px;
display: flex;
}

.donations__amount {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}

.donations__amount .wp-block-button__link {
padding: 16px 24px;
background-color: $white;
color: $dark-gray-800;
border: 1px solid $light-gray-700;
cursor: text;
text-decoration: none;
text-transform: none;
margin-right: 8px;
font-weight: 600;
font-size: 16px;

&.has-focus {
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-wordpress-700;
Expand All @@ -87,7 +76,9 @@
}
}

.donations__custom-amount .donations__amount-value {
.donations__custom-amount .donations__amount-value {
display: inline-block;
text-align: left;
margin-left: 4px;
min-width: 60px;
}
Expand Down
15 changes: 10 additions & 5 deletions extensions/blocks/donations/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
@import './common';

.wp-block-jetpack-donations {
.donations__amount {
cursor: text;
}

.donations__custom-amount {
cursor: default;
}

.donations__amount .block-editor-rich-text__editable {
display: inline-block;
text-align: left;
Expand All @@ -13,12 +21,9 @@
}
}

.donations__amount.wp-block-button:not(.has-text-color):not(.is-style-outline) [data-rich-text-placeholder]:after {
.donations__amount [data-rich-text-placeholder]:after {
color: $light-gray-700;
}

.donations__custom-amount .wp-block-button__link {
cursor: default;
opacity: 1;
}

.donations__custom-amount .donations__amount-value {
Expand Down
88 changes: 31 additions & 57 deletions extensions/blocks/donations/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import formatCurrency, { CURRENCIES } from '@automattic/format-currency';
* WordPress dependencies
*/
import { RichText } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -42,13 +41,15 @@ const Save = ( { attributes } ) => {
{ Object.keys( tabs ).length > 1 && (
<div className="donations__nav">
{ Object.entries( tabs ).map( ( [ interval, { title } ] ) => (
<Button
className="donations__nav-item"
<div
role="button"
tabIndex={ 0 }
className="donations__nav-item wp-block-button__link"
key={ `jetpack-donations-nav-item-${ interval } ` }
data-interval={ interval }
>
{ title }
</Button>
</div>
) ) }
</div>
) }
Expand All @@ -74,75 +75,45 @@ const Save = ( { attributes } ) => {
/>
) }
<RichText.Content tagName="p" value={ chooseAmountText } />
<div className="wp-block-buttons donations__amounts donations__one-time-item">
<div className="donations__amounts donations__one-time-item">
{ oneTimeDonation.amounts.map( amount => (
<div
className="wp-block-button donations__amount"
data-interval="one-time"
data-amount={ amount }
>
<div className="wp-block-button__link">
{ CURRENCIES[ currency ].symbol }
<span className="donations__amount-value">
{ formatCurrency( amount, currency, { symbol: '' } ) }
</span>
</div>
<div className="donations__amount wp-block-button__link" data-amount={ amount }>
{ formatCurrency( amount, currency ) }
</div>
) ) }
</div>
{ monthlyDonation.show && (
<div className="wp-block-buttons donations__amounts donations__monthly-item">
<div className="donations__amounts donations__monthly-item">
{ monthlyDonation.amounts.map( amount => (
<div
className="wp-block-button donations__amount"
data-interval="1 month"
data-amount={ amount }
>
<div className="wp-block-button__link">
{ CURRENCIES[ currency ].symbol }
<span className="donations__amount-value">
{ formatCurrency( amount, currency, { symbol: '' } ) }
</span>
</div>
<div className="donations__amount wp-block-button__link" data-amount={ amount }>
{ formatCurrency( amount, currency ) }
</div>
) ) }
</div>
) }
{ annualDonation.show && (
<div className="wp-block-buttons donations__amounts donations__annual-item">
<div className="donations__amounts donations__annual-item">
{ annualDonation.amounts.map( amount => (
<div
className="wp-block-button donations__amount"
data-interval="1 year"
data-amount={ amount }
>
<div className="wp-block-button__link">
{ CURRENCIES[ currency ].symbol }
<span className="donations__amount-value">
{ formatCurrency( amount, currency, { symbol: '' } ) }
</span>
</div>
<div className="donations__amount wp-block-button__link" data-amount={ amount }>
{ formatCurrency( amount, currency ) }
</div>
) ) }
</div>
) }
{ showCustomAmount && (
<>
<RichText.Content tagName="p" value={ customAmountText } />
<div className="wp-block-button donations__amount donations__custom-amount">
<div className="wp-block-button__link">
{ CURRENCIES[ currency ].symbol }
<span
className="donations__amount-value"
contentEditable
data-currency={ currency }
data-placeholder={ formatCurrency(
minimumTransactionAmountForCurrency( currency ) * 100,
currency,
{ symbol: '' }
) }
/>
</div>
<div className="donations__amount donations__custom-amount wp-block-button__link">
{ CURRENCIES[ currency ].symbol }
<div
className="donations__amount-value"
data-currency={ currency }
data-empty-text={ formatCurrency(
minimumTransactionAmountForCurrency( currency ) * 100,
currency,
{ symbol: '' }
) }
/>
</div>
</>
) }
Expand All @@ -168,15 +139,17 @@ const Save = ( { attributes } ) => {
) }
<div className="wp-block-button donations__donate-button donations__one-time-item">
<RichText.Content
tagName="button"
tagName="div"
role="button"
className="wp-block-button__link"
value={ oneTimeDonation.buttonText }
/>
</div>
{ monthlyDonation.show && (
<div className="wp-block-button donations__donate-button donations__monthly-item">
<RichText.Content
tagName="button"
tagName="div"
role="button"
className="wp-block-button__link"
value={ monthlyDonation.buttonText }
/>
Expand All @@ -185,7 +158,8 @@ const Save = ( { attributes } ) => {
{ annualDonation.show && (
<div className="wp-block-button donations__donate-button donations__annual-item">
<RichText.Content
tagName="button"
tagName="div"
role="button"
className="wp-block-button__link"
value={ annualDonation.buttonText }
/>
Expand Down
2 changes: 1 addition & 1 deletion extensions/blocks/donations/tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const Tab = ( { activeTab, attributes, setAttributes } ) => {
value={ chooseAmountText }
onChange={ value => setAttributes( { chooseAmountText: value } ) }
/>
<div className="wp-block-buttons donations__amounts">
<div className="donations__amounts">
{ amounts.map( ( amount, index ) => (
<Amount
currency={ currency }
Expand Down
10 changes: 6 additions & 4 deletions extensions/blocks/donations/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import classNames from 'classnames';
/**
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
import { useCallback, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

Expand Down Expand Up @@ -82,15 +81,18 @@ const Tabs = props => {
{ Object.keys( tabs ).length > 1 && (
<div className="donations__nav">
{ Object.entries( tabs ).map( ( [ interval, { title } ] ) => (
<Button
className={ classNames( 'donations__nav-item', {
<div
role="button"
tabIndex={ 0 }
className={ classNames( 'donations__nav-item', 'wp-block-button__link', {
'is-active': isTabActive( interval ),
} ) }
onClick={ () => setActiveTab( interval ) }
onKeyDown={ () => setActiveTab( interval ) }
key={ `jetpack-donations-nav-item-${ interval } ` }
>
{ title }
</Button>
</div>
) ) }
</div>
) }
Expand Down
Loading