← All changes | blocks/table/src/edit.js +42 -22 2.1.7 → 3.4 View file →

		@@ -13,8 +13,9 @@
13	13	import { __, sprintf } from '@wordpress/i18n';
14	14	import ServerSideRender from '@wordpress/server-side-render';
15	15	import { useBlockProps, InspectorControls, InspectorAdvancedControls } from '@wordpress/block-editor';
16	16	import { ComboboxControl, ExternalLink, Icon, PanelBody, Placeholder, TextControl } from '@wordpress/components';
	17	+import { createInterpolateElement } from '@wordpress/element';
17	18	import shortcode from '@wordpress/shortcode';
18	19
19	20	/**
20	21	* Get the block name from the block.json.
		@@ -23,9 +24,10 @@
23	24
24	25	/**
25	26	* Internal dependencies.
26	27	*/
27		-import { shortcode_attrs_to_string } from './_common-functions';
	28	+import { shortcodeAttrsToString } from './common/functions';
	29	+import TablePressTableIcon from './icon';
28	30
29	31	/**
30	32	* Load CSS code that only applies inside the block editor.
31	33	*/
		@@ -31,11 +33,12 @@
31	33	*/
32	34	import './editor.scss';
33	35
34	36	// Options for the table selection dropdown, in the form [ { value: <id>, label: <text> }, ... ].
35		-const ComboboxControl_options = Object.entries( tp.tables ).map( ( [ id, name ] ) => {
	37	+const ComboboxControlOptions = Object.entries( tp.tables ).map( ( [ id, name ] ) => {
36	38	return {
37	39	value: id,
	40	+ /* translators: %1$s: Table ID, %2$s: Table name */
38	41	label: sprintf( __( 'ID %1$s: “%2$s”', 'tablepress' ), id, name ),
39	42	};
40	43	} );
41	44
		@@ -41,9 +44,9 @@
41	44
42	45	/**
43	46	* Custom component for the "Manage your tables." link.
44	47	*/
45		-const ManageTablesLink = function() {
	48	+const ManageTablesLink = function () {
46	49	return (
47	50	'' !== tp.url &&
48	51	<ExternalLink href={ tp.url }>
49	52	{ __( 'Manage your tables.', 'tablepress' ) }
		@@ -57,11 +60,11 @@
57	60	*
58	61	* @param {Object} params Function parameters.
59	62	* @param {Object} params.attributes Block attributes.
60	63	* @param {Function} params.setAttributes Function to set block attributes.
61		- * @return {WPElement} Element to render.
	64	+ * @return {Element} Element to render.
62	65	*/
63		-export default function TablePressTableEdit( { attributes, setAttributes } ) {
	66	+const TablePressTableEdit = ( { attributes, setAttributes } ) => {
64	67	const blockProps = useBlockProps();
65	68
66	69	let blockMarkup;
67	70	if ( attributes.id && tp.tables.hasOwnProperty( attributes.id ) ) {
		@@ -69,32 +72,34 @@
69	72	<div { ...blockProps }>
70	73	{ tp.load_block_preview &&
71	74	<ServerSideRender
72	75	block={ block.name }
73		- attributes={ attributes }
	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	+ } }
74	80	className="render-wrapper"
75	81	/>
76	82	}
77	83	<div className="table-overlay">
	84	+ {/* translators: %1$s: Table ID, %2$s: Table name */}
78	85	{ sprintf( __( 'TablePress table %1$s: “%2$s”', 'tablepress' ), attributes.id, tp.tables[ attributes.id ] ) }
79	86	</div>
80	87	</div>
81	88	);
82	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	+ }
83	96	blockMarkup = (
84	97	<div { ...blockProps }>
85	98	<Placeholder
86		- icon={ <Icon icon="list-view" /> }
	99	+ icon={ <Icon icon={ TablePressTableIcon } /> }
87	100	label={ __( 'TablePress table', 'tablepress' ) }
88		- instructions={
89		- <>
90		- { /* Show an error message if a table could not be found (e.g. after a table was deleted).
91		- The tp.tables.hasOwnProperty( attributes.id ) check happens above. */ }
92		- { attributes.id && sprintf( __( 'There is a problem: The TablePress table with the ID “%1$s” could not be found.', 'tablepress' ), attributes.id ) + ' ' }
93		-
94		- { 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' ) }
95		- </>
96		- }
	101	+ instructions={ instructions }
97	102	>
98	103	<ManageTablesLink />
99	104	</Placeholder>
100	105	</div>
		@@ -106,11 +111,13 @@
106	111	<InspectorControls>
107	112	<PanelBody
108	113	opened={ true }
109	114	>
110		- { 0 < ComboboxControl_options.length
	115	+ { 0 < ComboboxControlOptions.length
111	116	?
112	117	<ComboboxControl
	118	+ __nextHasNoMarginBottom
	119	+ __next40pxDefaultSize
113	120	label={ __( 'Table:', 'tablepress' ) }
114	121	help={
115	122	<>
116	123	{ __( 'Select the TablePress table that you want to embed.', 'tablepress' ) }
		@@ -118,9 +125,9 @@
118	125	<ManageTablesLink />
119	126	</>
120	127	}
121	128	value={ attributes.id }
122		- options={ ComboboxControl_options }
	129	+ options={ ComboboxControlOptions }
123	130	onChange={ ( id ) => {
124	131	id ??= '';
125	132	setAttributes( { id: id.replace( /[^0-9a-zA-Z-_]/g, '' ) } );
126	133	} }
		@@ -136,10 +143,21 @@
136	143	</InspectorControls>
137	144	{ attributes.id && tp.tables.hasOwnProperty( attributes.id ) &&
138	145	<InspectorAdvancedControls>
139	146	<TextControl
	147	+ __nextHasNoMarginBottom
	148	+ __next40pxDefaultSize
140	149	label={ __( 'Configuration parameters:', 'tablepress' ) }
141		- help={ __( 'These additional parameters can be used to modify specific table features.', 'tablepress' ) + ' ' + __( 'See the TablePress Documentation for more information.', '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	+ }
142	160	value={ attributes.parameters }
143	161	onChange={ ( parameters ) => {
144	162	parameters = shortcode.replace(
145	163	tp.table.shortcode,
		@@ -146,9 +164,9 @@
146	164	parameters,
147	165	( { attrs: shortcodeAttrs } ) => {
148	166	shortcodeAttrs = { named: { ...shortcodeAttrs.named }, numeric: [ ...shortcodeAttrs.numeric ] }; // Use object destructuring to get a clone of the object.
149	167	delete shortcodeAttrs.named.id;
150		- return ' ' + shortcode_attrs_to_string( shortcodeAttrs ) + ' '; // Add spaces around replacement text to have separation to possibly already existing parameters.
	168	+ return ' ' + shortcodeAttrsToString( shortcodeAttrs ) + ' '; // Add spaces around replacement text to have separation to possibly already existing parameters.
151	169	}
152	170	);
153	171	parameters = parameters.replace( /=“([^”]*)”/g, '="$1"' ); // Replace curly quotation marks around a value with normal ones.
154	172	setAttributes( { parameters } );
		@@ -165,8 +183,10 @@
165	183
166	184	return (
167	185	<>
168	186	{ blockMarkup }
169		- { sidebarMarkup}
	187	+ { sidebarMarkup }
170	188	</>
171	189	);
172		-}
	190	+};
	191	+
	192	+export default TablePressTableEdit;