Shortcake (Shorcode UI) Support for Gravity Forms

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.


<?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.

Write a Comment