---
description: https://developer.wpengine.com/genesis-custom-blocks/
---

# Genesis Custom Blocks

## Create Your First Custom Block

After installing and activating the Genesis Custom Blocks plugin, the first step is to create the individual blocks you want to make available on the website.&#x20;

In this article, well show you how to create a custom block, define its settings to make it easy to find and use in the WordPress editor, and create the template that’s required for properly displaying the block on your website.

**Table of Contents**

* [Create a new custom block using the Block Builder](https://developer.wpengine.com/genesis-custom-blocks/get-started/create-your-first-custom-block/#create-custom-block)
  * [Configure the block settings](https://developer.wpengine.com/genesis-custom-blocks/get-started/create-your-first-custom-block/#configure-block-settings)
  * [Add the block fields](https://developer.wpengine.com/genesis-custom-blocks/get-started/create-your-first-custom-block/#add-block-fields)
* [Create the block template using the Template Editor](https://developer.wpengine.com/genesis-custom-blocks/get-started/create-your-first-custom-block/#template-editor)
* [Save or publish the block](https://developer.wpengine.com/genesis-custom-blocks/get-started/create-your-first-custom-block/#save-publish-block)
* [Example custom block](https://developer.wpengine.com/genesis-custom-blocks/get-started/create-your-first-custom-block/#example-custom-block)

### Create a new custom block using the Block Builder <a href="#create-custom-block" id="create-custom-block"></a>

Go to **Custom Blocks > Add New** to create a new block.[![Screenshot of Custom Blocks menu](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-custom-blocks-add-new.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-custom-blocks-add-new.png)

_Click image to enlarge_

The **Block Builder** will opened by default.

To get started, enter a name for this block, as shown in the image below.

This name will be visible to site admins and editors so we recommend using a name that makes the intended use for this block clear. For example, if you are creating a custom button block, you might name the block _Button_.[![Screenshot of Block Builder and block name field](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-block-name.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-block-name.png)

_Click image to enlarge_

### Configure the block settings <a href="#configure-block-settings" id="configure-block-settings"></a>

Next, you’ll configure the block’s settings which will help users find it easily within the WordPress block selector, as described below.[![Screenshot of block settings](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-block-settings.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-block-settings.png)

_Click image to enlarge_

1. **Slug:** The slug will be auto-filled based on the name you give the block. This slug will be important later when creating a block template.
2. **Icon:** Choose an icon to represent this block. This icon will make it easier for users to find your block in the WordPress editor’s block selector.
3. **Category:** Click the arrow to choose from a list of default block categories or to add a custom category. When your end user clicks the plus icon to open the block library, the blocks they see will be separated into categories like _Text_, _Media_, _Design_, _Widgets_, etc. You can categorize your custom block using one of the built-in categories, or you can create a brand new category.
4. **Keywords:** Give your block some keywords (maximum of 3). Keywords make it easier for users to search for your block in the WordPress editor’s block selector.
5. **Post Types:** Check the box(es) to allow this block to be displayed on each post type. For example, if you uncheck _Posts_, the block won’t appear at all on any post.

### Add the block fields <a href="#add-block-fields" id="add-block-fields"></a>

Block fields allow you to define the options that will be presented to users when adding your block to their post.

Fields are the points of data that can be different each time you use the block. For example, if you are creating a button block, you could include fields for the button’s text and link URL.

Choose a location for the field and then add the new field, as described below.[![Screenshot of how to add a block field](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-add-block-field.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-add-block-field.png)

_Click image to enlarge_

1. **Field Location:** Choose where you’d like to display this field.
   * **Editor Fields** will display the field in the main editing area of a post or page.
   * **Inspector Fields** will display the field in the right-hand sidebar under the block inspector.
2. **Add Field:** Click the plus sign to add a new field to the block.

Now you’re ready to configure the fields as described below.[![Screenshot of block field settings](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-block-field-settings.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-block-field-settings.png)

_Click image to enlarge_

1. **Field Label:** Give your field a field label which will be displayed next to the input field when adding the block to the post.
2. **Field Name (slug):** The field name should auto-fill based on the field label, but can be customized. This will be used in the PHP as part of the block template.
3. **Field Type:** Choose the field type for the field. This is the type of input presented to the user when adding the block. Depending on the type, additional options will be available. Refer to the [Field Types](https://developer.wpengine.com/genesis-custom-blocks/fields/) information for the various options and more details on each of them.
4. **Field Location:** Choose a location to display the field.
   * _Editor_ will show the field in the main editing area of a post or page.
   * _Inspector_ will display the field in the right-hand sidebar under the block inspector.
5. **Field Width:** Select how widely the field should be displayed.
6. **Help Text:** Enter some text to help users understand what information they should enter into the field when adding your block to their post.
7. The rest of the options will vary depending on the field type selected in #3 above. In the example above, we’re adding a _Text_ field so the additional options shown in the image apply only to this text field (_Default Value_, _Placeholder Text_, and _Character Limit_). You can configure these options as desired.
8. **Delete:** If you change your mind, you can delete this field.
9. **Duplicate:** If you’d like to create an exact copy of this field, you can duplicate it.

### Create the block template using the Template Editor <a href="#template-editor" id="template-editor"></a>

Now that you’ve used the Block Builder to create the block and configure the block and field settings, you’re ready to use the built-in **Template Editor** to create the required block template which allows the custom block to be properly displayed on your website.[![Screenshot of the template editor](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-template-editor.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-template-editor.png)

_Click image to enlarge_

1. **Template Editor:** This is where you’ll create the required template. _The template editor accepts HTML markup, field names (enclosed in 2 brackets), and CSS only. If you need to use logic, loop syntax, define variables, or use PHP, you can create the template manually using the_[ _PHP templating method_](https://developer.wpengine.com/genesis-custom-blocks/get-started/add-a-custom-block-to-your-website-content/) _instead_. Also, if you’ve previously created custom blocks using the PHP templating method, they will continue to work as expected.
2. **Editor Preview:** The editor preview allows you to see what the block looks like on the backend (in other words, within the post or page editor).
3. **Front-end Preview:** The front-end preview allows you to see what the block looks like after data has been entered into the block fields on the backend. _To see an updated front-end preview, enter data into the block and then save or publish it._
4. **Markup:** Enter the HTML you wish to use in the template. When adding a field to the markup, enclose the field’s slug in 2 brackets. For example: `{{field-name}}`. Also, we recommend including a wrapper in your template to support the _Additional CSS Class(es)_ field that’s built into the WordPress block inspector (sidebar).
5. **CSS:** Click the CSS tab to enter any CSS you’d like to use to style the block. _The CSS entered here will only be rendered on pages where the block is displayed so it won’t affect the overall performance of your website._

### Save or publish the block <a href="#save-publish-block" id="save-publish-block"></a>

When you’re ready, click **Publish** to make your block available in the block library so it can be added to a post or page.

You could also click **Save Draft** to save your block but not make it available in the library yet.[![Screenshot of Save or Publish option](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-save-publish-custom-block.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-save-publish-custom-block.png)

_Click image to enlarge_

If you save or publish a block without creating the template, you’ll be reminded that you need to create it, as shown in the image below.[![Screenshot of template reminder](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-template-reminder.png)](https://developer.wpengine.com/genesis-custom-blocks/wp-content/uploads/sites/5/2021/06/gcb-template-reminder.png)

_Click image to enlarge_

Here you’ll be given 2 options:

1. Edit the template using the Template Editor (as described in this article) **or…**
2. Create the template manually using the [PHP templating method](https://developer.wpengine.com/genesis-custom-blocks/get-started/add-a-custom-block-to-your-website-content/) and add the template to your theme files.

### Example custom block <a href="#example-custom-block" id="example-custom-block"></a>

Check out this [example custom block](https://developer.wpengine.com/genesis-custom-blocks/example-custom-block/) to see how we used the block builder and template editor to create an example Ebook CTA block.
