Piranha.core: How to configure the Vue component of a custom block with a SelectField?

[w0ns88]

Hi @tidyui,

I am now moving towards version 7, it's very nice.
I am stuck trying to write the Vue component of a custom block that contains both, an HtmlField and a SelectField. I have been able to add the HtmlField without any issues basing the code from the HtmlBlock, but I am stuck trying ti display the SelecField.

Do you have an example of this with Vue?

[tidyui]

In order for SelectFields to work the manager UI needs meta-information about the available options. This does not seem to be exported for SelectFields within blocks at the moment so I'll add this to the Service Release 3 milestone!

[w0ns88]

Great thanks. Do you have a timeframe for the SR3?

[tidyui]

I would say end of this week or next!

[tidyui]

We try to have a fast release schedule for service releases after a new major version!

[tidyui]

Block does not export meta-data for fields atm, this means you can't call the select-field component from your custom component. You can however add a select tag to it, for example here I have added it to the standard HtmlBlock.

HtmlBlock.cs

namespace Piranha.Extend.Blocks
{
    /// <summary>
    /// Single column HTML block.
    /// </summary>
    [BlockType(Name = "Content", Category = "Content", Icon = "fas fa-paragraph", Component = "html-block")]
    public class HtmlBlock : Block
    {
        public enum BackgroundColor {
            Black, White
        }

        public SelectField<BackgroundColor> Background { get; set; }

        /// <summary>
        /// Gets/sets the HTML body.
        /// </summary>
        public HtmlField Body { get; set; }
    }
}

html-block.js

/*global
    piranha
*/

Vue.component("html-block", {
    props: ["uid", "toolbar", "model"],
    data: function () {
        return {
            body: this.model.body.value
        };
    },
    methods: {
        onBlur: function (e) {
            this.model.body.value = e.target.innerHTML;
        }
    },
    computed: {
        isEmpty: function () {
            return piranha.utils.isEmptyHtml(this.model.body.value);
        }
    },
    mounted: function () {
        piranha.editor.addInline(this.uid, this.toolbar);
    },
    beforeDestroy: function () {
        piranha.editor.remove(this.uid);
    },
    template:
        "<div class='block-body' :class='{ empty: isEmpty }'>" +
        "  <select v-model='model.background.value'><option value='0'>Black</option><option value='1'>White</option></select>" +
        "  <div contenteditable='true' :id='uid' spellcheck='false' v-html='body' v-on:blur='onBlur'></div>" +
        "</div>"
});

Please note that in the current version you have to manually register select fields for them to work in blocks. SelectFields added to regions are automatically registered in the application by the AttributeBuilder, but this does not process blocks.

Startup.cs

App.Fields.RegisterSelect<Piranha.Extend.Blocks.HtmlBlock.BackgroundColor>();

All of this could be changed to work a bit smoother, but to make it solid it requires more changes and testing than what we have the possibility to add to this service release. Because of this I will postpone development for this issue.

[tidyui]

Custom Fields and SelectFields used in blocks and block groups are as of 7.0 SR5 added automatically when registering the blocks. As for exporting meta-data for fields in blocks this is redundant to issue #820 so I'm closing this issue for now.