Skip to content

Commit 4501104

Browse files
meteor-ecmeteor-ec
committed
PLUGINS-6154 returned files for block definition
1 parent 1e70064 commit 4501104

10 files changed

Lines changed: 1578 additions & 0 deletions

File tree

‎js/gutenberg/buynow.jsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
// Import CSS.
2+
import './style.scss';
3+
import './editor.scss';
4+
import {EcwidIcons} from '../icons.js';
5+
6+
7+
if ( !EcwidGutenbergParams.isDemoStore ) {
8+
9+
const { __, _x } = wp.i18n; // Import __() from wp.i18n
10+
11+
const {
12+
BlockControls,
13+
registerBlockType,
14+
} = wp.blocks;
15+
16+
const {
17+
InspectorControls,
18+
} = wp.editor;
19+
20+
const {
21+
PanelBody,
22+
ToggleControl,
23+
} = wp.components;
24+
25+
const { withState } = wp.compose;
26+
27+
const {
28+
Fragment
29+
} = wp.element;
30+
31+
registerBlockType( 'ec-store/buynow', {
32+
title: __( 'Buy Now Button', 'ecwid-shopping-cart' ),
33+
icon: EcwidIcons.button,
34+
category: 'ec-store', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
35+
attributes: {
36+
id: {type: 'integer'},
37+
show_price_on_button: {type: 'boolean', default: true},
38+
center_align: {type: 'boolean', default: true}
39+
},
40+
description: __( 'Display a buy button', 'ecwid-shopping-cart' ),
41+
supports: {
42+
customClassName: false,
43+
className: false,
44+
html: false,
45+
align: true,
46+
alignWide: false,
47+
isPrivate: !EcwidGutenbergParams.isApiAvailable
48+
},
49+
50+
/**
51+
* The edit function describes the structure of your block in the context of the editor.
52+
* This represents what the editor will render when the block is used.
53+
*
54+
* The "edit" property must be a valid function.
55+
*
56+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
57+
*/
58+
edit: function( props ) {
59+
60+
const { attributes } = props;
61+
62+
const saveCallback = function( params ) {
63+
64+
const attributes = {
65+
'id': params.newProps.id
66+
};
67+
68+
EcwidGutenbergParams.products[params.newProps.id] = {
69+
name: params.newProps.product.name,
70+
imageUrl: params.newProps.product.thumb
71+
};
72+
73+
params.originalProps.setAttributes(attributes);
74+
};
75+
76+
const editor = <div className="ec-store-block ec-store-block-buynow">
77+
{ !attributes.id &&
78+
<div>
79+
<div className="image">
80+
</div>
81+
82+
<div className="button-container">
83+
<button className="button ec-store-block-button" onClick={ () => { var params = {'saveCallback':saveCallback, 'props': props}; ecwid_open_product_popup( params ); } }>{ EcwidGutenbergParams.chooseProduct }</button>
84+
</div>
85+
</div>
86+
}
87+
88+
{ attributes.id &&
89+
<div className="image">
90+
</div>
91+
}
92+
</div>;
93+
94+
function buildToggle(props, name, label) {
95+
return <ToggleControl
96+
label={ label }
97+
checked={ props.attributes[name] }
98+
onChange={ () => props.setAttributes( { [name]: ! props.attributes[name] } ) }
99+
/>
100+
}
101+
102+
function openEcwidProductPopup( props ) {
103+
ecwid_open_product_popup( { 'saveCallback': saveCallback, 'props': props } );
104+
}
105+
106+
return ([
107+
editor,
108+
<InspectorControls>
109+
{attributes.id &&
110+
<div>
111+
<div className="ec-store-inspector-row">
112+
<label className="ec-store-inspector-subheader">{ __( 'Linked product', 'ecwid-shopping-cart' ) }</label>
113+
</div>
114+
115+
<div className="ec-store-inspector-row">
116+
117+
{ EcwidGutenbergParams.products && EcwidGutenbergParams.products[attributes.id] &&
118+
<label>{ EcwidGutenbergParams.products[attributes.id].name }</label>
119+
}
120+
121+
<button className="button" onClick={ () => openEcwidProductPopup( props ) }>{ __( 'Change', 'ecwid-shopping-cart' ) }</button>
122+
</div>
123+
</div>
124+
}
125+
{!attributes.id &&
126+
<div className="ec-store-inspector-row">
127+
<button className="button" onClick={ () => openEcwidProductPopup( props ) }>{ __( 'Choose product', 'ecwid-shopping-cart' ) }</button>
128+
</div>
129+
}
130+
131+
<br />
132+
<PanelBody title={ __( 'Appearance', 'ecwid-shopping-cart' ) } initialOpen={false}>
133+
{ buildToggle( props, 'show_price_on_button', __( 'Show price inside the «Buy now» button', 'ecwid-shopping-cart' ) ) }
134+
{ buildToggle( props, 'center_align', __( 'Center align on a page', 'ecwid-shopping-cart' ) ) }
135+
</PanelBody>
136+
</InspectorControls>
137+
]);
138+
},
139+
140+
save: function( props ) {
141+
return false;
142+
},
143+
144+
} );
145+
146+
}

‎js/gutenberg/cart-page.jsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/**
2+
* BLOCK: my-block
3+
*
4+
* Registering a basic block with Gutenberg.
5+
* Simple block, renders and saves the same content without any interactivity.
6+
*/
7+
8+
// Import CSS.
9+
import './style.scss';
10+
import './editor.scss';
11+
import {EcwidIcons} from '../icons.js';
12+
import { EcwidControls, EcwidProductBrowserBlock, EcwidImage } from '../includes/controls.js';
13+
14+
const { __, _x } = wp.i18n;
15+
16+
const {
17+
registerBlockType,
18+
} = wp.blocks;
19+
20+
const {
21+
InspectorControls,
22+
} = wp.editor;
23+
24+
const {
25+
PanelBody,
26+
PanelRow,
27+
ToggleControl,
28+
ButtonGroup,
29+
Button,
30+
BaseControl,
31+
Toolbar,
32+
ColorPalette,
33+
ColorIndicator
34+
} = wp.components;
35+
36+
const { withState } = wp.compose;
37+
38+
const blockName = 'ec-store/cart-page';
39+
40+
const blockParams = EcwidGutenbergParams.blockParams[blockName];
41+
/**
42+
* Register: aa Gutenberg Block.
43+
*
44+
* Registers a new block provided a unique name and an object defining its
45+
* behavior. Once registered, the block is made editor as an option to any
46+
* editor interface where blocks are implemented.
47+
*
48+
* @link https://wordpress.org/gutenberg/handbook/block-api/
49+
* @param {string} name Block name.
50+
* @param {Object} settings Block settings.
51+
* @return {?WPBlock} The block, if it has been successfully
52+
* registered; otherwise `undefined`.
53+
*/
54+
registerBlockType( 'ec-store/cart-page', {
55+
title: __( 'Cart and Checkout', 'ecwid-shopping-cart' ), // Block title.
56+
icon: EcwidIcons.cartPage,
57+
category: 'ec-store', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
58+
attributes: blockParams.attributes,
59+
description: __( 'Display shopping cart and checkout page', 'ecwid-shopping-cart' ),
60+
supports: {
61+
customClassName: false,
62+
className: false,
63+
html: false,
64+
multiple: false
65+
},
66+
67+
/**
68+
* The edit function describes the structure of your block in the context of the editor.
69+
* This represents what the editor will render when the block is used.
70+
*
71+
* The "edit" property must be a valid function.
72+
*
73+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
74+
*/
75+
edit: function( props ) {
76+
77+
const { attributes } = props;
78+
79+
80+
const editor =
81+
<EcwidProductBrowserBlock icon={ EcwidIcons.cartPage } title={ __( 'Cart and Checkout', 'ecwid-shopping-cart' ) }>
82+
<EcwidImage src="cart-page-preview.png" />
83+
</EcwidProductBrowserBlock>;
84+
85+
function buildDangerousHTMLMessageWithTitle( title, message ) {
86+
return <BaseControl label={ title }><div dangerouslySetInnerHTML={{ __html: message }} /></BaseControl>;
87+
}
88+
89+
return ([
90+
editor
91+
]);
92+
},
93+
94+
save: function( props ) {
95+
return null;
96+
}
97+
} );

‎js/gutenberg/categories.jsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Import CSS.
2+
import './style.scss';
3+
import './editor.scss';
4+
import {EcwidIcons} from '../icons.js';
5+
6+
if ( !EcwidGutenbergParams.isDemoStore ) {
7+
8+
const {
9+
InspectorControls
10+
} = wp.editor;
11+
12+
const { __, _x } = wp.i18n; // Import __() from wp.i18n
13+
14+
const {
15+
registerBlockType,
16+
} = wp.blocks;
17+
18+
const blockName = 'ec-store/categories';
19+
20+
const blockParams = EcwidGutenbergParams.blockParams[blockName];
21+
22+
/**
23+
* Register: aa Gutenberg Block.
24+
*
25+
* Registers a new block provided a unique name and an object defining its
26+
* behavior. Once registered, the block is made editor as an option to any
27+
* editor interface where blocks are implemented.
28+
*
29+
* @link https://wordpress.org/gutenberg/handbook/block-api/
30+
* @param {string} name Block name.
31+
* @param {Object} settings Block settings.
32+
* @return {?WPBlock} The block, if it has been successfully
33+
* registered; otherwise `undefined`.
34+
*/
35+
registerBlockType( 'ec-store/categories', {
36+
title: __( 'Store Categories Menu', 'ecwid-shopping-cart' ),
37+
icon: EcwidIcons.categories,
38+
category: 'ec-store', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
39+
description: __( 'Display categories navigation bar', 'ecwid-shopping-cart' ),
40+
supports: {
41+
customClassName: false,
42+
className: false,
43+
html: false,
44+
isPrivate: !EcwidGutenbergParams.isApiAvailable
45+
},
46+
47+
/**
48+
* The edit function describes the structure of your block in the context of the editor.
49+
* This represents what the editor will render when the block is used.
50+
*
51+
* The "edit" property must be a valid function.
52+
*
53+
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
54+
*/
55+
edit: function( props ) {
56+
57+
const { attributes } = props;
58+
59+
const editor = <div className="ec-store-block ec-store-block-categories">
60+
<div className="ec-store-block-header">
61+
{ EcwidIcons.categories }
62+
{ __( 'Categories', 'ecwid-shopping-cart' ) }
63+
</div>
64+
</div>;
65+
66+
const message = __( 'The block is hidden because you don\'t have categories in your store. <a target="_blank" href="admin.php?page=ec-store-admin-category-id-0-mode-edit">Add categories.</a>', 'ecwid-shopping-cart' );
67+
68+
return ([
69+
editor,
70+
<InspectorControls>
71+
<div style={{ height: '10px' }}></div>
72+
73+
{ !blockParams.has_categories &&
74+
<div dangerouslySetInnerHTML={{__html: message}}/>
75+
}
76+
</InspectorControls>
77+
]);
78+
},
79+
80+
save: function( props ) {
81+
return false;
82+
},
83+
84+
} );
85+
86+
}

0 commit comments

Comments
 (0)