Creating A Custom Copy Of An Atavist Block - Atavist/developer GitHub Wiki

You will sometimes find you want a block that is identical to an existing Atavist block but with one or two differences. In this case, it may make sense to create a custom block that is just like the default one, and alter it as needed. This document explains how to create a custom block from an existing Atavist block.

1. Obtain the ID of the block you wish to fork. This ID is the tag name of the block, so you can find this by inserting a block into a project and examining the source. The block name of the image block, for example, is atavist-simple-image

2. Access the HTML, CSS, Javascript, and field JSON. Do this by going to these four URLs in a browser, replacing atavist-simple-image with the ID of the block you are working on:

http://atavist.com/static/bower_components/atavist-simple-image/index.html http://atavist.com/static/bower_components/atavist-simple-image/script.js http://atavist.com/static/bower_components/atavist-simple-image/style.css http://atavist.com/static/bower_components/atavist-simple-image/config.json

3. Create a Custom Block, here: https://atavist.com/cms/template/add_block

4. Paste the contents of http://atavist.com/static/bower_components/atavist-simple-image/index.html into the HTML area.

5. Paste the contents of http://atavist.com/static/bower_components/atavist-simple-image/script.js into the Javascript Block.

6. In the Javascript, remove the is and atavist declarations. Both will be inserted automatically in a custom block.

7. This is a good moment to SAVE the block for the first time, because this will cause Javascript validation to run. You may have to make minor syntax edits to the Javascript to pass validation, as the custom block validator is fairly strict.

8. Paste the contents of http://atavist.com/static/bower_components/atavist-simple-image/style.css into the SASS field.

9. The tag name of custom blocks is generated programmatically, so you need to remove all references to the original block from the SASS.

• In any selector where the first component is the block name, you can simply remove it. For example: .atavist-simple-image .atavist-image img becomes: .atavist-image img

• In complex selectors where the block name appears in the middle, replace it with &. For example: .page-compose .atavist-block-align-left.atavist-simple-image becomes: .page-compose .atavist-block-align-left.&

• If the selector is only the block name, replace with &:

.atavist-simple-image {
	display: block;
}

becomes:

& {
	display: block;
}

10. In http://atavist.com/static/bower_components/atavist-simple-image/config.json, copy and paste the fields object into the Field Definitions block. Note that you want only the object, not fields:. For example, taking from this:

{
    "title": "Image",
    "description": "You can add an image by dragging an image file directly onto the block.",
    "template_type": "block",
    "fields": {
      "the_image" : {
      	"label" : "Image",
      	"type" : "file"
      }
  }
}

Paste this into Field definitions:

{
	"the_image": {
		"label": "Image",
		"type": "file"
	}
}

That should be all you need to get started.