Bard Texstyle

Addon by Jack Sleight

Bard Texstyle Main Screenshot

FYI: This addon supersedes Bard Paragraph Style, it offers everything that did and more! If you're using that already check the migration guide.

This Statamic addon gives you the ability to add custom heading, paragraph and inline (span) text styles to the Bard fieldtype.

Installation

You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:

composer require jacksleight/statamic-bard-texstyle

Configuration

Publish the config:

php please vendor:publish --tag=statamic-bard-texstyle-config

Open config/statamic/bard_texstyle.php and add your styles:

'styles' => [

    'intro' => [
        'type'   => 'paragraph',
        'name'   => 'Introduction',
        'ident'  => 'I',
        'class'  => 'introduction',
        'cp_css' => 'font-size: 1.25em',
    ],

],

Each style must have a key which is used as the button name. Styles can have the following options:

  • type (string)
    The type (heading, paragraph or span).
  • level (string)
    The heading level (only applicable to heading styles).
  • name (string)
    The name of the style. This will appear in the tooltip.
  • ident (string)
    A short identification string (one or two characters). This will appear in the button.
  • class (string)
    The class name that will be applied for this style. Must be unique within the type.
  • cp_css (string)
    The CSS properties that will be added to the control panel for this style.

Enabling the Buttons

You can enable the buttons in any Bard field, either through the blueprint/fieldset editor or by adding them to the buttons list in the YAML file directly.

When using heading styles the matching h* button must also be enabled in the Bard field.

Default Classes

You can use the default_classes option to apply classes to elements that have no style set:

'default_classes' => [
    'heading' => [
        1 => 'head-1',
        2 => 'head-2',
        // ...
    ],
    'paragraph' => 'para',
],

You can add default classes for any of the nodes and marks supported by Bard Mutator.

Stored Values

By default the class names are saved to your content. If you would prefer to save the style keys instead you can change the store option to key. Saving the style key allows you to rename classes later without having to update all your content, but it does make your content dependant on the Bard Texstyle configuration.

'store' => 'key',

Compatibility

This addon uses Bard Mutator under the hood to extend the built-in Heading and Paragraph node functionality. Please check the compatibility notes for more information.

Bard Texstyle does not support Bard's save_html option.