ShortCake UI Demo Plugin

shortcake-ui-demo.php

<?php
/**
* Plugin Name: Shortcake UI Pullquote Demo
* Plugin URI: 
* Description: Try Shortcake with pull-quite shortcode
* Version: 1.0.0
* Author: Mte90
* License: GPL2
*/

add_action( 'init', function() {

    /**
     * Register your shortcode as you would normally.
     * This is a simple example for a pullquote with a citation.
     */
    add_shortcode( 'pullquote', function( $attr, $content = '' ) {

        $attr = wp_parse_args( $attr, array(
            'source' => ''
        ) );

        ob_start();

        ?>

        <section class="pullquote">
            <?php echo esc_html( $content ); ?><br/>
            <?php if ( ! empty( $attr['source'] ) ) : ?>
                <cite><em><?php echo esc_html( $attr['source'] ); ?></em></cite>
            <?php endif; ?>
        </section>

        <?php

        return ob_get_clean();
    } );

    /**
     * Register a UI for the Shortcode.
     * Pass the shortcode tag (string)
     * and an array or args.
     */
    shortcode_ui_register_for_shortcode(
        'pullquote',
        array(

            // Display label. String. Required.
            'label' => 'Pullquote',

            // Icon/image for shortcode. Optional. src or dashicons-$icon. Defaults to carrot.
            'listItemImage' => 'dashicons-editor-quote',

            // Available shortcode attributes and default values. Required. Array.
            // Attribute model expects 'attr', 'type' and 'label'
            // Supported field types: text, checkbox, textarea, radio, select, email, url, number, and date.
            'attrs' => array(
                array(
                    'label' => 'Quote',
                    'attr'  => 'content',
                    'type'  => 'textarea',
                ),
                array(
                    'label'       => 'Cite',
                    'attr'        => 'source',
                    'type'        => 'text',
                    'placeholder' => 'Firstname Lastname',
                    'description' => 'Optional',
                ),
            ),
        )
    );

} );