Simple Ticker / trunk

Simple Ticker vtrunk

simple-ticker / block / src / edit.js

edit.js in Simple Ticker trunk, at block/src/edit.js

186 lines 6.2 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import ServerSideRender from '@wordpress/server-side-render';
3	import { TextControl, ToggleControl, PanelBody } from '@wordpress/components';
4	import { InspectorControls, PanelColorSettings, useBlockProps } from '@wordpress/block-editor';
5
6	export default function Edit( { attributes, setAttributes } ) {
7	const blockProps = useBlockProps();
8	return (
9	<div { ...blockProps }>
10	<ServerSideRender
11	block = 'simple-ticker/simpleticker-block'
12	attributes = { attributes }
13	/>
14	<TextControl
15	__nextHasNoMarginBottom
16	__next40pxDefaultSize
17	label = { __( 'Ticker1', 'simple-ticker' ) }
18	value = { attributes.ticker1_text }
19	onChange = { ( value ) => setAttributes( { ticker1_text: value } ) }
20	/>
21	<TextControl
22	__nextHasNoMarginBottom
23	__next40pxDefaultSize
24	label = 'URL1'
25	value = { attributes.ticker1_url }
26	onChange = { ( value ) => setAttributes( { ticker1_url: value } ) }
27	/>
28	<TextControl
29	__nextHasNoMarginBottom
30	__next40pxDefaultSize
31	label = { __( 'Ticker2', 'simple-ticker' ) }
32	value = { attributes.ticker2_text }
33	onChange = { ( value ) => setAttributes( { ticker2_text: value } ) }
34	/>
35	<TextControl
36	__nextHasNoMarginBottom
37	__next40pxDefaultSize
38	label = 'URL2'
39	value = { attributes.ticker2_url }
40	onChange = { ( value ) => setAttributes( { ticker2_url: value } ) }
41	/>
42	<TextControl
43	__nextHasNoMarginBottom
44	__next40pxDefaultSize
45	label = { __( 'Ticker3', 'simple-ticker' ) }
46	value = { attributes.ticker3_text }
47	onChange = { ( value ) => setAttributes( { ticker3_text: value } ) }
48	/>
49	<TextControl
50	__nextHasNoMarginBottom
51	__next40pxDefaultSize
52	label = 'URL3'
53	value = { attributes.ticker3_url }
54	onChange = { ( value ) => setAttributes( { ticker3_url: value } ) }
55	/>
56
57	<InspectorControls>
58	<PanelBody title = { __( 'Ticker1', 'simple-ticker' ) } initialOpen = { false }>
59	<TextControl
60	__nextHasNoMarginBottom
61	__next40pxDefaultSize
62	label = { __( 'Ticker1', 'simple-ticker' ) }
63	value = { attributes.ticker1_text }
64	onChange = { ( value ) => setAttributes( { ticker1_text: value } ) }
65	/>
66	<TextControl
67	__nextHasNoMarginBottom
68	__next40pxDefaultSize
69	label = 'URL'
70	value = { attributes.ticker1_url }
71	onChange = { ( value ) => setAttributes( { ticker1_url: value } ) }
72	/>
73	<PanelColorSettings
74	title = { __( 'Color Settings', 'simple-ticker' ) }
75	colorSettings = { [
76	{
77	value: attributes.ticker1_color,
78	onChange: ( colorValue ) => setAttributes( { ticker1_color: colorValue } ),
79	label: __( 'Color', 'simple-ticker' ),
80	}
81	] }
82	>
83	</PanelColorSettings>
84	</PanelBody>
85	<PanelBody title = { __( 'Ticker2', 'simple-ticker' ) } initialOpen = { false }>
86	<TextControl
87	__nextHasNoMarginBottom
88	__next40pxDefaultSize
89	label = { __( 'Ticker2', 'simple-ticker' ) }
90	value = { attributes.ticker2_text }
91	onChange = { ( value ) => setAttributes( { ticker2_text: value } ) }
92	/>
93	<TextControl
94	__nextHasNoMarginBottom
95	__next40pxDefaultSize
96	label = 'URL'
97	value = { attributes.ticker2_url }
98	onChange = { ( value ) => setAttributes( { ticker2_url: value } ) }
99	/>
100	<PanelColorSettings
101	title = { __( 'Color Settings', 'simple-ticker' ) }
102	colorSettings = { [
103	{
104	value: attributes.ticker2_color,
105	onChange: ( colorValue ) => setAttributes( { ticker2_color: colorValue } ),
106	label: __( 'Color', 'simple-ticker' ),
107	}
108	] }
109	>
110	</PanelColorSettings>
111	</PanelBody>
112	<PanelBody title = { __( 'Ticker3', 'simple-ticker' ) } initialOpen = { false }>
113	<TextControl
114	__nextHasNoMarginBottom
115	__next40pxDefaultSize
116	label = { __( 'Ticker3', 'simple-ticker' ) }
117	value = { attributes.ticker3_text }
118	onChange = { ( value ) => setAttributes( { ticker3_text: value } ) }
119	/>
120	<TextControl
121	__nextHasNoMarginBottom
122	__next40pxDefaultSize
123	label = 'URL'
124	value = { attributes.ticker3_url }
125	onChange = { ( value ) => setAttributes( { ticker3_url: value } ) }
126	/>
127	<PanelColorSettings
128	title = { __( 'Color Settings', 'simple-ticker' ) }
129	colorSettings = { [
130	{
131	value: attributes.ticker3_color,
132	onChange: ( colorValue ) => setAttributes( { ticker3_color: colorValue } ),
133	label: __( 'Color', 'simple-ticker' ),
134	}
135	] }
136	>
137	</PanelColorSettings>
138	</PanelBody>
139	<PanelBody title = { __( 'Sticky Posts', 'simple-ticker' ) } initialOpen = { false }>
140	<ToggleControl
141	__nextHasNoMarginBottom
142	label = { __( 'Include sticky_posts', 'simple-ticker' ) }
143	checked = { attributes.sticky_posts_display }
144	onChange = { ( value ) => setAttributes( { sticky_posts_display: value } ) }
145	/>
146	<PanelColorSettings
147	title = { __( 'Color Settings', 'simple-ticker' ) }
148	colorSettings = { [
149	{
150	value: attributes.sticky_posts_title_color,
151	onChange: ( colorValue ) => setAttributes( { sticky_posts_title_color: colorValue } ),
152	label: __( 'Title color', 'simple-ticker' ),
153	},
154	{
155	value: attributes.sticky_posts_content_color,
156	onChange: ( colorValue ) => setAttributes( { sticky_posts_content_color: colorValue } ),
157	label: __( 'Content color', 'simple-ticker' ),
158	},
159	] }
160	>
161	</PanelColorSettings>
162	</PanelBody>
163	<PanelBody title = { __( 'WooCommerce Sales', 'simple-ticker' ) } initialOpen = { false }>
164	<ToggleControl
165	__nextHasNoMarginBottom
166	label = { __( 'Include WooCommerce Sales', 'simple-ticker' ) }
167	checked = { attributes.woo_sales_display }
168	onChange = { ( value ) => setAttributes( { woo_sales_display: value } ) }
169	/>
170	<PanelColorSettings
171	title = { __( 'Color Settings', 'simple-ticker' ) }
172	colorSettings = { [
173	{
174	value: attributes.woo_sales_color,
175	onChange: ( colorValue ) => setAttributes( { woo_sales_color: colorValue } ),
176	label: __( 'Color', 'simple-ticker' ),
177	}
178	] }
179	>
180	</PanelColorSettings>
181	</PanelBody>
182	</InspectorControls>
183	</div>
184	);
185	}
186