Improve and fix button block

dist/block-renderer.common.js

@@ -2192,12 +2192,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=18061960&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=9e5ecf8c&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.blocks),function(block,index){return _c(block.component,{key:index,tag:"component",attrs:{"data":block.data}})}),1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=18061960&
+// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=9e5ecf8c&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
@@ -2415,6 +2415,49 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var AttachesBlock = (component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ButtonBlock.vue?vue&type=template&id=6f829878&
+var ButtonBlockvue_type_template_id_6f829878_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"button-block"},[_c('a',{attrs:{"href":_vm.data.url,"target":"_blank"},domProps:{"innerHTML":_vm._s(_vm.data.label)}})])}
+var ButtonBlockvue_type_template_id_6f829878_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/ButtonBlock.vue?vue&type=template&id=6f829878&
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ButtonBlock.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ var ButtonBlockvue_type_script_lang_js_ = ({
+  props: ["data"]
+});
+// CONCATENATED MODULE: ./src/components/ButtonBlock.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_ButtonBlockvue_type_script_lang_js_ = (ButtonBlockvue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./src/components/ButtonBlock.vue
+
+
+
+
+
+/* normalize component */
+
+var ButtonBlock_component = normalizeComponent(
+  components_ButtonBlockvue_type_script_lang_js_,
+  ButtonBlockvue_type_template_id_6f829878_render,
+  ButtonBlockvue_type_template_id_6f829878_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ButtonBlock = (ButtonBlock_component.exports);
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/EmbedBlock.vue?vue&type=template&id=fa9ca340&
 var EmbedBlockvue_type_template_id_fa9ca340_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('figure',[_c('iframe',{staticClass:"w-full",attrs:{"src":_vm.data.embed,"height":_vm.data.height,"frameborder":"0","allowfullscreen":""}}),_c('figcaption',{domProps:{"innerHTML":_vm._s(_vm.data.caption)}})])}
 var EmbedBlockvue_type_template_id_fa9ca340_staticRenderFns = []
@@ -2780,8 +2823,10 @@ var WarningBlock_component = normalizeComponent(
 
 
 
+
 var componentTypes = {
   attaches: AttachesBlock,
+  button: ButtonBlock,
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,

dist/block-renderer.umd.js

@@ -2201,12 +2201,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=18061960&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=9e5ecf8c&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.blocks),function(block,index){return _c(block.component,{key:index,tag:"component",attrs:{"data":block.data}})}),1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=18061960&
+// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=9e5ecf8c&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
@@ -2424,6 +2424,49 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var AttachesBlock = (component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ButtonBlock.vue?vue&type=template&id=6f829878&
+var ButtonBlockvue_type_template_id_6f829878_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"button-block"},[_c('a',{attrs:{"href":_vm.data.url,"target":"_blank"},domProps:{"innerHTML":_vm._s(_vm.data.label)}})])}
+var ButtonBlockvue_type_template_id_6f829878_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/ButtonBlock.vue?vue&type=template&id=6f829878&
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ButtonBlock.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ var ButtonBlockvue_type_script_lang_js_ = ({
+  props: ["data"]
+});
+// CONCATENATED MODULE: ./src/components/ButtonBlock.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_ButtonBlockvue_type_script_lang_js_ = (ButtonBlockvue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./src/components/ButtonBlock.vue
+
+
+
+
+
+/* normalize component */
+
+var ButtonBlock_component = normalizeComponent(
+  components_ButtonBlockvue_type_script_lang_js_,
+  ButtonBlockvue_type_template_id_6f829878_render,
+  ButtonBlockvue_type_template_id_6f829878_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ButtonBlock = (ButtonBlock_component.exports);
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b6a10a42-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/EmbedBlock.vue?vue&type=template&id=fa9ca340&
 var EmbedBlockvue_type_template_id_fa9ca340_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('figure',[_c('iframe',{staticClass:"w-full",attrs:{"src":_vm.data.embed,"height":_vm.data.height,"frameborder":"0","allowfullscreen":""}}),_c('figcaption',{domProps:{"innerHTML":_vm._s(_vm.data.caption)}})])}
 var EmbedBlockvue_type_template_id_fa9ca340_staticRenderFns = []
@@ -2789,8 +2832,10 @@ var WarningBlock_component = normalizeComponent(
 
 
 
+
 var componentTypes = {
   attaches: AttachesBlock,
+  button: ButtonBlock,
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "block-renderer",
   "description": "Content renderer for JSON blocks from Editor.js",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "author": "KingOfDog <info@kingofdog.de>",
   "repository": {
     "type": "git",

src/components/BlockContentRenderer.vue

@@ -11,6 +11,7 @@
 
 <script>
 import AttachesBlock from "./AttachesBlock";
+import ButtonBlock from "./ButtonBlock";
 import EmbedBlock from "./EmbedBlock";
 import HeaderBlock from "./HeaderBlock";
 import ImageBlock from "./ImageBlock";
@@ -22,6 +23,7 @@ import WarningBlock from "./WarningBlock";
 
 const componentTypes = {
   attaches: AttachesBlock,
+  button: ButtonBlock,
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,

src/components/ButtonBlock.vue

@@ -1,14 +1,15 @@
+<template>
+  <div class="button-block">
+    <a
+      :href="data.url"
+      target="_blank"
+      v-html="data.label"
+    ></a>
+  </div>
+</template>
+
 <script>
 export default {
-  props: ["data"],
+  props: ["data"]
-  render(createElement) {
-    return createElement("a", {
-      domProps: {
-        innerHTML: this.data.label,
-        href: this.data.url
-      },
-      class: ["button", "button-primary"]
-    });
-  }
 };
 </script>