(function (wp) {
   const { registerBlockType } = wp.blocks;
   const { createElement: el } = wp.element;
   registerBlockType("allspice/rail", {
     title: "Allspice Rail",
     icon: "button",
     category: "widgets",
     attributes: {
       id: { type: "string", default: "WIDCON-d29x" },
       reserve_w: { type: "number", default: 96 },
       reserve_h: { type: "number", default: 96 },
     },
     edit: function () {
       const previewStyle = {
         position: "relative",
         border: "1px dashed #ddd",
         padding: "12px",
         minHeight: "120px",
       };
       return el(
         "div",
         { style: previewStyle },
         el("strong", {}, "Allspice Rail"),
         el(
           "div",
           { style: { marginTop: "6px", opacity: 0.7, fontSize: "12px" } },
           "This inserts the Allspice floating rail on the page."
         ),
         el(
           "div",
           { style: { marginTop: "10px", opacity: 0.5, fontSize: "11px", fontFamily: "monospace" } },
           `[Allspice_Button id="WIDCON-d29x" reserve_w="96" reserve_h="96"]`
         )
       );
     },
     save: function () {
       return null;
     },
   });
 })(window.wp);
 
 // [Allspice_Button id="WIDCON-d29x" reserve_w="220" reserve_h="196"]