TablePress – Tables in WordPress made easy / 2.3.2

TablePress – Tables in WordPress made easy v2.3.2

tablepress / blocks / table / src / edit.js

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

172 lines 5.5 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 { shortcode_attrs_to_string } from './common/functions';
28
29	/**
30	* Load CSS code that only applies inside the block editor.
31	*/
32	import './editor.scss';
33
34	// Options for the table selection dropdown, in the form [ { value: <id>, label: <text> }, ... ].
35	const ComboboxControl_options = Object.entries( tp.tables ).map( ( [ id, name ] ) => {
36	return {
37	value: id,
38	label: sprintf( __( 'ID %1$s: “%2$s”', 'tablepress' ), id, name ),
39	};
40	} );
41
42	/**
43	* Custom component for the "Manage your tables." link.
44	*/
45	const ManageTablesLink = function() {
46	return (
47	'' !== tp.url &&
48	<ExternalLink href={ tp.url }>
49	{ __( 'Manage your tables.', 'tablepress' ) }
50	</ExternalLink>
51	);
52	}
53
54	/**
55	* The edit function describes the structure of your block in the context of the
56	* editor. This represents what the editor will render when the block is used.
57	*
58	* @param {Object} params Function parameters.
59	* @param {Object} params.attributes Block attributes.
60	* @param {Function} params.setAttributes Function to set block attributes.
61	* @return {Element} Element to render.
62	*/
63	const TablePressTableEdit = ( { attributes, setAttributes } ) => {
64	const blockProps = useBlockProps();
65
66	let blockMarkup;
67	if ( attributes.id && tp.tables.hasOwnProperty( attributes.id ) ) {
68	blockMarkup = (
69	<div { ...blockProps }>
70	{ tp.load_block_preview &&
71	<ServerSideRender
72	block={ block.name }
73	attributes={ attributes }
74	className="render-wrapper"
75	/>
76	}
77	<div className="table-overlay">
78	{ sprintf( __( 'TablePress table %1$s: “%2$s”', 'tablepress' ), attributes.id, tp.tables[ attributes.id ] ) }
79	</div>
80	</div>
81	);
82	} else {
83	let instructions = 0 < ComboboxControl_options.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' );
84	if ( attributes.id ) {
85	// 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.
86	instructions = sprintf( __( 'There is a problem: The TablePress table with the ID “%1$s” could not be found.', 'tablepress' ), attributes.id ) + ' ' + instructions;
87	}
88	blockMarkup = (
89	<div { ...blockProps }>
90	<Placeholder
91	icon={ <Icon icon="list-view" /> }
92	label={ __( 'TablePress table', 'tablepress' ) }
93	instructions={ instructions }
94	>
95	<ManageTablesLink />
96	</Placeholder>
97	</div>
98	);
99	}
100
101	const sidebarMarkup = (
102	<>
103	<InspectorControls>
104	<PanelBody
105	opened={ true }
106	>
107	{ 0 < ComboboxControl_options.length
108	?
109	<ComboboxControl
110	label={ __( 'Table:', 'tablepress' ) }
111	help={
112	<>
113	{ __( 'Select the TablePress table that you want to embed.', 'tablepress' ) }
114	{ '' !== tp.url && ' ' }
115	<ManageTablesLink />
116	</>
117	}
118	value={ attributes.id }
119	options={ ComboboxControl_options }
120	onChange={ ( id ) => {
121	id ??= '';
122	setAttributes( { id: id.replace( /[^0-9a-zA-Z-_]/g, '' ) } );
123	} }
124	/>
125	:
126	<>
127	{ __( 'There are no TablePress tables on this site yet.', 'tablepress' ) }
128	{ '' !== tp.url && ' ' }
129	<ManageTablesLink />
130	</>
131	}
132	</PanelBody>
133	</InspectorControls>
134	{ attributes.id && tp.tables.hasOwnProperty( attributes.id ) &&
135	<InspectorAdvancedControls>
136	<TextControl
137	label={ __( 'Configuration parameters:', 'tablepress' ) }
138	help={ __( 'These additional parameters can be used to modify specific table features.', 'tablepress' ) + ' ' + __( 'See the TablePress Documentation for more information.', 'tablepress' ) }
139	value={ attributes.parameters }
140	onChange={ ( parameters ) => {
141	parameters = shortcode.replace(
142	tp.table.shortcode,
143	parameters,
144	( { attrs: shortcodeAttrs } ) => {
145	shortcodeAttrs = { named: { ...shortcodeAttrs.named }, numeric: [ ...shortcodeAttrs.numeric ] }; // Use object destructuring to get a clone of the object.
146	delete shortcodeAttrs.named.id;
147	return ' ' + shortcode_attrs_to_string( shortcodeAttrs ) + ' '; // Add spaces around replacement text to have separation to possibly already existing parameters.
148	}
149	);
150	parameters = parameters.replace( /=“([^”]*)”/g, '="$1"' ); // Replace curly quotation marks around a value with normal ones.
151	setAttributes( { parameters } );
152	} }
153	onBlur={ ( event ) => {
154	const parameters = event.target.value.trim(); // Remove leading and trailing whitespace from the parameter string.
155	setAttributes( { parameters } );
156	} }
157	/>
158	</InspectorAdvancedControls>
159	}
160	</>
161	);
162
163	return (
164	<>
165	{ blockMarkup }
166	{ sidebarMarkup}
167	</>
168	);
169	};
170
171	export default TablePressTableEdit;
172