Page Builder for developers - Themes

Okay, so next up we’ll talk about the overview for theming practices. Just like everything in Magento, it’s either a module or a theme, and no exception, PageBuilder is a module. So if you want to edit styles within that module, it’s just like any other module. You go to web.css.source.module.less and you’ll see a number of import lines for different files that are being imported into that module file. In import.less, you’ll see icons.less will include the styles for your icon, and then of course layout will just be general layout of your content type. And then slick.less is a .less file to import styles from the third-party slick carousel library. So the last import that you can see here is the content-type/.import.less file. And this file is to basically contain all of the other content-type styles that you’ll be importing within that file. So each content-type has its own import.less file, and within that file you will see is housed a number of other import lines to import the styles for the different appearances. So an example of that is the banner content-type, and that file has five different import lines for each one of its unique appearances. So there’s the default appearance, the poster, and then the three collage appearances. You can find parts of the page builder theme in three main areas. So first you have the core module in the Magento vendor directory, and this module is part of the core and contains all default themes and functional parts. The two other entities are for your customizations or your own custom developments. If you want to modify an element in the core extension, you can use the theme or your own module, just like anything else in Magento. If you want to change something in another directory, you need to create your own extension. And this extension can also be used to override the front-end directory. So regardless of any overrides that you’re doing, the files generated in Pubstatic are built from a theme, and if the file is not found, they’re taken from a module. So when checking the theme, page builder checks in your current theme and then in its parent, and then in its parent’s parent, and so on. Modules check from the last to first module loaded. So if it’s not in the theme, it will then check in the module, and it will load in order of first to last module.