Working Remotely During COVID-19: Challenges and Tips from Artbees

Amid the COVID-19 outbreak, many companies around the world were forced to roll out remote work as their top policy to help slow the rapid spread of Coronavirus. And we weren’t the exception! As a member of the WordPress community with 80% of our staff already working remote, shifting to working-from-home mode was not a major hassle for us. Following the initial announcement, we partially shut down the office, and nearly everyone was asked to begin working remotely during COVID-19. Since the beginning of last week, we completely closed our office doors, and we are now happy to announce that our team is 100% remote, hoping we could – even if only a bit – help to break the chain of infection.

Obviously, this shift was pretty new for a couple of us, and we experienced some challenges to get everything in place working from home. So to get a grasp on real-life experience, we asked both our veteran remote workers and newbies to share what challenges they faced and how they overcame them. We also gathered some tips on how to effectively work in lockdown, which could be helpful for anyone struggling to strike the work-life balance at home.

Constant communication is key

Remote work means you are also remote from your colleagues, office environment, coffee break chats and more. According to the stats, 20% of remote workers struggle with loneliness. Working remotely during COVID-19 with the added pressure of social distancing doubles concerns about a breakdown in communication. This loneliness and lack of proper communication with colleagues can demotivate and negatively affect the overall quality of someone’s work. Fortunately, in the age of the internet with numerous communication tools available, this shouldn’t be a major issue anymore.

Working Remotely during COVID-19

Set up daily stand-up meetings with your team or supervisor at the beginning of the day. Even a single wave in a short video conference will boost your energy for the day. Use tools such as Slack, Skype and Zoom to be in constant communication with your team.  Tatyana, our Senior Support Staff, also believes that anyone can easily overcome the miscommunication issue:

I myself have been working remotely for 6 years. Sometimes it’s difficult as you don’t have your colleagues near your side, and no one will give you a piece of advice. But in the age of technology, this problem can be solved. We have different messengers like Skype, Slack, Viber where you can communicate with each other.

Treat it like you are at the office

Working remotely from home? Woohoo! I’ll go ahead and wear my warm pajamas, jump in my cozy bed, have my coffee by my side  and promise to be the most productive me! Stop there! This is definitely the worst approach toward working from home.

Working in your house clothes in an improper place like your bed can affect productivity in the long run. So try to get up at least an hour before work starts, take a shower and get dressed. You don’t have to be too formal. Doing things such as brushing your hair, putting on make-up (if that’s part of your work routine) and dressing in comfortable and proper clothes is enough to help your brain to prepare for work. This also helps establish some normalcy, which is particularly important while working remotely during COVID-19. Plus, you won’t be caught off guard if your supervisor makes a video call out of nowhere!

Gulhan – who is a developer – and two members of our support staff, Alexander and Aamir, think you should define a specific routine to stay organized while working from home:

Gulhan: I wake up early and always go to bed and wake up at the same time even on weekends. Because my brain clock knows my routine I never feel sleepy or tired. I also change my clothes before I start to work. Working at home doesn’t mean that we work with sleeping clothes. Nobody is asking us to suit up surely but working in sleeping clothes is not acceptable at all.

Alexander: When you work remotely the main thing is to be self-organized and divide your home routines and working time. Get up before the working shift starts, at least 1 hour earlier to do some morning exercises, and never work in your pajamas!

Aamir: One tip for working from home is to make sure that you get dressed. There’s something about getting dressed, putting clothes on,  brushing your hair, because when you do this, it kind of puts you into work mode and it tells your brain, ‘okay I’m transitioning from the bed into work mode.’

Equip your home office efficiently

One of the biggest challenges of working remotely is finding the best spot to establish your workplace that isolates you from your personal life and family members. Dedicate a special time to set up your home office and do as much as you can to equip it with any tools and devices that will help you keep your productivity steady.

Working Remotely during COVID-19

If you’re a messy-desk type of person and have already made peace with your clutter, then this piece of advice will be the easiest task for you to accomplish! Just grab your laptop, find a place for it on your desk and start creating wonders! But those who are used to working on a neat desk, you should take time to create your own workplace away from any distraction. The best thing to do would be to dedicate one room to work. But if you live in a small apartment, a comfortable corner that separates you from the rest of your home would also do the job. Get a comfortable chair that you can safely spend hours on and try to choose a place with enough natural lighting. Separating yourself from your personal life like this also helps your family members understand you are officially at “work” and to respect that by not distracting you with any conversation, chores, etc.

After all, it’s a matter of what works the best for you. You might want to change your workspace once in a while from your room to a sofa in the living room or even to the balcony. You will gradually figure out what and where allows you to focus on your work better. Just like what Aamir suggests:

You don’t have to be in the same spot every single day. Sometimes what I do is I actually go hang out in my sisters room and I actually get work done there, because when you work from home it’s nice but sometimes after a while you can easily get bored and it can drive you crazy.

Or you can separate a room for work – and only work – like what Gulhan did:

I have my own working space at home and it’s designed like an office. I have only 1 table and 1 very comfortable chair and that’s all. I did not put a second chair intentionally, because I did not want anyone else to come to my room to hangout or chat.

Or like Alexander, pay close attention to the furniture and devices you need:

The most important part is a working place: spacious table, comfortable chair, ergonomic keyboard and mouse, eye-friendly monitor (don’t forget to keep your eyes safe). Good and stable internet connection also plays an important role to be more productive.

Sometimes you need to personalize your home office as much as possible to stay focused. Patrick, our developer, believes so too:

Having my own desktop and laptop. I cannot simply work on other people’s devices. I mean you need something that you own personally. And I work on desktops more than laptops. I love a large screen, keyboard and mouse. I feel much more productive and comfortable.

And finally, as we mentioned earlier, choosing the best spot to work depends entirely on you and your mood. Nodari, a member of our support staff,  for example, went against all odds and figured out he can be productive and creative in different locations –even on a hammock!

Sitting at the PC desk for several hours can be very boring, can affect your back and probably you will be tired very soon. This was the problem I was dealing with when I started working from home, then I started exploring some other options and this is what I came up with:

The main station – I call it my main working desk where I spend most of my time with my laptop. It’s kind of a universal place and usually I use it when I’m working on a serious task.

Sofa – I love it because I can take different poses on the sofa, I can lie on it, and I can even take half sitting half lying poses! 😀

Beach chair – not often but I have one and sometimes it’s very comfortable to lie on it. Maybe it’s reminding me of summer and sun? 🙂

Hammock – Believe it or not, I have a hammock in the room! It’s great for creativity!

Well, why not?! If it helps you stay focused and increases your productivity, then go for it! Even if it runs counter to all the tips mentioned above!

Take small breaks

While working at home, you obviously don’t have the option to get up and go around the office or meet in the cafeteria for a coffee and chat a bit with co-workers. You are more likely to spend all day behind the desk, which is dangerous for your health and bad for the quality of your work.

Take small breaks, prepare a tea or a coffee, take casual walks around home and get back to work again. But remember, your break times are for relaxing only! Try not to mix it with completing chores around the house!

Working Remotely during COVID-19

If you have small children, go spend some time with them while they’re watching cartoons. Have a conversation with other family members. Put on your headphones and listen to your favorite music, do exercises, yoga or meditation for a couple of minutes, which will boost your mental and physical health. This is invaluable advice, particularly while we are working remotely during COVID-19 and ongoing social distancing.

Nearly all our colleagues pointed out the importance of breaks:

Tatyana: Don’t sit at the desk the whole working day! You’ll be tired and bored. Take a 5-min rest after each hour, make some cup of coffee or tea or even talk to your remote colleague via chat or video call.

Aamir: Make sure that you take frequent small breaks, these are really important. I usually follow the 20-20-20 rule. It goes like this “Every 20 minutes, take a 20-second break and focus your eyes on something 20 feet away.”

Alexander: Don’t forget to take breaks each 1-2 hours and shake your bones, as sitting and working affects your health in a bad way.

Patrick: Have flexible break times. I either take a break before or after a daily stand-up meeting. Sometimes I’m in the zone and I have to pause my break for later. And I drink coffee twice a day, one after I started my day and another one after my break.

One final word to leaders

And finally, a word to all leaders and managers working remotely during COVID-19! As a manager in the web industry, there is a high probability that you already developed remote working strategies for at least a couple of your employees – meaning that managing a remote working team won’t be that difficult for you. But managing a team during a pandemic can be challenging, and you might need to develop extra plans to lead your team through this tough time. Many plans you previously put in place might not be effective or appropriate during this time.

For example, following the Coronavirus outbreak, all kids are at home now, so be as flexible as you can with working hours to your teammates with children. It might be difficult for them, at least in the beginning, to balance their time between kids and work.

Keep track of your teammates and communicate with them more often. A casual chat or a video call to check on if they’re doing ok and all is well with work would be very motivating and will drag them out of unwanted isolation.

Send feedback to your team more than usual, celebrate their wins and get them engaged in group conversations on Slack or any other instant messaging app. It’ll make them feel as if they are part of the family.

Hold virtual happy hour meetings once a week and ask everyone to join with their favorite snacks and just talk about anything other than work – you could even get their family members to join. Trust me, nothing will boost their morale more than this during this challenging time.

We are in this together!

Working remotely during COVID-19 can pose challenges to our lives, particularly with the stress, rumors and negativity that come with the outbreak. However, if it’s done in the right way, it can even be the most productive period of your professional life. So accept the challenge and always remember that your lockdown has such a big effect on reducing the likelihood of transmission. So stay inside, stay connected, stay safe and don’t forget that we’re all in this together!

We also shared our experiences working from home in the video below. If you have any other tips and experiences regarding remote work, please comment below and help us spread the useful knowledge!

Key Elements for Creating an Agency Website

Agency website templates are all about design that is clean and easy-to-understand, which in turn allows visitors to easily access information from the homepage.  In this article, we break down this concept and discuss the key elements in creating an agency website.

You’re in luck! We’ve gone ahead and compiled a list of the most crucial elements needed for an agency website. Plus we included a couple of interesting gems that will allow you to showcase your agency.

And more good news: you don’t have to be a programmer to create a professional-looking agency website. In other words, you won’t have to write a single line of code at any stage of building up an agency website. A major part of the work is done for you already, and every user gets the most out of their preferred site editor. Let’s dig in!

Hero sections

Hero sections are the part of the page that appear as the first element. Your site visitors will notice the hero section the second they enter your site – as you might imagine, hero sections are one of the most important sections for agency websites. Your goal here is to create an eye-catching section that will keep the visitor on your page and invite them to browse other parts of your site.

Usually, the hero section is built with a visually appealing background or side image, brief explanation text of the company’s main goal and sometimes call-to-action buttons.

Jupiter X has several examples of how a hero section can attract visitors. Let’s check them out:

  1. The hero section from the Startup template:
Key Elements for Creating an Agency Website

2. The hero section from the Digital Agency template:

Key Elements for Creating an Agency Website

3. The hero section in the Agency 2 template:

Services section

The services section is another vital part of your agency website that should not be overlooked. In this section, you should display all services offered to your visitors, which means that it should be crystal clear and easy to understand. You can provide a brief explanation of the service and a call-to-action button for more information. These buttons can be used to direct visitors to the single services page.

The popular layout for any services section is divided by several columns. Elements, image elements and tabs can be used to beautifully display the services offered by your agency.

  1. The services section from the Agency 2 template:

2. The services section in the Ruminus template:

3. The services section in the Metis template:

Key Elements for Creating an Agency Website

Portfolio

The portfolio section is where you’ll need to beautifully showcase your recent work. The appearance of this section depends on the type of your business. So, if you have a software agency, then you have to list the most popular programs you’ve completed. If you’re a web design studio, then you might want to list the websites you’ve created. If you’re a music composer, you can list your popular soundtracks and so forth. In other words, depending on what you do and what you want to showcase, the elements used in a portfolio will change accordingly.

In Jupiter X, there are several Elementor widgets to showcase portfolios. These portfolios can be dynamic or they can be assembled with elements that are not dynamic and manually linked to the single portfolio page or to directly linked to the project website.

Let’s take a look at some examples:

  1. The portfolio section in the Euporie template:

2. The portfolio section found in the Metis template:

Key Elements for Creating an Agency Website

3. The portfolio section in the Zethus template:

Recent publications

Recent publications could be treated as a blog section. Of course, what you decide to name this section when creating an agency website is up to you. Depending on what you prefer, you can call this section “recent publications” or a “blog”. The blog section on the main page might contain recent publications from your company’s activity. Nowadays, keeping up with blog posts has become extremely important. So, if you decide to place this section on your main page, then you have to constantly publish your posts.

Whenever I browse a company’s website, I pay attention to the blog section such as the date when they last published a post. So for instance, if it’s been 6 months or a year since they last posted, then I might come to the conclusion that the company is not paying attention to the public or are not serious about keeping up with the latest trends in their industry.

Jupiter X has several Blog widgets to showcase recent publications. You’ll need to use the Posts element and style the look as you want in the element settings.

  1. A recent publication section in the Startup template:
Key Elements for Creating an Agency Website

2. A recent publication section from the Agency template:

Partner section

This section highlights the prominent partners of a company or business, which can go a long way in increasing the value of a brand and could generate extra leads. The power of the partner section shouldn’t be understated. If you have partnered with globally recognized or trusted partners, the chances are that other big companies will want to partner with you as well.

  1. The partner section in the Agency template:

2. The Partner section in the Startup template:

Subscribe section

At some point, subscribers might become your next client or partner, meaning that they are one of the most important parts of your business. While creating an agency website, keep in mind that you’ll definitely want to have a subscription section right on your homepage. This beautifully created section may also attract more visitors, and you might also want to include some info about  what you’re going to do with the list of subscribers. In other words, it’s a good idea to promise that you won’t spam their mailboxes and that they’ll be able to opt-out anytime they want.

  1. The subscribe section in the Startup template:
Key Elements for Creating an Agency Website

Footer anatomy

Footers could play a significant role on your agency website. While designing a footer, you should remember one vital thing: the footer appears on every page, so you’ll need to make it very attractive and informative. A footer is a place for only necessary information, such as contact info, important pages on your site (such as About Us or Pricing) and a subscription box.

  1. The footer section as seen in the Startup template:
Key Elements for Creating an Agency Website

2. The Footer section in the Zethus template:

3. The footer section in the Digital Agency template:

Key Elements for Creating an Agency Website

Conclusion

When you have a powerful tool such as Jupiter X at your disposal, creating an agency website shouldn’t be a complicated process. Jupiter X offers a great selection of web templates dedicated to agencies that have differing profiles. In order to build up an agency website, 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 set! 

I hope this article will help you create an agency website that suits your needs in no time at all. We’d love to hear about your experiences, so please comment in the section below!

Introducing Odise: Personalized Marketing Automated

Jupiter X has been around for about 7 years now. More than 130,000 websites from a wide range of niches have been built with Jupiter X. But is that it? What is it you should do after building a professional WordPress website?

What comes after a WordPress website is built? Growth

Once you build a WordPress website for your business your next move is obviously to expand your website audience. This means collecting and nurturing leads, making sales and retaining your customers. You could spend money for outbound marketing campaigns such as Google and Facebook Ads – but to do this organically, your best bet is your content.

By content, we’re referring to your website content, marketing campaigns, pop-ups, emails – essentially, anything and everything you use to promote your business to your audience. If you use a one-size-fits-all content policy, your audience engagement will be minimal. In other words, you need to give each segment of the audience the content they want.

Marketing is no longer one size fits all

Marketing is no longer a same-for-all reachout mechanism. In the near future, the only marketing that will be  relevant is personalized marketing.

Imagine that you can have a massive eye that watches over the journey of our site’s visitors from the moment they arrive until they are a loyal customer. And now imagine that this eye can provide visitors with different versions of your homepage based on their background, smart pop-ups tailored to their behavior and exclusive email campaigns suited to their purchase history.

For both personalized marketing campaigns and website content, you’ll need to incorporate many tools. Unfortunately, there are too many tools out there that are overly complicated and expensive.

Personalization is a cluttered and expensive space

Looking at the tools that help with main website content personalization, Segment is for enterprises, and Optimizely and Proof are also for enterprises but are relatively expensive for small-to-medium sized businesses.

Solutions in the personalized email marketing space exist such as Mailchimp, which personalizes based on audience behavior and engagement. However, this happens abstractly regardless of the global behavior of users on the website inside the app and so forth.

Pop-up creators such as Unbounce Popups or Sumo are also mere creators but fail to offer much in the way of personalization.

The bigger problem at hand is that these tools are not able to work together for personalization as part of a whole.

The closest solution for this is Intercom, which allows journey-based personalization but only through a chat widget and email notification. There’s no possibility to personalize in-page content, and again it’s fairly expensive for a small-medium businesses.

So, an all-in-one solution that makes it possible to personalize creation, monitoring and management based on global user behavior is sensible.

Meet Odise: Personalized Marketing Automated

Two years ago at Artbees, we thought of a tool that facilitates the personalization of marketing content (website, emails, pop-ups) in an all-in-one environment. A marketing assistant that can automatically personalize all marketing content based on user attributes and behavior.

We worked on Odise for about two years and recently released the beta version entirely for free on ProductHunt.

Odise is a marketing assistant that reveals the behavioral patterns of users across their journey on your website from acquisition to retention and automatically provides personalized website content, marketing campaigns, emails, pop-ups and more based on each user’s stage, attributes and preferences.

Introducing Odise - Personalized Marketing Automated
Automation Dashboard

1- Discover and oversee your customer journey

Odise provides multi-dimensional insight into your website users’ journey across your website in different stages – from acquisition to nurturing to conversion and retention.

Introducing Odise - Personalized Marketing Automated
A Customer Journey Sample

Select one or multiple dimensions and see what those users did on your website.

Multi-dimensional Customer Journey

2- Automate all your marketing activities in a ‘If This Then That’ dashboard

Having discovered different working and failing funnels, define automation rules to serve each funnel (as broadly or specifically as you want) as its own personalized experience.

Introducing Odise - Personalized Marketing Automated
Rule-based Marketing Automation

Automate marketing actions such as sending emails as well as showing or personalizing content for your visitors based on the stage in their journey.

3- Personalize your website content

The Webpage Personalizer helps you show everyone their own version of your website based on their stage, attributes and preferences.

This Odise personalizer tool allows you to make changes as well as add or remove content to your page without touching the source code.

Webpage Personalizer

4- Build and send personalized email campaigns

Create highly personalized emails for your leads and customers and contact them across their journey on your website.

Introducing Odise - Personalized Marketing Automated
Personalized Email Builder

Use Odise’s powerful email builder to create smart email templates or use one of its various carefully-crafted readymade templates.

Introducing Odise - Personalized Marketing Automated
Readymade Email Templates

5- Build and serve personalized pop-ups

Create personalized pop-ups to collect and nurture leads, as well as to convert and retain your customers.

Personalized Pop-up Builder

Or use one of Odise’s various readymade templates in different categories such as lead generation, discount, cart abandonment, giveaways, events and more.

Personalized Pop-up Templates

6- Get human-made analytics reports about your marketing activities

Enough of useless attribution and analytics reports! See tailored performance reports about your website performance and automation. Odise’s analytics reports will allow you to make decisions about your next move – nothing more or less.

Automation Reports

Define a timeframe and see a list of your topmost items in each dimension such as location, landing pages and sources.

Introducing Odise - Personalized Marketing Automated
Actionable Analytics

What’s next? A.I. enters the scene!

Our next step is enabling artificial intelligence, which will take a load off the shoulders of the website tenant by monitoring their website, suggesting the right practice and eventually taking over all marketing activities from ideation to execution to reporting.

Try out for free and help us shape the future of marketing

You might be surprised to learn that Odise is now totally free! We’ve invested two years at Artbees to make a bootstrapped and independent product that solves problems we think many small-medium businesses have with marketing on their own. We deliberately released it totally for free at the beginning to collect honest user feedback and shape its future before we start monetizing it.

Our aim is to make personalized marketing an affordable, easy and mainstream marketing activity – not a marketing luxury carried out only by big brands and corporations.

We cannot wait for our community to try this on their WordPress websites and let us know what they think about it. Does it help them grow their business? What is missing? And what direction should we take going forward?

Everything You Need to Know to Create a Music Website

Want to create a music website but don’t know where to start? You’ve come to the right place! In this article, we’ll show you how to create an effective music website that will impress both your fans and industry professionals.

Starting a professional music website with WordPress is key for more visibility to gain more fans and followers. Below, we’ve gone ahead and listed some key elements that you can incorporate to create a music website.

Slider

Slider is an excellent way to display information – such as images from your concert – in an organized and compact manner. Slider galleries are excellent for organizing content into a neat, clean module. Refer to the example below from the Aoede template:

Everything You Need to Know to Create a Music Website
slider from the Aoede template

Video

Rather than redirecting fans to YouTube, focus their attention on your videos that are embedded directly onto your music website. One of the dangers of YouTube is that there might be hundreds of live videos filmed by your fans on the platform that might not best represent your band. 

When it comes time to create a music website, keep in mind that you should place your most recent or most popular videos at the top of your Videos page. Don’t forget to update the page with new videos to keep the content fresh. Check out the example of the video below in the Jazz Club template.

Everything You Need to Know to Create a Music Website
A video in Jazz Club Template

Images Layout

A Photos section is an essential menu option to have on your music website. It’s no secret that fans like to browse photos of their favorite bands. If you include an Images Layout element, then it will keep fans browsing your website for longer. 

Creating separate galleries for different kinds of photos makes it easier for people to find the content they’re looking for – as you can see in the  Aoede and Apollo templates. So you should have separate galleries for official photos, live photos, fan photos, etc.

Everything You Need to Know to Create a Music Website
Image Layout

Audio element

When making a music website, you must also have a music player as your fans should be able to listen to your songs. In this way, the Audio element is extremely useful. Allowing your visitors to listen to your tracks is great for your fans and will help make your music heard and known.

You can also include some text about your music as well. For this, check out how the Audio element works in the Podcast template.

Everything You Need to Know to Create a Music Website

Countdown Timer

The power of the countdown timer is that the ticking down of the clock adds extra urgency in the customer’s mind. You can use it when selling tickets to your concert as shown in this template.

Also, a great example of the countdown is in the Pasithee template. The fans will see that time is running out, which will become a factor in their purchase decision.

Events

Creating the Events page while creating a music website will allow you to notify your fans about upcoming concerts, provide detailed info on showtimes, cover charges, opening bands, and the venue.

Here, you can also showcase one of your best live videos so fans know what to expect if they come to see your show.

You can also use multiple calendars on your Events page, which means that you could, for example, a local shows list plus a touring list. Take a look at the Aoede and Pasithee templates to find out how the Events page might look.

Everything You Need to Know to Create a Music Website

Team Member

Introduce the band to your fans. Describe who you really are and what makes you different from the rest. You can also include social links of each team member so the visitors can follow their favorite musicians. Don’t forget to mention all the accomplishments that you have achieved. Check out the Thyone and Aoede template to view an example.

Testimonials

Testimonials are an excellent addition to every music website. At least one or two should be placed on the home page. Placing more testimonials on other pages of your site – such as your About page – is even better.

Testimonials are effective, because they are based on actual experience, and visitors to your site will see what you have to offer they will have a real reason to believe and will become your new fans. The Thyone and Night Club Listing templates include testimonials, so you can view the examples.

Everything You Need to Know to Create a Music Website

Contact Form

Contact Forms are a must-have to allow site visitors to get in touch with you. This is especially important for media or industry professionals.

Use a custom form with fields requesting site visitors to fill out specific information. These details are then compiled into a neat email that will be sent to you, as seen on the Thyone and Apollo templates. 

Blog

Creating a blog on your site will allow you to provide your audience with frequent and regular content to tell your story, showcase your music, and expand your ideas. It also allows you to differentiate yourself and show your fans the person behind the music. It’s a place where you can connect with your fans through music and your interests and even attract new fans. To show blog posts, you’ll need to use the Posts element and style the look as you want in the element settings.

Everything You Need to Know to Create a Music Website

Wrapping Up

In this article, we presented the key elements needed to create a music website and showed you different web templates for musicians that look very professional. So with this article at your disposal, the process of building up a music website shouldn’t be overly complicated. We hope this article will help you to create a great website that showcases your brand, and your music in a professional way online.

How to Create a Custom Gutenberg Block Using the ACF Plugin

Due to its popularity – as well as its popularity in the WordPress community – the Advanced Custom Fields (ACF) plugin needs no introduction. In a nutshell, ACF has made the developer’s job a breeze for adding custom fields anywhere in WordPress, now it’s time to help them create a custom Gutenberg block using ACF.

Not surprisingly, Elliot Condon (the creator of ACF) hasn’t stopped there. He introduced a groundbreaking feature called ACF Blocks for Gutenberg in the ACF PRO version 5.8, which is a game changer for ACF and Gutenberg players.

In this article, let’s see how we can implement this in real life and create a custom Gutenberg block using ACF.

Note: This article requires the ACF PRO plugin version 5.8.0 and above. If you’re a Jupiter X user, you can activate the plugin from Control Panel > Plugins.

Before diving into writing codes

ACF is a simple yet advanced plugin. If you’re unfamiliar with the ACF plugin, we recommend that you read the following articles to build a good foundation before proceeding any further.

Create a custom Gutenberg block using ACF

Creating native custom Gutenberg blocks requires decent knowledge of JavaScript, which is not ideal for many users. The ACF Blocks feature is here to save time and help you to unlock your potential for creating custom Gutenberg blocks.

Let’s create a Blockquote block in a few simple steps.

custom Gutenberg block using the ACF

1. Prepare a base plugin

Let’s create a base plugin to hold the block 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-acf-blocks folder.

custom Gutenberg block using the ACF

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

custom Gutenberg block using the ACF

3. Activate the plugin from WordPress admin.

custom Gutenberg block using the ACF

2. Register a block

Using the acf_register_block_type() function, we can add a new block in Guttenberg with PHP. 

1. Add the following function in the plugin.php file to define the block properties.

function mab_register_acf_block_types() {
    acf_register_block_type( [
        'name'            => 'blockquote',
        'title'           => __( 'Blockquote' ),
        'description'     => __( 'My blockquote block.' ),
        'render_template' => dirname( __file__ ) . '/blocks/blockquote/blockquote.php',
        'category'        => 'formatting',
        'icon'            => 'format-quote',
    ] );
}

2. Hook into acf/init action to register the block.

if ( function_exists( 'acf_register_block_type' ) ) {
    add_action( 'acf/init', 'mab_register_acf_block_types' );
}
custom Gutenberg block using the ACF

3. Now you should be able to see the block in the Gutenberg editor. As you see, the block is empty and has no settings. In the next step, we’ll add some settings.

custom Gutenberg block using the ACF

3. Create a field group

To create the block settings, you need to register your settings in a field group.

1. Add a field group called Block: Blockquote in Custom Fields > Fields Group, then add the following fields (settings). There’s no limitation to add the fields but it’s recommended to keep it as few as possible.

2. In the Location, set the Block to Blockquote. By doing so, ACF will show the created fields (settings) for the Blockquote block.

3. Now, you should be able to see the settings in the Gutenberg editor. If you change the settings, nothing will happen. In the next step, we’ll implement the settings.

4. Render the block

Finally, we need to tell ACF how to render the block. This is just a standard process to get the settings and generate the HTML properly.

1. Create blockquote.php in the blocks/blockquote folder in your plugin, then add the following codes. The codes are based on standard ACF docs.

<?php

// Create id attribute allowing for custom "anchor" value.
$id = 'blockquote-' . $block['id'];
if ( ! empty( $block['anchor'] ) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'blockquote';
if ( ! empty( $block['className'] ) ) {
    $className .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$color = get_field( 'color' );
$quote = get_field( 'quote' ) ?: 'Your blockquote here...';
$author = get_field( 'author' ) ?: 'Author name';

?>
<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $className ); ?>">
    <blockquote class="mab-blockquote">
        <span class="mab-blockquote-text"><?php echo $quote; ?></span>
        <span class="mab-blockquote-author"><?php echo $author; ?></span>
    </blockquote>
</div>

2. Now you should be able to see the block in the Gutenberg editor. By default, it has some default values, which you can change by altering the Quote and Author settings.

3. Now, let’s spice it up by adding some styling. Add blockquote.css in the blocks/blockquote folder in your plugin, then add the following codes.

.mab-blockquote {
    padding: 50px 30px;
    text-align: center;
    border: 8px solid #ff3131;
}

.mab-blockquote-text {
    display: block;
    padding-bottom: 30px;
    font-size: 26px;
    font-family: serif;
}

.mab-blockquote-author {
    color: #777;
    font-family: sans-serif;
    font-size: 18px;
}

4. ACF can’t automatically detect the styling files. In other words, we need to tell it where to find the file. Add the enqueue_style param in the plugin.php file.

'enqueue_style'   => plugin_dir_url( __FILE__ ) . '/blocks/blockquote/blockquote.css',

5. Now, you should be able to see the block in the Gutenberg editor as shown below.

6. Now, let’s take another step and make the border color dynamic based on the Color setting. Open the blockquote.php file then do the following modifications.

<blockquote class="mab-blockquote" style="border-color:<?php echo $color; ?>;">

7. Now you should be able to set a different border color from the block settings.

Conclusion

Now that you have enough knowledge to create a custom Gutenberg block using ACF, you can create any type of custom blocks for Gutenberg.

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