GeneratePress 3.1 – Global Colors & Dynamic Typography

Welcome to GeneratePress 3.1.0! This version has been a long time in the making, and that’s because we put some serious work into reworking some major components of the theme. We couldn’t be happier with the result, and we’re really excited to share it with our users!

Global Colors

Topping the list of user feature requests and first up is our brand new Colors system. Consolidating all color options under one customizer panel, users can:

• Create a custom global color palette
• Assign Colors to more theme elements than ever before
• Instantaneously update global colors across an entire site

Out of the box, the theme has a predefined global color palette using a standardized naming system of Contrast, Base, and Accent colors.

These colors are pre-assigned to major theme elements so you can simply and quickly update the color palette to match your brand. That’s a whole new color theme in just a few clicks.

Of course, if you want to start fresh you can create your own unlimited color palette with your own naming conventions and style the theme your way. And we made sure this new incredible feature has no impact on performance.

But it wouldn’t be GeneratePress if we didn’t make some improvements. Built entirely with React, the new color interface makes a big difference to the overall performance of the Customizer.

And to top it all, this feature is built into the free theme. Yep, that’s right, free theme users now have the same color customization options as GP Premium users. Consider it a little thank you to all our theme users that have contributed over 400,000 GP-built websites.

So what else do Global Colors do, aside from making theme color styling a breeze? Well, as of GenerateBlocks 1.4.0 (now in testing) you can use Global Colors in your Blocks! This is a huge workflow improvement, as it means you can completely change your theme and content colors from one place in a matter of seconds. And if you’re a GP Premium user, you will be treated with updated Sites from our Site Library that has global colors built in!

Dynamic Typography

Typography in GeneratePress has evolved. This is a gamechanger when it comes to adding your fonts and applying them to your site! On top of that, this feature is 100% free and completely replaces the old Typography system in the theme and GP Premium.

This system is turned on by default for new installs but turned off by default for existing sites. If you wish to change your site to this system, you can do so in Customize > General. If you’re using GP Premium, make sure you have at least 2.1.0-alpha.1 installed or this option won’t display. Turning on the dynamic typography system will attempt to automatically migrate your existing typography settings.

Font Manager

When setting up your site typography, you can now define a set of fonts that you’ll be using inside the Font Manager. The huge benefit here is that all of your site fonts are in one place – you no longer need to look through all of your font options to change a font!

You can search through the complete list of Google Fonts, or you can manually type in your own local fonts. No more complicated PHP filters.

Typography Manager

Now that we’ve set our fonts, we can build out our site typography.

The beauty of this system is that we only need to set what we need, and everything is in one place.

First, we set the Target Element. This is a dropdown of the elements you’re used to targeting when setting up your typography. Things like the body, site title, menu items, headings and so on.

Then we can set our Font Family, which is a list of fonts we’ve set in our Font Manager.

Another huge bonus of this system is that you can set your font size, line height and letter spacing throughout your devices, and you can choose the unit you wish to use. This means you can take advantage of rem, em, or continue using px.

New Dashboard

Last but not least, we’ve implemented a brand new theme dashboard built using React. It’s important to note that you will only see this new Dashboard if you’re using the free theme or if you’ve updated to GP Premium 2.1.0.

Underlined Links

We’ve added an option to underline all links inside of your content in Customize > General. You can set to have underlines always show, show on hover, or disappear on hover. This is a boost for overall accessibility on your website, which is very important. By default, this option is turned on for new sites. However, it is turned off for existing sites, as we don’t want to force a change like this on our existing users.

Menu Javascript

We’ve made it so our menu.js file only loads on your website if you’re using one of our navigation elements. This means if you’re not using our navigation (or a navigation at all), your website will load less javascript and perform even better.

Dynamic HTML Attributes

GeneratePress now has a dynamic HTML attribute system that allows you to filter in your own classes and other HTML attributes to major theme elements. We’ve used this system to add more aria-label attributes to major HTML elements for better accessibility.

Full Changelog

Beyond the larger changes mentioned above, there’s a list of smaller improvements and bug fixes you can find below.

• New: Global color system
• New: Add all theme color options to free theme
• New: Re-build color options in the Customizer
• New: Dynamic typography system
• New: Underline links option
• New: Only load menu.js when needed
• New: generate_has_active_menu filter
• New: generate_before_loop hook
• New: Dynamic HTML attribute system
• New: React-based Dashboard
• New: generate_search_title_output filter
• New: generate_after_comment_author_name hook
• New: generate_show_comment_entry_meta filter
• Tweak: Only allow vertical comment form resizing
• Tweak: Move a11y javascript inline to the footer
• Tweak: Add aria-label attributes to elements that need them
• Tweak: Remove theme structure option for people using flexbox
• Tweak: Remove search result title from template
• Tweak: Add search result title using generate_before_loop hook
• Tweak: Remove aria-required attribute from comment form
• Tweak: Add required attribute to comment author/email fields if required
• Tweak: Move viewport head meta below the title meta
• Tweak: Optimize SVG icon HTML
• Tweak: Move generate_svg_icon_element before the “replace” icon definition
• Tweak: Change sub-menu box-shadow direction when sub-menu opens left
• Tweak: Replace sub-menu box-shadow with border when opening down
• Tweak: Remove query loop block margin
• Tweak: Use get_the_archive_description() instead of term_description()
• Fix: Missing search form button icon when using font icons
• Fix: Load comments CSS if comments exists even if new comments are disabled
• Fix: Sub-menu overlap using dropdown click