In the Lab: How to build a Custom Pricing Table Block

Welcome back to The Lab!

In this tutorial we’ll show you how you can build your very own custom and beautifully designed pricing table block. When we’re done, it will look just like the image above.

Set Up

The tools we’ll be using.

  • Plugins: Block Lab (The free version)
  • Text Editor: Whatever (I like VS Code)
  • That’s it 🙂

We’re also running WordPress on our local machine so we can easily work with our theme files.

Identifying fields

First step is figuring out the fields (e.g. text, image, select, etc). These fields are what you see in the Editor when you add the block and are how you add your content.

So our pricing table has 3 x pricing options with each option including:

  • An image
  • A title
  • A price
  • Some text
  • A button

From these different slices of content we can determine that for each pricing option we’ll need these fields:

  • Title – Text field
  • Price – Number field
  • Text – Textarea field
  • Button Text – Text field
  • Button URL -URL field

In our design the middle pricing option is highlighted or “featured”. We’re going to make this optional via a toggle field. So we’ll add one more field:

  • Feature Option 2 – Toggle

The final thing to think about is where you want each field to appear when you add the block to the Editor. There are two main areas in the Editor where fields can be placed.

  • The Editor (The main section)
  • The Inspector (The side section)

Rule of thumb is that content fields belong in the Editor and configuration or settings fields belong in the Inspector. For our pricing table block, the one field we’ll add to the Inspector is the Feature Option 2 field. All other fields can go in the Editor.

Adding the block

Ok, now we’ve got our head around the fields we need and where we want to put them, let’s create our block!

  1. Go to our WordPress Admin
  2. In the Admin menu, hover over Block Lab, and click Add New Block
  3. Give the block a name, icon, and configure the other basic settings

Now let’s scroll down and add our fields. For each of those fields that we defined earlier, we’re going to add one for each pricing option. Once entered, it looks like this:

Take note of the field types and location of each field. The Field Name for each name is what we’ll be referencing when we build out our template shortly.

With all our fields added and configured, let’s hit Publish.

Our custom block is now registered with a whole bunch of fields ready for us to work with. We can actually go to a post or page and add the block already. For it to display anything though, we need to build a template. 

Building our Custom Block Template

When you hit publish on our custom block, you’ll notice at the top of the block building screen a prompt like this appears:

This is telling us that the Block is registered and that the plugin is looking for a corresponding template in our theme files. Right now, because we haven’t built it yet, it’s saying it can’t find it.

So the next step is to open our theme files in our text editor and add:

  • A new folder called blocks,
  • Inside the blocks folder add a PHP file called block-pricing-table.php
  • Inside the blocks folder add a CSS file called block-pricing-table.css

Block Lab will auto-magically pair these 2 files together as they have the same name.

Now that the template is recognised by the plugin, let’s build out our template using some simple HTML and a couple of helpful PHP functions from the Block Lab plugin.

In our template file we add the following HTML add PHP.

<?php
$featured_class = '';
if ( block_value( 'feature-option-2' ) === true ) {
    $featured_class = 'pricing-option--feature';
}
?>
<section class="block-pricing-table alignfull">
    <div class="pricing-tables">
        <div class="pricing-option">
            <img class="pricing-option--image" src="<?php block_field( 'option-1-image' ); ?>" alt="">
            <h3 class="pricing-option--title"><?php block_field( 'option-1-title' ); ?></h3>
            <p class="pricing-option--price">$<?php block_field( 'option-1-price' ); ?> p/m</p>
            <p class="pricing-option--text"><?php block_field( 'option-1-text' ); ?></p>
            <a class="pricing-option--button" href="<?php block_field( 'option-1-button-url' ); ?>"><?php block_field( 'option-1-button-text' ); ?></a>
        </div>
        <div class="pricing-option <?php echo $featured_class; ?>">
            <img class="pricing-option--image" src="<?php block_field( 'option-2-image' ); ?>" alt="">
            <h3 class="pricing-option--title"><?php block_field( 'option-2-title' ); ?></h3>
            <p class="pricing-option--price">$<?php block_field( 'option-2-price' ); ?> p/m</p>
            <p class="pricing-option--text"><?php block_field( 'option-2-text' ); ?></p>
            <a class="pricing-option--button" href="<?php block_field( 'option-2-button-url' ); ?>"><?php block_field( 'option-2-button-text' ); ?></a>
        </div>
        <div class="pricing-option">
            <img class="pricing-option--image" src="<?php block_field( 'option-3-image' ); ?>" alt="">
            <h3 class="pricing-option--title"><?php block_field( 'option-3-title' ); ?></h3>
            <p class="pricing-option--price">$<?php block_field( 'option-3-price' ); ?> p/m</p>
            <p class="pricing-option--text"><?php block_field( 'option-3-text' ); ?></p>
            <a class="pricing-option--button" href="<?php block_field( 'option-3-button-url' ); ?>"><?php block_field( 'option-3-button-text' ); ?></a>
        </div>
    </div>
</section>

Now there are a few things going on here to take note of:

  • We use the Block Lab functions block_field and block_value throughout to interact with the fields that we added when setting up our block in the WordPress admin
  • We’re creating a PHP variable to store our “featured” class. Depending on whether the Feature Option 2 toggle is toggled to on, this will have our CSS class pricing-option--feature ready to go
  • We have a bunch of CSS classes scattered throughout
  • Our HTML is structured to basically match the 3 columns of the pricing table

In our corresponding CSS template file, we add the following:

.block-pricing-table {
    background-color: #3DCD9A;
    padding: 160px 30px;
}
.pricing-tables {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    max-width: 75vw;
    margin: auto;
}
.pricing-option {
    background-color: #fff;
    padding: 40px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0px 5px 20px 0px rgba(61,205,154,0.3);
}
.pricing-option--image {
    max-width: 30%;
    margin: auto;
    margin-bottom: 40px;
}
.pricing-option--title {
    color: #555;
}
.pricing-option--price {
    font-weight: 800;
    color: #3DCD9A;
}
.pricing-option--text {
    font-size: 16px;
    margin-bottom: 4rem;
    color: #777;
}
.pricing-option--button {
    background-color: #3DCD9A;
    color: #fff;
    padding: 8px 20px;
    border-radius: 3px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
}
.pricing-option--feature {
    transform: scale(1.2);
}

Points of interest here are:

  • We’re using CSS Grid for layout
  • We have a bunch of font, border, color, and padding styling to help us match our designs
  • transform: scale(1.2); is all we need for our Feature Option 2 styling

Nice and easy!

NOTE: You should always sanitise output data. We’ve not covered it in this tutorial to keep things as simple as possible, but it’s a best practice you should follow.

With that, we can now actually add our block, input some content, and see it all work! Let’s give it a go.

In the WordPress Admin, add a new page, give it a page title, and then click the + button to add a new block. If you search for Pricing, you’ll see our custom block.

 Add it to the page. Added to the page and with the block active, you’ll see a form containing all the fields we added.

With our fields now filled in, we see this:

If we click away from the block form, we’ll see that the images and all the text we added are on our page. This is great!

Let’s toggle our Feature Option 2 toggle:

And now we see this in the editor:

And on the frontend of our website, it looks like this:

Wrapping things up

As simple as that we’ve created a completely custom Pricing Table Block. It looks and behaves exactly how we want, not how a plugin tells us it should.

If you build this block yourself, here are a few things you can do to enhance it further:

  1. CSS for mobile responsiveness
  2. Loop through the 3 pricing options (DRY)
  3. Try out a few of the Block Lab Pro fields like Repeater (coming soon) to make this block even more dynamic
  4. Add a color field that changes the accent color and then use the output for dynamic styling
  5. Create a Preview Template, to display the pricing block a little differently in the editor

If you liked this tutorial or have any questions, please feel free join the conversation in the comments, or on Slack.

Until next time, happy block building!

New Kid on the Block?

Subscribe, stay connected, and keep up to date with the latest.

  • This field is for validation purposes and should be left unchanged.

One thought on “In the Lab: How to build a Custom Pricing Table Block

Leave a Reply

Your email address will not be published. Required fields are marked *