diff --git a/blocks/canvas/ew-block-toolbar/ew-block-toolbar.js b/blocks/canvas/ew-block-toolbar/ew-block-toolbar.js index 512488f76..309b72163 100644 --- a/blocks/canvas/ew-block-toolbar/ew-block-toolbar.js +++ b/blocks/canvas/ew-block-toolbar/ew-block-toolbar.js @@ -122,8 +122,10 @@ class EwBlockToolbar extends LitElement { const picker = this._picker; if (!picker) return; const current = this._currentVariant ?? ''; - if (current === '' || (this._variantOptions || []).includes(current)) { - picker.value = current; + const match = (this._variantOptions || []) + .find((v) => normalizeBlockName(v) === normalizeBlockName(current)); + if (match) { + picker.value = match; picker.labelOverride = ''; } else { picker.value = ''; diff --git a/test/unit/blocks/canvas/ew-block-toolbar/ew-block-toolbar.test.js b/test/unit/blocks/canvas/ew-block-toolbar/ew-block-toolbar.test.js index b038e19b4..2d0893ff0 100644 --- a/test/unit/blocks/canvas/ew-block-toolbar/ew-block-toolbar.test.js +++ b/test/unit/blocks/canvas/ew-block-toolbar/ew-block-toolbar.test.js @@ -103,6 +103,36 @@ describe('ew-block-toolbar', () => { expect(toolbar.shadowRoot.querySelector('nx-picker').value).to.equal('highlight'); }); + it('selects "No variant" when there is no current variant', async () => { + toolbar.show('cards'); + toolbar._variantOptions = ['wide', 'blue']; + await toolbar.updateComplete; + + const picker = toolbar.shadowRoot.querySelector('nx-picker'); + expect(picker.value).to.equal(''); + expect(picker.labelOverride).to.equal(''); + }); + + it('matches the current variant case-insensitively', async () => { + toolbar.show('cards', 'wide'); + toolbar._variantOptions = ['Wide']; + await toolbar.updateComplete; + + const picker = toolbar.shadowRoot.querySelector('nx-picker'); + expect(picker.value).to.equal('Wide'); + expect(picker.labelOverride).to.equal(''); + }); + + it('matches the current variant ignoring spacing differences', async () => { + toolbar.show('cards', 'two up'); + toolbar._variantOptions = ['Two-Up']; + await toolbar.updateComplete; + + const picker = toolbar.shadowRoot.querySelector('nx-picker'); + expect(picker.value).to.equal('Two-Up'); + expect(picker.labelOverride).to.equal(''); + }); + function editBtn() { return toolbar.shadowRoot.querySelector('.block-edit'); }