Today we’re very thrilled to announce Global Colors and Global Typography in Gutenberg. These new features dramatically change the way you create websites with Gutenberg, and we’re releasing it for free in Stackable v2.11. So update now!
Introduction
Stackable blocks and some native blocks allow you to change the colors of the different parts of your blocks. In the inspector, you’ll usually find a color palette which you can use to pick a color.
You’ll have to pick a color from the color picker’s list, but if you don’t like them or if you have another color in mind, you’ll have to resort to adding a custom color and typing the hex code of the color you want.
The colors inside your picker are dictated by the theme that you’re currently using. So if your theme doesn’t provide you with a means of changing your color palette, you’re out of luck.
Introducing Stackable Global Colors
Stackable Global Colors allow you to create a dynamic color palette for the Block Editor / Gutenberg.
Emphasis on the word “dynamic” 😀
Unlike the normal colors you have in Gutenberg, blocks that use Stackable’s global colors are bound to that color and will change when the global color is changed.
This makes it easier for you to create a unified color palette across your entire website, and perform adjustments across the board.
You can tweak your global color palette and your entire site will adjust! Here is it in action:
The New Stackable Settings Panel
To access the Stackable Global Settings, we’ve added a new button on the top right corner of Gutenberg. Just click on that to access the Global Colors and Global Typography settings.
Create Your Own Color Palette
With Global Colors, you’re no longer tethered to the colors your theme has provided. You can add more colors to your color picker:
Or you can create your own color palette and completely override what your theme provided.
The best part here is that your color palette should also be usable even for non-Stackable blocks. So you can enjoy your color palette in Native blocks and even in your other block plugins.
(Global colors that change dynamically are only supported in Stackable blocks and Native blocks)
Also Introducing Stackable Global Typography
Similar to your color palette, the default typography of your blocks also depends on what WordPress Theme you are using.
Some themes allow you to change the typography, but if your theme doesn’t support this, we have the solution for you.
Stackable Global Typography allows you to specify the typography styles of your headings and text across all your blocks.
The power of Global Typography comes from being able to adjust your text styles across your different webpages. You can tweak your global typography and your entire site will also adjust.
Change Your Typography
With Stackable Global Typography settings, you can easily adjust the font family, font size, font weight, text transform, line height and letter spacing for your headings and block body text.
We also provide you with a preview of what your new typography would look like and a short summary of all the aspects of your selected settings. This provides a great overview of things you’ve overridden from your theme.
Global Typography Is Responsive
If you want to take control of how your typography would look like in smaller screens, you can easily adjust your font sizes by using the responsive toggles.
Lastly, you can specify whether your Global Typography adjustments would also apply to Native blocks, and even other block plugins (although it depends on the plugin on whether our global typography settings would take effect).
Theme Compatibility
If your WordPress theme has some color or typography settings, don’t worry. Stackable’s Global Settings shouldn’t affect them and you can continue to use them without any issues. You can also use both!
We’ve tested our Global Typography across the popular WordPress themes, but if you run into issues where the typography won’t apply in your frontend, we have some admin settings that might help.
Conclusion
This is quite a huge update and we’re very excited to see what you guys think of Global Colors and Global Typography!
Aside from those two awesome features, we’ve also addressed some issues since our previous blog post update:
- We moved the Stackable settings inside the Settings menu (instead of its own main menu)
- We fixed the issue where you can encounter Block errors in nested blocks when updating
- Some popup settings close right away when clicking in Firefox
- Some responsive font-sizes won’t apply
- We’re now WordPress 5.4 compatibility (again)
- Fixed a possible CORS issue when previewing in tablet and mobile
- We refined the responsive controls which were introduced back in version 2.10
Those are all the new updates for Stackable 2.11. Comment below if you have any thoughts about this update. If you want to discuss, be sure to join our Stackable Community in Facebook.
This is AWESOME! Thank you, Benjamin and team.
I can’t remember the number of times I have typed in the HEX codes for my brand colours. Thank you so much. This will save me a lot of time and having to memorise the HEX codes.
Richard
Absolutely AMAZING! – Thank you so much to the team!
Keep up the great work, as your way ahead of the competition, and I can’t wait to see what you come up with next.
Good work….as always!