← All changes | blocks/table/src/edit.js +32 -11 2.3 → 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' ) }
		@@ -69,27 +72,32 @@
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 {
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' );
	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' );
84	91	if ( attributes.id ) {
85	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 */
86	94	instructions = sprintf( __( 'There is a problem: The TablePress table with the ID “%1$s” could not be found.', 'tablepress' ), attributes.id ) + ' ' + instructions;
87	95	}
88	96	blockMarkup = (
89	97	<div { ...blockProps }>
90	98	<Placeholder
91		- icon={ <Icon icon="list-view" /> }
	99	+ icon={ <Icon icon={ TablePressTableIcon } /> }
92	100	label={ __( 'TablePress table', 'tablepress' ) }
93	101	instructions={ instructions }
94	102	>
95	103	<ManageTablesLink />
		@@ -103,11 +111,13 @@
103	111	<InspectorControls>
104	112	<PanelBody
105	113	opened={ true }
106	114	>
107		- { 0 < ComboboxControl_options.length
	115	+ { 0 < ComboboxControlOptions.length
108	116	?
109	117	<ComboboxControl
	118	+ __nextHasNoMarginBottom
	119	+ __next40pxDefaultSize
110	120	label={ __( 'Table:', 'tablepress' ) }
111	121	help={
112	122	<>
113	123	{ __( 'Select the TablePress table that you want to embed.', 'tablepress' ) }
		@@ -115,9 +125,9 @@
115	125	<ManageTablesLink />
116	126	</>
117	127	}
118	128	value={ attributes.id }
119		- options={ ComboboxControl_options }
	129	+ options={ ComboboxControlOptions }
120	130	onChange={ ( id ) => {
121	131	id ??= '';
122	132	setAttributes( { id: id.replace( /[^0-9a-zA-Z-_]/g, '' ) } );
123	133	} }
		@@ -133,10 +143,21 @@
133	143	</InspectorControls>
134	144	{ attributes.id && tp.tables.hasOwnProperty( attributes.id ) &&
135	145	<InspectorAdvancedControls>
136	146	<TextControl
	147	+ __nextHasNoMarginBottom
	148	+ __next40pxDefaultSize
137	149	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' ) }
	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	+ }
139	160	value={ attributes.parameters }
140	161	onChange={ ( parameters ) => {
141	162	parameters = shortcode.replace(
142	163	tp.table.shortcode,
		@@ -143,9 +164,9 @@
143	164	parameters,
144	165	( { attrs: shortcodeAttrs } ) => {
145	166	shortcodeAttrs = { named: { ...shortcodeAttrs.named }, numeric: [ ...shortcodeAttrs.numeric ] }; // Use object destructuring to get a clone of the object.
146	167	delete shortcodeAttrs.named.id;
147		- 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.
148	169	}
149	170	);
150	171	parameters = parameters.replace( /=“([^”]*)”/g, '="$1"' ); // Replace curly quotation marks around a value with normal ones.
151	172	setAttributes( { parameters } );
		@@ -162,9 +183,9 @@
162	183
163	184	return (
164	185	<>
165	186	{ blockMarkup }
166		- { sidebarMarkup}
	187	+ { sidebarMarkup }
167	188	</>
168	189	);
169	190	};
170	191