Elements is shaping up to be a fantastic product with unlimited potential. Even in this beta stage, I’m thoroughly enjoying working with it. It’s a breath of fresh air compared to Classic.
But one of the eye-opening features is globals. It is amazing what one can accomplish with globals; they can be real time-savers.
The ability to change styling across many elements is genuinely impressive and productive.
As I work on porting more websites over to Elements, I use globals to provide consistency across the different sites.
But…
With tremendous flexibility comes some danger.
It is possible to make unintended changes accidentally. For example, if you accidentally click on and move a component within a global, it will reset the content across all instances. Then, there is the constant problem of forgetting to OVERRIDE a setting when you make a change, only to see the change propagate across all instances.
So, I want to see some guardrails built into Elements to deal with issues like these. When moving a component within a global, Elements could warn that you are about to impact all the global instances. Likewise, if you go to change a setting, it will warn you that it has not been overridden, so do you want to proceed? This cuts both ways, as you might want to change a global value instead of just in the local instance. So, it would not be enjoyable if it kept asking permission. But I’m sure a solution could be found.
To ensure consistency across my sites, I created a project to set up several globals that I then use across my sites. These globals cover many HTML elements utilized throughout a website, such as headers (h1, h2, h3, h4, h5, h6), paragraphs, etc. They are all preset with generic properties that will make those elements consistent. I then drag them from this project to the one I’m working on and when I get them there I convert them to a global in that project.
This approach is not as convenient as it could be because globals are not global. They are only global to a project. I want and need globals for all my projects. So, if I make a change to one, it will propagate across all of the sites utilizing the global. To achieve something like this, there would need to be a distinction between an actual global and a local one. But it seems doable.
Due to the number of globals I utilize, I would also like to see them reside in a separate sidebar instead of mixed in with the core and custom components.
This feature is so powerful that it requires some guardrails for the novice user. Speaking from experience, I just had it happen twice in one day. I had set up 40 cards from a global when I accidentally moved a component while trying to edit some text inside one of the globals. All the text in the 40 cards was reset, and I then had to go back and override and reenter all that text. It was painful. This was mainly because UNDO had no support which could have restored the change.
Even if the user experience were not improved, I would not give up globals for anything; they are unbelievably convenient.