The Gutenberg Editor (or Block Editor), introduced in WordPress 5.0 in 2018, revolutionized the WordPress editing experience when it replaced the Classic Editor as the default option. To further improve the block editing experience, many developers turn to Advanced Custom Fields (ACF). This WordPress plugin allows users to add extra custom fields to WordPress editing screens, extending the Gutenberg editor’s functionality. 

Now, in 2023, some developers might question whether building Gutenberg blocks with ACF is still the right move for their web projects. Some have tossed around the idea that it’s better to use native Gutenberg blocks because full site editing is coming. 

However, it’s our opinion that ACF is still one of the best ways to develop your custom Gutenberg blocks. In this post, we’ll explain why and highlight some relevant ACF updates. 

What are the benefits of using ACF to build Gutenberg blocks?

We can sum up the benefits of building Gutenberg blocks with ACF in three words: simplicity, speed, and familiarity. 

Building Gutenberg blocks with JavaScript can be time-consuming and requires many developers to learn a whole new coding language. ACF makes the process much more intuitive, allowing you to create blocks using the familiar coding language many of us have been comfortable with for years — PHP. 

Furthermore, using ACF makes the block-editing process much simpler for clients who need to add or update content themselves. 

What’s the benefit of creating your own Gutenberg block with ACF rather than using the pre-made options?

Using ACF, you can develop Gutenberg blocks that better suit your unique website needs. You won’t be restricted by the limitations of core Gutenberg blocks or be forced to use one or several plugins to achieve a particular level of custom functionality. This allows you to tailor your website exactly to your (or your client’s) preferences.

What’s new with ACF?

There are plenty of exciting new ACF developments that make the plugin even more beneficial for your development projects. 

ACF 6.0 was released in September 2022, unveiling a fresh user interface, greater accessibility, and other new features that offer more flexibility to developers. Here are a few relevant ACF updates to be aware of: 

ACF 6.0 Blocks can use block.json

JSON is WordPress’s preferred format for registering blocks. It encapsulates the information WordPress needs to know about each block.

Block.json is new in WordPress and has now been added to ACF. This update makes it even simpler to tell WordPress that the block you’ve created is an ACF block and specify the values you want to add to it.

Here is an example of what your block.json file might look like:

{
	"name": "namespace/accordion",
	"title": "Accordion",
	"description": "A block used to show an Accordion.",
	"editorStyle": "file:./editor.css",
	"editorScript": "file:./editor.js",
	"style": "file:./frontend.css",
	"script": "file:./frontend.js",
	"category": "block-category",
	"icon": "table-row-before",
	"apiVersion": 2,
	"keywords": [ "accordion", "block" ],
	"acf": {
		"mode": "auto",
		"renderTemplate": "accordion.php"
	},
	"supports": {
		"align": false,
		"alignContent": false,
		"alignText": true,
		"anchor": true,
		"color": {
			"text": true,
			"background": true,
			"link": true
		},
		"customClassName": true,
		"fullHeight": true,
		"jsx": true,
		"spacing": {
			"margin": [ "top", "bottom" ],
			"padding": true
		},
		"typography": {
			"lineHeight": true,
			"fontSize": true
		}
	},
}

Many of these settings align with the typical settings for registering an ACF block type, with a few changes made to the name, script, and style parameters. 

ACF Blocks can inherit Gutenberg controls 

Inside block.json, Gutenberg controls were previously only available for JavaScript Gutenberg blocks. You can now apply some of the same controls to an ACF block as well — they can be enabled using the ‘supports’ property.

For example, if you want to allow a user to be able to change the background color of a block, you can add the ‘color’ property, then set the ‘background’ property to ‘true’, as seen above.

With that completed, you will then need to get the property set by the user, like so:

$my_block_classes = [];
if ( ! empty( $block['backgroundColor'] ) ) {
	$my_block_classes[] = 'has-background';
	$my_block_classes[] = 'has-' . $block['backgroundColor'] . '-background-color';
}

Finally, implode your block classes array into the top level of your block, like below:

<section class="my-block-name <?php echo ( ! empty( $my_block_classes ? esc_attr( implode( " ", $my_block_classes ) ) ) ) : ''; ?>">

With that completed, the color your user selects will be applied as a background color to your block. Keep in mind that if the WordPress color palette defaults aren’t overridden in theme.json, those defaults will be the colors available to the user.

You can “scope” block styles and scripts to each block 

Along with the block.json update, WordPress is encouraging developers to use the WordPress npm package, wp-scripts (aka @wordpress/scripts), to prepare blocks for rendering on the front end. This allows each block to independently have its own styles and scripts. 

WordPress automatically in-lines the styles and scripts for a block, as defined in block.json. This technique can make pages load faster because they will only appear when the block is present. The other major benefit is that if a certain block doesn’t appear on a page, it won’t load that block’s scripts and styles. This can save on your bundle size and will also keep one block’s styles from impacting the others.

ACF 6.0 features significant UI updates

With ACF 6.0 comes a refreshed look for the plugin, with updates made to admin screens such as the field group editor and tools page. For example, ACF has reduced the height of the fields settings screen by grouping settings into tabs. 

ACF has also made significant strides toward greater accessibility. Now, users can edit fields using only keyboard navigation. Also, ACF has improved focus styling for keyboard navigation, making it easier to see where you are on the page. 

Coming soon: Built-in Custom Post Type and Taxonomy creation

With the expected release of ACF 6.1 in the next few months, ACF users can look forward to custom post type and taxonomy creation within the plugin itself! This is huge news and will help many developers as it might allow them to remove a plugin from a site or allow them to build out custom post types without manual coding. Another nice perk of how ACF is planning to implement this functionality is that all of the Custom Post Type and Taxonomy configuration will be written to local JSON. This means it can be committed to a repository like GitHub, just like the custom field JSON.

Extensions make ACF even more flexible

Dozens of extensions can add supplemental functionality to the ACF framework. One of the most helpful is ACF Extended, an enhancement tool that adds over 100 additional features, such as new fields, new field groups, and bi-directional fields. However, ACFE can be overkill in certain use cases, as all those additional features can add unnecessary bloat. Choose your extensions carefully. There are also plenty of unofficial plugins available that you can use to further build out your web projects with supplemental ACF tools. 

The ACF community is growing

WP Engine purchased five popular developer-focused WordPress tools in 2022, including ACF. With this acquisition, the ACF team has become much more vocal, hosting twice-monthly community-oriented ACF Chat Fridays. Follow ACF on Twitter to stay in the know about when these chats take place and the topics they cover. 

Wrapping Up

Looking for tips and guidance to help you make the most of your WordPress project?  Reach out to Kanopi’s WordPress team or connect with other users via the ACF support page. It’s an exciting time in ACF history, so don’t hesitate to get involved in the community today.  

When CSS was first introduced, it was straightforward. There weren’t any CSS variables, there were no preprocessors. The world was simple, and we were so young! Developers added colors to a site with a hex code (or rgba if they were very lucky and cutting edge!), and those colors were what they were. If a developer wanted to implement a dark and light mode — they often needed to create two completely separate stylesheets and swap the site’s body classes out with JavaScript. Implementing multiple themes on a single site was cumbersome, hefty, and required a lot of additional maintenance.

With the introduction of CSS variables and other color and theme-related CSS features, custom CSS theming has become much easier. When we talk about CSS theming, we’re talking about changing a site based on a user-provided context that lets us still fully control the experience. There is still some element of JavaScript required to swap out the body classes when using a toggle to allow the user to use their preferred theme on your site, but no longer do you have to maintain two separate stylesheets. Native CSS variables make theme swapping much easier than it once was. CSS theming is an excellent way to allow users and developers to dictate website settings easily.

Ways to Use CSS Theming

Dark/Light Mode

Dark and light modes are one awesome, commonplace way to use CSS theming. Users can set their preferred dark or light mode via system settings, browser settings, or even special applications to modify user settings. You can make your entire website respect the user’s settings — which is always nice! 

Branding

Say you’re working on a website that features a few similar products, like breakfast cereals. Each product uses the same overarching information for its brand — just with different colors and fonts. Without rewriting huge swathes of CSS for each different product, you can use CSS theming and perhaps a body class in your HTML to provide totally different branded looks for your products. 

Accessibility

A combination of prefers-contrast or forced-colors media queries with CSS theming can help make your website more accessible. You can make your site look even better and more accessible to users with these preferences.

Common Considerations Introduced by CSS Theming

CSS theming is a valuable tool to have in your developer toolkit, but it does add some complexities you’ll need to consider during implementation.

Respecting User Settings

As mentioned elsewhere, it’s important to respect user settings where possible. It burns the eyes a bit when you’ve got everything set to shades of black (charcoal, onyx, obsidian, jet), and you suddenly land on a page in blinding, brilliant white — or vice versa.

Images

Images are important when theming. Whether it’s an icon where the font color is adjustable, an SVG where the fill color is adjustable, or a regular old JPG, PNG, or WEBP image — you will have to adjust all of the images on your website. A common example is a client logo reel — you’ll have to store two copies (a dark mode compatible and a light mode compatible) in most instances. If you’re lucky enough to have a client logo reel consisting entirely of SVGs, you’ll be able to use CSS to swap the fill. Most of us aren’t so blessed, however. On a site with tons of images — duplication of image files can even become a storage concern if the images are poorly optimized.

Increased QA Time

When you implement CSS theming, the time required to perform quality assurance checks on the work increases. The same pages must be checked multiple times when using dark and light modes. Instructions for swapping dark and light mode must be written so that less-technical QA agents understand the necessary steps and how to perform them. It’s important to bake these increases into the budget and turnaround time when working with CSS theming.

FART

Haha, right? Not so much. The “Flash of inAccurate coloR Theme,” or FART for short, occurs when you have improperly digested your CSS selectors a momentary flash of the incorrect color scheme. For example, say your user prefers to use a dark theme — but your website defaults to a light theme before detecting and swapping to the user-specified preference. FART can be handled in several different ways and is an important consideration when theming. Properly-handled rendering makes your site look that much more polished and awesome.

Tools to Help You Theme

CSS Variables (+ JavaScript)

CSS variables are key to effectively theming with CSS. CSS variables enable you to swap out various CSS properties throughout your custom theme. Variables have been widely supported in modern browsers since approximately 2017, so 2023 is a great (and safe) time to start using them. 

Variables enable flexibility in your theme and stylesheet. They function similarly to preprocessor-based variables, with a slightly different syntax and a key difference: CSS variables can be updated live. Preprocessors compile your variables, so once you’ve set a variable — that’s that; it can’t be updated or changed within the stylesheet. Native CSS variables can be scoped to different CSS classes, and function more like CSS properties.

Some examples of CSS variable syntax:

Declare a variable:

--brand-color: #c4d600

Use a variable:

font-color: var(--brand-color)

It is also possible to scope a variable:

.brand-light {
    --brand-color: #c4d600;
}

.brand-dark {
    --brand-color: #153e35;
}

With a little extra JavaScript toggle magic, the brand-light and brand-dark colors can be added to any part of the page. For a global theme, those brand classes can be added to the html tag or the CSS :root selector. For more specific parts of the page, those classes can be added to individual parts and components.

Media Features & CSS Properties

prefers-color-scheme is a CSS media feature “used to detect if a user has requested light or dark color themes” (MDN). prefers-contrast is similar, used to “detect whether the user has requested the web content to be presented with a lower or higher contrast.” These color scheme preferences work like any standard @media query used to target browsers by screen size — they’re just working off of color and contrast preferences instead of size.

Color scheme is the user setting engaged either in system settings or occasionally the browser settings. This allows you to make your CSS more specific when the user prefers a light or a dark mode, or a high-contrast theme. 

These media features are important for accessibility work, which helps users with low or no sight when browsing your website. When you make your site look even better for these users, you’re going the extra mile in terms of accessibility – always a worthwhile endeavor!

When drilling down to specific elements, the color-scheme property can assist. This property allows an element to indicate which color schemes it can be rendered in. This property is especially useful when styling default form controls; custom form controls such as select or radio buttons can be a bit of a tangle under normal circumstances. The color-scheme property and default form elements make that process slightly less painful.

Theming Specific Libraries, Tools, and Practices

• https://toggles.dev/ provides some amazing premade animated toggles for light and dark modes. Lightbulbs, suns and moons, and other cute icons galore!
• Various front-end libraries have implemented theming-specific tools. It’s always a good idea to check out what the big players are implementing. Bootstrap and Tailwind both have some great ideas and inspiration for CSS theming, with the benefit of widespread usage. It’s great when someone else runs into your problem before you do!
• For testing and QA purposes, you can swap between dark and light modes in various ways. Your computer’s global system settings will allow easy swapping between dark and light modes. However, if you don’t want to go that far — the developer tools in various browsers often also allow you to switch between light and dark modes. Here’s a screenshot showing how to do this in Firefox. 

Summing Up CSS Theming

CSS theming is a new paradigm, with new concerns and considerations. However, there is a lot of power and flexibility that comes along with CSS theming. It’s a worthwhile endeavor to get familiar with CSS theming and the associated new CSS features such as variables, media features, and theming-specific CSS properties. There are plenty of new tools and libraries out there to help you gain fast proficiency with CSS theming.

A new year means a new look at what’s on the horizon. Kanopi is always looking ahead to what is happening in the development space, so we asked our team to give their thoughts on what’s ahead for next year.

We’ve split this into three sections: 

• The top WordPress trends for 2023
• The top Drupal trends for 2023
• The top website development trends (regardless of CMS) for 2023

Let’s start with WordPress …

Top WordPress trends for 2023

New WordPress, new theme, same direction

With the release of WordPress 6.1, Twenty Twenty-Three has already arrived; the new default theme is called (numerically incremented, as usual) Twenty Twenty-Three (TT3). What hasn’t changed is the focus on Full Site Editing (FSE). In fact, TT3 continues with the trend of moving towards FSE. Block patterns are prevalent and variations are implemented theme-wide to allow for a huge variety of customizations (10 theme style variations!) without having to touch any code whatsoever.

What else is new in WordPress 6.1

WordPress 6.1 released on November 2nd with many improvements with much of the focus placed on accessibility and performance. Both of these areas were Identified by developers and the community (after heavy criticism) as needing more love as the Gutenberg block editor received the lion’s share of updates in recent releases.

Happily, many needed improvements and fixes were implemented in this release. Below are links to comprehensive lists of the updates, including:

• WordPress 6.1 Accessibility Improvements
• Performance Field Guide for WordPress 6.1
• WordPress 6.1 Block Editor Improvements

Need more of a beginner’s guide? This blog post is a great resource. 

Other Trends / Predictions

• Agencies are figuring out how to stay on top of the changes with Gutenberg, building Block themes, and Full site editing. 
• Block Patterns will continue to be used and will become ubiquitous across any block-based theme.

Top Drupal trends for 2023

Drupal continues its rapid development pace, adding more secure and performant code releasing Drupal 10 on the backbone of Symfony 6 and PHP 8.1.

Upgrading from Drupal 9 to Drupal 10 is easy using the drupal-rector tool, which looks for deprecated code. There are also a large number of contributed modules that already have been ported. So if you’re on D9, moving to D10 should be easy.

Drupal 10 features include:

• The new, modern Claro administration theme, which provides a better administration experience.
• Olivero default theme, which is the new default front-end theme for Drupal with a modernized look and feel
• CKEditor 5 which provides a much better authoring experience and more modern editing.
• Modern JavaScript components to replace some uses of jQuery for better performance.
• Theme Starterkit tools for bespoke theme creation.

But as the Drupal crew is ever working hard to keep evolving, the work has already begun to be included in Drupal 11. The following core initiatives are being worked on in the contrib community, and will be merged into core when they are ready:

• Project Browser: this will allow ambitious site builders to discover and install modules and theme from their admin screens.
• Drupal Recipes: allows site builders to install and configure groups of modules to achieve features such as an event section, or a blog.
• Automated Updates in Core.
• A more streamlined Core: the Great Module Migration continues moving lesser used modules from core to the contrib community for a smaller Drupal core.

General website trends

Performance and Speed

As we wrote in a blog post about Core Web Vitals earlier this year, research shows the chance of a bounce increases by 32% when a page load time takes one to three seconds, and by 90% when the page load time takes up to five seconds. Speed matters! Make sure to take a look at your Core Web Vitals. 

Accessibility

This is a drum that Kanopi beats frequently, but that’s because it’s really that critical. 26% of US adults identify as being permanently disabled in some way. If you count those with temporary disabilities like a broken wrist, or situational disabilities like being on a noisy subway, the number climbs considerably. That’s a huge percentage of people that feel alienated when a site isn’t accessible to them. There are many ways to make a site accessible, including adding captions and alt text to images and videos, ensuring proper contrast, and entering content with a correct heading structure. Make 2023 the year you decide to make your site as accessible as possible. 

Thumb-Friendly Mobile Navigation

In 2022, 60% of all website traffic came via mobile devices, so a mobile-first approach is imperative. This also means that all critical elements on a website must be within easy reach of a user’s thumbs, including the navigation. Think about what’s really necessary on each page and what can get edited. Focus on a vertical orientation rather than a landscape one, and what functions need to be done on your site with a touchscreen. 

Artificial Intelligence (AI and Machine Learning (ML)

2023 should be the year when companies will move forward with implementing both of these, if they haven’t already (and our Creative team sees this trend on the design and content side as well). On top of improving productivity and using data more efficiently, AI doesn’t have to prove its usefulness anymore. Plus, it’s become quite accessible to work with as most cloud platforms offer it as a plug-and-play service. 

AI enables machines to learn from their experiences and make decisions without human intervention. This technology can be used to automate mundane tasks such as data entry or content generation, allowing developers to spend more time focusing on more complex problems. For example, there are plugins that can help you create better content for your website by using artificial intelligence. 

ML is also being used in web development, enabling sites to better understand user intent and behavior so they can deliver personalized experiences tailored just for them. For example, think about how chatbots can deliver a personalized experience with your audiences.

Speaking of …

Personalization

It’s impossible to talk about future website trends without discussing personalization. The days of one-size-fits-all websites are quickly coming to an end as organizations look for ways to tailor their websites to individual users’ needs, wants, and interests. Consider that Gen Z has grown up with some degree of personalization and expects it, and apps such as Spotify and Netflix have already conditioned us to expect some personalized recommendations on what we hear and watch. (Personalization is also critical in content strategy and web design for 2023.)

While it initially felt uncomfortable or intrusive when platforms knew personal things about us, it’s now become a more mainstream experience that helps users get what they want or need faster. 

A few examples:

• Geolocation: location services can help your audiences find events local to them.
• Product recommendation: a great example of online shopping is Patagonia. After filling out a questionnaire about sizing, the site predicts what size would be best on every single product page. The algorithm bases itself on the information a user shares but also the reviews it receives from similar users who made the purchase.
• Personalized newsletter: This is tangential to your website, but why ignore this critical marketing tool that leads readers to your website? It’s become a common practice to send a newsletter with content specific to your audience’s needs (and there’s lots of data to back up the power of personalized newsletters). Split up your newsletters by audience so you are speaking to their goals, then direct them to the content on your website so they do the conversions you want. 

Voice Interfaces & Voice Search Optimization 

Voice interfaces are becoming increasingly popular as more people turn to voice assistants such as Siri or Alexa for help with their online searches. To stay ahead of the curve, web developers need to start optimizing their sites for voice search by ensuring that all content is written in conversational language and utilizing structured data markup tools like Schema.org or Google’s Structured Data Markup Helper tool. This will ensure that your content is easily readable by search engines so that it shows up when people search via voice assistants.  

Small bites can create big wins.

With these new developments come exciting opportunities for organizations looking to stay ahead of the competition. While some of these trends might not seem achievable or even necessary for your organization to implement at a large scale, even implementing some in smaller ways can garner big results. CMOs and marketing managers should keep an eye on these emerging trends so they can capitalize on them before their competitors do!

And as always, if you need any help with your websites in 2023, Kanopi is here to assist. Contact us anytime.