From a5b09b7a43bb50fc837eb5414333f7b23e99a763 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Fri, 29 May 2020 14:49:56 +0100 Subject: [PATCH] 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 --- .../assets/js/atomic/blocks/index.js | 10 ++ .../atomic/blocks/product/block-components.js | 7 + .../product/button/block.js} | 0 .../js/atomic/blocks/product/button/edit.js | 17 +++ .../js/atomic/blocks/product/button/index.js | 13 +- .../atomic/blocks/product/image/attributes.js | 25 ++++ .../product/image/block.js} | 2 +- .../js/atomic/blocks/product/image/edit.js | 97 ++++++++++++++ .../js/atomic/blocks/product/image/index.js | 121 +----------------- .../assets/js/atomic/blocks/product/index.js | 7 - .../product/price/block.js} | 0 .../js/atomic/blocks/product/price/edit.js | 8 ++ .../js/atomic/blocks/product/price/index.js | 14 +- .../product/rating/block.js} | 0 .../js/atomic/blocks/product/rating/edit.js | 8 ++ .../js/atomic/blocks/product/rating/index.js | 14 +- .../product/sale-badge/block.js} | 0 .../atomic/blocks/product/sale-badge/edit.js | 8 ++ .../atomic/blocks/product/sale-badge/index.js | 14 +- .../js/atomic/blocks/product/shared-config.js | 2 +- .../product/summary/block.js} | 0 .../js/atomic/blocks/product/summary/edit.js | 8 ++ .../js/atomic/blocks/product/summary/index.js | 14 +- .../atomic/blocks/product/title/attributes.js | 24 ++++ .../product/title/block.js} | 0 .../js/atomic/blocks/product/title/edit.js | 56 ++++++++ .../js/atomic/blocks/product/title/index.js | 81 +----------- .../js/atomic/components/product/index.js | 7 - .../assets/js/atomic/utils/get-block-map.js | 2 +- .../js/blocks/products/all-products/index.js | 2 +- .../assets/js/legacy/README.md | 1 - .../woocommerce-blocks/bin/webpack-helpers.js | 4 +- .../tests/js/jest.config.json | 2 +- plugins/woocommerce-blocks/tsconfig.json | 5 +- 34 files changed, 296 insertions(+), 277 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/block-components.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/button/index.js => blocks/product/button/block.js} (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/edit.js create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/image/index.js => blocks/product/image/block.js} (97%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js delete mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/index.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/price/index.js => blocks/product/price/block.js} (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/edit.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/rating/index.js => blocks/product/rating/block.js} (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/edit.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/sale-badge/index.js => blocks/product/sale-badge/block.js} (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/edit.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/summary/index.js => blocks/product/summary/block.js} (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/edit.js create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/attributes.js rename plugins/woocommerce-blocks/assets/js/atomic/{components/product/title/index.js => blocks/product/title/block.js} (100%) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/edit.js delete mode 100644 plugins/woocommerce-blocks/assets/js/atomic/components/product/index.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js new file mode 100644 index 00000000000..791f97d664a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js @@ -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'; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/block-components.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/block-components.js new file mode 100644 index 00000000000..cb36f455775 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/block-components.js @@ -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'; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/button/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/block.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/button/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/block.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/edit.js new file mode 100644 index 00000000000..b1392ef042e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/edit.js @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { Disabled } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import Block from './block'; + +export default ( { attributes } ) => { + return ( + + + + ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/index.js index 19820b099c2..b49f1f44f2e 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/button/index.js @@ -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: , foreground: '#96588a', }, - edit( props ) { - const { attributes } = props; - - return ( - - - - ); - }, + edit, }; registerBlockType( 'woocommerce/product-button', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js new file mode 100644 index 00000000000..1bf0df76583 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/attributes.js @@ -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; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/image/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js similarity index 97% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/image/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js index 68dfa08e17b..6826a1b8998 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/components/product/image/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/block.js @@ -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 ? ( diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js new file mode 100644 index 00000000000..8a3d0716290 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/edit.js @@ -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 ( + <> + + + + setAttributes( { + productLink: ! productLink, + } ) + } + /> + + setAttributes( { + showSaleBadge: ! showSaleBadge, + } ) + } + /> + { showSaleBadge && ( + + setAttributes( { saleBadgeAlign: value } ) + } + /> + ) } + + + + + + + ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/index.js index a7684497651..73f820bae1b 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/image/index.js @@ -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: , 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 ( - - - - - setAttributes( { - productLink: ! productLink, - } ) - } - /> - - setAttributes( { - showSaleBadge: ! showSaleBadge, - } ) - } - /> - { showSaleBadge && ( - - setAttributes( { saleBadgeAlign: value } ) - } - /> - ) } - - - - - - - ); - }, + attributes, + edit, }; registerBlockType( 'woocommerce/product-image', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/index.js deleted file mode 100644 index 22c2c2e1370..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/index.js +++ /dev/null @@ -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'; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/price/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/block.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/price/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/block.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/edit.js new file mode 100644 index 00000000000..51221c94b92 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/edit.js @@ -0,0 +1,8 @@ +/** + * Internal dependencies + */ +import Block from './block'; + +export default ( { attributes } ) => { + return ; +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/index.js index a530068ae2a..339c64acfcb 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/price/index.js @@ -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: , foreground: '#96588a', }, - - /** - * Renders the edit view for a block. - * - * @param {Object} props Props to pass to block. - */ - edit( props ) { - const { attributes } = props; - - return ; - }, + edit, }; registerBlockType( 'woocommerce/product-price', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/rating/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/block.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/rating/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/block.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/edit.js new file mode 100644 index 00000000000..51221c94b92 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/edit.js @@ -0,0 +1,8 @@ +/** + * Internal dependencies + */ +import Block from './block'; + +export default ( { attributes } ) => { + return ; +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/index.js index 6add615e786..561c2f9eca5 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/rating/index.js @@ -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: , foreground: '#96588a', }, - - /** - * Renders the edit view for a block. - * - * @param {Object} props Props to pass to block. - */ - edit( props ) { - const { attributes } = props; - - return ; - }, + edit, }; registerBlockType( 'woocommerce/product-rating', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/sale-badge/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/block.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/sale-badge/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/block.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/edit.js new file mode 100644 index 00000000000..51221c94b92 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/edit.js @@ -0,0 +1,8 @@ +/** + * Internal dependencies + */ +import Block from './block'; + +export default ( { attributes } ) => { + return ; +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/index.js index 2dcda6f5c95..e4f12071db0 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/sale-badge/index.js @@ -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 ; - }, + edit, }; registerBlockType( 'woocommerce/product-sale-badge', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/shared-config.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/shared-config.js index dd572f7e109..10ae081a977 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/shared-config.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/shared-config.js @@ -18,7 +18,7 @@ export default { supports: { html: false, }, - parent: [ 'woocommerce/all-products' ], + parent: [ 'woocommerce/all-products', 'woocommerce/single-product' ], attributes: { product: { type: 'object', diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/summary/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/block.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/summary/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/block.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/edit.js new file mode 100644 index 00000000000..51221c94b92 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/edit.js @@ -0,0 +1,8 @@ +/** + * Internal dependencies + */ +import Block from './block'; + +export default ( { attributes } ) => { + return ; +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/index.js index 67bf637d4e0..2cb024f2b44 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/summary/index.js @@ -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: , foreground: '#96588a', }, - - /** - * Renders the edit view for a block. - * - * @param {Object} props Props to pass to block. - */ - edit( props ) { - const { attributes } = props; - - return ; - }, + edit, }; registerBlockType( 'woocommerce/product-summary', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/attributes.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/attributes.js new file mode 100644 index 00000000000..cddecf94990 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/attributes.js @@ -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; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/title/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/block.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/atomic/components/product/title/index.js rename to plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/block.js diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/edit.js new file mode 100644 index 00000000000..cccc923a541 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/edit.js @@ -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 ( + <> + + +

{ __( 'Level', 'woo-gutenberg-products-block' ) }

+ + setAttributes( { headingLevel: newLevel } ) + } + /> + + setAttributes( { + productLink: ! productLink, + } ) + } + /> + + + + + + + ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/index.js index 10cc75de4c8..e64d87d5b00 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product/title/index.js @@ -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 ( - - - -

{ __( 'Level', 'woo-gutenberg-products-block' ) }

- - setAttributes( { headingLevel: newLevel } ) - } - /> - - setAttributes( { - productLink: ! productLink, - } ) - } - /> - - - - - - - ); - }, + attributes, + edit, }; registerBlockType( 'woocommerce/product-title', { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/components/product/index.js b/plugins/woocommerce-blocks/assets/js/atomic/components/product/index.js deleted file mode 100644 index d7e5175cd62..00000000000 --- a/plugins/woocommerce-blocks/assets/js/atomic/components/product/index.js +++ /dev/null @@ -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'; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js b/plugins/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js index dae4e42a1eb..f4180e99cde 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js @@ -14,7 +14,7 @@ import { ProductRating, ProductSummary, ProductSaleBadge, -} from '../components/product'; +} from '../blocks/product/block-components'; /** * Map blocks names to components. diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js index c027e28c7ba..317e157d5b8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js @@ -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' ), diff --git a/plugins/woocommerce-blocks/assets/js/legacy/README.md b/plugins/woocommerce-blocks/assets/js/legacy/README.md index 449ad9d3222..e227b62c9ee 100644 --- a/plugins/woocommerce-blocks/assets/js/legacy/README.md +++ b/plugins/woocommerce-blocks/assets/js/legacy/README.md @@ -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. diff --git a/plugins/woocommerce-blocks/bin/webpack-helpers.js b/plugins/woocommerce-blocks/bin/webpack-helpers.js index ead01f23d59..6720aa4e568 100644 --- a/plugins/woocommerce-blocks/bin/webpack-helpers.js +++ b/plugins/woocommerce-blocks/bin/webpack-helpers.js @@ -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, diff --git a/plugins/woocommerce-blocks/tests/js/jest.config.json b/plugins/woocommerce-blocks/tests/js/jest.config.json index 88c0fd0905e..2f478540dd2 100644 --- a/plugins/woocommerce-blocks/tests/js/jest.config.json +++ b/plugins/woocommerce-blocks/tests/js/jest.config.json @@ -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", diff --git a/plugins/woocommerce-blocks/tsconfig.json b/plugins/woocommerce-blocks/tsconfig.json index 09cdbbc26d4..3bf57415ee7 100644 --- a/plugins/woocommerce-blocks/tsconfig.json +++ b/plugins/woocommerce-blocks/tsconfig.json @@ -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/*" ],