Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update atomic block structure (https://github.com/woocommerce/woocommerce-blocks/pull/2587) 

* Move components to blocks dir

* Update import

* Create edit.js for each block

* Remove components/fix title

* Update imports

* Pass corect attributes on edit

* Import

* remove lightBlockWrapper
This commit is contained in:
Mike Jolley 2020-05-29 14:49:56 +01:00 committed by GitHub
parent 18480b0d68
commit a5b09b7a43
34 changed files with 296 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js Normal file
View File

@ -0,0 +1,10 @@
/**
* Internal dependencies
*/
import './product/title';
import './product/price';
import './product/image';
import './product/rating';
import './product/button';
import './product/summary';
import './product/sale-badge';

7
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/block-components.js Normal file
View File

@ -0,0 +1,7 @@
export { default as ProductButton } from './button/block';
export { default as ProductImage } from './image/block';
export { default as ProductPrice } from './price/block';
export { default as ProductRating } from './rating/block';
export { default as ProductSaleBadge } from './sale-badge/block';
export { default as ProductSummary } from './summary/block';
export { default as ProductTitle } from './title/block';

0
plugins/woocommerce-blocks/assets/js/atomic/components/product/button/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/block.js
View File

17
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/edit.js Normal file
View File

@ -0,0 +1,17 @@
/**
* External dependencies
*/
import { Disabled } from '@wordpress/components';
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes } ) => {
return (
<Disabled>
<Block { ...attributes } />
</Disabled>
);
};

13
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/index.js
View File

@ -3,14 +3,13 @@
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Disabled } from '@wordpress/components';
import { Icon, cart } from '@woocommerce/icons';
import { ProductButton } from '@woocommerce/atomic-components/product';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import edit from './edit';
const blockConfig = {
title: __( 'Add to Cart Button', 'woo-gutenberg-products-block' ),
@ -22,15 +21,7 @@ const blockConfig = {
src: <Icon srcElement={ cart } />,
foreground: '#96588a',
},
edit( props ) {
const { attributes } = props;
return (
<Disabled>
<ProductButton product={ attributes.product } />
</Disabled>
);
},
edit,
};
registerBlockType( 'woocommerce/product-button', {

25
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js Normal file
View File

@ -0,0 +1,25 @@
/**
* External dependencies
*/
import { previewProducts } from '@woocommerce/resource-previews';
export const blockAttributes = {
product: {
type: 'object',
default: previewProducts[ 0 ],
},
productLink: {
type: 'boolean',
default: true,
},
showSaleBadge: {
type: 'boolean',
default: true,
},
saleBadgeAlign: {
type: 'string',
default: 'right',
},
};
export default blockAttributes;

2
plugins/woocommerce-blocks/assets/js/atomic/components/product/image/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js
View File

@ -10,7 +10,7 @@ import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
/**
* Internal dependencies
*/
import { ProductSaleBadge } from '../../../components/product';
import ProductSaleBadge from '../sale-badge/block';
const SaleBadge = ( { product, saleBadgeAlign, shouldRender } ) => {
return shouldRender ? (

97
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js Normal file
View File

@ -0,0 +1,97 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import ToggleButtonControl from '@woocommerce/block-components/toggle-button-control';
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes, setAttributes } ) => {
const { productLink, showSaleBadge, saleBadgeAlign } = attributes;
return (
<>
<InspectorControls>
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
>
<ToggleControl
label={ __(
'Link to Product Page',
'woo-gutenberg-products-block'
) }
help={ __(
'Links the image to the single product listing.',
'woo-gutenberg-products-block'
) }
checked={ productLink }
onChange={ () =>
setAttributes( {
productLink: ! productLink,
} )
}
/>
<ToggleControl
label={ __(
'Show On-Sale Badge',
'woo-gutenberg-products-block'
) }
help={ __(
'Overlay a "sale" badge if the product is on-sale.',
'woo-gutenberg-products-block'
) }
checked={ showSaleBadge }
onChange={ () =>
setAttributes( {
showSaleBadge: ! showSaleBadge,
} )
}
/>
{ showSaleBadge && (
<ToggleButtonControl
label={ __(
'Sale Badge Alignment',
'woo-gutenberg-products-block'
) }
value={ saleBadgeAlign }
options={ [
{
label: __(
'Left',
'woo-gutenberg-products-block'
),
value: 'left',
},
{
label: __(
'Center',
'woo-gutenberg-products-block'
),
value: 'center',
},
{
label: __(
'Right',
'woo-gutenberg-products-block'
),
value: 'right',
},
] }
onChange={ ( value ) =>
setAttributes( { saleBadgeAlign: value } )
}
/>
) }
</PanelBody>
</InspectorControls>
<Disabled>
<Block { ...attributes } />
</Disabled>
</>
);
};

121
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/index.js
View File

@ -4,17 +4,13 @@
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, image } from '@woocommerce/icons';
import { Fragment } from '@wordpress/element';
import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import ToggleButtonControl from '@woocommerce/block-components/toggle-button-control';
import { ProductImage } from '@woocommerce/atomic-components/product';
import { previewProducts } from '@woocommerce/resource-previews';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import attributes from './attributes';
import edit from './edit';
const blockConfig = {
title: __( 'Product Image', 'woo-gutenberg-products-block' ),
@ -26,117 +22,8 @@ const blockConfig = {
src: <Icon srcElement={ image } />,
foreground: '#96588a',
},
attributes: {
product: {
type: 'object',
default: previewProducts[ 0 ],
},
productLink: {
type: 'boolean',
default: true,
},
showSaleBadge: {
type: 'boolean',
default: true,
},
saleBadgeAlign: {
type: 'string',
default: 'right',
},
},
edit( props ) {
const { attributes, setAttributes } = props;
const { productLink, showSaleBadge, saleBadgeAlign } = attributes;
return (
<Fragment>
<InspectorControls>
<PanelBody
title={ __(
'Content',
'woo-gutenberg-products-block'
) }
>
<ToggleControl
label={ __(
'Link to Product Page',
'woo-gutenberg-products-block'
) }
help={ __(
'Links the image to the single product listing.',
'woo-gutenberg-products-block'
) }
checked={ productLink }
onChange={ () =>
setAttributes( {
productLink: ! productLink,
} )
}
/>
<ToggleControl
label={ __(
'Show On-Sale Badge',
'woo-gutenberg-products-block'
) }
help={ __(
'Overlay a "sale" badge if the product is on-sale.',
'woo-gutenberg-products-block'
) }
checked={ showSaleBadge }
onChange={ () =>
setAttributes( {
showSaleBadge: ! showSaleBadge,
} )
}
/>
{ showSaleBadge && (
<ToggleButtonControl
label={ __(
'Sale Badge Alignment',
'woo-gutenberg-products-block'
) }
value={ saleBadgeAlign }
options={ [
{
label: __(
'Left',
'woo-gutenberg-products-block'
),
value: 'left',
},
{
label: __(
'Center',
'woo-gutenberg-products-block'
),
value: 'center',
},
{
label: __(
'Right',
'woo-gutenberg-products-block'
),
value: 'right',
},
] }
onChange={ ( value ) =>
setAttributes( { saleBadgeAlign: value } )
}
/>
) }
</PanelBody>
</InspectorControls>
<Disabled>
<ProductImage
product={ attributes.product }
productLink={ productLink }
showSaleBadge={ showSaleBadge }
saleBadgeAlign={ saleBadgeAlign }
/>
</Disabled>
</Fragment>
);
},
attributes,
edit,
};
registerBlockType( 'woocommerce/product-image', {

7
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/index.js
View File

@ -1,7 +0,0 @@
export { default as ProductTitle } from './title';
export { default as ProductPrice } from './price';
export { default as ProductImage } from './image';
export { default as ProductRating } from './rating';
export { default as ProductButton } from './button';
export { default as ProductSummary } from './summary';
export { default as ProductSaleBadge } from './sale-badge';

0
plugins/woocommerce-blocks/assets/js/atomic/components/product/price/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/block.js
View File

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/edit.js Normal file
View File

@ -0,0 +1,8 @@
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes } ) => {
return <Block { ...attributes } />;
};

14
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/index.js
View File

@ -4,12 +4,12 @@
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, bill } from '@woocommerce/icons';
import { ProductPrice } from '@woocommerce/atomic-components/product';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import edit from './edit';
const blockConfig = {
title: __( 'Product Price', 'woo-gutenberg-products-block' ),
@ -21,17 +21,7 @@ const blockConfig = {
src: <Icon srcElement={ bill } />,
foreground: '#96588a',
},
/**
* Renders the edit view for a block.
*
* @param {Object} props Props to pass to block.
*/
edit( props ) {
const { attributes } = props;
return <ProductPrice product={ attributes.product } />;
},
edit,
};
registerBlockType( 'woocommerce/product-price', {

0
plugins/woocommerce-blocks/assets/js/atomic/components/product/rating/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/block.js
View File

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/edit.js Normal file
View File

@ -0,0 +1,8 @@
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes } ) => {
return <Block { ...attributes } />;
};

14
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/index.js
View File

@ -4,12 +4,12 @@
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, star } from '@woocommerce/icons';
import { ProductRating } from '@woocommerce/atomic-components/product';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import edit from './edit';
const blockConfig = {
title: __( 'Product Rating', 'woo-gutenberg-products-block' ),
@ -21,17 +21,7 @@ const blockConfig = {
src: <Icon srcElement={ star } />,
foreground: '#96588a',
},
/**
* Renders the edit view for a block.
*
* @param {Object} props Props to pass to block.
*/
edit( props ) {
const { attributes } = props;
return <ProductRating product={ attributes.product } />;
},
edit,
};
registerBlockType( 'woocommerce/product-rating', {

0
plugins/woocommerce-blocks/assets/js/atomic/components/product/sale-badge/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/block.js
View File

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/edit.js Normal file
View File

@ -0,0 +1,8 @@
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes } ) => {
return <Block { ...attributes } />;
};

14
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/index.js
View File

@ -3,13 +3,13 @@
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { ProductSaleBadge } from '@woocommerce/atomic-components/product';
import { Icon, tag } from '@woocommerce/icons';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import edit from './edit';
const blockConfig = {
title: __( 'On-Sale Badge', 'woo-gutenberg-products-block' ),
@ -24,17 +24,7 @@ const blockConfig = {
supports: {
html: false,
},
/**
* Renders the edit view for a block.
*
* @param {Object} props Props to pass to block.
*/
edit( props ) {
const { align, product } = props.attributes;
return <ProductSaleBadge product={ product } align={ align } />;
},
edit,
};
registerBlockType( 'woocommerce/product-sale-badge', {

2
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/shared-config.js
View File

@ -18,7 +18,7 @@ export default {
supports: {
html: false,
},
parent: [ 'woocommerce/all-products' ],
parent: [ 'woocommerce/all-products', 'woocommerce/single-product' ],
attributes: {
product: {
type: 'object',

0
plugins/woocommerce-blocks/assets/js/atomic/components/product/summary/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/block.js
View File

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/edit.js Normal file
View File

@ -0,0 +1,8 @@
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes } ) => {
return <Block { ...attributes } />;
};

14
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/index.js
View File

@ -4,12 +4,12 @@
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, notes } from '@woocommerce/icons';
import { ProductSummary } from '@woocommerce/atomic-components/product';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import edit from './edit';
const blockConfig = {
title: __( 'Product Summary', 'woo-gutenberg-products-block' ),
@ -21,17 +21,7 @@ const blockConfig = {
src: <Icon srcElement={ notes } />,
foreground: '#96588a',
},
/**
* Renders the edit view for a block.
*
* @param {Object} props Props to pass to block.
*/
edit( props ) {
const { attributes } = props;
return <ProductSummary product={ attributes.product } />;
},
edit,
};
registerBlockType( 'woocommerce/product-summary', {

24
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/attributes.js Normal file
View File

@ -0,0 +1,24 @@
/**
* External dependencies
*/
import { previewProducts } from '@woocommerce/resource-previews';
/**
* Internal dependencies
*/
export const blockAttributes = {
product: {
type: 'object',
default: previewProducts[ 0 ],
},
headingLevel: {
type: 'number',
default: 2,
},
productLink: {
type: 'boolean',
default: true,
},
};
export default blockAttributes;

0
plugins/woocommerce-blocks/assets/js/atomic/components/product/title/index.js → plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/block.js
View File

56
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/edit.js Normal file
View File

@ -0,0 +1,56 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
/**
* Internal dependencies
*/
import Block from './block';
export default ( { attributes, setAttributes } ) => {
const { headingLevel, productLink } = attributes;
return (
<>
<InspectorControls>
<PanelBody
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
>
<p>{ __( 'Level', 'woo-gutenberg-products-block' ) }</p>
<HeadingToolbar
isCollapsed={ false }
minLevel={ 2 }
maxLevel={ 7 }
selectedLevel={ headingLevel }
onChange={ ( newLevel ) =>
setAttributes( { headingLevel: newLevel } )
}
/>
<ToggleControl
label={ __(
'Link to Product Page',
'woo-gutenberg-products-block'
) }
help={ __(
'Links the image to the single product listing.',
'woo-gutenberg-products-block'
) }
checked={ productLink }
onChange={ () =>
setAttributes( {
productLink: ! productLink,
} )
}
/>
</PanelBody>
</InspectorControls>
<Disabled>
<Block { ...attributes } />
</Disabled>
</>
);
};

81
plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/index.js
View File

@ -3,17 +3,13 @@
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Fragment } from 'react';
import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import { ProductTitle } from '@woocommerce/atomic-components/product';
import { previewProducts } from '@woocommerce/resource-previews';
import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
/**
* Internal dependencies
*/
import sharedConfig from '../shared-config';
import attributes from './attributes';
import edit from './edit';
const blockConfig = {
title: __( 'Product Title', 'woo-gutenberg-products-block' ),
@ -25,77 +21,8 @@ const blockConfig = {
src: 'heading',
foreground: '#96588a',
},
attributes: {
product: {
type: 'object',
default: previewProducts[ 0 ],
},
headingLevel: {
type: 'number',
default: 2,
},
productLink: {
type: 'boolean',
default: true,
},
},
/**
* Renders the edit view for a block.
*
* @param {Object} props Props to pass to block.
*/
edit( props ) {
const { attributes, setAttributes } = props;
const { headingLevel, productLink } = attributes;
return (
<Fragment>
<InspectorControls>
<PanelBody
title={ __(
'Content',
'woo-gutenberg-products-block'
) }
>
<p>{ __( 'Level', 'woo-gutenberg-products-block' ) }</p>
<HeadingToolbar
isCollapsed={ false }
minLevel={ 2 }
maxLevel={ 7 }
selectedLevel={ headingLevel }
onChange={ ( newLevel ) =>
setAttributes( { headingLevel: newLevel } )
}
/>
<ToggleControl
label={ __(
'Link to Product Page',
'woo-gutenberg-products-block'
) }
help={ __(
'Links the image to the single product listing.',
'woo-gutenberg-products-block'
) }
checked={ productLink }
onChange={ () =>
setAttributes( {
productLink: ! productLink,
} )
}
/>
</PanelBody>
</InspectorControls>
<Disabled>
<ProductTitle
headingLevel={ headingLevel }
productLink={ productLink }
product={ attributes.product }
/>
</Disabled>
</Fragment>
);
},
attributes,
edit,
};
registerBlockType( 'woocommerce/product-title', {

7
plugins/woocommerce-blocks/assets/js/atomic/components/product/index.js
View File

@ -1,7 +0,0 @@
export { default as ProductButton } from './button';
export { default as ProductImage } from './image';
export { default as ProductRating } from './rating';
export { default as ProductTitle } from './title';
export { default as ProductPrice } from './price';
export { default as ProductSummary } from './summary';
export { default as ProductSaleBadge } from './sale-badge';

2
plugins/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js
View File

@ -14,7 +14,7 @@ import {
ProductRating,
ProductSummary,
ProductSaleBadge,
} from '../components/product';
} from '../blocks/product/block-components';
/**
* Map blocks names to components.

2
plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js
View File

@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
import { InnerBlocks } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, grid } from '@woocommerce/icons';
import '@woocommerce/atomic-blocks';
/**
* Internal dependencies
@ -12,7 +13,6 @@ import { Icon, grid } from '@woocommerce/icons';
import Editor from './edit';
import { attributes as sharedAttributes, defaults } from '../attributes';
import { getBlockClassName } from '../utils.js';
import '../../../atomic/blocks/product';
const blockSettings = {
title: __( 'All Products', 'woo-gutenberg-products-block' ),

1
plugins/woocommerce-blocks/assets/js/legacy/README.md
View File

@ -35,7 +35,6 @@ Current aliases are:
- `@woocommerce/base-hocs` -> `assets/js/base/hocs/`
- `@woocommerce/block-components` -> `assets/js/components`
- `@woocommerce/block-hocs` -> `assets/js/block-hocs`
- `@woocommerce/atomic-components` -> `assets/js/atomic/components/`
When importing, if outside the module referenced by that path, import from the alias. That will ensure that at compile time the bundles can pull from the appropriate location.

4
plugins/woocommerce-blocks/bin/webpack-helpers.js
View File

@ -50,9 +50,9 @@ const getAlias = ( options = {} ) => {
let { pathPart } = options;
pathPart = pathPart ? `${ pathPart }/` : '';
return {
'@woocommerce/atomic-components': path.resolve(
'@woocommerce/atomic-blocks': path.resolve(
__dirname,
`../assets/js/${ pathPart }atomic/components/`
`../assets/js/${ pathPart }atomic/blocks`
),
'@woocommerce/atomic-utils': path.resolve(
__dirname,

2
plugins/woocommerce-blocks/tests/js/jest.config.json
View File

@ -8,7 +8,7 @@
],
"moduleDirectories": [ "node_modules" ],
"moduleNameMapper": {
"@woocommerce/atomic-components": "assets/js/atomic/components",
"@woocommerce/atomic-blocks": "assets/js/atomic/blocks",
"@woocommerce/atomic-utils": "assets/js/atomic/utils",
"@woocommerce/icons": "assets/js/icons",
"@woocommerce/settings": "assets/js/settings/shared",

5
plugins/woocommerce-blocks/tsconfig.json
View File

@ -16,8 +16,9 @@
"jsx": "preserve",
"allowSyntheticDefaultImports": true,
"paths": {
"@woocommerce/atomic-components/*": [
"assets/js/base/atomic/components/*"
"@woocommerce/atomic-blocks": [ "assets/js/base/atomic/blocks" ],
"@woocommerce/atomic-blocks/*": [
"assets/js/base/atomic/blocks/*"
],
"@woocommerce/atomic-utils": [ "assets/js/atomic/utils" ],
"@woocommerce/base-components/*": [ "assets/js/base/components/*" ],