If you look through the Clarity theme, a theme designer can place widget areas on the theme and these areas give the end users a chance to drag and drop widgets in them. But what if the designer wants more control and only wants a particular widget in a particular location?
For example, say as a designer I only want the PageNavigation widget on my /docs page, because as part of my design I just want TOC next to the docs and nothing else. Right now there is no easy way to do this.
Open up the _PageLayout3.cshtml which is the layout the docs is using and you see the following widget area, and the end user has to place the PageNaviagtion widget in it for it to show up.
<widget-area id="page-sidebar2" />
It could be more flexible if the widget is directly placed here instead, like this
A few things to consider.
Currently the Clarity theme and the widgets are loosely coupled, meaning there is no project reference between them. This is possible because widgets live inside widget areas and the theme doesn't know what widgets are going to be placed there, the users decide those. Now if a widget were to live outside of a widget area and be directly put on the theme, the theme needs direct access to these widgets projects.
For the implementation, the widgets placed on Clarity will be tag helpers like widget areas as shown above. Since these widgets will be hard-coded on the theme, the user won't be able to configure them in the Admin > Widgets section. Thus widget properties must be hard-coded with values through tag attributes on the theme as well. For a complex widget like the SocialIcons, a more complex taghelper is needed, it may look like this
<social-icons title="Follow Me">
<link icon="facebook" url="" />
<link icon="twitter" url="" />
</social-icons>
There are scenarios in which the widgets rarely change, so having to define widget areas just so users can place widgets in them pollutes the theme.json file as well. But there are pros and cons that come with this feature should I go for it, in the end this does give more options to the theme designer.
If you look through the Clarity theme, a theme designer can place widget areas on the theme and these areas give the end users a chance to drag and drop widgets in them. But what if the designer wants more control and only wants a particular widget in a particular location?
For example, say as a designer I only want the
PageNavigationwidget on my/docspage, because as part of my design I just want TOC next to the docs and nothing else. Right now there is no easy way to do this.Open up the
_PageLayout3.cshtmlwhich is the layout the docs is using and you see the following widget area, and the end user has to place thePageNaviagtionwidget in it for it to show up.It could be more flexible if the widget is directly placed here instead, like this
A few things to consider.
Currently the Clarity theme and the widgets are loosely coupled, meaning there is no project reference between them. This is possible because widgets live inside widget areas and the theme doesn't know what widgets are going to be placed there, the users decide those. Now if a widget were to live outside of a widget area and be directly put on the theme, the theme needs direct access to these widgets projects.
For the implementation, the widgets placed on Clarity will be tag helpers like widget areas as shown above. Since these widgets will be hard-coded on the theme, the user won't be able to configure them in the
Admin > Widgetssection. Thus widget properties must be hard-coded with values through tag attributes on the theme as well. For a complex widget like theSocialIcons, a more complex taghelper is needed, it may look like thisThere are scenarios in which the widgets rarely change, so having to define widget areas just so users can place widgets in them pollutes the
theme.jsonfile as well. But there are pros and cons that come with this feature should I go for it, in the end this does give more options to the theme designer.