Developers admin requests - aurovrata/cf7-grid-layout GitHub Wiki

The Smart Grid attempts to re-organise the CF7 admin management to bring it back into the fold of the WordPress core framework. The CF7 was developed at a time when little to no admin hooks were made available to customise the dashboard, the author did a great job, but today the plugin is in dire need of a re-write. The Smart Grid does this for the admin requests, and you will notice that the form table and editor are handled using the edit.php and post.php admin pages.

Loading scripts/stylesheets on the editor.

The Smart Grid ensures that all JS/CSS resources are loaded only on the relevant pages. 2 action hooks are provided to ease the loading of resources on the relevant pages so that you don't have to redo the checks.

cf7sg_enqueue_admin_editor_styles action fired when styles are loaded on the form editor page.

cf7sg_enqueue_admin_editor_scripts action fired when scripts are loaded on the form editor page

cf7sg_enqueue_admin_table_styles action fired when styles are loaded on the form table page

cf7sg_enqueue_admin_table_scripts action fired when scripts are loaded on the form table page

Admin Pointers

the Smart grid has a number of dismissible pointers to help users identify new functionality on a page. It also has a filter for developers to add their own pointers when adding additional components on the form admin pages,

/**
 * Filter to add custom pointers for user iterface.
 * @var array $pointers an array of $pointer_id=>array($content, $arrow, $valign) key/value pairs to filter.  The key is the pointer id to identify which ones the user has dismissed.  The value is an array with the message $content, the position of the $arrow (left|right|top|bottom), the vertical alignment ($valign) of the box (center|top|bottom).
 * @return array an array of pointers, which will be checked agains the current user.
 */
$filter_pointers = apply_filters("cf7sg_plugin_pointers-{$screen->id}", array());

the $screen->id is the current page screen object (see get_current_screen()).

The following screen IDs are currently used,

  • edit-wpcf7_contact_form - the form table page.
  • wpcf7_contact_form - the form editor page.

The filter expects an associative array such as,

$pointers['column_controls'] = array($content, 'left', 'center','#grid-form>.container>.row>.columns:first-child>.grid-column>span.icon-code');

the column_controls is a unique ID to ensure the dismissed pointer is properly identified.

the $content is an HTML script to print in the pointer card, for example,

<h3 class="cf7sg-pointer"><?=__('Edit in full screen', 'cf7-grid-layout')?></h3>
<p><?=__('Toggle full-screen mode to ease coding of your form.','cf7-grid-layout')?></p>

left and center parameters indicate where the arrow of the pointer is to be placed and determines how the card is oriented on the screen. options are left|right and top|center|bottom respectively.

Finally the long string in the last parameter is the CSS selector to be used to identify the element to which the arrow of the pointer should point to.

Saving form attributes

In the CF7 plugin there are several ways to hook into the form saving process from the admin editor page. However, one should adhere to WordPress standards where possible which is the practice of this plugin.

Using the WordPress save_post_{$post_type} action works well when extending the CF7 plugin, as although the plugin does not leverage he core post.php admin page to update form posts, it nonetheless calls wp_update_post() function to save the post to the DB which itself triggers the action.

However, this is causes a double call to this action when extending the Smart Grid plugin. The Smart Grid disables the CF7 custom admin page and instead uses the WordPress core post.php page to edit form posts. This leads the the save post action being fired twice, once by the WP core page request, and once by the CF7 plugin, it's saving function is incurred by the Smart Grid plugin in order to ensure it saves all its attributes (the Smart Grid only saves its custom attributes).

The Smart Grid fires the cf7sg_save_post action with the same parameters as the WP save_post action in order to remedy to this issue. Hence you can do something like this to save any custom form attributes set by your plugin,

add_action('admin_init', function(){
  if(is_plugin_active('cf7-grid-layout/cf7-grid-layout.php')){
    add_action('cf7sg_save_post', 'save_form_post'), 10,3);
  }else{
    add_action('save_post_wpcf7_contact_form', 'save_post_mapping', 10,3);
  }
});

the function is_plugin_active() in only activate once WP core is initialised, hence the conditional hooking must be done on admin_init rather than at the time your plugin is loaded.

⚠️ **GitHub.com Fallback** ⚠️