jacksleight / statamic-bard-texstyle

This Statamic addon allows you to add custom element styles to the Bard fieldtype and edit element attributes.
https://statamic.com/addons/jacksleight/bard-texstyle
Other
12 stars 0 forks source link

Attributes not rendering as classes on nested small tag within h1 tag #56

Closed DanielDarrenJones closed 1 year ago

DanielDarrenJones commented 1 year ago

Bug Description

I have setup a heading 1 tag in bard and inside of it I have nested a small tag with a hardBreak separating its basically the following markup but done in bard:

Example Markup ```html

Line1
Line2

```

The attributes save correctly to the YAML and are displayed in the attribute selected panel for both the H1 and Small Tags, however on the H1 attributes are rendered into the HTML, the attributes for the small tag are neither rendered within the bard field itself nor the outputted html in the frontend.

Screenshot 2023-11-10 at 14 30 42 Screenshot 2023-11-10 at 14 30 18

How to Reproduce

  1. Setup attributes for both heading and small elements
  2. Add a h1 to your bard content
  3. Add Two lines of text separated by a break
  4. Make the second line of text a small tag using bard
  5. Apply attributes directly to the h1 tag
  6. Apply attributes to the small tag

Extra Detail

Texstyle Config ```php [ // ], ​ /* |-------------------------------------------------------------------------- | Attributes (pro only) |-------------------------------------------------------------------------- | | The attributes that can be edited through the attributes panel. | */ ​ 'attributes' => [ ​ 'heading' => [ 'size' => [ 'type' => 'select', 'display' => 'Size', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-size-xxs' => 'XXS', 'bard-size-xs' => 'XS', 'bard-size-sm' => 'SM', 'bard-size-lg' => 'LG', 'bard-size-xl' => 'XL', 'bard-size-2xl' => '2XL', 'bard-size-3xl' => '3XL', 'bard-size-4xl' => '4XL', 'bard-size-5xl' => '5XL', 'bard-size-6xl' => '6XL', 'bard-size-7xl' => '7XL', 'bard-size-8xl' => '8XL', 'bard-size-9xl' => '9XL', 'bard-size-10xl' => '10XL', ], ], 'tracking' => [ 'type' => 'select', 'display' => 'Tracking', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-tracking-tighter' => 'Tighter', 'bard-tracking-tight' => 'Tight', 'bard-tracking-wide' => 'Wide', 'bard-tracking-wider' => 'Wider', 'bard-tracking-widest' => 'Widest', ], ], 'font' => [ 'type' => 'select', 'display' => 'Font', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-font-mfred' => 'MFred', 'bard-font-montserrat' => 'Montserrat', 'bard-font-berlingske' => 'Berlingske', ], ], 'weight' => [ 'type' => 'select', 'display' => 'Font Weight', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-font-weight-light' => 'Light', 'bard-font-weight-medium' => 'Medium', 'bard-font-weight-semibold' => 'Semibold', ], ], 'uppercase' => [ 'type' => 'toggle', 'display' => 'Uppercase', 'default' => null, 'rendered' => 'class', 'values' => [ 'true' => 'bard-case-uppercase', ], ], ], ​ 'paragraph' => [ 'size' => [ 'type' => 'select', 'display' => 'Size', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-size-xxs' => 'XXS', 'bard-size-xs' => 'XS', 'bard-size-sm' => 'SM', 'bard-size-lg' => 'LG', 'bard-size-xl' => 'XL', 'bard-size-2xl' => '2XL', 'bard-size-3xl' => '3XL', 'bard-size-4xl' => '4XL', 'bard-size-5xl' => '5XL', 'bard-size-6xl' => '6XL', 'bard-size-7xl' => '7XL', 'bard-size-8xl' => '8XL', 'bard-size-9xl' => '9XL', 'bard-size-10xl' => '10XL', ], ], 'tracking' => [ 'type' => 'select', 'display' => 'Tracking', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-tracking-tighter' => 'Tighter', 'bard-tracking-tight' => 'Tight', 'bard-tracking-wide' => 'Wide', 'bard-tracking-wider' => 'Wider', 'bard-tracking-widest' => 'Widest', ], ], 'font' => [ 'type' => 'select', 'display' => 'Font', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-font-mfred' => 'MFred', 'bard-font-montserrat' => 'Montserrat', 'bard-font-berlingske' => 'Berlingske', ], ], 'weight' => [ 'type' => 'select', 'display' => 'Font Weight', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-font-weight-light' => 'Light', 'bard-font-weight-medium' => 'Medium', 'bard-font-weight-semibold' => 'Semibold', ], ], 'uppercase' => [ 'type' => 'toggle', 'display' => 'Uppercase', 'default' => null, 'rendered' => 'class', 'values' => [ 'true' => 'bard-case-uppercase', ], ], ], ​ 'small' => [ 'size' => [ 'type' => 'select', 'display' => 'Size', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-size-xxs' => 'XXS', 'bard-size-xs' => 'XS', 'bard-size-sm' => 'SM', 'bard-size-lg' => 'LG', 'bard-size-xl' => 'XL', 'bard-size-2xl' => '2XL', 'bard-size-3xl' => '3XL', 'bard-size-4xl' => '4XL', 'bard-size-5xl' => '5XL', 'bard-size-6xl' => '6XL', 'bard-size-7xl' => '7XL', 'bard-size-8xl' => '8XL', 'bard-size-9xl' => '9XL', 'bard-size-10xl' => '10XL', ], ], 'tracking' => [ 'type' => 'select', 'display' => 'Tracking', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-tracking-tighter' => 'Tighter', 'bard-tracking-tight' => 'Tight', 'bard-tracking-wide' => 'Wide', 'bard-tracking-wider' => 'Wider', 'bard-tracking-widest' => 'Widest', ], ], 'font' => [ 'type' => 'select', 'display' => 'Font', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-font-mfred' => 'MFred', 'bard-font-montserrat' => 'Montserrat', 'bard-font-berlingske' => 'Berlingske', ], ], 'weight' => [ 'type' => 'select', 'display' => 'Font Weight', 'default' => null, 'rendered' => 'class', 'options' => [ '' => 'Default', 'bard-font-weight-light' => 'Light', 'bard-font-weight-medium' => 'Medium', 'bard-font-weight-semibold' => 'Semibold', ], ], 'uppercase' => [ 'type' => 'toggle', 'display' => 'Uppercase', 'default' => null, 'rendered' => 'class', 'values' => [ 'true' => 'bard-case-uppercase', ], ], ], ​ ​ // heading_2, heading_3, paragraph ​ ], ​ /* |-------------------------------------------------------------------------- | Defaults |-------------------------------------------------------------------------- | | Default styles that will be applied to elements with no style set. It's | also possible configure multiple sets of defaults to use with different | Bard fields, refer to the docs for more info. | */ ​ 'defaults' => [ ​ // 'heading_1' => [ // 'class' => 'heading-1', // 'cp_css' => null, // 'cp_badge' => false, // ], // 'heading_2' => [ // 'class' => 'heading-2', // 'cp_css' => null, // 'cp_badge' => false, // ], // 'paragraph' => [ // 'class' => 'paragraph', // 'cp_css' => null, // 'cp_badge' => false, // ], ​ ], ​ /* |-------------------------------------------------------------------------- | Store |-------------------------------------------------------------------------- | | By default the class names are saved to your content. If you would prefer | to save the style keys instead you can change this option to "key". | */ ​ 'store' => 'class', ​ ]; ```

Environment

Environment Application Name: Example Laravel Version: 10.30.1 PHP Version: 8.2.11 Composer Version: 2.5.5 Environment: local Debug Mode: ENABLED URL: example.test/ Maintenance Mode: OFF

Cache Config: NOT CACHED Events: NOT CACHED Routes: NOT CACHED Views: CACHED

Drivers Broadcasting: log Cache: statamic Database: mysql Logs: stack / single Mail: smtp Queue: sync Session: file

Statamic Addons: 4 Antlers: runtime Stache Watcher: Enabled Static Caching: Disabled Version: 4.32.0 PRO

Statamic Addons doefom/currency-fieldtype: 1.2.2 jacksleight/statamic-bard-texstyle: 3.1.3 ndx/statamic-bard-color-picker: 1.2.0 withcandour/aardvark-seo: 3.0.0

jacksleight commented 1 year ago

Depends on https://github.com/statamic/cms/pull/8969

jacksleight commented 1 year ago

Fixed in Statamic v4.34.0.