initial commit
This commit is contained in:
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import { useForcedLayout } from '../use-forced-layout';
|
||||
import { getAllowedBlocks } from '../editor-utils';
|
||||
|
||||
export const AdditionalFields = ( {
|
||||
block,
|
||||
}: {
|
||||
// Name of the parent block.
|
||||
block: string;
|
||||
} ): JSX.Element => {
|
||||
const { 'data-block': clientId } = useBlockProps();
|
||||
const allowedBlocks = getAllowedBlocks( block );
|
||||
|
||||
useForcedLayout( {
|
||||
clientId,
|
||||
template: allowedBlocks,
|
||||
} );
|
||||
|
||||
return (
|
||||
<div className="wc-block-checkout__additional_fields">
|
||||
<InnerBlocks allowedBlocks={ allowedBlocks } />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AdditionalFieldsContent = (): JSX.Element => (
|
||||
<InnerBlocks.Content />
|
||||
);
|
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const attributes = ( {
|
||||
defaultTitle = __( 'Step', 'woo-gutenberg-products-block' ),
|
||||
defaultDescription = __(
|
||||
'Step description text.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
defaultShowStepNumber = true,
|
||||
}: {
|
||||
defaultTitle: string;
|
||||
defaultDescription: string;
|
||||
defaultShowStepNumber?: boolean;
|
||||
} ): Record< string, Record< string, unknown > > => ( {
|
||||
title: {
|
||||
type: 'string',
|
||||
default: defaultTitle,
|
||||
},
|
||||
description: {
|
||||
type: 'string',
|
||||
default: defaultDescription,
|
||||
},
|
||||
showStepNumber: {
|
||||
type: 'boolean',
|
||||
default: defaultShowStepNumber,
|
||||
},
|
||||
} );
|
||||
|
||||
export default attributes;
|
@ -0,0 +1,12 @@
|
||||
|
||||
.wc-block-checkout__additional_fields {
|
||||
margin: 1.5em 0 -1.5em;
|
||||
}
|
||||
.wc-block-components-checkout-step__description-placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.wc-block-components-checkout-step__title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
@ -0,0 +1,96 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
PlainText,
|
||||
InspectorControls,
|
||||
useBlockProps,
|
||||
} from '@wordpress/block-editor';
|
||||
import { PanelBody, ToggleControl } from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import FormStepHeading from './form-step-heading';
|
||||
export interface FormStepBlockProps {
|
||||
attributes: { title: string; description: string; showStepNumber: boolean };
|
||||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
lock?: { move: boolean; remove: boolean };
|
||||
}
|
||||
|
||||
/**
|
||||
* Form Step Block for use in the editor.
|
||||
*/
|
||||
export const FormStepBlock = ( {
|
||||
attributes,
|
||||
setAttributes,
|
||||
className = '',
|
||||
children,
|
||||
}: FormStepBlockProps ): JSX.Element => {
|
||||
const { title = '', description = '', showStepNumber = true } = attributes;
|
||||
const blockProps = useBlockProps( {
|
||||
className: classnames( 'wc-block-components-checkout-step', className, {
|
||||
'wc-block-components-checkout-step--with-step-number': showStepNumber,
|
||||
} ),
|
||||
} );
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __(
|
||||
'Form Step Options',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
>
|
||||
<ToggleControl
|
||||
label={ __(
|
||||
'Show step number',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
checked={ showStepNumber }
|
||||
onChange={ () =>
|
||||
setAttributes( {
|
||||
showStepNumber: ! showStepNumber,
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<FormStepHeading>
|
||||
<PlainText
|
||||
className={ '' }
|
||||
value={ title }
|
||||
onChange={ ( value ) => setAttributes( { title: value } ) }
|
||||
/>
|
||||
</FormStepHeading>
|
||||
<div className="wc-block-components-checkout-step__container">
|
||||
<p className="wc-block-components-checkout-step__description">
|
||||
<PlainText
|
||||
className={
|
||||
! description
|
||||
? 'wc-block-components-checkout-step__description-placeholder'
|
||||
: ''
|
||||
}
|
||||
value={ description }
|
||||
placeholder={ __(
|
||||
'Optional text for this form step.',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( {
|
||||
description: value,
|
||||
} )
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<div className="wc-block-components-checkout-step__content">
|
||||
{ children }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import Title from '@woocommerce/base-components/title';
|
||||
|
||||
/**
|
||||
* Step Heading Component
|
||||
*/
|
||||
const FormStepHeading = ( {
|
||||
children,
|
||||
stepHeadingContent,
|
||||
}: {
|
||||
children: JSX.Element;
|
||||
stepHeadingContent?: JSX.Element;
|
||||
} ): JSX.Element => (
|
||||
<div className="wc-block-components-checkout-step__heading">
|
||||
<Title
|
||||
aria-hidden="true"
|
||||
className="wc-block-components-checkout-step__title"
|
||||
headingLevel="2"
|
||||
>
|
||||
{ children }
|
||||
</Title>
|
||||
{ !! stepHeadingContent && (
|
||||
<span className="wc-block-components-checkout-step__heading-content">
|
||||
{ stepHeadingContent }
|
||||
</span>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
|
||||
export default FormStepHeading;
|
@ -0,0 +1,4 @@
|
||||
export * from './attributes';
|
||||
export * from './form-step-block';
|
||||
export * from './form-step-heading';
|
||||
export * from './additional-fields';
|
Reference in New Issue
Block a user