eveneme
commented
4 weeks ago For style creators, the ability to move and reposition components is essential. It could be beneficial to introduce a system that allows layout adjustments, particularly for the header, where there's often a need to reposition elements like the logo, user menu, main menu, or search bar. The option to set these based on style settings might eliminate the need for direct template modifications. A visual builder could also be helpful here, allowing non-technical users to rearrange components easily while maintaining HTML and JavaScript logic consistency.
dtdesign
Note: This is part of a larger initiative to overhaul the style system and the customization options in general. See #6028 to learn more.
The template system permits arbitrary changes to almost all existing templates with a few exceptions for stability reasons. Creating custom variants of existing templates is an extremely powerful tool but comes with a lot of drawbacks. We should work towards reducing the need to make template modifications to both improve updates and to allow users to customize their site without interfering with style creators.
Use Cases for Template Modifications
Generally speaking, there are two distinct cases that we need to differentiate:
These are somewhat similar but are likely to be carried out by different people.
Visual Modifications
This is a typical example for style creators that need to insert extra elements or to move existing components around. Examples include additional wrapper elements to achieve certain visual effects, changing the position of header components and adding extra boxes that contain new information.
Sometimes template modifications are used to simply make changes that could be achieved using pure CSS but that would interfere with the existing JavaScript logic. This is something we need to improve by making it easier to move components around without having strong expectations about the visual representation or at least adapt to it. A prime example is the inability of the user panel menus to identify wether or not they are using a sticky position or not.
Adding Content
The second use case somewhat overlaps with the first one and is about introducing new components that did not exist before. This requires a lot more effort because it isn’t just about some HTML and CSS but usually also requires the user to make changes to the content. This is often times achieved through options which is somewhat addressed in #6027.
However, it is questionable wether or not that is a proper user of template modifications. Styles right now do not contain any logic to hold custom options and instead this is achieved through the use of a wrapper package that provides the options. This is an odd situation where the goal is achieved by loosely coupling two different parts.
We could consider discouraging this practice because it is quite messy and the same can be achieved by offering extra plugins that introduce this functionality by using existing placeholders in templates. This way that functionality is no longer tied to a specific style and reduces the amount of conflicts caused by outdated templates or those being also edited by the site owner.
Path Forward
We need to carefully examine the typical changes being made with template modifications to thoroughly understand the motivations behind those. It makes sense to reach out to style creators to find a path that allows them to make their desired changes without relying solely on template changes.
Customizable Layout for the Header
The header consists of four distinct components: Site logo, user menu, main menu and the search bar. Being able to define the layout per style would remove a primary template modification. Ideally there is some visual builder that allows those to be rearranged which makes this easy even for non-tech savvy users and allows us to maintain the necessary HTML and JS logic going forward.
Insert Arbitrary HTML
Another important aspect is the ability to inject extra HTML at will to accomplish additional tasks. This can be an extra menu strip at the bar for a shared header or an extra wrapper element for visual purposes. These could potentially take advantage of (select) template events or even a new class of template events dedicated to styles on. The benefit of using a dedicated set of events is that these could be dynamic and restricted to styles only which prevents collisions with HTML added by plugins.
Template Modifications in the Future
It is unclear to what degree we want to support template modifications in the future. Being able to make arbitrary changes is a double-edged sword where it’s easy to break existing logic and/or make it very painful when the source template is updated.
This is even worse today where the source of modified templates can be both the site owner and the style creator. But this is mostly an afterthought, this pretty much relies on the result of the aforementioned changes that aims to remove a lot of the needs for this feature in the first place. The goal is to provide a path forward without crippling the ability to make reasonable changes.