Add a shortcode

A shortcode is two files with the same name, plus its styles.

1. Registration and admin form

// functions/shortcodes/quote.php
use Webhaki\Shortcode\Compilers\Shortcode;
use Webhaki\Shortcode\Forms\ShortcodeForm;
use Webhaki\Theme\Facades\Theme;

add_shortcode('quote', __('Quote'), __('A large quote'), function (Shortcode $shortcode) {
    return Theme::partial('shortcodes.quote', compact('shortcode'));
});

shortcode()->setAdminConfig('quote', function (array $attributes) {
    return kidstoys_shortcode_section_fields(
        kidstoys_shortcode_heading_fields(ShortcodeForm::createFromArray($attributes), false)
    );
});

Files in functions/shortcodes/ are loaded automatically.

2. View

{{-- partials/shortcodes/quote.blade.php --}}
<section class="{{ kidstoys_shortcode_section_class($shortcode, 'quote') }}" {!! $shortcode->htmlAttributes() !!}>
    <div class="container container--narrow" data-reveal>
        {!! Theme::partial('shortcodes.section-heading', ['subtitle' => $shortcode->subtitle, 'title' => $shortcode->title]) !!}
    </div>
</section>

3. Styles

Create assets/sass/shortcodes/_quote.scss with a .quote block and .quote--{option}-{value} modifiers, then @use it in kidstoys.scss. Rebuild with npm run prod.

Helpers

Helper	What it does
kidstoys_shortcode_heading_fields($form, $withButton = true)	Adds Subtitle, Title, Description and (optionally) Button text / URL.
kidstoys_shortcode_section_fields($form, ...)	Adds Vertical spacing, Background and Wavy edges.
kidstoys_shortcode_section_class($shortcode, $block)	Returns the section's class list.
kidstoys_section_backgrounds()	The Background choices.
kidstoys_bubble_colors()	The six palette colors used by bubbles.
kidstoys_service_icons()	The icon choices for [service-features].
kidstoys_product_sources(), kidstoys_products_by_source()	Product sources used by [product-tabs] and [product-lists].
kidstoys_shortcode_products(...)	Loads products for [product-showcase].
kidstoys_sanitize_choice($value, $allowed, $default)	Returns a select value, or the default if it isn't allowed.