Design, Development, WordPress

Rebuilding the Flywheel pricing table as a custom block (in about 10 min)

Rob Stinson — March 30, 2021

The (Gutenberg) block editor is undoubtedly the center of modern WordPress. With full site editing on its way to WordPress Core, blocks and all they promise are here to stay.

However, blocks don’t always do what we want or look the way we like. If you design and build sites for a living, you know that cookie-cutter stuff only goes so far on the web. At some point, we need that “block” on the page to look or behave in a really particular way.

Custom blocks are the solution here! But custom blocks require, for many folks who’ve been rolling in WordPress for a while, a very different approach to dev.

Different? Yes!

Difficult? No!

I’m going to show you how you can easily build a completely custom block. And it’s gonna take about 10 minutes. For any freelancer or agency crew here wanting to skill-up around the block editor, I think you’ll like this!

The block

Let’s imagine we’re working on a project and a designer hands us a sweet design for an eCommerce website. It uses the best of WordPress + WooCommerce, but there are a few pieces that just don’t work off the shelf. One of these is this right here:

Holup! This looks familiar! 😉

Yep, we’re gonna rebuild the Flywheel pricing table as a custom block. ? There are plug-n-play pricing table blocks around, but ours here is pretty unique, so we’re going to roll our own.

The set-up

The hero of this story is a plugin called Genesis Custom Blocks. It’s free on wordpress.org, and there’s a Pro version that offers some cool advanced features, including:

Fresh WordPress install – compliments of Local
Genesis Custom Blocks (free one) installed and active
A child theme for the Genesis Block Theme

Important Note: Genesis Custom Blocks is not dependent on the Genesis Framework, the above Genesis Block Theme, or any other plugins or themes.

Registering & configuring the block

The beauty of this plugin is that we get to do so much in the WordPress admin.

In the WordPress admin, in the lefthand menu, go to Custom Blocks > Add New

The screen we now see is the Block Builder, which is where we’re going to configure a bunch of things for our block including adding fields.

The way this plugin works is that it creates custom blocks where the user, working in the Block Editor, enters content and data via fields in a form-like interface. This simplified/opinionated interface is one of the things that speeds up the custom block creation process. You don’t need to figure out the input UI.

The Block Details we add are:

Name: Pricing Table
Slug: pricing-table
Icon: Genesis Planet

The Fields we add are:

Name	Slug	Field Type
Icon	icon	Image
Name	name	Text
Description	description	Text
Price	price	Number
Button URL	button-url	URL
Site Count	site-count	Number
Monthly Visits	monthly-visits	Number
Disk Space	disk-space	Number
Bandwidth	bandwidth	Number

Adding fields to our custom block looks like this:

Once we’ve added all our fields, this is what it looks like:

When we hit publish, we get a prompt prompting us what to do next.

This leads us to the next step:

Templating the block

The block is actually registered and available in the block editor now. You could jump over to a new post/page and add the block like you would any other. It would not (yet) display anything though. This is where templating comes in.

Genesis Custom Blocks lets WordPress devs leverage a lot of the templating practices we’ve honed over the last decade or so. It’s super simple and will feel very familiar.

In our child theme, we add a couple of new folders and files like this:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Things to take note of here:

We add a blocks folder in our theme (child theme).
We add a folder specific to the block we are currently working on and name it whatever the blocks slug is, which in this case is pricing-table.
We add a PHP file and CSS file. These are where we will be adding our template code.

Starting with our PHP file, let’s begin with our basic HTML markup and CSS classes.

This will look like this:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Things to take note of:

We’ve got a bunch of CSS classes ready to go. Note: you can tackle the CSS however makes sense to you.
We’re going to use the <progress> HTML tag to handle our resource bars.

Now we’re going to work with a simple PHP function the plugin makes available to us. There are a bunch available, but you’ll probably spend most of your time using these 2 below. We’re exclusively using the first in this block.

Function	What it does
`block_field()`	Fetches and outputs the data entered into the field by the user when adding the block to a page/post.
`block_value()`	Fetches the data entered into the field by the user when adding the block to a page/post.

So, with these functions, our PHP template file now looks like this:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

You can see where we’ve used that block_field() function to fetch and output the data. We simply use the slug of the field as an argument in the function. E.g. block_field( ‘icon’ ). This, being an image field type, returns the URL for that image.

For our CSS, we place this in the block.css template file. Once again, CSS can be spun whichever way you want and the specific code I’ve written is not particularly relevant to this tutorial, but I’ll leave it here for you to check out.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

The most interesting part of the CSS here is the styling of the <progress> tag. A bit fiddly, but it is what it is. You could switch to a nested div setup for those and calculate set widths if you’d like to avoid <progress>.

And that’s it! ?

Recapping:

We added and configured the block in the WP Admin
We created a PHP template file with a measly 29 lines of basic HTML and a single PHP function
We dropped some CSS into block.css for our styling.

Using our custom block

So now we can jump over and create a new post or page and add the block. To keep that 4-column style for the pricing options, we first add a columns block and then drop our custom pricing table block into each column.

Clicking the “Add block” button, you can see here our Pricing Table block is ready to go.

The below shows how I’ve got four columns and have added the custom block four times. As I select an individual block you can see it switch to the form UI that gives us our fields for dropping in content. Clicking away from the form view gives us the preview.

Looks lovely in the block editor and looks just as good on the front end. Because we’re leveraging the columns block as well, everything is nice and responsive.

With our designs done for us to work from and being able to lean on the responsive columns block of Gutenberg, the total build time of this block for me was less than 10 min. 🙂

There are a couple of things you could do to improve the block even further:

There are a few strings that need to be pluralized. I.e. “WordPress Site” should be “WordPress Sites” for plans with more than 1 site limit. Some basic logic in the PHP template file could solve this.
You could skip the columns block and instead use the Repeater field (Pro feature) and contain all the plans in a single block.
Add commas to larger numbers.
The progress bars show exact value to max relationships. This looks a little odd. You could switch to something more conceptual of the values.

Wrapping things up

If you would like to download and install this block, you can downloa d the files here. Documentation on importing custom blocks can be found here.

Comments ( 18 )

play aviator

April 17, 2025

Here, you can find lots of slot machines from top providers.
Users can enjoy traditional machines as well as new-generation slots with high-quality visuals and exciting features.
Even if you're new or a casino enthusiast, there’s a game that fits your style.
play aviator
Each title are ready to play round the clock and optimized for PCs and mobile devices alike.
You don’t need to install anything, so you can get started without hassle.
Platform layout is easy to use, making it simple to explore new games.
Register now, and discover the world of online slots!

Reply
play aviator

April 17, 2025

This website, you can discover a great variety of online slots from top providers.
Players can enjoy retro-style games as well as feature-packed games with stunning graphics and interactive gameplay.
Even if you're new or an experienced player, there’s always a slot to match your mood.
casino
The games are available 24/7 and designed for PCs and smartphones alike.
No download is required, so you can get started without hassle.
Site navigation is easy to use, making it simple to browse the collection.
Register now, and dive into the excitement of spinning reels!

Reply
Jerryseeni

April 16, 2025

Hey there!

You already know that backlinks are the foundation of SEO. But what if I told you that you can now boost your sites to DR 38+ (Ahrefs) faster, more stable, and easier than ever before?

Premium XRumer Database with verified DR38+ donors is your golden ticket to:
? Powerful link-building without the usual headaches
? Explosive traffic growth from elite backlink sources
? Lightning-fast rankings even in ultra-competitive niches

With this database, your competitors won't even see you coming!

Click the link right now and claim your access:
[url=https://ify.ac/1dI6]Premium XRumer Database - Fast & Stable DR38+ for Your Sites![/url]

P.S. The database is constantly updated – only fresh, high-authority sites. Don't miss your chance to dominate search rankings with minimal effort!

Click the link – it's time to rule the SERPs!

Reply
Jerryseeni

April 16, 2025

Hey there!

You already know that backlinks are the foundation of SEO. But what if I told you that you can now boost your sites to DR 38+ (Ahrefs) faster, more stable, and easier than ever before?

Premium XRumer Database with verified DR38+ donors is your golden ticket to:
? Powerful link-building without the usual headaches
? Explosive traffic growth from elite backlink sources
? Lightning-fast rankings even in ultra-competitive niches

With this database, your competitors won't even see you coming!

Click the link right now and claim your access:
[url=https://ify.ac/1dI6]Premium XRumer Database - Fast & Stable DR38+ for Your Sites![/url]

P.S. The database is constantly updated – only fresh, high-authority sites. Don't miss your chance to dominate search rankings with minimal effort!

Click the link – it's time to rule the SERPs!

Reply
my-articles-online.com

April 15, 2025

Платформа дает возможность поиска занятости по всей стране.
Здесь вы найдете множество позиций от настоящих компаний.
Мы публикуем объявления о работе в разных отраслях.
Подработка — вы выбираете.
https://my-articles-online.com/
Поиск удобен и подходит на новичков и специалистов.
Регистрация займёт минимум времени.
Нужна подработка? — заходите и выбирайте.

Reply
www.clocksforlife.com

April 13, 2025

This online store offers a wide selection of decorative wall-mounted clocks for any space.
You can discover urban and vintage styles to enhance your interior.
Each piece is carefully selected for its craftsmanship and accuracy.
Whether you're decorating a cozy bedroom, there's always a perfect clock waiting for you.
portable alarm clocks
Our assortment is regularly expanded with new arrivals.
We prioritize customer satisfaction, so your order is always in trusted service.
Start your journey to perfect timing with just a few clicks.

Reply
Детективное агентство

April 12, 2025

Онлайн-площадка — официальная страница частного сыскного бюро.
Мы предоставляем поддержку в сфере сыскной деятельности.
Команда сотрудников работает с повышенной этичностью.
Наша работа включает поиски людей и выявление рисков.
Заказать детектива
Любой запрос рассматривается индивидуально.
Применяем современные методы и ориентируемся на правовые стандарты.
Если вы ищете настоящих профессионалов — вы по адресу.

Reply
Jonahjaita

April 7, 2025

На нашем портале вам предоставляется возможность наслаждаться обширной коллекцией игровых автоматов.
Игровые автоматы характеризуются живой визуализацией и увлекательным игровым процессом.
Каждая игра даёт уникальные бонусные раунды, увеличивающие шансы на выигрыш.
1win
Игра в слоты подходит любителей азартных игр всех мастей.
Есть возможность воспользоваться демо-режимом, а затем перейти к игре на реальные деньги.
Проверьте свою удачу и получите удовольствие от яркого мира слотов.

Reply
1xbet казино

April 6, 2025

На этом сайте вы можете играть в обширной коллекцией слотов.
Слоты обладают живой визуализацией и интерактивным игровым процессом.
Каждый слот предлагает особые бонусные возможности, улучшающие шансы на успех.
1xbet казино слоты
Игра в слоты подходит любителей азартных игр всех мастей.
Можно опробовать игру без ставки, а затем перейти к игре на реальные деньги.
Испытайте удачу и насладитесь неповторимой атмосферой игровых автоматов.

Reply
iMedix health news

April 5, 2025

The role of gut health in overall well-being is a growing area of interest. Understanding the microbiome and its influence on digestion and immunity is fascinating. Learning about probiotics, prebiotics, and diet impacts gut health. Awareness of medical preparations targeting digestive issues is relevant. Knowing about antacids, laxatives, or treatments for IBS requires information. Finding evidence-based insights into gut health separates fact from fad. The iMedix podcast explores emerging health science like the microbiome. It serves as a medical podcast discussing the latest research understandably. Tune into the iMedix Health Podcast for gut health information. iMedix: Your Personal Health Advisor includes digestive wellness.

Reply
iMedix health news

April 5, 2025

Understanding food labels helps make informed nutritional choices. Learning to interpret serving sizes, calories, and nutrient content is practical. Knowing how to identify added sugars, sodium, and unhealthy fats is key. Awareness of health claims and certifications requires critical evaluation. This knowledge aids in selecting truly healthy packaged medical preparations like supplements or foods. Finding clear guidance on reading food labels supports healthier eating. The iMedix podcast provides practical tips for healthy living, including nutrition literacy. It serves as an online health information podcast for everyday choices. Tune into the iMedix online health podcast for label-reading skills. iMedix offers trusted health advice for your grocery shopping.

Reply
DennisClirl

April 5, 2025

На нашей платформе вы можете найти различные онлайн-слоты.
Мы собрали подборку слотов от ведущих провайдеров.
Каждая игра обладает оригинальным дизайном, бонусными функциями и щедрыми выплатами.
https://aboutus.com/Special:SiteAnalysis?q=casinoreg.net&action=homePage
Пользователи могут тестировать автоматы без вложений или выигрывать настоящие призы.
Меню и структура ресурса максимально удобны, что делает поиск игр быстрым.
Для любителей онлайн-казино, этот сайт — отличный выбор.
Попробуйте удачу на сайте — тысячи выигрышей ждут вас!

Reply
bs2beast.cc

April 4, 2025

Что такое BlackSprut?
Сервис BlackSprut удостаивается интерес многих пользователей. Что делает его уникальным?
Этот проект предоставляет интересные функции для тех, кто им интересуется. Интерфейс системы характеризуется простотой, что позволяет ей быть доступной без сложного обучения.
Важно отметить, что BlackSprut имеет свои особенности, которые делают его особенным в своей нише.
Обсуждая BlackSprut, нельзя не упомянуть, что многие пользователи имеют разные мнения о нем. Некоторые выделяют его возможности, другие же рассматривают более критично.
Подводя итоги, эта платформа продолжает быть темой дискуссий и привлекает интерес разных пользователей.
Ищете актуальное зеркало БлэкСпрут?
Хотите узнать актуальное ссылку на БлэкСпрут? Мы поможем.
https://bs2best
Периодически ресурс меняет адрес, поэтому нужно знать актуальное ссылку.
Свежий доступ всегда можно найти здесь.
Проверьте актуальную версию сайта у нас!

Reply
RobertLibre

April 3, 2025

Здесь представлены актуальные политические события со всего мира. Регулярные обновления помогают следить за важных событий. Здесь освещаются глобальных политических процессах. Объективная аналитика позволяют разобраться в деталях. Следите за новостями вместе с нами.
https://justdoitnow03042025.com

Reply
b2best.at

April 1, 2025

BlackSprut – платформа с особыми возможностями
Платформа BlackSprut вызывает обсуждения разных сообществ. Но что это такое?
Эта площадка предоставляет интересные функции для аудитории. Оформление сайта отличается функциональностью, что делает платформу интуитивно удобной даже для тех, кто впервые сталкивается с подобными сервисами.
Необходимо помнить, что BlackSprut имеет свои особенности, которые отличают его в определенной среде.
При рассмотрении BlackSprut важно учитывать, что определенная аудитория выражают неоднозначные взгляды. Некоторые отмечают его функциональность, другие же оценивают его с осторожностью.
Таким образом, эта платформа продолжает быть предметом обсуждений и вызывает заинтересованность разных пользователей.
Где найти актуальный доступ на БлэкСпрут?
Хотите найти актуальное ссылку на BlackSprut? Мы поможем.
bs2best at
Иногда ресурс меняет адрес, и тогда приходится искать актуальное ссылку.
Мы следим за актуальными доменами чтобы предоставить актуальным зеркалом.
Посмотрите рабочую ссылку прямо сейчас!

Reply
Jasonflimb

March 31, 2025

We offer a vast selection of high-quality pharmaceutical products to suit your health requirements.
Our online pharmacy guarantees speedy and safe delivery wherever you are.
Each medication comes from trusted pharmaceutical companies so you get effectiveness and reliability.
You can browse our online store and get your medicines in minutes.
Got any concerns? Customer service are here to help at any time.
Take care of yourself with reliable online pharmacy!
https://www.goodreads.com/review/show/6965494316

Reply
BryanAdugh

March 21, 2025

Immerse yourself in the world of cutting-edge technology with the global version of the POCO M6 Pro, which combines advanced features, stylish design, and an affordable price. This smartphone is designed for those who value speed, quality, and reliability.

Why is the POCO M6 Pro your ideal choice?

- Powerful Processor: The octa-core Helio G99-Ultra delivers lightning-fast performance. Gaming, streaming, multitasking—everything runs smoothly and without lag.

- Stunning Display: The 6.67-inch AMOLED screen with FHD+ resolution (2400x1080) and a 120Hz refresh rate offers incredibly sharp and vibrant visuals. With a touch sampling rate of 2160 Hz, every touch is ultra-responsive.

- More Memory, More Possibilities: Choose between the 8/256 GB or 12/512 GB configurations to store all your files, photos, videos, and apps without compromise.

- Professional Camera: The 64 MP main camera with optical image stabilization (OIS), along with additional 8 MP and 2 MP modules, allows you to capture stunning photos in any conditions. The 16 MP front camera is perfect for selfies and video calls.

- Long Battery Life, Fast Charging: The 5000 mAh battery ensures all-day usage, while the powerful 67W turbo charging brings your device back to life in just a few minutes.

- Global Version: Support for multiple languages, Google Play, and all necessary network standards (4G/3G/2G) makes this smartphone universal for use anywhere in the world.

- Convenience and Security: The built-in fingerprint sensor and AI-powered face unlock provide quick and reliable access to your device.

- Additional Features: NFC, IR blaster, dual speakers, and IP54 splash resistance—everything you need for a comfortable experience.

The POCO M6 Pro is not just a smartphone; it’s your reliable companion in the world of technology.

Hurry and grab it at a special price of just 15,000 rubles! Treat yourself to a device that impresses with its power, style, and functionality.

Take a step into the future today—purchase it on [url=https://ify.ac/1Y26]AliExpress[/url]!

Reply
Binance注册奖金

February 22, 2025

Thanks for sharing. I read many of your blog posts, cool, your blog is very good.

Reply

Rebuilding the Flywheel pricing table as a custom block (in about 10 min)

The block

The set-up

Registering & configuring the block

Templating the block

Using our custom block

Wrapping things up

Comments ( 18 )

play aviator

play aviator

Jerryseeni

Jerryseeni

my-articles-online.com

www.clocksforlife.com

Детективное агентство

Jonahjaita

1xbet казино

iMedix health news

iMedix health news

DennisClirl

bs2beast.cc

RobertLibre

b2best.at

Jasonflimb

BryanAdugh

Binance注册奖金

Join the discussion Cancel reply

Similar articles