TablePress – Tables in WordPress made easy / 3.2.1

TablePress – Tables in WordPress made easy v3.2.1

tablepress / blocks / table / src / edit.js

edit.js in TablePress – Tables in WordPress made easy 3.2.1, at blocks/table/src/edit.js

183 lines 6.0 KB

Raw Download Zip

1	/**
2	* JavaScript code for the TablePress table block in the block editor.
3	*
4	* @package TablePress
5	* @subpackage Blocks
6	* @author Tobias Bäthge
7	* @since 2.0.0
8	*/
9
10	/**
11	* WordPress dependencies.
12	*/
13	import { __, sprintf } from '@wordpress/i18n';
14	import ServerSideRender from '@wordpress/server-side-render';
15	import { useBlockProps, InspectorControls, InspectorAdvancedControls } from '@wordpress/block-editor';
16	import { ComboboxControl, ExternalLink, Icon, PanelBody, Placeholder, TextControl } from '@wordpress/components';
17	import shortcode from '@wordpress/shortcode';
18
19	/**
20	* Get the block name from the block.json.
21	*/
22	import block from '../block.json';
23
24	/**
25	* Internal dependencies.
26	*/
27	import { shortcodeAttrsToString } from './common/functions';
28	import TablePressTableIcon from './icon';
29
30	/**
31	* Load CSS code that only applies inside the block editor.
32	*/
33	import './editor.scss';
34
35	// Options for the table selection dropdown, in the form [ { value: <id>, label: <text> }, ... ].
36	const ComboboxControlOptions = Object.entries( tp.tables ).map( ( [ id, name ] ) => {
37	return {
38	value: id,
39	/* translators: %1$s: Table ID, %2$s: Table name */
40	label: sprintf( __( 'ID %1$s: “%2$s”', 'tablepress' ), id, name ),
41	};
42	} );
43
44	/**
45	* Custom component for the "Manage your tables." link.
46	*/
47	const ManageTablesLink = function () {
48	return (
49	'' !== tp.url &&
50	<ExternalLink href={ tp.url }>
51	{ __( 'Manage your tables.', 'tablepress' ) }
52	</ExternalLink>
53	);
54	}
55
56	/**
57	* The edit function describes the structure of your block in the context of the
58	* editor. This represents what the editor will render when the block is used.
59	*
60	* @param {Object} params Function parameters.
61	* @param {Object} params.attributes Block attributes.
62	* @param {Function} params.setAttributes Function to set block attributes.
63	* @return {Element} Element to render.
64	*/
65	const TablePressTableEdit = ( { attributes, setAttributes } ) => {
66	const blockProps = useBlockProps();
67
68	let blockMarkup;
69	if ( attributes.id && tp.tables.hasOwnProperty( attributes.id ) ) {
70	blockMarkup = (
71	<div { ...blockProps }>
72	{ tp.load_block_preview &&
73	<ServerSideRender
74	block={ block.name }
75	attributes={ {
76	id: attributes.id,
77	parameters: `block_preview=true ${ attributes.parameters }`.trim(), // Set the `block_preview` parameter to allow detecting that this is a block preview.
78	} }
79	className="render-wrapper"
80	/>
81	}
82	<div className="table-overlay">
83	{/* translators: %1$s: Table ID, %2$s: Table name */}
84	{ sprintf( __( 'TablePress table %1$s: “%2$s”', 'tablepress' ), attributes.id, tp.tables[ attributes.id ] ) }
85	</div>
86	</div>
87	);
88	} else {
89	let instructions = 0 < ComboboxControlOptions.length ? __( 'Select the TablePress table that you want to embed in the Settings sidebar.', 'tablepress' ) : __( 'There are no TablePress tables on this site yet.', 'tablepress' );
90	if ( attributes.id ) {
91	// Show an error message if a table could not be found (e.g. after a table was deleted). The tp.tables.hasOwnProperty( attributes.id ) check happens above.
92	/* translators: %1$s: Table ID */
93	instructions = sprintf( __( 'There is a problem: The TablePress table with the ID “%1$s” could not be found.', 'tablepress' ), attributes.id ) + ' ' + instructions;
94	}
95	blockMarkup = (
96	<div { ...blockProps }>
97	<Placeholder
98	icon={ <Icon icon={ TablePressTableIcon } /> }
99	label={ __( 'TablePress table', 'tablepress' ) }
100	instructions={ instructions }
101	>
102	<ManageTablesLink />
103	</Placeholder>
104	</div>
105	);
106	}
107
108	const sidebarMarkup = (
109	<>
110	<InspectorControls>
111	<PanelBody
112	opened={ true }
113	>
114	{ 0 < ComboboxControlOptions.length
115	?
116	<ComboboxControl
117	__nextHasNoMarginBottom
118	__next40pxDefaultSize
119	label={ __( 'Table:', 'tablepress' ) }
120	help={
121	<>
122	{ __( 'Select the TablePress table that you want to embed.', 'tablepress' ) }
123	{ '' !== tp.url && ' ' }
124	<ManageTablesLink />
125	</>
126	}
127	value={ attributes.id }
128	options={ ComboboxControlOptions }
129	onChange={ ( id ) => {
130	id ??= '';
131	setAttributes( { id: id.replace( /[^0-9a-zA-Z-_]/g, '' ) } );
132	} }
133	/>
134	:
135	<>
136	{ __( 'There are no TablePress tables on this site yet.', 'tablepress' ) }
137	{ '' !== tp.url && ' ' }
138	<ManageTablesLink />
139	</>
140	}
141	</PanelBody>
142	</InspectorControls>
143	{ attributes.id && tp.tables.hasOwnProperty( attributes.id ) &&
144	<InspectorAdvancedControls>
145	<TextControl
146	__nextHasNoMarginBottom
147	__next40pxDefaultSize
148	label={ __( 'Configuration parameters:', 'tablepress' ) }
149	help={ __( 'These additional parameters can be used to modify specific table features.', 'tablepress' ) + ' ' + __( 'See the TablePress Documentation for more information.', 'tablepress' ) }
150	value={ attributes.parameters }
151	onChange={ ( parameters ) => {
152	parameters = shortcode.replace(
153	tp.table.shortcode,
154	parameters,
155	( { attrs: shortcodeAttrs } ) => {
156	shortcodeAttrs = { named: { ...shortcodeAttrs.named }, numeric: [ ...shortcodeAttrs.numeric ] }; // Use object destructuring to get a clone of the object.
157	delete shortcodeAttrs.named.id;
158	return ' ' + shortcodeAttrsToString( shortcodeAttrs ) + ' '; // Add spaces around replacement text to have separation to possibly already existing parameters.
159	}
160	);
161	parameters = parameters.replace( /=“([^”]*)”/g, '="$1"' ); // Replace curly quotation marks around a value with normal ones.
162	setAttributes( { parameters } );
163	} }
164	onBlur={ ( event ) => {
165	const parameters = event.target.value.trim(); // Remove leading and trailing whitespace from the parameter string.
166	setAttributes( { parameters } );
167	} }
168	/>
169	</InspectorAdvancedControls>
170	}
171	</>
172	);
173
174	return (
175	<>
176	{ blockMarkup }
177	{ sidebarMarkup }
178	</>
179	);
180	};
181
182	export default TablePressTableEdit;
183