PluginProbe
TablePress – Tables in WordPress made easy / 3.2
TablePress – Tables in WordPress made easy v3.2
3.3.4 3.3.3 3.3.2 3.3.1 trunk 1.12 1.14 1.9.2 2.0.4 2.1.7 2.1.8 2.2 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.3 2.3.1 2.3.2 2.4 2.4.1 2.4.2 2.4.3 2.4.4 All 44 releases
← All changes | views/view-edit.php +126 -296 2.4.33.2 View file →
@@ -26,12 +26,12 @@
26 26 *
27 27 * @since 2.0.0
28 28 * @var string[]
29 29 */
30 - protected $wp_pointers = array( 'tp20_edit_context_menu', 'tp21_edit_screen_options' );
30 + protected array $wp_pointers = array( 'tp20_edit_context_menu', 'tp21_edit_screen_options' );
31 31
32 32 /**
33 - * Set up the view with data and do things that are specific for this view.
33 + * Sets up the view with data and do things that are specific for this view.
34 34 *
35 35 * @since 1.0.0
36 36 *
37 37 * @param string $action Action for this view.
@@ -56,14 +56,18 @@
56 56 'success_import' => __( 'The table was imported successfully.', 'tablepress' ),
57 57 'error_delete' => __( 'Error: The table could not be deleted.', 'tablepress' ),
58 58 ) );
59 59
60 + // For the Advanced Editor.
60 61 wp_enqueue_style( 'wp-jquery-ui-dialog' );
61 62 wp_enqueue_style( 'editor-buttons' );
62 - wp_enqueue_script( 'wpdialogs' ); // For the Advanced Editor, Table Preview, and Help Boxes.
63 + wp_enqueue_script( 'wpdialogs' );
64 + // For the "Insert Image" dialog.
63 65 add_filter( 'media_view_strings', array( $this, 'change_media_view_strings' ) );
64 66 wp_enqueue_media();
65 - wp_enqueue_script( 'wplink' ); // JS for the "Insert Link" button.
67 + // For the "Insert Link" dialog.
68 + wp_enqueue_script( 'wplink' );
69 +
66 70 $this->admin_page->enqueue_style( 'jspreadsheet' );
67 71 $this->admin_page->enqueue_style( 'jsuites', array( 'tablepress-jspreadsheet' ) );
68 72 $this->admin_page->enqueue_style( 'edit', array( 'tablepress-jspreadsheet', 'tablepress-jsuites' ) );
69 73 if ( ! TABLEPRESS_IS_PLAYGROUND_PREVIEW && tb_tp_fs()->is_free_plan() ) {
@@ -73,9 +77,9 @@
73 77 $this->admin_page->enqueue_script( 'jsuites', array( 'tablepress-jspreadsheet' ) );
74 78 $this->admin_page->enqueue_script( 'edit', array( 'tablepress-jspreadsheet', 'tablepress-jsuites', 'jquery-core' ) );
75 79
76 80 $this->add_text_box( 'head', array( $this, 'textbox_head' ), 'normal' );
77 - $this->add_text_box( 'buttons-1', array( $this, 'textbox_buttons' ), 'normal' );
81 + $this->add_text_box( 'buttons-top', array( $this, 'textbox_buttons' ), 'normal' );
78 82 $this->add_meta_box( 'table-information', __( 'Table Information', 'tablepress' ), array( $this, 'postbox_table_information' ), 'normal' );
79 83 $this->add_meta_box( 'table-data', __( 'Table Content', 'tablepress' ), array( $this, 'postbox_table_data' ), 'normal' );
80 84 $this->add_meta_box( 'table-manipulation', __( 'Table Manipulation', 'tablepress' ), array( $this, 'postbox_table_manipulation' ), 'normal' );
81 85 $this->add_meta_box( 'table-options', __( 'Table Options', 'tablepress' ), array( $this, 'postbox_table_options' ), 'normal' );
@@ -80,9 +84,9 @@
80 84 $this->add_meta_box( 'table-manipulation', __( 'Table Manipulation', 'tablepress' ), array( $this, 'postbox_table_manipulation' ), 'normal' );
81 85 $this->add_meta_box( 'table-options', __( 'Table Options', 'tablepress' ), array( $this, 'postbox_table_options' ), 'normal' );
82 86 $this->add_meta_box( 'datatables-features', __( 'Table Features for Site Visitors', 'tablepress' ), array( $this, 'postbox_datatables_features' ), 'normal' );
83 87 $this->add_text_box( 'hidden-containers', array( $this, 'textbox_hidden_containers' ), 'additional' );
84 - $this->add_text_box( 'buttons-2', array( $this, 'textbox_buttons' ), 'additional' );
88 + $this->add_text_box( 'buttons-bottom', array( $this, 'textbox_buttons' ), 'additional' );
85 89 $this->add_text_box( 'other-actions', array( $this, 'textbox_other_actions' ), 'submit' );
86 90
87 91 add_filter( 'screen_settings', array( $this, 'add_screen_options_output' ), 10, 2 );
88 92 }
@@ -87,9 +91,9 @@
87 91 add_filter( 'screen_settings', array( $this, 'add_screen_options_output' ), 10, 2 );
88 92 }
89 93
90 94 /**
91 - * Change Media View string "Insert into post" to "Insert into Table".
95 + * Changes the Media View string "Insert into post" to "Insert into Table".
92 96 *
93 97 * @since 1.0.0
94 98 *
95 99 * @param array<string, string> $strings Current set of Media View strings.
@@ -112,9 +116,9 @@
112 116 public function add_screen_options_output( /* string */ $screen_settings, WP_Screen $screen ): string {
113 117 // Don't use a type hint for the `$screen_settings` argument as many WordPress plugins seem to be returning `null` in their filter hook handlers.
114 118
115 119 // Protect against other plugins not returning a string for the `$screen_settings` argument.
116 - if ( ! is_string( $screen_settings ) ) {
120 + if ( ! is_string( $screen_settings ) ) { // @phpstan-ignore function.alreadyNarrowedType (The `is_string()` check is needed as the input is coming from a filter hook.)
117 121 $screen_settings = '';
118 122 }
119 123
120 124 $screen_settings = '<fieldset id="tablepress-screen-options" class="screen-options">';
@@ -123,13 +127,15 @@
123 127 $screen_settings .= '<p><em>' . __( 'Please note: These settings only influence the table editor view on this screen, but not the table that the site visitor sees!', 'tablepress' ) . '</em></p>';
124 128 $screen_settings .= '<div>';
125 129 $screen_settings .= '<label for="table_editor_column_width">' . __( 'Default column width:', 'tablepress' ) . '</label> ';
126 130 $input = '<input type="number" id="table_editor_column_width" class="small-text" value="' . esc_attr( TablePress::$model_options->get( 'table_editor_column_width' ) ) . '" min="30" max="9999">';
131 + /* translators: %s: Input field for the number of pixels */
127 132 $screen_settings .= sprintf( __( '%s pixels', 'tablepress' ), $input );
128 133 $screen_settings .= '</div>';
129 134 $screen_settings .= '<div style="margin-top: 6px;">';
130 135 $screen_settings .= '<label for="table_editor_line_clamp">' . __( 'Maximum visible lines of text:', 'tablepress' ) . '</label> ';
131 136 $input = '<input type="number" id="table_editor_line_clamp" class="tiny-text" value="' . esc_attr( TablePress::$model_options->get( 'table_editor_line_clamp' ) ) . '" min="0" max="999">';
137 + /* translators: %s: Input field for the number of lines */
132 138 $screen_settings .= sprintf( __( '%s lines', 'tablepress' ), $input );
133 139 $screen_settings .= '</div>';
134 140 $screen_settings .= '</fieldset>';
135 141 return $screen_settings;
@@ -134,9 +140,8 @@
134 140 $screen_settings .= '</fieldset>';
135 141 return $screen_settings;
136 142 }
137 143
138 -
139 144 /**
140 145 * Renders the current view.
141 146 *
142 147 * In comparison to the parent class method, this contains handling for the no-js case and adjusts the HTML code structure.
@@ -144,8 +149,10 @@
144 149 * @since 2.0.0
145 150 */
146 151 #[\Override]
147 152 public function render(): void {
153 + $this->print_javascript_data();
154 +
148 155 ?>
149 156 <div id="tablepress-page" class="wrap">
150 157 <form>
151 158 <?php
@@ -186,9 +193,9 @@
186 193 <?php
187 194 }
188 195
189 196 /**
190 - * Override parent class method, as the nonces for this view are generated in the JS code.
197 + * Overrides parent class method, as the nonces for this view are generated in the JS code.
191 198 *
192 199 * @since 1.0.0
193 200 *
194 201 * @param array<string, mixed> $data Data for this screen.
@@ -195,14 +202,71 @@
195 202 * @param array<string, mixed> $box Information about the text box.
196 203 */
197 204 #[\Override]
198 205 protected function action_nonce_field( array $data, array $box ): void {
199 - // Intentionally left empty. Nonces for this view are generated in postbox_table_data().
206 + // Intentionally left empty. Nonces for this view are generated in `print_javascript_data()`.
200 207 }
201 208
202 209 /**
203 - * Print the content of the "Table Information" post meta box.
210 + * Prints the table data for use in JS code and the main React container.
204 211 *
212 + * @since 3.0.0
213 + */
214 + public function print_javascript_data(): void {
215 + echo "<script>\n";
216 + echo "window.tp = window.tp || {};\n";
217 +
218 + echo "tp.nonces = {\n";
219 + echo "\tedit_table: '" . wp_create_nonce( TablePress::nonce( $this->action, $this->data['table']['id'] ) ) . "',\n";
220 + echo "\tpreview_table: '" . wp_create_nonce( TablePress::nonce( 'preview_table', $this->data['table']['id'] ) ) . "',\n";
221 + echo "\tcopy_table: '" . wp_create_nonce( TablePress::nonce( 'copy_table', $this->data['table']['id'] ) ) . "',\n";
222 + echo "\tdelete_table: '" . wp_create_nonce( TablePress::nonce( 'delete_table', $this->data['table']['id'] ) ) . "',\n";
223 + echo "\tscreen_options: '" . wp_create_nonce( TablePress::nonce( 'screen_options' ) ) . "',\n";
224 + echo "};\n";
225 +
226 + echo "tp.table = {\n";
227 + echo "\tid: '{$this->data['table']['id']}',\n";
228 + echo "\tshortcode: '" . esc_js( TablePress::$shortcode ) . "',\n";
229 +
230 + // Add the table meta data.
231 + $this->data['table']['meta'] = array(
232 + 'id' => $this->data['table']['id'],
233 + 'name' => $this->data['table']['name'],
234 + 'description' => $this->data['table']['description'],
235 + 'lastModified' => TablePress::format_datetime( $this->data['table']['last_modified'] ),
236 + 'lastEditor' => TablePress::get_user_display_name( $this->data['table']['options']['last_editor'] ),
237 + );
238 +
239 + // JSON-encode array items separately to save some PHP memory.
240 + foreach ( array( 'meta', 'data', 'options', 'visibility' ) as $item ) {
241 + $json = $this->convert_to_json_parse_output( $this->data['table'][ $item ] );
242 + echo "\t{$item}: {$json},\n";
243 + }
244 + echo "};\n";
245 +
246 + echo "tp.screenOptions = {\n";
247 + echo "\ttable_editor_column_width: " . absint( TablePress::$model_options->get( 'table_editor_column_width' ) ) . ",\n";
248 + echo "\tshowCustomCommands: " . ( current_user_can( 'unfiltered_html' ) ? 'true' : 'false' ) . ",\n";
249 + echo "\toptionsUrl: '" . TablePress::url( array( 'action' => 'options' ) ) . "',\n";
250 + echo "\tcurrentUserCanEditTableId: " . ( current_user_can( 'tablepress_edit_table_id', $this->data['table']['id'] ) ? 'true' : 'false' ) . ",\n";
251 + echo "\tcurrentUserCanCopyTable: " . ( current_user_can( 'tablepress_copy_table', $this->data['table']['id'] ) ? 'true' : 'false' ) . ",\n";
252 + echo "\tcurrentUserCanDeleteTable: " . ( current_user_can( 'tablepress_delete_table', $this->data['table']['id'] ) ? 'true' : 'false' ) . ",\n";
253 + echo "\tcurrentUserCanExportTable: " . ( current_user_can( 'tablepress_export_table', $this->data['table']['id'] ) ? 'true' : 'false' ) . ",\n";
254 + echo "\tcurrentUserCanPreviewTable: " . ( current_user_can( 'tablepress_preview_table', $this->data['table']['id'] ) ? 'true' : 'false' ) . ",\n";
255 + echo "\tcopyUrl: '" . str_replace( '&amp;', '&', TablePress::url( array( 'action' => 'copy_table', 'item' => $this->data['table']['id'], 'return' => 'edit' ), true, 'admin-post.php' ) ) . "',\n";
256 + echo "\tdeleteUrl: '" . str_replace( '&amp;', '&', TablePress::url( array( 'action' => 'delete_table', 'item' => $this->data['table']['id'], 'return' => 'edit', 'return_item' => $this->data['table']['id'] ), true, 'admin-post.php' ) ) . "',\n";
257 + echo "\texportUrl: '" . str_replace( '&amp;', '&', TablePress::url( array( 'action' => 'export', 'table_id' => $this->data['table']['id'] ) ) ) . "',\n";
258 + echo "\tpreviewUrl: '" . str_replace( '&amp;', '&', TablePress::url( array( 'action' => 'preview_table', 'item' => $this->data['table']['id'], 'return' => 'edit', 'return_item' => $this->data['table']['id'] ), true, 'admin-post.php' ) ) . "',\n";
259 + echo "};\n";
260 +
261 + echo "</script>\n";
262 +
263 + echo '<div id="tablepress-edit-screen"></div>'; // React container.
264 + }
265 +
266 + /**
267 + * Prints the content of the "Table Information" post meta box.
268 + *
205 269 * @since 1.0.0
206 270 *
207 271 * @param array<string, mixed> $data Data for this screen.
208 272 * @param array<string, mixed> $box Information about the meta box.
@@ -207,33 +271,10 @@
207 271 * @param array<string, mixed> $data Data for this screen.
208 272 * @param array<string, mixed> $box Information about the meta box.
209 273 */
210 274 public function postbox_table_information( array $data, array $box ): void {
211 - ?>
212 -<table class="tablepress-postbox-table fixed">
213 - <tr class="bottom-border">
214 - <th class="column-1" scope="row"><label for="table-id"><?php _e( 'Table ID', 'tablepress' ); ?>:</label></th>
215 - <td class="column-2">
216 - <div id="table-id-shortcode-wrapper">
217 - <input type="text" id="table-id" value="<?php echo esc_attr( $data['table']['id'] ); ?>" title="<?php esc_attr_e( 'The Table ID can only consist of letters, numbers, hyphens (-), and underscores (_).', 'tablepress' ); ?>" pattern="[A-Za-z1-9_-]|[A-Za-z0-9_-]{2,}" required<?php echo ( ! current_user_can( 'tablepress_edit_table_id', $data['table']['id'] ) ) ? ' readonly' : ''; ?>>
218 - <div><label for="table-information-shortcode"><?php _e( 'Shortcode', 'tablepress' ); ?>:</label> <input type="text" id="table-information-shortcode" value="<?php echo esc_attr( '[' . TablePress::$shortcode . " id={$data['table']['id']} /]" ); ?>" readonly></div>
219 - </div>
220 - </td>
221 - </tr>
222 - <tr class="top-border">
223 - <th class="column-1" scope="row"><label for="table-name"><?php _e( 'Table Name', 'tablepress' ); ?>:</label></th>
224 - <td class="column-2"><input type="text" id="table-name" class="large-text" value="<?php echo esc_attr( $data['table']['name'] ); ?>"></td>
225 - </tr>
226 - <tr class="bottom-border">
227 - <th class="column-1 top-align" scope="row"><label for="table-description"><?php _e( 'Description', 'tablepress' ); ?>:</label></th>
228 - <td class="column-2"><textarea id="table-description" class="large-text" rows="4"><?php echo esc_textarea( $data['table']['description'] ); ?></textarea></td>
229 - </tr>
230 - <tr class="top-border">
231 - <th class="column-1" scope="row"><?php _e( 'Last Modified', 'tablepress' ); ?>:</th>
232 - <td class="column-2"><?php printf( __( '%1$s by %2$s', 'tablepress' ), '<span id="last-modified">' . TablePress::format_datetime( $data['table']['last_modified'] ) . '</span>', '<span id="last-editor">' . TablePress::get_user_display_name( $data['table']['options']['last_editor'] ) . '</span>' ); ?></td>
233 - </tr>
234 -</table>
235 - <?php
275 + echo '<div id="tablepress-table-information-section"></div>';
276 +
236 277 if ( ! TABLEPRESS_IS_PLAYGROUND_PREVIEW && tb_tp_fs()->is_free_plan() ) :
237 278 ?>
238 279 <div class="postbox premium-features">
239 280 <div>
@@ -238,9 +279,9 @@
238 279 <div class="postbox premium-features">
239 280 <div>
240 281 <div>
241 282 <div class="postbox-header">
242 - <h2><span class="dashicons dashicons-heart"></span> <?php _e( 'TablePress has more to offer!', 'tablepress' ); ?></h2>
283 + <h2><span class="dashicons dashicons-lightbulb"></span> <?php _e( 'TablePress has more to offer!', 'tablepress' ); ?></h2>
243 284 </div>
244 285 <div class="inside">
245 286 <?php
246 287 TablePress::init_modules();
@@ -266,9 +307,9 @@
266 307 endif;
267 308 }
268 309
269 310 /**
270 - * Print the content of the "Table Content" post meta box.
311 + * Prints the content of the "Table Content" post meta box.
271 312 *
272 313 * @since 1.0.0
273 314 *
274 315 * @param array<string, mixed> $data Data for this screen.
@@ -274,32 +315,8 @@
274 315 * @param array<string, mixed> $data Data for this screen.
275 316 * @param array<string, mixed> $box Information about the meta box.
276 317 */
277 318 public function postbox_table_data( array $data, array $box ): void {
278 - echo "<script>\n";
279 - echo "window.tp = window.tp || {};\n";
280 -
281 - echo "tp.nonces = {};\n";
282 - echo "tp.nonces.edit_table = '" . wp_create_nonce( TablePress::nonce( $this->action, $data['table']['id'] ) ) . "';\n";
283 - echo "tp.nonces.preview_table = '" . wp_create_nonce( TablePress::nonce( 'preview_table', $data['table']['id'] ) ) . "';\n";
284 - echo "tp.nonces.copy_table = '" . wp_create_nonce( TablePress::nonce( 'copy_table', $data['table']['id'] ) ) . "';\n";
285 - echo "tp.nonces.delete_table = '" . wp_create_nonce( TablePress::nonce( 'delete_table', $data['table']['id'] ) ) . "';\n";
286 - echo "tp.nonces.screen_options = '" . wp_create_nonce( TablePress::nonce( 'screen_options' ) ) . "';\n";
287 -
288 - echo "tp.table = {};\n";
289 - echo "tp.table.shortcode = '" . esc_js( TablePress::$shortcode ) . "';\n";
290 - echo "tp.table.id = '{$data['table']['id']}';\n";
291 - echo "tp.table.new_id = '{$data['table']['id']}';\n";
292 - // JSON-encode array items separately to save some PHP memory.
293 - foreach ( array( 'data', 'options', 'visibility' ) as $item ) {
294 - $json = $this->admin_page->convert_to_json_parse_output( $data['table'][ $item ] );
295 - printf( 'tp.table.%1$s = %2$s;' . "\n", $item, $json );
296 - }
297 -
298 - echo "tp.screen_options = {};\n";
299 - echo 'tp.screen_options.table_editor_column_width = ' . absint( TablePress::$model_options->get( 'table_editor_column_width' ) ) . ";\n";
300 - echo "</script>\n";
301 -
302 319 $css_variables = '--table-editor-line-clamp:' . absint( TablePress::$model_options->get( 'table_editor_line_clamp' ) ) . ';';
303 320 $css_variables = esc_attr( $css_variables );
304 321 echo "<div id=\"table-editor\" style=\"{$css_variables}\"></div>";
305 322 }
@@ -304,9 +321,9 @@
304 321 echo "<div id=\"table-editor\" style=\"{$css_variables}\"></div>";
305 322 }
306 323
307 324 /**
308 - * Print the content of the "Table Manipulation" post meta box.
325 + * Prints the content of the "Table Manipulation" post meta box.
309 326 *
310 327 * @since 1.0.0
311 328 *
312 329 * @param array<string, mixed> $data Data for this screen.
@@ -312,77 +329,13 @@
312 329 * @param array<string, mixed> $data Data for this screen.
313 330 * @param array<string, mixed> $box Information about the meta box.
314 331 */
315 332 public function postbox_table_manipulation( array $data, array $box ): void {
316 - ?>
317 -<table id="tablepress-manipulation-controls" class="tablepress-postbox-table fixed">
318 - <tr class="bottom-border">
319 - <td class="column-1">
320 - <?php _e( 'Selected cells', 'tablepress' ); ?>:&nbsp;
321 - <input type="button" class="button" id="button-insert-link" value="<?php esc_attr_e( 'Insert Link', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$sL', 'keyboard shortcut for Insert Link', 'tablepress' ) ); ?>">
322 - <input type="button" class="button" id="button-insert-image" value="<?php esc_attr_e( 'Insert Image', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$sI', 'keyboard shortcut for Insert Image', 'tablepress' ) ); ?>">
323 - <input type="button" class="button" id="button-advanced-editor" value="<?php esc_attr_e( 'Advanced Editor', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$sE', 'keyboard shortcut for Advanced Editor', 'tablepress' ) ); ?>">
324 - </td>
325 - <td class="column-2">
326 - <?php _e( 'Selected cells', 'tablepress' ); ?>:&nbsp;
327 - <input type="button" class="button button-merge-unmerge" data-action="merge" value="<?php esc_attr_e( 'Combine/Merge', 'tablepress' ); ?>">
328 - <input type="button" class="button button-show-help-box" value="<?php esc_attr_e( '?', 'tablepress' ); ?>" title="<?php esc_attr_e( 'Help on combining cells', 'tablepress' ); ?>" data-help-box="#help-box-combine-cells">
329 - </td>
330 - </tr>
331 - <tr class="top-border">
332 - <td class="column-1">
333 - <?php _e( 'Selected rows', 'tablepress' ); ?>:&nbsp;
334 - <input type="button" class="button button-insert-duplicate" data-type="rows" data-action="duplicate" value="<?php esc_attr_e( 'Duplicate', 'tablepress' ); ?>">
335 - <input type="button" class="button button-insert-duplicate" data-type="rows" data-action="insert" value="<?php esc_attr_e( 'Insert', 'tablepress' ); ?>">
336 - <input type="button" class="button button-remove" data-type="rows" value="<?php esc_attr_e( 'Delete', 'tablepress' ); ?>">
337 - </td>
338 - <td class="column-2">
339 - <?php _e( 'Selected columns', 'tablepress' ); ?>:&nbsp;
340 - <input type="button" class="button button-insert-duplicate" data-type="columns" data-action="duplicate" value="<?php esc_attr_e( 'Duplicate', 'tablepress' ); ?>">
341 - <input type="button" class="button button-insert-duplicate" data-type="columns" data-action="insert" value="<?php esc_attr_e( 'Insert', 'tablepress' ); ?>">
342 - <input type="button" class="button button-remove" data-type="columns" value="<?php esc_attr_e( 'Delete', 'tablepress' ); ?>">
343 - </td>
344 - </tr>
345 - <tr>
346 - <td class="column-1">
347 - <?php _e( 'Selected rows', 'tablepress' ); ?>:&nbsp;
348 - <input type="button" class="button button-move" data-type="rows" data-direction="up" value="<?php esc_attr_e( 'Move up', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$s⇧↑', 'keyboard shortcut for Move up', 'tablepress' ) ); ?>">
349 - <input type="button" class="button button-move" data-type="rows" data-direction="down" value="<?php esc_attr_e( 'Move down', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$s⇧↓', 'keyboard shortcut for Move down', 'tablepress' ) ); ?>">
350 - </td>
351 - <td class="column-2">
352 - <?php _e( 'Selected columns', 'tablepress' ); ?>:&nbsp;
353 - <input type="button" class="button button-move" data-type="columns" data-direction="left" value="<?php esc_attr_e( 'Move left', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$s⇧←', 'keyboard shortcut for Move left', 'tablepress' ) ); ?>">
354 - <input type="button" class="button button-move" data-type="columns" data-direction="right" value="<?php esc_attr_e( 'Move right', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$s⇧→', 'keyboard shortcut for Move right', 'tablepress' ) ); ?>">
355 - </td>
356 - </tr>
357 - <tr class="bottom-border">
358 - <td class="column-1">
359 - <?php _e( 'Selected rows', 'tablepress' ); ?>:&nbsp;
360 - <input type="button" class="button button-hide-unhide" data-type="rows" data-action="hide" value="<?php esc_attr_e( 'Hide', 'tablepress' ); ?>">
361 - <input type="button" class="button button-hide-unhide" data-type="rows" data-action="unhide" value="<?php esc_attr_e( 'Show', 'tablepress' ); ?>">
362 - </td>
363 - <td class="column-2">
364 - <?php _e( 'Selected columns', 'tablepress' ); ?>:&nbsp;
365 - <input type="button" class="button button-hide-unhide" data-type="columns" data-action="hide" value="<?php esc_attr_e( 'Hide', 'tablepress' ); ?>">
366 - <input type="button" class="button button-hide-unhide" data-type="columns" data-action="unhide" value="<?php esc_attr_e( 'Show', 'tablepress' ); ?>">
367 - </td>
368 - </tr>
369 - <tr class="top-border">
370 - <td class="column-1">
371 - <label><?php printf( __( 'Add %s row(s)', 'tablepress' ), '<input type="number" id="rows-append-number" class="small-text" title="' . esc_attr__( 'This field must contain a positive number.', 'tablepress' ) . '" value="1" min="1" max="99999" required>' ); ?></label>&nbsp;
372 - <input type="button" class="button button-append" data-type="rows" value="<?php esc_attr_e( 'Add', 'tablepress' ); ?>">
373 - </td>
374 - <td class="column-2">
375 - <label><?php printf( __( 'Add %s column(s)', 'tablepress' ), '<input type="number" id="columns-append-number" class="small-text" title="' . esc_attr__( 'This field must contain a positive number.', 'tablepress' ) . '" value="1" min="1" max="99999" required>' ); ?></label>&nbsp;
376 - <input type="button" class="button button-append" data-type="columns" value="<?php esc_attr_e( 'Add', 'tablepress' ); ?>">
377 - </td>
378 - </tr>
379 -</table>
380 - <?php
333 + echo '<div id="tablepress-table-manipulation-section"></div>';
381 334 }
382 335
383 336 /**
384 - * Print the "Preview" and "Save Changes" button.
337 + * Prints the container for the "Preview" and "Save Changes" buttons.
385 338 *
386 339 * @since 1.0.0
387 340 *
388 341 * @param array<string, mixed> $data Data for this screen.
@@ -388,22 +341,14 @@
388 341 * @param array<string, mixed> $data Data for this screen.
389 342 * @param array<string, mixed> $box Information about the text box.
390 343 */
391 344 public function textbox_buttons( array $data, array $box ): void {
392 - $preview_url = TablePress::url( array( 'action' => 'preview_table', 'item' => $data['table']['id'], 'return' => 'edit', 'return_item' => $data['table']['id'] ), true, 'admin-post.php' );
393 -
394 - echo '<p id="' . $box['id'] . '-submit" class="submit">';
395 - if ( current_user_can( 'tablepress_preview_table', $data['table']['id'] ) ) {
396 - echo '<a href="' . $preview_url . '" class="button button-large button-preview" target="_blank" data-shortcut="' . esc_attr( _x( '%1$sP', 'keyboard shortcut for Preview', 'tablepress' ) ) . '">' . __( 'Preview', 'tablepress' ) . '</a>';
397 - }
398 - ?>
399 - <input type="button" class="button button-primary button-large button-save-changes" value="<?php esc_attr_e( 'Save Changes', 'tablepress' ); ?>" data-shortcut="<?php echo esc_attr( _x( '%1$sS', 'keyboard shortcut for Save Changes', 'tablepress' ) ); ?>">
400 - <?php
401 - echo '</p>';
345 + echo '<div id="tablepress-' . $box['id'] . '-section" class="section-has-react-loading-text">';
346 + echo '</div>';
402 347 }
403 348
404 349 /**
405 - * Print the "Delete Table" and "Export Table" buttons.
350 + * Prints the container for the "Copy Table, "Export Table", and "Delete Table" buttons.
406 351 *
407 352 * @since 1.0.0
408 353 *
409 354 * @param array<string, mixed> $data Data for this screen.
@@ -409,32 +354,13 @@
409 354 * @param array<string, mixed> $data Data for this screen.
410 355 * @param array<string, mixed> $box Information about the text box.
411 356 */
412 357 public function textbox_other_actions( array $data, array $box ): void {
413 - $user_can_copy_table = current_user_can( 'tablepress_copy_table', $data['table']['id'] );
414 - $user_can_export_table = current_user_can( 'tablepress_export_table', $data['table']['id'] );
415 - $user_can_delete_table = current_user_can( 'tablepress_delete_table', $data['table']['id'] );
416 -
417 - if ( ! $user_can_copy_table && ! $user_can_export_table && ! $user_can_delete_table ) {
418 - return;
419 - }
420 -
421 - echo '<p class="submit">';
422 - echo __( 'Other Actions', 'tablepress' ) . ':&nbsp; ';
423 - if ( $user_can_copy_table ) {
424 - echo '<a href="' . esc_url( TablePress::url( array( 'action' => 'copy_table', 'item' => $data['table']['id'], 'return' => 'edit' ), true, 'admin-post.php' ) ) . '" class="button button-copy">' . __( 'Copy Table', 'tablepress' ) . '</a> ';
425 - }
426 - if ( $user_can_export_table ) {
427 - echo '<a href="' . esc_url( TablePress::url( array( 'action' => 'export', 'table_id' => $data['table']['id'] ) ) ) . '" class="button button-export">' . __( 'Export Table', 'tablepress' ) . '</a> ';
428 - }
429 - if ( $user_can_delete_table ) {
430 - echo '<a href="' . esc_url( TablePress::url( array( 'action' => 'delete_table', 'item' => $data['table']['id'], 'return' => 'edit', 'return_item' => $data['table']['id'] ), true, 'admin-post.php' ) ) . '" class="button button-delete delete-link">' . __( 'Delete Table', 'tablepress' ) . '</a>';
431 - }
432 - echo '</p>';
358 + echo '<div id="tablepress-other-actions-section"></div>';
433 359 }
434 360
435 361 /**
436 - * Print the hidden containers for the Preview.
362 + * Prints the hidden containers for the Preview.
437 363 *
438 364 * @since 1.0.0
439 365 *
440 366 * @param array<string, mixed> $data Data for this screen.
@@ -441,8 +367,9 @@
441 367 * @param array<string, mixed> $box Information about the text box.
442 368 */
443 369 public function textbox_hidden_containers( array $data, array $box ): void {
444 370 ?>
371 +<div id="tablepress-table-preview-section"></div>
445 372 <div class="hidden-container">
446 373 <div id="advanced-editor">
447 374 <label id="advanced-editor-label" for="advanced-editor-content" class="screen-reader-text"><?php esc_html_e( 'Advanced Editor', 'tablepress' ); ?></label>
448 375 <?php
@@ -455,32 +382,15 @@
455 382 );
456 383 wp_editor( '', 'advanced-editor-content', $wp_editor_options );
457 384 ?>
458 385 </div>
459 -</div>
460 -<div id="preview-container" class="hidden-container">
461 - <div id="table-preview">
462 - <iframe id="table-preview-iframe" src="about:blank"></iframe>
463 - </div>
464 -</div>
465 -<div class="hidden-container">
466 386 <textarea id="textarea-insert-helper" class="hidden"></textarea>
467 387 </div>
468 -<div id="help-box-combine-cells" class="help-box hidden-container" title="<?php esc_attr_e( 'Help on combining cells', 'tablepress' ); ?>" data-height="380" data-width="420">
469 388 <?php
470 - echo '<p>' . __( 'Table cells can span across more than one column or row.', 'tablepress' ) . '</p>';
471 - echo '<p>' . __( 'Combining consecutive cells within the same row is called &#8220;colspanning&#8221;.', 'tablepress' )
472 - . ' ' . __( 'Combining consecutive cells within the same column is called &#8220;rowspanning&#8221;.', 'tablepress' ) . '</p>';
473 - echo '<p>' . sprintf( __( 'To combine adjacent cells, select the desired cells and click the “%s” button or use the context menu.', 'tablepress' ), __( 'Combine/Merge', 'tablepress' ) )
474 - . ' ' . __( 'The corresponding keywords, <code>#colspan#</code> and <code>#rowspan#</code>, will then be added for you.', 'tablepress' ) . '</p>';
475 - echo '<p><strong>' . __( 'Be aware that the Table Features for Site Visitors, like sorting, filtering, and pagination, will not work on tables which have combined cells.', 'tablepress' ) . '</strong></p>';
476 - ?>
477 -</div>
478 - <?php
479 389 }
480 390
481 391 /**
482 - * Print the content of the "Table Options" post meta box.
392 + * Prints the content of the "Table Options" post meta box.
483 393 *
484 394 * @since 1.0.0
485 395 *
486 396 * @param array<string, mixed> $data Data for this screen.
@@ -486,56 +396,13 @@
486 396 * @param array<string, mixed> $data Data for this screen.
487 397 * @param array<string, mixed> $box Information about the meta box.
488 398 */
489 399 public function postbox_table_options( array $data, array $box ): void {
490 - ?>
491 -<table class="tablepress-postbox-table fixed">
492 - <tr>
493 - <th class="column-1" scope="row"><?php _e( 'Table Head Row', 'tablepress' ); ?>:</th>
494 - <td class="column-2"><label for="option-table_head"><input type="checkbox" id="option-table_head" name="table_head"> <?php _e( 'The first row of the table is the table header.', 'tablepress' ); ?></label></td>
495 - </tr>
496 - <tr class="bottom-border">
497 - <th class="column-1" scope="row"><?php _e( 'Table Foot Row', 'tablepress' ); ?>:</th>
498 - <td class="column-2"><label for="option-table_foot"><input type="checkbox" id="option-table_foot" name="table_foot"> <?php _e( 'The last row of the table is the table footer.', 'tablepress' ); ?></label></td>
499 - </tr>
500 - <tr class="top-border">
501 - <th class="column-1" scope="row"><?php _e( 'Alternating Row Colors', 'tablepress' ); ?>:</th>
502 - <td class="column-2"><label for="option-alternating_row_colors"><input type="checkbox" id="option-alternating_row_colors" name="alternating_row_colors"> <?php _e( 'The background colors of consecutive rows shall alternate.', 'tablepress' ); ?></label></td>
503 - </tr>
504 - <tr class="bottom-border">
505 - <th class="column-1" scope="row"><?php _e( 'Row Hover Highlighting', 'tablepress' ); ?>:</th>
506 - <td class="column-2"><label for="option-row_hover"><input type="checkbox" id="option-row_hover" name="row_hover"> <?php _e( 'Highlight a row while the mouse cursor hovers above it by changing its background color.', 'tablepress' ); ?></label></td>
507 - </tr>
508 - <tr class="top-border">
509 - <th class="column-1" scope="row"><label for="option-print_name"><?php _e( 'Print Table Name', 'tablepress' ); ?></label>:</th>
510 - <?php
511 - $position_select = '<select id="option-print_name_position" name="print_name_position">';
512 - $position_select .= '<option value="above">' . __( 'above', 'tablepress' ) . '</option>';
513 - $position_select .= '<option value="below">' . __( 'below', 'tablepress' ) . '</option>';
514 - $position_select .= '</select>';
515 - ?>
516 - <td class="column-2"><input type="checkbox" id="option-print_name" name="print_name"> <label><?php printf( _x( 'Show the table name %s the table.', 'position (above or below)', 'tablepress' ), $position_select ); ?></label></td>
517 - </tr>
518 - <tr class="bottom-border">
519 - <th class="column-1" scope="row"><label for="option-print_description"><?php _e( 'Print Table Description', 'tablepress' ); ?></label>:</th>
520 - <?php
521 - $position_select = '<select id="option-print_description_position" name="print_description_position">';
522 - $position_select .= '<option value="above">' . __( 'above', 'tablepress' ) . '</option>';
523 - $position_select .= '<option value="below">' . __( 'below', 'tablepress' ) . '</option>';
524 - $position_select .= '</select>';
525 - ?>
526 - <td class="column-2"><input type="checkbox" id="option-print_description" name="print_description"> <label><?php printf( _x( 'Show the table description %s the table.', 'position (above or below)', 'tablepress' ), $position_select ); ?></label></td>
527 - </tr>
528 - <tr class="top-border">
529 - <th class="column-1" scope="row"><?php _e( 'Extra CSS Classes', 'tablepress' ); ?>:</th>
530 - <td class="column-2"><label for="option-extra_css_classes"><input type="text" id="option-extra_css_classes" name="extra_css_classes" class="large-text code" title="<?php esc_attr_e( 'This field can only contain letters, numbers, spaces, hyphens (-), underscores (_), and colons (:).', 'tablepress' ); ?>" pattern="[A-Za-z0-9- _:]*"><p class="description"><?php echo __( 'Additional CSS classes for styling purposes can be entered here.', 'tablepress' ) . ' ' . sprintf( __( 'This is NOT the place to enter <a href="%s">Custom CSS</a> code!', 'tablepress' ), TablePress::url( array( 'action' => 'options' ) ) ); ?></p></label></td>
531 - </tr>
532 -</table>
533 - <?php
400 + echo '<div id="tablepress-table-options-section"></div>';
534 401 }
535 402
536 403 /**
537 - * Print the content of the "Table Features for Site Visitors" post meta box.
404 + * Prints the content of the "Table Features for Site Visitors" post meta box.
538 405 *
539 406 * @since 1.0.0
540 407 *
541 408 * @param array<string, mixed> $data Data for this screen.
@@ -541,57 +408,13 @@
541 408 * @param array<string, mixed> $data Data for this screen.
542 409 * @param array<string, mixed> $box Information about the meta box.
543 410 */
544 411 public function postbox_datatables_features( array $data, array $box ): void {
545 - ?>
546 -<p id="notice-datatables-head-row"><em><?php printf( __( 'These features and options are only available when the &#8220;%1$s&#8221; checkbox in the &#8220;%2$s&#8221; section is checked.', 'tablepress' ), __( 'Table Head Row', 'tablepress' ), __( 'Table Options', 'tablepress' ) ); ?></em></p>
547 -<table class="tablepress-postbox-table fixed">
548 - <tr class="bottom-border">
549 - <th class="column-1" scope="row"><?php _e( 'Enable Visitor Features', 'tablepress' ); ?>:</th>
550 - <td class="column-2"><label for="option-use_datatables"><input type="checkbox" id="option-use_datatables" name="use_datatables"> <?php _e( 'Offer the following functions for site visitors with this table:', 'tablepress' ); ?></label></td>
551 - </tr>
552 - <tr class="top-border">
553 - <th class="column-1" scope="row"><?php _e( 'Sorting', 'tablepress' ); ?>:</th>
554 - <td class="column-2"><label for="option-datatables_sort"><input type="checkbox" id="option-datatables_sort" name="datatables_sort"> <?php _e( 'Enable sorting of the table by the visitor.', 'tablepress' ); ?></label></td>
555 - </tr>
556 - <tr>
557 - <th class="column-1" scope="row"><?php _e( 'Search/Filtering', 'tablepress' ); ?>:</th>
558 - <td class="column-2"><label for="option-datatables_filter"><input type="checkbox" id="option-datatables_filter" name="datatables_filter"> <?php _e( 'Enable the visitor to filter or search the table. Only rows with the search word in them are shown.', 'tablepress' ); ?></label></td>
559 - </tr>
560 - <tr>
561 - <th class="column-1" scope="row" style="vertical-align: top;"><?php _e( 'Pagination', 'tablepress' ); ?>:</th>
562 - <td class="column-2"><label for="option-datatables_paginate"><input type="checkbox" id="option-datatables_paginate" name="datatables_paginate"> <?php _e( 'Enable pagination of the table (viewing only a certain number of rows at a time) by the visitor.', 'tablepress' ); ?></label><br>
563 - <label for="option-datatables_paginate_entries" class="checkbox-left">&nbsp;<?php printf( __( 'Show %s rows per page.', 'tablepress' ), '<input type="number" id="option-datatables_paginate_entries" class="small-text" name="datatables_paginate_entries" min="1" max="99999" required>' ); ?></label></td>
564 - </tr>
565 - <tr>
566 - <th class="column-1" scope="row"><?php _e( 'Pagination Length Change', 'tablepress' ); ?>:</th>
567 - <td class="column-2"><label for="option-datatables_lengthchange"><input type="checkbox" id="option-datatables_lengthchange" name="datatables_lengthchange"> <?php _e( 'Allow the visitor to change the number of rows shown when using pagination.', 'tablepress' ); ?></label></td>
568 - </tr>
569 - <tr>
570 - <th class="column-1" scope="row"><?php _e( 'Info', 'tablepress' ); ?>:</th>
571 - <td class="column-2"><label for="option-datatables_info"><input type="checkbox" id="option-datatables_info" name="datatables_info"> <?php _e( 'Enable the table information display, with information about the currently visible data, like the number of rows.', 'tablepress' ); ?></label></td>
572 - </tr>
573 - <tr<?php echo current_user_can( 'unfiltered_html' ) ? ' class="bottom-border"' : ''; ?>>
574 - <th class="column-1" scope="row"><?php _e( 'Horizontal Scrolling', 'tablepress' ); ?>:</th>
575 - <td class="column-2"><label for="option-datatables_scrollx"><input type="checkbox" id="option-datatables_scrollx" name="datatables_scrollx"> <?php _e( 'Enable horizontal scrolling, to make viewing tables with many columns easier.', 'tablepress' ); ?></label></td>
576 - </tr>
577 - <?php
578 - // "Custom Commands" must only be available to trusted users.
579 - if ( current_user_can( 'unfiltered_html' ) ) {
580 - ?>
581 - <tr class="top-border">
582 - <th class="column-1" scope="row"><?php _e( 'Custom Commands', 'tablepress' ); ?>:</th>
583 - <td class="column-2"><label for="option-datatables_custom_commands"><textarea id="option-datatables_custom_commands" name="datatables_custom_commands" class="large-text code" rows="1"></textarea><p class="description"><?php echo sprintf( __( 'Additional parameters from the <a href="%s">DataTables documentation</a> to be added to the JS call.', 'tablepress' ), 'https://www.datatables.net/' ) . ' ' . __( 'For advanced use only.', 'tablepress' ); ?></p></label></td>
584 - </tr>
585 - <?php
586 - } // if
587 - ?>
588 -</table>
589 - <?php
412 + echo '<div id="tablepress-datatables-features-section"></div>';
590 413 }
591 414
592 415 /**
593 - * Print a notification about a corrupted table.
416 + * Prints a notification about a corrupted table.
594 417 *
595 418 * @since 1.4.0
596 419 *
597 420 * @param array<string, mixed> $data Data for this screen.
@@ -598,35 +421,40 @@
598 421 * @param array<string, mixed> $box Information about the text box.
599 422 */
600 423 public function textbox_corrupted_table( array $data, array $box ): void {
601 424 ?>
602 - <div class="notice notice-error notice-large">
603 - <h3><em>
604 - <?php _e( 'Attention: Unfortunately, an error occurred.', 'tablepress' ); ?>
605 - </em></h3>
606 - <p>
607 - <?php
608 - printf( __( 'The internal data of table &#8220;%1$s&#8221; (ID %2$s) is corrupted.', 'tablepress' ), esc_html( $data['table']['name'] ), esc_html( $data['table']['id'] ) );
609 - echo ' ';
610 - printf( __( 'The following error was registered: %s.', 'tablepress' ), '<code>' . esc_html( $data['table']['json_error'] ) . '</code>' );
611 - ?>
612 - </p>
613 - <p>
614 - <?php
615 - _e( 'Because of this error, the table can not be edited at this time, to prevent possible further data loss.', 'tablepress' );
616 - echo ' ';
617 - printf( __( 'Please see the <a href="%s">TablePress FAQ page</a> for further instructions.', 'tablepress' ), 'https://tablepress.org/faq/corrupted-tables/' );
618 - ?>
619 - </p>
620 - <p>
621 - <?php echo '<a href="' . esc_url( TablePress::url( array( 'action' => 'list' ) ) ) . '" class="button">' . __( 'Back to the List of Tables', 'tablepress' ) . '</a>'; ?>
622 - </p>
425 + <div class="notice components-notice is-error">
426 + <div class="components-notice__content">
427 + <h3><em>
428 + <?php _e( 'Attention: Unfortunately, an error occurred.', 'tablepress' ); ?>
429 + </em></h3>
430 + <p>
431 + <?php
432 + /* translators: %1$s: Table name, %2$s: Table ID */
433 + printf( __( 'The internal data of table &#8220;%1$s&#8221; (ID %2$s) is corrupted.', 'tablepress' ), esc_html( $data['table']['name'] ), esc_html( $data['table']['id'] ) );
434 + echo ' ';
435 + /* translators: %s: Error message */
436 + printf( __( 'The following error was registered: %s.', 'tablepress' ), '<code>' . esc_html( $data['table']['json_error'] ) . '</code>' );
437 + ?>
438 + </p>
439 + <p>
440 + <?php
441 + _e( 'Because of this error, the table can not be edited at this time, to prevent possible further data loss.', 'tablepress' );
442 + echo ' ';
443 + /* translators: %s: URL to TablePress FAQ page */
444 + printf( __( 'Please see the <a href="%s">TablePress FAQ page</a> for further instructions.', 'tablepress' ), 'https://tablepress.org/faq/corrupted-tables/' );
445 + ?>
446 + </p>
447 + <p>
448 + <?php echo '<a href="' . esc_url( TablePress::url( array( 'action' => 'list' ) ) ) . '" class="components-button is-secondary is-compact">' . __( 'Back to the List of Tables', 'tablepress' ) . '</a>'; ?>
449 + </p>
450 + </div>
623 451 </div>
624 452 <?php
625 453 }
626 454
627 455 /**
628 - * Print the screen head text.
456 + * Prints the screen head text.
629 457 *
630 458 * @since 1.0.0
631 459 *
632 460 * @param array<string, mixed> $data Data for this screen.
@@ -636,10 +464,12 @@
636 464 echo '<p>';
637 465 _e( 'To edit the content or modify the structure of this table, use the input fields and buttons below.', 'tablepress' );
638 466 echo ' ';
639 467 // Show the instructions string depending on whether the Block Editor is used on the site or not.
640 - if ( $data['site_uses_block_editor'] ) {
468 + if ( 'block' === $data['site_used_editor'] ) {
641 469 printf( __( 'To insert a table into a post or page, add a “%1$s” block in the block editor and select the desired table.', 'tablepress' ), __( 'TablePress table', 'tablepress' ) );
470 + } elseif ( 'elementor' === $data['site_used_editor'] ) {
471 + printf( __( 'To insert a table into a post or page, add a “%1$s” widget in the Elementor editor and select the desired table.', 'tablepress' ), __( 'TablePress table', 'tablepress' ) );
642 472 } else {
643 473 _e( 'To insert a table into a post or page, paste its Shortcode at the desired place in the editor.', 'tablepress' );
644 474 }
645 475 echo '</p>';
@@ -659,9 +489,9 @@
659 489 '#table-editor',
660 490 array(
661 491 'content' => $content,
662 492 'position' => array( 'edge' => 'bottom', 'align' => 'center' ),
663 - )
493 + ),
664 494 );
665 495 }
666 496
667 497 /**
@@ -679,9 +509,9 @@
679 509 array(
680 510 'content' => $content,
681 511 'position' => array( 'edge' => 'top', 'align' => 'right' ),
682 512 'pointerClass' => 'wp-pointer pointer-tp21_edit_screen_options',
683 - )
513 + ),
684 514 );
685 515 }
686 516
687 517 } // class TablePress_Edit_View