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

Files in functions/shortcodes/ are loaded automatically.

2. View

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

Helpers

Helper	What it does
miella_shortcode_heading_fields($form, $withButton = true)	Adds Subtitle, Title, Description and (optionally) Button text / URL.
miella_shortcode_section_fields($form, ...)	Adds Vertical spacing and Background.
miella_shortcode_section_class($shortcode, $block)	Returns the section's class list.
miella_section_backgrounds()	The Background choices.
miella_service_icons()	The icon choices for [service-features].
miella_product_sources(), miella_products_by_source()	Product sources used by [product-tabs] and [product-lists].
miella_shortcode_products(...)	Loads products for [product-showcase].
miella_sanitize_choice($value, $allowed, $default)	Returns a select value, or the default if it isn't allowed.