Apply spacing improvements to the Checkout block (#47565)
This commit is contained in:
Thomas Roberts
GitHub
parent
d4a4590ed6
commit
bb92392d9f
|
|
@ -1,4 +1,5 @@
|
|||
.wc-block-checkout__actions {
|
||||
|
||||
&_row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -37,7 +38,6 @@
|
|||
|
||||
.is-large {
|
||||
.wc-block-checkout__actions {
|
||||
border-top: 1px solid $universal-border-light;
|
||||
padding: $gap-larger 0;
|
||||
padding: 0 0 $gap-largest 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { ORDER_FORM_KEYS } from '@woocommerce/block-settings';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block';
|
||||
import './editor.scss';
|
||||
|
||||
export const Edit = ( {
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
// Adjust padding and margins in the editor to improve selected block outlines.
|
||||
.wp-block-woocommerce-checkout-order-note-block {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
.wc-block-checkout__add-note {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,6 @@ import { registerBlockType } from '@wordpress/blocks';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { Edit, Save } from './edit';
|
||||
import './style.scss';
|
||||
import attributes from './attributes';
|
||||
|
||||
registerBlockType( 'woocommerce/checkout-additional-information-block', {
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
.wc-block-checkout__add-note {
|
||||
margin: $gap-larger 0;
|
||||
}
|
||||
|
||||
.is-mobile,
|
||||
.is-small,
|
||||
.is-medium {
|
||||
.wc-block-checkout__add-note {
|
||||
border-bottom: 1px solid $universal-border-light;
|
||||
margin-bottom: em($gap);
|
||||
margin-top: em($gap);
|
||||
padding: em($gap) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-checkout__add-note .wc-block-components-textarea {
|
||||
border: 1px solid $universal-border-light;
|
||||
margin-top: $gap;
|
||||
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
color: currentColor;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-form
|
||||
.wc-block-checkout__order-notes.wc-block-components-checkout-step {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
// Adjust padding and margins in the editor to improve selected block outlines.
|
||||
.wp-block-woocommerce-checkout-order-note-block {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
margin: $gap-largest 0;
|
||||
padding: 4px 0;
|
||||
|
||||
.wc-block-checkout__order-notes.wc-block-components-checkout-step {
|
||||
.wc-block-components-form & {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-checkout__add-note {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
.wc-block-checkout__add-note {
|
||||
margin: $gap-larger 0;
|
||||
}
|
||||
margin: 0 0 $gap-largest 0;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
.is-mobile,
|
||||
.is-small,
|
||||
.is-medium {
|
||||
.wc-block-checkout__add-note {
|
||||
border-bottom: 1px solid $universal-border-light;
|
||||
margin-bottom: em($gap);
|
||||
margin-top: em($gap);
|
||||
padding: em($gap) 0;
|
||||
.wc-block-components-checkbox {
|
||||
line-height: 1;
|
||||
margin-top: 0;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wc-block-checkout__add-note .wc-block-components-textarea {
|
||||
border: 1px solid $universal-border-light;
|
||||
margin-top: $gap;
|
||||
|
|
@ -28,4 +26,12 @@
|
|||
.wc-block-components-form
|
||||
.wc-block-checkout__order-notes.wc-block-components-checkout-step {
|
||||
padding-left: 0;
|
||||
margin-bottom: $gap-largest;
|
||||
|
||||
.is-medium &,
|
||||
.is-small &,
|
||||
.is-mobile & {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
.wc-block-components-shipping-rates-control__no-results-notice .components-notice__content {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
|
||||
.wc-block-components-shipping-rates-control label.wc-block-components-radio-control__option {
|
||||
.is-small & {
|
||||
padding: 0.875em 0.875em 0.875em em($gap-huge);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@
|
|||
"text": {
|
||||
"type": "string",
|
||||
"required": false
|
||||
},
|
||||
"showSeparator": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
}
|
||||
},
|
||||
"parent": [ "woocommerce/checkout-fields-block" ],
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
} from '@wordpress/components';
|
||||
import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
|
||||
import { ADMIN_URL } from '@woocommerce/settings';
|
||||
import clsx from 'clsx';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -24,10 +25,10 @@ import './editor.scss';
|
|||
import { termsConsentDefaultText, termsCheckboxDefaultText } from './constants';
|
||||
|
||||
export const Edit = ( {
|
||||
attributes: { checkbox, text },
|
||||
attributes: { checkbox, text, showSeparator },
|
||||
setAttributes,
|
||||
}: {
|
||||
attributes: { text: string; checkbox: boolean };
|
||||
attributes: { text: string; checkbox: boolean; showSeparator: boolean };
|
||||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
} ): JSX.Element => {
|
||||
const blockProps = useBlockProps();
|
||||
|
|
@ -126,9 +127,22 @@ export const Edit = ( {
|
|||
} )
|
||||
}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={ __( 'Show separator', 'woocommerce' ) }
|
||||
checked={ showSeparator }
|
||||
onChange={ () =>
|
||||
setAttributes( {
|
||||
showSeparator: ! showSeparator,
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div className="wc-block-checkout__terms">
|
||||
<div
|
||||
className={ clsx( 'wc-block-checkout__terms', {
|
||||
'wc-block-checkout__terms--with-separator': showSeparator,
|
||||
} ) }
|
||||
>
|
||||
{ checkbox ? (
|
||||
<>
|
||||
<CheckboxControl
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
.edit-post-visual-editor {
|
||||
|
||||
.is-small,
|
||||
.is-medium {
|
||||
.wc-block-checkout__terms {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust padding and margins in the editor to improve selected block outlines.
|
||||
.wc-block-checkout__terms {
|
||||
margin: $gap-larger 0;
|
||||
margin: 0 0 $gap-largest 0;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -20,9 +20,11 @@ const FrontendBlock = ( {
|
|||
checkbox,
|
||||
instanceId,
|
||||
className,
|
||||
showSeparator,
|
||||
}: {
|
||||
text: string;
|
||||
checkbox: boolean;
|
||||
showSeparator: string | boolean;
|
||||
instanceId: string;
|
||||
className?: string;
|
||||
} ): JSX.Element => {
|
||||
|
|
@ -76,6 +78,8 @@ const FrontendBlock = ( {
|
|||
'wc-block-checkout__terms',
|
||||
{
|
||||
'wc-block-checkout__terms--disabled': isDisabled,
|
||||
'wc-block-checkout__terms--with-separator':
|
||||
showSeparator !== 'false' && showSeparator !== false,
|
||||
},
|
||||
className
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,25 @@
|
|||
.wc-block-checkout__terms {
|
||||
margin: $gap-larger 0;
|
||||
margin: 0 0 $gap-largest;
|
||||
|
||||
.is-mobile &,
|
||||
.is-small & {
|
||||
margin-bottom: $gap-larger;
|
||||
|
||||
&.wc-block-checkout__terms--with-separator {
|
||||
padding-top: $gap-larger;
|
||||
}
|
||||
}
|
||||
|
||||
&.wc-block-checkout__terms--with-separator {
|
||||
padding-top: $gap-largest;
|
||||
border-top: 1px solid $universal-border-light;
|
||||
|
||||
|
||||
.is-mobile &,
|
||||
.is-small & {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
top: -5px;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
.wc-block-components-shipping-rates-control__package {
|
||||
border-bottom: 0;
|
||||
margin: 0 0 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,38 @@
|
|||
.wc-block-components-form .wc-block-components-checkout-step {
|
||||
position: relative;
|
||||
border: none;
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
margin: 0 0 $gap-largest 0;
|
||||
|
||||
.is-mobile &,
|
||||
.is-small & {
|
||||
padding-left: 0;
|
||||
margin-bottom: $gap-larger;
|
||||
|
||||
// The below CSS rules are to show a separator between Checkout steps on mobile.
|
||||
// This media query is required because on themes where the Checkout block is rendered alongside something else,
|
||||
// e.g. Storefront using the "Default Template" (which has a sidebar) the checkout block can get the `.is-small`
|
||||
// class, but the screen itself is larger than 400px.
|
||||
@include breakpoint( "<600px" ) {
|
||||
padding-top: $gap-larger;
|
||||
|
||||
// Remove padding from the first checkout step. First of type is required here as the first-child is the express payment methods block.
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
bottom: -$gap-larger;
|
||||
left: -100vw;
|
||||
width: 200vw;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.11;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,6 +55,10 @@
|
|||
|
||||
.wc-block-components-checkout-step__content > * {
|
||||
margin-bottom: $gap;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -38,7 +67,7 @@
|
|||
margin-top: em($gap-smaller);
|
||||
}
|
||||
.wc-block-components-checkout-step__heading {
|
||||
margin: $gap-larger 0 $gap-smaller;
|
||||
margin: 0 0 $gap-smaller;
|
||||
position: relative;
|
||||
|
||||
.wc-block-components-express-payment-continue-rule + .wc-block-components-checkout-step & {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Add a control to enable a separator on the Checkout block's "Checkout Terms" block. This will enable a separator above the block that can be turned off in case the block is moved.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: enhancement
|
||||
|
||||
Improve spacing between steps in the Checkout block on mobile and desktop
|
||||
Loading…
Reference in New Issue