TablePress – Tables in WordPress made easy / 3.3.1

TablePress – Tables in WordPress made easy v3.3.1

tablepress / blocks / table / src / edit.js

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

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