The Function of Files

As a first step, you’ll want to make sure you have all the dependencies installed in your block by running `npm i`. Then, you can explore each of the files listed below.

cd MyBlock
npm i

File Types

Source Directory 

This will house your actual block source files. Generally, all your jsx code will be housed in Block.js unless you split it up into components.

MyBlock/
├── src/
| ├── Block.js
| ├── configs.js
| ├── getDataProps.js
| ├── getStyles.js
| └── index.js

configs.js 

The config schema and the default configs are housed here. This is also where you’ll provide default values for anything you want your users to be able to edit in the UI. 

export const getConfigSchema = {
  text: {
    label: 'Text content',
    type: ElementPropTypes.string,
  }
}

export const defaultConfig = {
  text: 'Element Starter Block',
  blogId: 'pageVar:blogId',
}

getDataProps.js 

This is where you'll make any requests for data on the server—make sure that all those requests are done before it gets client-side. Anything you return from getDataProps will be found on the data prop in your block in the format that you return it in. 

export const getDataProps = (utils, props) => {
 return utils.client
    .request('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .catch(e => [])
}

getStyles.js

To make developing on Element easier, we have a full atomic CSS library that you can use for the bulk of your layout styling. Our CSS library documentation covers all the different methods of styling with CSS. You can view the full atomic CSS library or look at individual style sheets to get a closer look at specific CSS functionality. 

If there are any styles you can’t achieve with the atomic CSS framework, you can write custom styles in the getStyles function. The blockConfig argument includes all the props that you’ve written into your defaultConfig and configs.js. If you have anything user-editable like colors, you can reference them there and make sure that it gets passed into your custom styles. 

export const getStyles({ headerBackgroundColor, headerTextColor }) => ({
  header: {
    backgroundColor: headerBackgroundColor,
    color: headerTextColor
  }
})

For more information on how to utilize these styles, check out “Style a Block with Aphrodite.” 

Index.js

You shouldn’t need to make any changes here—this file simply ensures that everything necessary for your block is exported. 

Test Directory 

Your spec files here will be jest tests. Testing is not a requirement for writing blocks, but we highly recommend doing it when you can.

Local Environment 

You'll likely only have to make changes here if you’re developing a block with props that should either be available to or set to a specific value locally that you don’t want to have set in your default configs. This is commonly used when referencing specific product or category data, in which case you can set the ID or slug that you want to utilize here. If you are doing that, you’ll also want to set the tenantId for your store at the top—this will allow you to pull in specific data for previewing in the local environment.

Next Steps 

Now that we've gone over the basic function of each file and you have your packages installed, you can start up the local environment by running `npm start`.

npm start