How to Create a Custom Gutenberg Block with Lazy Blocks Plugin

custom Gutenberg block with Lazy Blocks - featured

Every day, we’re seeing more and more plugins extending Gutenberg in different directions. This is great news for Gutenberg lovers since they can enjoy using it even more. One of those handy plugins that we’re going to cover today is called Lazy Blocks
In this article, we’ll look at how we can create a custom Gutenberg block with Lazy Blocks. It’s worth mentioning that we also published similar articles.

Before diving into writing codes

The user-friendly architecture of this plugin will help us to easily create custom Gutenberg blocks. The following sums up the plugin’s key features:

  • User and Gutenberg friendly UI.
  • Various controls (checkbox, email, file, gallery, image, repeater, …).
  • Usage of Handlebars, which makes writing PHP codes a breeze.
  • Separate editor and frontend code blocks to help us write different outputs.
  • Custom templates for your posts.
  • Many hooks for PHP and JS codes.
  • Good documentation.

We recommend that you check out the following resources to become more familiar with this plugin:

Create a custom Gutenberg block with Lazy Blocks

The mentality behind this plugin is to spend your time and energy on the result, not on learning how to create blocks. This mentality will allow you to unleash your potential in creating custom Gutenberg blocks.

In this article, we omitted some technical and extra explanations, so you can more easily follow this post’s flow in making your first block. To learn even more about the process, you might want to read the plugin documentation.

So let’s dive into it and create an attention-grabbing Gutenberg Blockquote block in a few simple steps.

custom Gutenberg block with Lazy Blocks

1. Plugin installation

Go to Plugins > Add New, search for lazy blocks. Then install and activate the plugin.

custom Gutenberg block with Lazy Blocks

1. Configuring the block

To configure the essential settings for the Blockquote block, go to Lazy Blocks > Add New then fill the Title and Icon settings as shown below. You may change other settings based on your needs.

custom Gutenberg block with Lazy Blocks

2. Add the block controls

Controls allow us to specify dynamic settings for a block, and it’s almost necessary for all the blocks to have controls. They offer flexibility for the blocks. We suggest that you read the Controls documentation.

To create the Blockquote block’s controls based on the initial design (as shown above), we need the following Icon Background, Avatar, Text and Author controls. You may add more controls based on your needs. Let’s create them.

1. Under the Controls section, go to the Content tab and click on the + icon to add the controls.

2. Add the controls one by one as shown below.

custom Gutenberg block with Lazy Blocks

3. At the end, your controls should look like below.

3. Write the block code

Now we need to write the actual codes based on the design to make the Blockquote block work. In this section, we also use the created controls in the block to make it dynamic based on the settings.

1. Under the Controls section, go to the Frontend tab and add the following codes. The controls names have been wrapped in curly brackets {{control-name}} then added inside the following code. We recommend that you read the Codes documentation.

<blockquote class="lazyblocks-blockquote">
    <span class="dashicons dashicons-format-quote" style="background-color:{{icon-background}};"></span>
    <p class="lazyblocks-blockquote-text">{{text}}</p>
    <footer class="lazyblocks-blockquote-footer">
        <img class="lazyblocks-blockquote-avatar" src="{{avatar.url}}" alt="{{author}} quote" />
        <span>{{author}}</span>
    </footer>
</blockquote>

2. Update the block and go to a page to see how the block works. You may add different texts, names, avatars and icon backgrounds to the block. All this can also be added in different layouts like columns.

Conclusion

In this blog post, we easily created a custom Gutenberg block with Lazy Blocks without the hassle of creating a separate plugin, child theme or other development obstacle. This Lazy Blocks plugin will definitely help actualize your ideas about custom Gutenberg blocks in no time. 

We’d love to hear from you, so please share your custom blocks with us in the comment section below.

Key Sections to Include in Your Creative Website Template

Today, web development in the digital era moves at a rapid pace. The time of plain-text websites ended long ago. And this is for the better. The choices for unique website templates – from interactive web templates to animated web templates – available to the customer is mind-blowing. And this is particularly true to anyone in creative fields who’d like to quickly and easily build up a creative website template.

Optimal website design plays a vital role in the success of a business. Making a good first impression is the most important part, and it directly correlates to user engagement. In this article, we break down this concept and discuss the key sections needed for a creative website template.

When someone first enters your website, there are a couple of essential elements that will grab their attention. This article explains everything that you need to know to make a great first impression.  As you might have noticed by now, our other posts highlight that programming skills are not necessary in creating a creative website template. Furthermore, this becomes even easier if you have a WordPress theme that comes with everything you need like Jupiter X.

Hero Section

The purpose of a header is to convey the core of your business to the visitor.  A carefully designed header design layout must announce the core of your business to the visitor. In designing the layout of the header, you have several choices: a static header image, a header image with text overlay, a slideshow header or a video background header. 

While hero sections vary in terms of layout, for example, a popular use case is the full-screen hero section. However, this is not the rule, and you may also use a half-screen hero section. Jupiter X Creative Studio, Jove and Architecture templates offer different designs of hero sections for a creative website template:

Creative Website Template
Creative Website Template
Creative Website Template

Services

Following heroes, in the Services section, companies or individuals talk about their services or the area of their main specialization. This is probably the most important part of the whole website. In this section, you’ll need to introduce services offered by your company to your visitor. While there are several standards and known design rules about how to design such a section, you are free to change this up since we’re talking about creative website templates. Make it your own by offering something new in design, layout or colors. But let’s not get too carried away: don’t forget to keep the section clean and simple. In other words, anyone viewing your website shouldn’t leave your site with any questions about what you’re offering them and how. 

Let’s go ahead and take a look at several examples of a Services section in Jupiter X Creative Studio and Startup templates.

Creative Website Template
Creative Website Template

About Us

When it comes to the About Us section, professional website designers and developers only provide very little information on the main site. This can be seen as a brief about what the brand is about – it’s better to keep these short and simple on the homepage. In terms of location, it’s good to place the About section either right after the Hero section or below the Services section. However, this is not the rule, and you can also place this info in the Hero section. 

The About Us section should contain a brief description of the company or person, how they started the business, where they are at this moment and what is in their future. Here are some examples from Jupiter X Kore and Jove templates.

Creative Website Template
Creative Website Template

Partner

Partner sections are a vital aspect to your website, as they provide visitors confidence into a company’s dependability. Most Partner sections contain lists or a table of partner logos. While logos are often more readable and recognizable, it’s also essential to include the partner’s full name in addition to their logo. You can also add a link to their website in this section. 

Depending on the number of partners in the section, we might also include a short synopsis of your relationship and how they are partnering with you. You might want to take it a step further, and give each partner their own profile page. Another option is to group the partners by categories; for example partners in design projects, software exchange projects and so on. Check out these examples from Jupiter X Agency and Persephone templates.

Creative Website Template

Clients

The Clients and Partners sections are similar to each other. However, they differ in their purpose. Clients are the most valuable thing as businesses are fully dependent on clients. Similar to the Partners section, we can use a list of logos. We can also add links to a project that your company worked on for a client.  

Along with a list of clients, we may also include testimonials (which is a great addition to any kind of website) from previous clients, which will add more weight to the section and increase user engagement. Below are examples from Jupiter X Agency and Creative Studio templates.

Creative Website Template

Showcase

A Showcase – or commonly known as a Portfolio section – is a great opportunity for you to display your work and case studies to visitors. This section isn’t only for work: you can also use it to show your unique personality, talent and experiences. Portfolio sections are particularly useful in creative fields for photographers, designers, developers and more. 

To get a better idea of how you can put this into action, take a look at some Showcase sections in Jupiter X Creative Studio, Software 2 and Persephone templates.

Photo Album

If you’re a photographer or creative artist, then having a Photo Album section on your site is a must to showcase your art. It’s important that you are able to showcase your work in the most creative way possible, which is why placing raw images in a column simply won’t cut it. That’s where the Photo Album section comes in handy as it offers variation in creatively displaying photos. Take a look at the following examples from Jupiter X:

Full examples can be viewed here:

https://jupiterx.artbees.net/elements/photo-album/

Contact section

On traditional websites, you’ll find important info like the site map, address, link to the website’s privacy policy page in the Footer section by default. This information is usually organized in several columns, and the most popular is a combination of three or four columns. 

Of course, with creative website templates, you’re definitely not bound to this rule, and you might want to leave only important information in the footer. Creative templates are all about the creative approach, which calls for simplicity. In the Contact section, you might want to input only the necessary information such as contact details, social media or several words for engagement. Check out some of samples below from Jupiter X Jove, Agency, Kore and Persephone templates:

Wrapping Up

Incorporating creative websites into your development process all depends on the goals of your site and the needs of your visitors. Developing a creative website is probably the most interesting design work you can come across – but it’s also the most challenging. The main thing to keep in mind is not to get overwhelmed by new ideas. It’s worth mentioning that while adding several moving elements onto a page might look visually appealing, it might be difficult to make them responsive. 

Jupiter X offers a great selection of web templates dedicated to creative agencies or individuals. And the great news? You don’t have to start from scratch, as the readymade templates can be imported with just a few clicks – all you’ll need to do is change the text and images and you’re all good to go!

We hope that this article provides you with all the tools you need to implement creative website templates into your pages. We’d love to hear about your experiences, so please comment in the section below!

Key Elements Needed to Create an Online Store

It’s well known that online shopping is big business. Online shops are popular for obvious reasons. Customers don’t have to leave their homes, they don’t have to wait in queues and they can shop 24/7. Even if you’ve never built a website before, you can create an online store  with ease. The Woocommerce plugin will help you do just that. It’s bundled in the Jupiter X theme so you can install it easily.

During the process of building up your own online store, you might be wondering which elements are the best to display products as well as to create custom templates and single product pages. Below I’ve provided some tips that will help you attract buyers and boost sales.

Design the look of your online store

First, you need to consider design when sitting down to create an online store. Focus on simplicity, and everything that you do should be in line with what you would like to accomplish. Alternatively, you can get a ready-made template and customize it to your own needs. Fortunately, there are great ecommerce templates for Jupiter X provided by Artbees that have clean designs, intuitive layouts and follow the latest web design trends.

Don’t forget to continuously update and add fresh content to your site to keep visitors coming back for more.

Introduce your e-commerce experts

Aside from wanting to find out more info about your product, visitors want to know more about you and your business on a personal level. The “About Us” page is a great place to both add such content and to introduce your team using the  Team Member element. This allows you to explain to your customers who everyone is and what they do. Describing who your team members are outside the office and providing contact info is also a great idea. These details make the team and the company much more relatable and friendly. Check out the Flowerpot template with the example of the Team Member element.

create an online store

Contact information

When you’re looking to create an online store, keep in mind that your contact information should be clear and easy to find. Make sure to mention your contact email, address and social media channels. All this info can be placed on the Contact page and such elements like Icon List and Icon Box will help you to style these fields.
What kind of Contact page would it be if there was no contact form? Remember to add the Form element to this page as is shown in the Watches Shop template.

create an online store

Show off your partners

It’s important to establish your reputation in order to gain the confidence of your visitors. You can do this by showing which companies you work with. They don’t necessarily need to be big companies –  even smaller companies can add a degree of trustworthiness to your enterprise. To show your partners, it’s better to use the Brands element where you can display your partners’ logos as can be seen in the Pollux template:

Gain your visitors’ trust by adding product reviews

Online shoppers can’t meet retailers in-person, so they have no choice but to rely on other buyers’ feedback. The Woocommerce plugin allows customers to leave ratings and reviews on product pages, which saves consumers time by quickly showing what other customers think about the product. 
Furthermore, you can blockquote the reviews and show them on other pages with help of the Testimonials element. Don’t hesitate to ask your customers to leave a review after making a purchase. Customers who are satisfied with your product will be glad to share their positive experience with others. Refer to the Chaldene template for an example.

create an online store

Display your best sellers

You’ve already spent a lot of time and effort in getting customers to your store – however, many of them still leave without buying anything. This means that you might have only a few seconds to capture and retain a visitor’s attention by showing the right product. And if you don’t do this correctly, they just might decide to leave and look elsewhere. That’s why it’s so important to get the right products in front of your customers quickly.
Best sellers can help you make more sales and profit from your existing traffic. With the Products element, you’ll be able to select which products to show. Check out the Clothing Shop and Decoration Shop templates for examples.

create an online store

List the categories for an easier search

When creating products, you assign them to different categories. This helps to differentiate the products between various criteria. The Category page is vital to help you narrow down options for people and guide them to their desired product page so they can make a purchase. 
To showcase categories, you can use the Categories element where you’ll be able to select Woocommerce categories as an option. There is also a possibility to create a custom category template with the JetWooBuilder plugin. Instructions are laid out in this article. Take a look at the categories grid in this Food Delivery template.

Make sure your store is mobile-responsive

When creating an online store, it’s important to keep in mind that many people nowadays use their phones or tablets to make online purchases. This means that you need to ensure that your site design is mobile-friendly, so buyers can shop no matter which device they’re using. When creating content with the Elementor editor, you can customize it for different devices: mobile, tablet and desktop. Here are the options they provide:

https://docs.elementor.com/article/68-mobile-editing

It’s better to use vertical designs over horizontal designs for easier scrolling and content viewing on phone screens.

Make use of social media!

Advertising on social media channels is a powerful way to connect with lots of potential customers in fun, creative ways. There are tons of social media networks, but the ones you’ll probably find the most valuable are Instagram and Pinterest.

Because both of these are more image-driven platforms, they align well with selling products.

Instagram will give you a way to showcase your product itself, along with how it’s commonly used. Pinterest, on the other hand, gives you the opportunity to create and share content that’s related to your niche and drive targeted traffic back to your site.  
You can also display Instagram photos on your site by using the Instagram element.

Create custom archive and single product pages

Using the standard Woocommerce pages is boring. In other words, creating your own template for your shop pages would be much more interesting. We’ve got great news for you! You can do exactly this with the JetWooBuilder plugin – which is conveniently bundled into the Jupiter X theme. This is the perfect tool for quickly and effortlessly setting up a stylish web store. Inside the pack of the plugin, there’s a powerful set of WooCommerce widgets. Furthermore, the JetWooBuilder does not require extra skills as it’s quick, intuitive, and user-friendly. 
You can read more about how to create custom templates for product pages in the following articles:

Build a Powerful WooCommerce Website using JetWooBuilder and Jupiter X

and

Meet JetWooBuilder! The Ultimate Tool to Create Unique Product Page Templates With Jupiter X

Build relationships with customers

Email marketing is an easy way to build relationships with your customers. You’ll need to collect the emails of buyers and make sure that they want to receive messages from you. One of the methods to ask buyers whether they want to receive email notifications is by displaying a pop-up window while they’re browsing.  I also recommend that you track which customers unsubscribe from your email list as this is quite useful. You can use this info as well as other details from their buyer profile to figure out why they might have unsubscribed and how you can prevent future cancellations.

To create a pop-up window, you can use the Jet Popup plugin, which is bundled in the Jupiter X theme as well. Having a pop-up is a great feature as it’s the first thing that visitors see when they go to your site. It immediately catches their attention. Also users cannot ignore the pop-up.

And the Subscribe Form is an appropriate element to use in the pop-up window so you’ll be able to collect the buyers’ email and notify them with updates about your products. Check out an example of the pop-up and subscribe form in the Shoes Shop template.

Don’t hesitate to offer discounts

Offering discounts on purchases is a way to get visitors into your store quickly. Discounts don’t only help your shoppers – they also help your business. Your sales will increase and your  reputation will be improved, so discounts may be that one ingredient that can bring success to your business.

If a discount is time-limited, the buyers will be forced to act at that moment. Here, the Counter element will be quite helpful. With Counter you’ll be able to set a time limit, and it’ll be a last chance to get a discount on everything (or almost everything), so the buyers must act fast!

Limited-time discounts are a smart marketing move. Visitors will get on them like there’s no tomorrow – that is, as long as you’re honest about it. If you say your offer ends on Friday, it should end on Friday. Otherwise, your buyers won’t act quickly the next time because they’ll expect the offer to last longer.

Wrapping up

In short, there’s not much of a debate anymore over whether or not to create an online store. There are tons of advantages: your store will be open 24/7 and customers will be able to make purchases by simply clicking on a button. An online shop also removes the barriers of travel and parking, which allows you to reach more customers. And online store owners get to enjoy the fact that their store’s doors never close.

In this article, we took a deep dive into how you can build up your own store online quickly and easily in Jupiter X. So save time and energy and create a shop site with a Jupiter X template. There are many templates to choose from, so the creation process will be much easier for you!

How to Create a Community Poll Website with Jupiter X – Part 2

create a community poll website

In the previous article, we stopped right after we created a community poll website, which enables users to submit their own polls. . In this post, we’ll walk you through the rest of the process.  The next step is setting up a homepage where users will be able to see the latest votes, filter them based on their tags and also be able to search between them. After that, we’ll need to design the single poll page.

Step Four: Implement the single polls page and the homepage

This is what I want from the homepage: a list of the latest approved polls, which includes the title, subtitle, latest vote date and created date. In case the poll was closed, it should also show a lock icon in the top right corner.

create a community poll website
Logged out view of the desired homepage.

Also, if the user is  logged in, the polls that I’ve already voted on should turn green, so it becomes possible to distinguish between the polls that I’ve participated in and the ones that I haven’t.

create a community poll website
Logged in view of the desired homepage.

At first look, it seems possible to implement this by using a simple listing with the help of Jet Engine and Jet Smart Filter plugin. Well, this is true for sure.  However, one thing that is missing is the conditional logic of colors. Jet Engine doesn’t give me the ability to distinguish between the polls I’ve voted in and the ones I haven’t.

So, the trick here would be to define a custom shortcode, place it inside a listing and then use it to have smart filters. The following code will give me a shortcode that I can use inside a Listing template on Jet Engine. It represents a single topic with the desired conditions that let me style it as I wish:

add_shortcode( 'custom_poll_item', 'custom_poll_item_function' );


function custom_poll_item_function( $atts ) {
   global $_gdpol_poll;
   $topic_id =  get_the_id();
   $poll_id = gdpol_get_topic_poll_id($topic_id);
   $custom_clasees = " " . get_post_status($topic_id) . " " . " poll_list_item";
   $topic_title = get_the_title($topic_id);
   $topuc_desc = get_the_content($topic_id);
   $uploads = wp_upload_dir();
   $upload_path = $uploads['baseurl']; 
   $topic_thumbnail = get_the_post_thumbnail($topic_id) ? get_the_post_thumbnail_url($topic_id) : $upload_path . 'https://d34b8fs2z18t5a.cloudfront.net/2020/01/chart.png' ;
   $topic_post_date = get_the_date('U', $topic_id);
   $topic_url = get_post_permalink($topic_id);
   $last_active = strtotime( get_post_meta( $topic_id, '_bbp_last_active_time', true ) );   
   $topic_button_text = "I want to Vote!";

   

  if(is_user_logged_in())
  {
  	$user_id = get_current_user_id();
  	$has_voted_or_not = gdpol_db()->user_voted_in_poll($poll_id, $user_id);
  	if($has_voted_or_not) 
  	{
        $custom_clasees .= " voted ";
        $topic_button_text = "Already Voted";
  	}
  	else {
  		 $custom_clasees .= " not_voted ";
  	}
  }
  else {
  	$custom_clasees .= " not_voted ";
  }


  $output = "
			    <a href=\"" . $topic_url .  "\"  class=\"poll_link_list_big\" >
	  				<div class='" . $custom_clasees . "' >
		  				<div class='thumbnail_poll' >
		  					<img src='".$topic_thumbnail."' />
		  					<div class='topic_date' >Created: " .  esc_html( human_time_diff($topic_post_date, current_time('timestamp') ) ) . ' ago' . "</div>
		  					<div class='topic_date_last_activity' >Last activity: " .  esc_html( human_time_diff(date('U', $last_active), current_time('timestamp') ) ) . ' ago' . "</div>
		  				</div>
		  				<div class='poll_body' >
		  					<h3>". $topic_title."</h3>
		  					<div>". $topuc_desc."</div>
		  				</div>
		  				<div class='poll_list_last_column'>
		  					<div class='poll_permalink_button'   >".$topic_button_text. "</div>
		  				</div>
	  				</div>
  			    </a>
  			 " ;

	return $output;
   
}

Just put this in your child theme’s functions.php, and the shortcode will be available. I also need to style it a little bit, so I’ll go ahead and add this CSS fix into the jupiterx-child/assets/less/style.css:

.poll_link_list_big .poll_list_item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.thumbnail_poll {
    max-width: 100px;
    padding: 6px;
    background: #E0E0E0;
}

.topic_date {
    /* font-size: 7px; */
    /* margin-top: 7px; */
}

.thumbnail_poll {
    min-width: 100px;
    font-size: 7px;
    color: #777575;
    text-align: center;
}

.thumbnail_poll img {
    max-width: 48px !important;
    margin: 9px;
}

.poll_body {
    justify-content: flex-start !important;
    text-align: left;
    width: 80%;
    padding: 5px 15px;
}

.poll_link_list_big {
    display: flex;
    background: rgba(224, 224, 224, 0.48);
    position: relative;
}

.poll_body >h3 {
    color: black;
    font-size: 18px;
}

.poll_body > div {
    color: grey;
    font-size: 12px;
}

.poll_list_last_column {
    padding: 10px;
}

.poll_permalink_button {
    background: #fb6800;
    color: white;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
}


.publish.poll_list_item.voted {
    background: rgba(84, 218, 100, 0.14);
}

.voted .poll_permalink_button {
    background: #00ab00;
}





body .poll_link_list_big .closed:before {
    font-family: "Font Awesome\ 5 Free" !important;
    display: block;
    width: 16px;
    hright: 16px;
    color: #ababab;
    font-size: 16px;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
     content: "\f023";
     position: absolute;
     right: -7px; top: -4px;
}

Now, go to Jet Engine -> Listings and add a new Listing Item. I named it as “polls.”

create a community poll website
Adding the “polls” Listing template.

While editing the listing, set the Listing Source as “Posts” and assign the “Topics” post type to it. You can set the whole item to be clickable as well.

Configuring the “Polls” Listing template to show the “Topics” post type.

Now drop the Shortcode element into the page, and add this shortcode to it:

[custom_poll_item]

This is the name of the shortcode that we previously built in the functions.php file.

Adding the custom shortcode to the listing template. 

As soon as the shortcode is added, you should be able to see the result in the preview. It’s better to set the margin and column gap of the sections here to 0. Now that you added the listing template, you need to use it on a Listing Grid and put it on your page. 

Go to your homepage and drop a Listing Grid element into the content. Then configure it as follows:

Configuring the Listing Grid to show the latest polls. 

In order to load more polls, you need to add a button and set it’s ID as “loadmore_latest,” which is the ID you set in the Load More Element ID section of the listing grid.

Adding the proper ID to the Load More button.

Now it’s time to add the search box on top of the polls list and then add the tags filter at the bottom. I’ll use a Smart Filter plugin to do that.

Go to Smart Filters and add two filters: 

  • Tags Selection filter 
  • Search for polls
Adding a new Smart Filter.

For the search box, use the Search filter type:

Setting up the search filter type (text box).

And for the tags, use a Radio type as follows:

Setting up the tags filter using a Radio filter.

Update the filters and go back to the homepage. Now drag and drop the search filter and radio filter into the page.

Adding the Search and Radio filter elements to the homepage.

And assign the filters as you wish. Then style them using their styling options.

Configuring the filters to work with the smart filters created earlier.

Also, this CSS snippet is needed to remove the radio circles and to also show a different color on the selected tag:

.elementor-element .jet-radio-list__input:checked ~.jet-radio-list__label {
    background: #ff5c08;
    color: white !important;
}

.elementor-element .jet-radio-list__input ~.jet-radio-list__label {
    background: white;
    padding: 2px 20px 8px;
    color: #0a0a0a !important;
}

The homepage is ready now! Publish the changes, assign this page as your homepage in WordPress Settings -> Readings and check your website. 

‌By clicking on every vote item, you’ll be directed to the polls page where you can participate in the polls. Styling this page requires some modifications in the child theme. 

In the previous article, we showed how to override the bbPress template files in a child theme. Just like before, I would need to override gdpol-poll-content.php from wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ in wp-content/themes/jupiterx-child/bbpress/gdpol-poll-content.php. 

Also I need to override content-single-topic.php from wp-content/plugins/bbpress/templates/default/bbpress/ in the same directory of my Jupiter X child theme (bbPress). 

You can edit the rest of the template files in order to get the look you’re going for. You can find more information here.

Editing the content-single-topic.php file.

Instead of the poll title and description, we used the topic title and description in the previous article. So, we need to show the topic title and description in the poll single page template.

Editing the gdpol-poll-content.php

In the end, adding this CSS snippet to jupiterx-child/assets/less/style.less will give you a better look in the single topics page:

.gdpol-choices-list legend {
    font-size: 12px;
}

.gdpol-topic-poll header h2 {
    font-size: 2em;
}

.gdpol-topic-poll header p {
    margin-top: 20px;
    /* background: #fffdfd; */
    padding: 20px 0;
}
.gdpol-topic-poll footer, .gdpol-topic-poll header {background: none; }

.gdpol-topic-poll {
    border: none;
    background: #fff;table.wp-list-table.widefat.fixed.striped.posts {
    width: 100% !important;
}
}
.um-dropdown-b li:nth-child(2) {
    display: none !important;
}


a.gdpol-action-show {
    margin-left: 8px;
}


.gdpol-poll-choices label span {float: right;}
.gdpol-poll-choices label input {float: left  !important;margin: 4px 6px 0 0px !important;}


.gdpol-fields-wrapper {
    display: block !important;
    border: none !important;
}

#gdpol-poll-status, #wc-comment-header, .wc_stick_btn.wc-cta-button, .wc_close_btn.wc-cta-button, .bbp-form.gdpol-topic-poll-form legend, .d4p-attachment-addfile
,a.gdbbx-attachment-add-file, .gdbbx-attachment-control >div:nth-child(3), .gdbbx-attachment-control >div:nth-child(4),
.wc-field-submit .wpd_label{
    display: none !important;
}



table.wp-list-table.widefat.fixed.striped.posts {
    width: 100% !important;
}


.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-preview  {
   float: left !important;
   margin-left:  0 !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-control {float: left; margin-left: 15px;}
.gdbbx-attachments-form {
    text-align: left !important;
}


.jupiterx-post-image picture{
    display: flex;
    text-align: center;
    margin-bottom: 50px
}
.jupiterx-post-image img {
    width: auto;
    height: 100%;
    max-height: 400px;
    margin: auto;
}



.single-topic #bbpress-forums ul.gdpol-poll-choices, .single-topic  #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li {
    padding: 12px;
    font-size: 1.2em;
    color: white;
    list-style-type: none !important;
    margin: 0 !important;
    vertical-align: middle;
    padding-top: 24px;
    position: relative; min-height: 75px;
    display: flex;  align-items: center; width: 100%; columns: 1;  flex-direction: column;
    flex-wrap: wrap;
}

.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li label {position: absolute;  top: 0; bottom: 0; right: 0; left: 0; text-align: right; width: 100%; display: flex;  align-items: center; padding: 10px; cursor: pointer;}

/* different colors on the poll choices */
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(odd) { background-color: #292ab1; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(even) { background-color: #1e7b48; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(3n) { background-color: darkcyan; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(4n) { background-color: mediumorchid; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(5n) { background-color: dodgerblue; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(6n) { background-color: darkorange; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(7n) { background-color: firebrick; }
.single-topic #bbpress-forums.bbpress-wrapper ul.gdpol-poll-choices li:nth-child(8n) { background-color: lightseagreen; }

This is the final look on the single polls page:

Final look of the single polls page. 

Step Five: Design the header and footer with Jupiter X and Raven

The next part when you create a community poll website involves designing the headers and footers of the website. There’s nothing special in this section since everything is possible with the Jupiter X’s Custom Header and Custom Footer capability. You may want to put menus and call to actions in the header and ensure they are looking as they should. More information about this section can be found here.

Adding a custom header template with a call-to-action for creating the polls. 

Step Six: Install Ultimate Member and its add-ons and configure

Using a membership plugin can help you create a membership directory and add social networking features to your app. This will also help you monetize your project. For this particular website, we used the Ultimate Member plugin.

Ultimate member plugin in WordPress plugins repository. 

Dozens of add-ons offered by this plugin can help you build a social network. Imagine that the users of your community create polls, share them on social media, and others vote in the polls and join your community. They interact with each other, see their profiles and receive notifications with each interaction. This is all possible with this plugin. Remember that in order to have an integration on the user profiles and the bbPress forums, you would need to use this add-on on Ultimate Member which is premium:

https://ultimatemember.com/extensions/bbpress/

Profile page view and the integration with the forums. We should change the “Forums” to “Polls” later on using translations.

Later on, you can use localization and change the “Topics” word to “Polls.” After installing the Ultimate Member plugin, you need to define some pages as the membership directory page, single profile page and etc. Here you can find more information on how to configure that.

Step Seven: Add custom notification on the poll votes

 Notifications are a must-have for any social poll website. As soon as any sort of interaction occurs, users should be notified. In order to have a notification system, we used the Real Time Notification add-on for the Ultimate Member plugin and configured it as we wanted. By default, it gives you these notifications, and you have full control of the options to enable/disable them and show the texts as you like. 

  • Notify users when the user role has changed.
  • Notify users when someone comments on their post.
  • Notify users when someone replies to one of their comments.
  • Notify users when another member views their profile.
  • Notify users when guests view their profile.
  • bbPress – Notify users when someone replies to them on topics they created.
  • bbPress – Notify users when someone replies to them on a specific topic.

You can find information on how to configure it here:

I want to also notify the owner of the poll whenever his/her poll receives a vote. In order to do that, I’ll write a code with the help of the notification API included in the Ultimate Member add-on called Real-Time Notification.

/*

This code sample shows you how to use the API to create
and add custom notifications (for real-time notifications) in the plugin.

STEP 1: You need to extend the filter: um_notifications_core_log_types with your
new notification type as follows. For example:

*/

add_filter('um_notifications_core_log_types', 'add_custom_notification_type', 200 );
function add_custom_notification_type( $array ) {
		
	$array['new_action'] = array(
		'title' => 'When something happens', // title for reference in backend settings
		'template' => '<strong>{member}</strong> has just did some action.', // the template, {member} is a tag, this is how the notification will appear in your notifications
		'account_desc' => 'When member does some action on my profile', // title for account page (notification settings)
	);
		
	return $array;
}

/*

STEP 2: Add an icon and color to this new notification type.

*/

add_filter('um_notifications_get_icon', 'add_custom_notification_icon', 10, 2 );
function add_custom_notification_icon( $output, $type ) {
	
	if ( $type == 'new_action' ) { // note that our new action id is "new_action" from previous filter
		$output = '<i class="um-icon-android-person-add" style="color: #336699"></i>';
	}
	
	return $output;
}

/*

STEP 3: Now you just need to add the notification trigger when a user does some action on
another user’s profile. I assume you can trigger that in some action hooks.
For instance, when a user views another user’s profile, you can hook like this.



$who_will_get_notification : is user ID who will get notification
'new_action' is our new notification type
$vars is array containing the required template tags, user photo and url when that notification is clicked

UM()->Notifications_API()->api()->store_notification( $who_will_get_notification, 'new_action', $vars );

*/

add_action('gdpol_vote_saved', 'trigger_new_notification', 100);
function trigger_new_notification( $args ) {
	 global  $_gdpol_poll, $um_notifications, $post, $topic;
	 $_poll = gdpol_get_topic_poll_id();
			$poll_author_id =  bbp_get_topic_author_id($args->topic_id); // die();
				update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));

	if ( is_user_logged_in() ) {
		
		$vars['member'] = $args->topic_id;
		$vars['notification_uri'] = get_the_permalink($args->topic_id);

		UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', $vars );
		
	}

	else {
				UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', get_the_permalink($args->topic_id) );


	}


}

After adding the above code, a new notification will be added to the Ultimate Member -> Settings -> Extensions. Remember to activate it and save the settings.

Activating the newly added notification.

In the meantime, I want to update the topic’s last activity meta field with the latest vote time. So, in the last function, you’ll see this line of code:

update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));

This will help you update the latest activity on each poll which is showing on the homepage within the listing you created before. Just add the above code to your child theme’s functions.php file. It’ll give you a look like below. As soon as someone votes on the poll:

create a community poll website
Voting on a poll by a user. 

It’ll send a notification to the user who created the poll.

create a community poll website
The notification received on the other user panel. 

And by clicking on the notification icon, it’ll show you the text that you have provided in your custom function and the configuration of the plugin.

create a community poll website
Custom notification shows up when a vote is submitted on a poll.

More configurations and stylings are possible using custom CSS.

Step Eight: Localize and translate to your own language

The last section in creating a community poll website is translating and localizing the words into your own language. Using the Loco Translate plugin, you can change every single piece of text within this app just as you like. Remember that the texts are located on different plugins, and you need to dig into the plugins to find the source of the text. Mostly, you need to change the word “Topic” to “Poll” wherever it is showing up because of the logic behind this app.

create a community poll website
Translating the Topics to Polls via LocoTranslate.
Results of translating Topics to Polls in the Profile page.

Results, further development and roadmap

We created a social network application based on social polling features. Certainly, there are tons of further considerations to make it like a production app. But the thing is that the base is prepared, meaning that you can add as many features as you want simply by using different plugins and configurations. 

This method will save a lot of money if you aim to build such a community – and compared to the social polling platforms out there, it can be considered almost a free platform. The good thing about this method is that you can keep everything updated and secured with one single click. 

Additional features such as Login by Phone (using two-factor authentication) or the discussion below the threads can be applied to the app using the following plugins:

  • wpDiscuz: advanced commenting plugin. 
  • Digits : WordPress Mobile Number Signup and Login

Adding more plugins may require configurations and, in some parts, or even writing some codes to integrate it with your base. For example, bbPress uses three post types such as “forum,” “topic” and “reply.” You would need to enable the comments for the “topic” post type using custom development because by default, the topics don’t receive any comments. Or you may need to configure the Digits plugin to work with your own SMS platform. 

Also, you may want to push your notification to the users who subscribed to your app or website. This can be done by using FireBase or any other push notification service. However, it may require custom development in some parts to make sure it triggers correctly whenever an interaction happens on your website. 

The last thing you want to do is to wrap the website on a webview and publish it on app stores such as Google Play or iTunes. There are dozens of tutorials out there that can help you with that.

Wrapping Up

Creating a community poll website has never been easier than now. It can be done using bbPress and WordPress and using handy tools such as the Jupiter X theme. Its bundled plugins will ease the process and reduce the cost of development. 
In this series, we provided an overview of how to create a social polling website using their tools we had. Check out the first article of this series here if you’ve come across this post using a search engine.c

Tweaks Made to Improve Jupiter X Performance

For developers, time is of the essence when it comes to delivering a project on a tight deadline. Every second matters – this is the philosophy that helps the Jupiter X team propel itself forward with every new version it releases. After running some performance checks, we noticed that a couple of factors were hindering the Jupiter X performance from reaching its peak potential. So we set out on a mission to fix the inefficient codes, which then in turns saves valuable time for our users.

This post will provide an overview of the recent tweaks we’ve made, and we’ll further look at the efficacy of those changes in our test cases after the 1.15.0 update.

Inefficient codes

While checking the Jupiter X performance, we noticed that one of the themes’ components – called Compiler – was performing poorly, which affected different parts of user experience.

In the Jupiter X theme, the Compiler is responsible for generating and caching CSS and JavaScript. When there’s no cache, it compiles LESS, CSS and JS files and generates the necessary assets in the upload directory.

The Compiler offers some valuable benefits for developers, allowing them to:

  • Add styles and scripts to the theme on the fly.
  • Filter or override the LESS variables used for generating styles.
  • Exclude/include different styles and scripts.
  • Generate automatic RTL styles.

At the start of the Jupiter X road, these benefits seemed quite promising in terms of bringing lots of customizability to the themes. But throughout the years, it appears that the theme industry is moving toward lightweight themes and relying on page builders to increasingly do the job.

All in all, we started to optimize the Compiler to bring faster-compiling assets for the new version of Jupiter X. We did the following optimizations until v1.17.0.

Reduce calling Customizer variables

The Jupiter X Customizer settings rely on the Compiler to generate styles for the frontend. In this way, we send the Customizer settings as an array (variables) to the Compiler, and it generates the proper styles.

That said, it works pretty well – however, we found out we were calling the variables multiple times during each page load. Now, it’s limited to only when generating the styles.

Single post compiling preview/update asset

There are a few post meta options (build via ACF) for single posts. Some of them are styling options. To generate styles for the frontend, we were sending the styles to the Compiler and recompiling the main CSS file.

It turned out that this caused unnecessary recompiling for each post update/preview. We decided to generate separate CSS files for each post (e.g. jupiterx-post-12.css) when necessary.

Refactoring the CSS parser function

We have a CSS parser in the theme which is responsible for the following actions:

  1. Removing empty CSS properties. (Replaced by standard PHP functions)
  2. Minifying CSS. (Replaced by standard PHP functions)
  3. Adding necessary vendor prefixes. (Dropped adding automatic vendor prefixes)
  4. Generating automatic RTL CSS. (Replaced by a faster PHP class)

Using static script

The theme’s main JavaScript file was generated via the Compiler from smaller files, and we came to the conclusion that we don’t need to have on-the-fly compiling for the script file. That said, we replaced it with a Gulp solution to build and distribute the static script in the theme.

Jupiter X Performance test cases

We measured the loading time in the following 5 test cases for comparison. To have a stable testing result for all the tests, the factors below were considered.

  • The comparison was done between version 1.15.0 and 1.17.0. You can check the release notes.
  • Each test was run 3 times (with 30s interval) to calculate the average load time.
  • Development mode (Control Panel > Settings) was set to off.
  • Tested on load environment.
  • Tested on a fresh installation.
  • Activated Jupiter X Core, Advanced Custom Fields and Elementor plugins.

1. Default home page

Improve Jupiter X Performance

This test was completed on a default Jupiter X homepage. The page was loaded 3 times without a cache, and the loading time was recorded.

Result

The v1.17.0 is almost one second faster than v1.15.0, so there was a one-second improvement (30%) in loading without a cache.

2. Loading Customizer

Improve Jupiter X Performance

This test was completed on Customizer loading the default Hello world single post page. The page was loaded 3 times without a cache, and the loading time was recorded.

Result

The loading time in v1.17.0 is almost one second faster than v1.15.0, which is the equivalent to 15% faster loading without a cache.

3. Reloading the Customizer preview

This test was done on Customizer > Blog > Blog Single when changing the Typography settings of the Author Box. The test was done 3 times.

Result

It’s not possible to measure the loading time in Customizer preview, but based on the checks, v1.17.0 is about 40% faster than v1.15.0.

4. Loading the Elementor editor

This loading test was conducted with Elementor on a page with 9 sections. The page was loaded 3 times without a cache, and the loading time was recorded.

Result

The loading time in v1.17.0 is almost 2s faster than v1.15.0, which is the equivalent to a 25% faster loading time without a cache.

5. Elementor previewing

Improve Jupiter X Performance

This test was done on Elementor previewing on a page with 9 sections. The page was previewed 3 times, and the loading time was recorded.

Result

The loading time in v1.17.0 is almost 2s faster than v1.15.0. This is the equivalent to a 50% faster loading time without a cache.

Conclusion

As mentioned before, we strived to enhance Jupiter X performance in various areas of the theme. By improving the code base without sacrificing current features, we were able to significantly decrease loading times, which translates into time saved for our users. 

In the table below, you’ll be able to see the summary of all the test cases mentioned in this article.

Test caseAverage improvement
Default home page30%
Loading Customizer15%
Customizer preview reloading40%
Loading Elementor editor25%
Elementor previewing50%

Last but not least, since we improved the codes to run more efficiently, the usage of CPU and RAM of your server will be decreased.

Of course, there’s still room for performance enhancement, and we’re continually working to improve the theme to make it as performant as possible.

We’d love it if you could share your feedback with us in the comments section.

A Beginner’s Guide to Create a Custom Block for WordPress Gutenberg

Gutenburg, the new WordPress editor, is the future of WordPress. In no time, it’s going to bring a full-site editing experience for users. That said, learning how to create a custom block for WordPress Gutenberg is a fantastic investment. These days, more and more themes (such as the Twenty Twenty theme) are taking advantage of what Gutenberg has to offer.

This post will go over a general introduction of Gutenburg blocks and will then explain how to create a custom block for WordPress Gutenberg.

What are Gutenberg blocks?

Blocks are the core building functionality of the new editor. The idea is that you can add blocks anywhere you want. Blocks are created mostly in JavaScript (sad news for PHP lovers).

Learning a few concepts is necessary before diving into writing codes.

Block registration

First things first – we need to register a block. To register, we need to use the registerBlockType function.

// Registering my block with a unique name
registerBlockType( 'mcb/call-to-action', {} );

Edit and Save

After registering a block, the next step is to tell the editor how to show the block in the editor and how to save it in the database.

Having a proper understanding of the edit and save functions is essential to create a custom block for WordPress Gutenberg.
The edit function is responsible for making the block editable in the editor, and the save function is responsible for saving the block in the database for showing it in the frontend.

// A static div
edit: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

save: function() {
    return wp.element.createElement(
        'div',
        null,
        'My custom block.'
    );
}

Attributes

Almost all blocks need to have attributes. Think of them as a way to talk to the block to change the color, text or spacing for instance.

{
    url: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
// { "url": "https://lorempixel.com/1200/800/" }

Are you a PHP lover?

If so, sorry to tell you that Gutenburg is a React.js based editor. The JavaScript frameworks have taken a leap in popularity among developers. Nowadays, JavaScript is an essential skill to have under your belt.

Take every opportunity to really beef up your JavaScript chops.
– Matt Mullenweg, Creator of WordPress

Available built-in blocks

Following are the list of built-in Gutenberg blocks in WordPress. If you need more blocks, you can read this article about free blocks.

Common blocks

This includes Paragraph, Image, Heading, Gallery, List, Quote, Audio, Cover, File, Video blocks.

custom block for WordPress Gutenberg

Formatting

This includes Code, Classic, Custom HTML, Preformated, Pullquote, Table, Verse blocks.

Layout elements

This includes Buttons, Columns, Group, Media & Text, More, Page Break, Separator, Spacer blocks.

custom block for WordPress Gutenberg

Widgets

This includes Shortcode, Archives, Calendar, Categories, Latest Comments, Latest Posts, RSS, Search, Tag Cloud blocks.

Embeds

This includes Embed, Twitter, YouTube and 29+ blocks.

custom block for WordPress Gutenberg

How to create a custom block for WordPress Gutenberg

Enough is enough – let’s get our hands dirty and start coding! There are different techniques for creating a custom block for WordPress Gutenberg. For the purpose of this article, let’s use one of the most straightforward techniques to build a tailored Call to Action block.

Note: It’s worth mentioning that many detailed explanations have been intentionally omitted to help you follow the flow of the article easily. The intention is to help you create your first block without being weighed down in the minutiae of block creation.

1. Prepare a base plugin

Before doing anything else, we need a plugin to place our codes. Depending on your preferences, you can use a child theme instead of a plugin.
1. Go to your plugins folder on your site, then create a my-custom-blocks folder.

custom block for WordPress Gutenberg

2. Create a plugin.php file as shown below.

3. Activate the plugin from WordPress admin.

custom block for WordPress Gutenberg

2. Enqueue block script and style

Using the register_block_type function, we can enqueue the block’s script and style it with the Guttenberg.

1. Add the following function in the plugin.php file to enqueue the style and script.

function mcb_register_blocks() {

	// Check if Gutenberg is active.
	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}

	// Add block script.
	wp_register_script(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-editor' ],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.js' )
	);

	// Add block style.
	wp_register_style(
		'call-to-action',
		plugins_url( 'blocks/call-to-action/call-to-action.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.css' )
	);

	// Register block script and style.
	register_block_type( 'mcb/call-to-action', [
		'style' => 'call-to-action', // Loads both on editor and frontend.
		'editor_script' => 'call-to-action', // Loads only on editor.
	] );
}

add_action( 'init', 'mcb_register_blocks' );

2. Create the following files in the plugin folder to hold the style and script.

blocks/call-to-action/call-to-action.css
blocks/call-to-action/call-to-action.js

3. Register the block

After preparing the base, it’s now time to create the actual block.

1. In the call-to-action.js file, add the following function to register an empty block.

( function( blocks, editor, element ) {
	var el = element.createElement;

	blocks.registerBlockType( 'mcb/call-to-action', {
		title: 'MCB: Call to Action', // The title of block in editor.
		icon: 'admin-comments', // The icon of block in editor.
		category: 'common', // The category of block in editor.
		attributes: {},
		edit: function( props ) {
			return null;
		},
		save: function( props ) {
			return null;
		},
	} );
} )( window.wp.blocks, window.wp.editor, window.wp.element );
custom block for WordPress Gutenberg

2. For this block, we need both the content and button attributes. Add them as shown below.

attributes: {
	content: {
		type: 'string',
		default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
	},
	button: {
		type: 'string',
		default: 'Join Today'
	}
},

3. In the edit function, we’re going to use the RichText component to create a div to hold the content and a span to hold the button. Basically, this component allows to create an editable text area.

The onChange function is responsible for updating the attributes when you change the block content.

edit: function( props ) {
	return (
		el( 'div', { className: props.className },
			el(
				editor.RichText,
				{
					tagName: 'div',
					className: 'mcb-call-to-action-content',
					value: props.attributes.content,
					onChange: function( content ) {
						props.setAttributes( { content: content } );
					}
				}
			),
			el(
				editor.RichText,
				{
					tagName: 'span',
					className: 'mcb-call-to-action-button',
					value: props.attributes.button,
					onChange: function( content ) {
						props.setAttributes( { button: content } );
					}
				}
			),
		)
	);
},
custom block for WordPress Gutenberg

4. In the edit function, we’re going to use the RichText component to generate the content and a HTML button to generate the button.

save: function( props ) {
	return (
		el( 'div', { className: props.className },
			el( editor.RichText.Content, {
				tagName: 'p',
				className: 'mcb-call-to-action-content',
				value: props.attributes.content,
			} ),
			el( 'button', { className: 'mcb-call-to-action-button' },
				props.attributes.button
			)
		)
	);
},

4. In the call-to-action.css, add the following codes to add some visual styling to the block.

.wp-block-mcb-call-to-action {
	background: #3f39ff;
	padding: 45px;
	text-align: center;
	border-radius: 10px;
}

.mcb-call-to-action-content {
	font-family: serif;
	font-size: 24px;
	color: #fff;
	padding-bottom: 30px;
	margin-bottom: 0;
}

.mcb-call-to-action-button {
	background: #000;
	border: 0px;
	border-radius: 5px;
	padding: 12px 35px;
	color: #fff;
	font-family: sans-serif;
}
custom block for WordPress Gutenberg

5. Now, you should be able to play with the block in the editor.

Wrapping Up

This post provided a basic introduction of what Gutenburg is and how we can create a custom block for WordPress Gutenberg. In other words, think about this article as the very first step in entering the Gutenberg world.

We recommend that you read the WordPress official handbook in order to gain a deeper understanding of the Gutenberg editor.

We’d love it if you would share your custom block with us in the comment section below!