Rules module, Html Menu Item - This week in Orchard (21/03/2021)
This time you can read about the new Html Menu Item content type, you could see how to use the new Rules module, and can watch a recording about a new Orchard Core theme! Check out our post for more!
Orchard Core updates
Add new HTML Menu Item content type
This is a new content type that is super useful for menus that are customized like you have items that are links but there is one item with a special div or with a custom HTML to provide like images and stuff inside.
Let's take a look at the HtmlMenuItemPart. Using that part you can just edit the Row HTML directly. The content here is sanitized by default to prevent custom scripts, but if you navigate to Content -> Content Definition -> Content Types -> Html Menu Item and hit the Edit near the Html Menu Item Part you can disable the sanitization anytime. On the screen below you can see the new HtmlMenuItemPart Content Part and the liquid file that is responsible to render its content when using the Blog theme.
But let's see how you can use this content type in your site! Let's say you set up your site using the Blog recipe. By using the Blog recipe you will get a default menu, called Main Menu, that contains two Link Menu Items, called Home and About. The first one is just about redirecting the user to the home page and the second one is about redirecting the user to the slug of the built-in About Article. Now head to the Main Menu option of the admin menu and click on the Add Menu Item button to add a new Menu Item. Here you can see the new option that you can select: the Html Menu Item. Select this one and fill out the form. The Url will be the target link where the user will be redirected when clicking on this menu item. And the Html box will contain the custom HTML of our menu item. Here we are just using the HTML code from the Category terms of the Blog Post and modified it a little. And we put this new menu item between the two existing ones as you can see here.
And one last note here. When you add a name to your menu item (you saw we used the My new Html Menu Item just for the sake of demonstration) it will be persisted in the string property called Name that is available on any existing parts that can be used as a menu item (LinkMenuItemPart, ContentMenuItemPart, and MenuItemsListPart). But you cannot see the Name property when you check out the implementation of the HtmlMenuItemPart. The reason for that is the Name property is obsolete and will be removed in a future version and you should use the DisplayText instead. And as you can see, the MigrateMenuItems method in the Migrations.cs of the Menu module is just about to migrate the existing menu items to use the DisplayText property instead of the Name.
jQuery 3.6.0 released and added to Orchard Core
jQuery 3.6.0 has been released! In jQuery 3.5.0, the major change was a security fix for the HTML prefilter. This release does not include a security fix but does have some good bug fixes and improvements. If you want to read about this new version, head to this post now!
But now let's focus on the fact that you can also use this new version of jQuery in your custom themes or modules by default without the need of including it by yourself. If you open up the content of the OrchardCore.Resources module, you will find the ResourceManagementOptionsConfiguration.cs file there which is responsible to register some scripts and stylesheets for you by default that you can easily use anytime you want.
So, from now we have several jQuery versions that you can use in Orchard Core, like version 3.6.0, 3.5.1, and 3.4.1. You can specify which version you want to use but if you don't do that, the CMS will inject you the newest one.
Demos
Rules module
Using layers in Orchard Core was not a good idea because every time someone would like to use layers, the members of the community always said to don't do that, layers are too slow. But layers are really useful and the good news is the performance of the layers is now much better. Let's see the topic of this demo, the Rules module which allows you to build rules for the layers without using JavaScript.
What you have now if you edit a layer, you have rules that you can add to a layer with a nice little popup. The easiest one is the Always layer, which has a boolean condition of true or you can choose to be false if you never want to show the widgets in this layer.
You can also have two types of groups:
- All condition group, which means all of the rules inside this group should be true.
- Any condition group, which requires one condition to be true.
The easiest way to show how grouping work maybe is to go with a GIF. Here you will see that we are creating an All condition group layer rule and inside that group, we have a Content type condition and a URL condition. We say that we only want to display the content of this layer if the content type of the currently displayed content item is BlogPost and if the URL contains the blog word. So our layer will not be visible if the URL just contains the blog word, we need a BlogPost content item to be displayed too.
But you don't really need the all condition group here. If you just put the layer rules without using groups, the layer will be visible only if all the conditions here return true. If you want an OR behavior, use the any condition group layer rule. And one cool thing here: you can use drag and drop to move the rules between the groups. You can easily say that I want to move this outside from the all conditions group and put it into the any conditions group.
And don't worry if you prefer the JavaScript conditions, you can still add a JavaScript condition where the script must return true or false to display or hide the content of the layer.
And as usual, in Orchard Core everything is extensible. If you would like to add your own custom layer rules you can easily do that just by implementing the ConditionEvaluator abstract class where the EvaluateAsync method is responsible to return a boolean value that represents the result of your rule. Check out an easier one, like the HomepageConditionEvaluator!
And as usual for the demos, if you would like to know more about this awesome new feature, don't forget to head to YouTube for a recording!
Tailwind Blog Theme
If you navigate to the following repository on GitHub you will find a simple blog template built with Tailwind and AlpineJS. Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. Here you can see what kind of classes you need to add to be able to handle the margins, colors, the font-size, and almost everything. Tailwind doesn't give us automatically pre-styled components. Rather, it gives us utility classes that help us style our components in certain ways and allows us to build our own classes using these utility classes.
In the following recording, you could see how you can build a blog theme in Orchard Core using the Tailwind blog template.
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 194 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!