Whether you have a Design Block or a User Block, they're both JSON files, despite User Blocks having a .js extension. You can upload User Blocks without having to change a line of code.

As said, User Blocks are accepted as is. A Design Block's JSON is very similar to a User Block, but requires much less fields. The JSON structure is always the same:

{
  "data": {
    "_customHTML": "...",
    "_styles": { }
  }
}

This field contains all the HTML that makes the block what it is. The field is a string, so the entire HTML has to be formatted on a single line. Break lines in your code need to be replaced with \n. Double quotes need to be escaped: \".

If you're not too familiar with what the HTML of a Mobirise block looks like, I suggest you check out a couple of Design Blocks, or simply open up any project.mobirise file. Also make sure to check out the Mobirise documentation.

To get you started a little bit, every block has the following components:

• Each block is one entire <section>
• There's a <mbr-parameters>-block that defines all parameters of said block. These are all the settings under the 'gear icon' in Mobirise.
• Many HTML-tags in a block have additional Mobirise parameters added to them, like mbr-if, mbr-class, mbr-style, etc.

This field is a hash that simply contains more JSON. It contains all your CSS, but formatted as JSON.

For example, the following CSS:

.myClass {
  color: #000;
  font-family: arial;
}

p {
  padding: 10px;
}

Would look like this:

".myClass": {
  "color": "#000",
  "font-family": "arial"
},
"p": {
  "padding": "10px"
}

The nifty part is that this isn't regular CSS, it's more like LESS, which allows the use of variables and what not. Let's say you have an mbr-parameter named "bgcolor" and you want to use that, you can simply call it with @bgcolor. Check out other Design Blocks (or a project.mobirise file) to get more familiar with how Mobirise uses it.

If your Design Block or User Block uses images, it's likely they're pointing to local resource (files:///c/foldername/image.jpg). Obviously someone else won't be able to load those images, so it's better to replace those with online images.

When someone imports your block into Mobirise, the online images will be loaded and everything will look as intended. Obviously those images can (and should) be replaced with images the user chooses.

Upload those images to your own host, or use image hosts like imgur.