The Google Summer of Code for the Joomla! project New frontend template: Page-builder has come to an end and we, the two students Franciska Periša and Nitish Bahl, had a great time with the help of the mentors Anurag Kumar, Benjamin Trenkle, and Viviana Menzel. Now we proudly present the result, our progress of the third and last coding phase and how we experienced the project in our way.
- The repository to the project can be found here: https://github.com/joomla-projects/gsoc19_page-builder
- We created a pull request with all our commits: https://github.com/joomla-projects/gsoc19_page-builder/pull/13
- And a documentation is written on this page: https://docs.joomla.org/J4.x:Page_Builder
The Result
In these three months, we created the new Page-Builder for Joomla! 4. It consists of the editor and the frontend rendering of the created layout in the new frontend template Apodis with a RenderHelper class. We included the elements Container, Grid, Columns and Module Positions as plugins, which are configurable and (de-) activatable. The Page-Builder is implemented as Joomla form field to add it to every templateDetails.xml, as it can be seen in Apodis.
The Editor
The layout itself gets created in the editor. It can be found in the Site Template Styles of the template, which integrated the Page-Builder field. Here elements are added with a modal window and can be moved via drag & drop functionality. Every element has its configuration, which is editable in a sidebar that slides in. Elements can have other elements as children, depending on the element.
Content in the form of the component and messages are separate buttons at the top, which can be dragged into one desired element and removed again.
The currently available elements are:
- Container: Like in Bootstrap a container centers content
- Grid: Probably the most important element for the layout. We put a lot of work into the way it handles the columns
- Column: Part of the grid. Flexible in size, offset and order
- Module positions: For displaying Joomla content despite components.
To make the template responsive for every device, the editor provides toggles at the top, to change the available width. When column width changes, it affects the currently selected device and above only. This behaviour is inspired by Bootstrap too.
Apodis
To get the elements as valid HTML, the frontend needs to render the elements for the page. To have a frontend that does this directly, users can activate the newly created frontend template Apodis in the backend. Some parameters like a background-color can be changed to give an individual style.
The Progress
Part of the third coding phase was focused on fixing several issues:
- Fix bugs
- Resizing columns at the end of a row
- Ordering elements
- Component and Message as special elements
- Encapsulation of plugins
- Device toggle and related layouts
- Consistent and more intuitive UI
- Convert from a com_template feature into an own form field.
Future Plans
The basic functionality works, but the Page-Builder could do a lot more. A new working group was created, where we students will contribute.
Some possible tasks would be:
- Enhance styling e.g. the sidebar
- More global parameters for the template
- New elements to give more possibilities for content and layout
- Easier module position selection
- Make editor more independent from the plugins (e.g. the js for the grid is directly written into the editor JS)
- Preview of the result.
Personal Conclusions
After three months of coding, we spent a lot of time with the implementation and it took a big part in our lives in this time. Here follows the personal opinion about the project from each of us, how we experienced this and the chance to work in such an environment.
Nitish Bahl
Last week, our 3-month project for developing a page builder editor and template came to its end. Although the project is working and you can actually use it to set page style and layout along with adding modules, components and messages but still, it requires some refinement and polishing before it can be shipped in a stable version. We were able to complete 80% of the goals initially decided, some parts took more time than expected but it was a smooth experience overall with a lot to offer and learn. It was a nice experience working on an open-source project alongside Franciska under guidance of our beloved mentors who were always ready to listen and advice future course of action.
The Joomla team has been very supportive and has already made a working group to continue work on the page builder. Both Franciska and I are pretty excited to be in that and contribute further to the page builder's development.
Franciska Periša
The project is over and I’m still motivated to enhance the Page-Builder. It was an experience I would not want to miss and I learned a lot in this short time. Not only about technical topics like Vue.js or Joomla itself, but to work in a good and helpful team too. Of course, sometimes it was difficult and frustrating to have slow progress or when a feature was not working. But I am very satisfied with the result. To be honest, I expected much more problems and stress at the end of the project.
Unfortunately, we did not resolve all the tasks we conceived at the beginning of the project. I expected that we would reach much more of these targets than one student would do. But in reality, it was time-consuming to merge bigger changes of each other and to understand foreign code. At some point, when the grid took most of our focus, we lost precious time, which maybe could have to get managed in a better way. On the other hand, dividing the work between us worked very well and I thought that we would disturb each other much more, but that was rarely a problem.
All together I’m looking forward to the next steps of this project and that it gets merged into Joomla someday. Because I’m sure it will be a helpful tool for everyone who wants an easier way to develop a template (like I do).
