Home > Support > Wicked Block Builder > Getting Started > Building Your First Block > Part One: Building the Block

Part One: Building the Block

From your WordPress dashboard, go to Wicked Block Builder > Add New. Enter “Resource Card” in the Name field and click Save.

Great! You now have a block. Of course it doesn’t actually do anything yet so let’s keep going.

Next, click on the Attributes tab. We’ll need some attributes to capture our block’s selected image, title, summary, and link (we’ll add the accent color in part two).

Let’s start by creating an attribute to store the selected image ID.

  1. Click on Number under Attribute Types (if you don’t see Attribute Types, be sure you’re on the Add Attributes tab in the sidebar)
  2. Next, click on the attribute to change its settings
  3. In the Attribute Name field enter “imageId”
  4. Go ahead and leave the rest of the setting as-is for now

Next, we need attributes for our title, summary, and link.

  1. Click on the Add Attributes tab
  2. Click the String attribute type
  3. Click on the attribute to select it and change the name to “title”
  4. Repeat the process to add two more String attributes named “summary” and “button”
  5. Click the Save button to save your changes

Okay! Our block has attributes. Now it’s time to actually build our block.

Click on the Editor View tab.

  1. To start, click (or drag) a Div element to add it to your block
  2. Click on the <div> that was just added to view its settings
  3. Expand the Classes panel and click Add Class
  4. In the Class Name field, enter “resource-card-block”. This will assign a CSS class to our block so we can style it

Now we need a way to select an image.

  1. Under Components, click the square labeled Image to add an Image component to the block (if you don’t see the Components area, click on the Add Items tab)
  2. Click on <Image> to view its settings
  3. In the Attribute dropdown choose imageId

Now let’s add a way to enter our title.

  1. Under Components, click RichText
  2. Click on the <RichText> component to view its settings
  3. In the Attribute dropdown choose title
  4. In the Placeholder Text field enter “Title…”
  5. In the HTML Tag field enter “h2”. This will cause our title to be wrapped in an h2 tag.
  6. Uncheck all boxes under Allowed Formats. This will prevent people from changing the formatting of the title to ensure it always looks consistent

Great, let’s set up a way to edit the summary.

  1. Click the <RichText> component that we added in the previous step
  2. In the toolbar that appears next to the component, click the plus icon to duplicate the component
  3. Click on the duplicated <RichText> component
  4. Change the Attribute to summary
  5. Change the Placeholder Text to “Summary…”
  6. Remove “h2” from the HTML Tag field (so the field is empty)
  7. Expand the Classes panel and click Add Class
  8. In the Class Name field, enter “summary”

Finally, let’s add a field for the button.

  1. Add another RichText component to your block
  2. Click the newly added <RichText> component to change its settings
  3. Change the Attribute to button
  4. In the Placeholder Text field enter “Label…”
  5. Under Allowed Formats, uncheck everything except Link
  6. Expand the Classes panel and click Add Class
  7. In the Class Name field, enter “card-button”
  8. Click Save to save your changes

The structure of your block should look like this:

We’re almost there! The only thing left to do is style our block.

We want our block to look the same in the editor and front-end so we’re going to skip the Front-end View tab (Wicked Block Builder will automatically generate the front-end view based on our Editor View to save us time). We’re also not going to worry about creating a sidebar for now (we’ll do that in part two) so we can skip that tab as well.

Click on the Styles tab.

Copy and paste the CSS code below into the CSS editor on the Styles tab and click Save.

See the Pen
Resource Card CSS by Vinny (@wickedplugins)
on CodePen.

Now it’s time to try out our block! Be sure to click Save to make sure your block’s changes have been saved. Then, head over to Pages > Add New to create a page to test our block.

One the new page, click the Plus icon in the editor and add your block. It should look something like this (note that the font might appear differently depending on your theme):

Go ahead and select an image and enter some content

Note: to get the button to appear, enter a label for the button, select the text, click the Link icon in the block toolbar, and insert a link.

If your block doesn’t look right, review the steps above to make sure something wasn’t missed.

Congratulations! You just built your first block width Wicked Block Builder. In part two, we’ll add some refinements to our block and add an accent border to the image.