Creating a custom block with a custom tag

<style>
myblock {
    background: #f0f0f0;
    padding: 12px;
    display: block;
    margin-top: 16px;
    margin-bottom: 16px !important;
}
</style>


<!-- element -->
<textarea id="entry">
    ...
    <myblock data-block="myblock">This is content of my custom block.</myblock>
    ...
</textarea>

<!-- call -->
<script>
// custom block
Redactor.add('block', 'myblock', {
    mixins: ['block'],
    props: {
        type: 'myblock',
        editable: true,
        inline: false,
        custom: 'myblock',
        control: {
            // block control specific buttons
            'mybutton': {
                title: 'Mybutton',
                position: { after: 'add' },
                icon: '<svg ...>',
                command: 'myplugin.toggle'
            }
        }
    },
    defaults: {
        content: { getter: 'getContent', setter: 'setContent' },
        datavalue: { getter: 'getDataValue', setter: 'setDataValue' }
    },
    create() {
        return this.dom('<myblock>');
    },
    setDataValue() {
        this.$block.attr('data-value', 1);
    },
    getDataValue() {
        return this.$block.attr('data-value');
    }
});

// custom plugin
Redactor.add('plugin', 'myplugin', {
    toggle() {
        this.app.dropdown.close();
        let instance = this.app.block.get();
        instance.setDataValue();
    }
});

let app = Redactor('#entry', {
    plugins: ['myplugin']
});
</script>