WP Ultimate Post Grid / 4.0.1

WP Ultimate Post Grid v4.0.1

wp-ultimate-post-grid / assets / js / blocks / grid / index.js

index.js in WP Ultimate Post Grid 4.0.1, at assets/js/blocks/grid/index.js

150 lines 4.7 KB

Raw Download Zip

1	import Helpers from '../Helpers';
2
3	const { __ } = wp.i18n;
4	const { registerBlockType } = wp.blocks;
5	const {
6	Button,
7	Disabled,
8	PanelBody,
9	ToolbarGroup,
10	ToolbarButton,
11	TextControl,
12	} = wp.components;
13	const { Fragment } = wp.element;
14
15	// Backwards compatibility.
16	let InspectorControls;
17	let BlockControls;
18	if ( wp.hasOwnProperty( 'blockEditor' ) ) {
19	InspectorControls = wp.blockEditor.InspectorControls;
20	BlockControls = wp.blockEditor.BlockControls;
21	} else {
22	InspectorControls = wp.editor.InspectorControls;
23	BlockControls = wp.editor.BlockControls;
24	}
25
26	let ServerSideRender;
27	if ( wp.hasOwnProperty( 'serverSideRender' ) ) {
28	ServerSideRender = wp.serverSideRender;
29	} else {
30	ServerSideRender = wp.components.ServerSideRender;
31	}
32
33	import '../../../css/blocks/grid.scss';
34
35	registerBlockType( 'wp-ultimate-post-grid/grid', {
36	title: __( 'Grid' ),
37	description: __( 'Display a WP Ultimate Post Grid.' ),
38	icon: 'grid-view',
39	keywords: [ 'wpupg' ],
40	category: 'wp-ultimate-post-grid',
41	supports: {
42	html: false,
43	align: true,
44	},
45	transforms: {
46	from: [
47	{
48	type: 'shortcode',
49	tag: 'wpupg-grid',
50	attributes: {
51	id: {
52	type: 'string',
53	shortcode: ( { named: { id = '' } } ) => {
54	return id.replace( 'id', '' );
55	},
56	},
57	dynamic: {
58	type: 'string',
59	shortcode: ( { named } ) => {
60	delete named.id;
61	delete named.align;
62	return Helpers.dynamicObjectToString( named );
63	},
64	},
65	},
66	},
67	]
68	},
69	edit: (props) => {
70	const { attributes, setAttributes, className } = props;
71
72	const insertGridModal = () => {
73	WPUPG_Modal.open( 'select', {
74	title: __( 'Insert Grid' ),
75	button: __( 'Insert' ),
76	fields: {
77	grid: true,
78	filters: false,
79	},
80	insertCallback: ( fields ) => {
81	setAttributes({
82	id: '' + fields.grid,
83	updated: Date.now(),
84	});
85	},
86	}, true );
87	}
88
89	return (
90	<div className={ className }>{
91	attributes.id
92	?
93	<Fragment>
94	<BlockControls>
95	<ToolbarGroup>
96	<ToolbarButton
97	icon="edit"
98	label={ __( 'Change Grid' ) }
99	onClick={ insertGridModal }
100	/>
101	</ToolbarGroup>
102	</BlockControls>
103	<InspectorControls>
104	<PanelBody title={ __( 'Grid Details' ) }>
105	<TextControl
106	label={ __( 'Grid ID' ) }
107	value={ attributes.id }
108	disabled
109	/>
110	</PanelBody>
111	{ Helpers.dynamicSidebar( attributes, setAttributes ) }
112	</InspectorControls>
113	<Disabled>
114	<div
115	style={{
116	fontSize: 10,
117	textAlign: 'center',
118	}}
119	>{ __( '(This is just a preview and will look different on the actual site)')}</div>
120	<ServerSideRender
121	block="wp-ultimate-post-grid/grid"
122	attributes={ attributes }
123	/>
124	</Disabled>
125	</Fragment>
126	:
127	<Fragment>
128	<h5>WP Ultimate Post Grid - { __( 'Grid' ) }</h5>
129	<Button
130	isPrimary
131	isLarge
132	onClick={ insertGridModal }>
133	{ __( 'Insert Existing Grid' ) }
134	</Button>
135	</Fragment>
136	}</div>
137	)
138	},
139	save: (props) => {
140	const { attributes } = props;
141
142	if ( attributes.id ) {
143	const dynamic = attributes.dynamic.trim();
144
145	return `[wpupg-grid id="${ attributes.id }"${ dynamic ? ` ${dynamic}` : ''}]`;
146	} else {
147	return null;
148	}
149	},
150	} );