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 hatstore_shortcode_section_fields(
        hatstore_shortcode_heading_fields(ShortcodeForm::createFromArray($attributes), false)
    );
});

Files in functions/shortcodes/ are loaded automatically.

2. View

{{-- partials/shortcodes/quote.blade.php --}}
<section class="{{ hatstore_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 hatstore.scss. Rebuild with npm run prod.

Helpers

Helper	What it does
hatstore_shortcode_heading_fields($form, $withButton = true)	Adds Subtitle, Title, Description and (optionally) Button text / URL.
hatstore_shortcode_section_fields($form, $spacing, $background)	Adds Vertical spacing and Background.
hatstore_shortcode_section_class($shortcode, $block)	Returns the section's class list, e.g. section section--sm section--muted quote.
hatstore_shortcode_products(...)	Loads products for a product shortcode.
hatstore_sanitize_choice($value, $allowed, $default)	Returns a select value, or the default if it isn't allowed.