Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
gigitux committed Jan 14, 2022
1 parent 24d6c03 commit 8386b5c
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 6 deletions.
21 changes: 19 additions & 2 deletions assets/js/atomic/blocks/product-elements/sale-badge/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
* Internal dependencies
*/
import './style.scss';
import {
useBorderProps,
useColorProps,
useSpacingProps,
} from '../../../../hooks/style-attributes';

/**
* Product Sale Badge Block Component.
Expand All @@ -24,9 +29,14 @@ import './style.scss';
* @param {string} [props.align] Alignment of the badge.
* @return {*} The component.
*/
const Block = ( { className, align } ) => {
const Block = ( props ) => {
const { className, align } = props;

const { parentClassName } = useInnerBlockLayoutContext();
const { product } = useProductDataContext();
const borderProps = useBorderProps( props );
const colorProps = useColorProps( props );
const spacingProps = useSpacingProps( props );

if ( ! product.id || ! product.on_sale ) {
return null;
Expand All @@ -45,8 +55,15 @@ const Block = ( { className, align } ) => {
alignClass,
{
[ `${ parentClassName }__product-onsale` ]: parentClassName,
}
},
borderProps.className,
colorProps.className
) }
style={ {
...borderProps.style,
...colorProps.style,
...spacingProps.style,
} }
>
<Label
label={ __( 'Sale', 'woo-gutenberg-products-block' ) }
Expand Down
9 changes: 8 additions & 1 deletion assets/js/atomic/blocks/product-elements/sale-badge/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,23 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import Block from './block';
import withProductSelector from '../shared/with-product-selector';
import { BLOCK_TITLE, BLOCK_ICON } from './constants';
import './editor.scss';

const Edit = ( { attributes } ) => {
return <Block { ...attributes } />;
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<Block { ...attributes } />
</div>
);
};

export default withProductSelector( {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.wp-block-woocommerce-product-sale-badge {
border-style: none !important;
// background-color: transparent !important;
}
22 changes: 22 additions & 0 deletions assets/js/atomic/blocks/product-elements/sale-badge/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,38 @@ import {
BLOCK_ICON as icon,
BLOCK_DESCRIPTION as description,
} from './constants';
import { Save } from './save';

const blockConfig = {
apiVersion: 2,
title,
description,
icon: { src: icon },
supports: {
html: false,
color: {
gradients: true,
background: true,
link: true,
},
typography: {
fontSize: true,
lineHeight: true,
},
__experimentalBorder: {
color: true,
radius: true,
width: true,
},
spacing: {
padding: true,
__experimentalSkipSerialization: true,
},
__experimentalSelector: '.wc-block-components-product-sale-badge',
},
attributes,
edit,
save: Save,
};

registerBlockType( 'woocommerce/product-sale-badge', {
Expand Down
21 changes: 21 additions & 0 deletions assets/js/atomic/blocks/product-elements/sale-badge/save.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import classnames from 'classnames';

type Props = {
attributes: Record< string, unknown > & {
className?: string;
};
};

export const Save = ( { attributes }: Props ): JSX.Element => {
return (
<div
{ ...useBlockProps.save( {
className: classnames( 'is-loading', attributes.className ),
} ) }
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
padding: em($gap-smallest) em($gap-small);
display: inline-block;
width: auto;
border-style: solid;
border: 1px solid #43454b;
border-radius: 3px;
color: #43454b;
background: #fff;
border-radius: inherit;
color: inherit;
background: inherit;
text-align: center;
text-transform: uppercase;
font-weight: 600;
Expand Down

0 comments on commit 8386b5c

Please sign in to comment.