initial commit

This commit is contained in:
2021-12-10 12:03:04 +00:00
commit c46c7ddbf0
3643 changed files with 582794 additions and 0 deletions

View File

@ -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 />
);

View File

@ -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;

View File

@ -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%;
}

View File

@ -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>
);
};

View File

@ -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;

View File

@ -0,0 +1,4 @@
export * from './attributes';
export * from './form-step-block';
export * from './form-step-heading';
export * from './additional-fields';