I’ve been using a plugin for WordPress lately called Shortcake (Shortcode UI) which basically provides users a visual interface for inserting and changing shortcodes. I really like it and it makes inserting custom blocks of content beautiful in the WordPress editor.
I was a little bummed to find Gravity Forms doesn’t already support Shortcake, so I added it. Be sure to read the caveat below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Registers Shortcode UI for gravityforms shortcode | |
* | |
* @package theme | |
*/ | |
if ( ! function_exists( '_theme_gravityform_shortcode_ui' ) ) { | |
/** | |
* Shortcode UI function for gravityforms | |
* | |
* @return void | |
*/ | |
function _theme_gravityform_shortcode_ui() { | |
if ( ! class_exists( 'GFAPI' ) ) { | |
return; | |
} | |
$forms = array( | |
'' => __( 'Select a Form', 'gravityforms' ), | |
); | |
$all_forms = GFAPI::get_forms(); | |
foreach ( $all_forms as $form ) : | |
$forms[ $form['id'] ] = $form['title']; | |
endforeach; | |
$fields = array( | |
array( | |
'label' => esc_html__( 'Select a form from the list to add it to your post or page.', 'gravityforms' ), | |
'description' => esc_html__( 'Select a form below to add it to your post or page. Can\'t find your form? Make sure it is active.', 'gravityforms' ), | |
'attr' => 'id', | |
'type' => 'select', | |
'options' => $forms, | |
), | |
array( | |
'label' => esc_html__( 'Display form title', 'gravityforms' ), | |
'description' => esc_html__( 'Whether or not to display the form title.', 'gravityforms' ), | |
'attr' => 'title', | |
'type' => 'radio', | |
'options' => array( | |
'true' => __( 'Yes', 'gravityforms' ), | |
'false' => __( 'No', 'gravityforms' ), | |
), | |
), | |
array( | |
'label' => esc_html__( 'Display form description', 'gravityforms' ), | |
'description' => esc_html__( 'Whether or not to display the form description.', 'gravityforms' ), | |
'attr' => 'description', | |
'type' => 'radio', | |
'options' => array( | |
'true' => __( 'Yes', 'gravityforms' ), | |
'false' => __( 'No', 'gravityforms' ), | |
), | |
), | |
array( | |
'label' => esc_html__( 'Enable AJAX', 'gravityforms' ), | |
'description' => esc_html__( 'Specify whether or not to use AJAX to submit the form.', 'gravityforms' ), | |
'attr' => 'ajax', | |
'type' => 'radio', | |
'options' => array( | |
'true' => __( 'Yes', 'gravityforms' ), | |
'false' => __( 'No', 'gravityforms' ), | |
), | |
), | |
array( | |
'label' => esc_html__( 'Tabindex', 'gravityforms' ), | |
'description' => esc_html__( 'Specify the starting tab index for the fields of this form.', 'gravityforms' ), | |
'attr' => 'tabindex', | |
'type' => 'number', | |
), | |
); | |
/* | |
* Define the Shortcode UI arguments. | |
*/ | |
$shortcode_ui_args = array( | |
/* | |
* How the shortcode should be labeled in the UI. Required argument. | |
*/ | |
'label' => esc_html__( 'Gravity Form', 'gravityforms' ), | |
/* | |
* Include an icon with your shortcode. Optional. | |
* Use a dashicon, or full URL to image. | |
*/ | |
'listItemImage' => 'dashicons-feedback', | |
'attrs' => $fields, | |
); | |
shortcode_ui_register_for_shortcode( 'gravityform', $shortcode_ui_args ); | |
} | |
} | |
add_action( 'register_shortcode_ui', '_theme_gravityform_shortcode_ui' ); |
For the most part this works well, but I noticed one instance where I had to modify the editor stylesheet with this line:
.gform_wrapper { display:block !important; }
That’s it! Haven’t really tested this a ton, but works great on the current site I’m building.