GSoC 2019: Improving the Plone Theme Editor

Proposal & Implementation

Similarly to issue #1973, the overall goal is to make it possible for editors of themes to feel comfortable working directly in the theme editor. Specifically, I propose that the following be made possible:

  • users should be able to clone files from another theme to the current theme, e.g. fragments, rapido apps and images. I implemented this for Rapido apps in my GSoC 2017 project.
  • users should be able to download and install themes from a store TTW from an external site. This would be similar to Wordpress and other major CMS theme/plugin stores.
  • Drag and Drop upload (Almost finish)
  • Implement ACE editor’s autocomplete feature in Plone theme editor for code hinting.
  • help should be displayed in context and not load off-site (it may need to be rewritten to be more Plone specific rather than linking to the diazo.org site)

Deliverables

  • new features identified above working
  • documentation on how to use the new features
  • clean upgrade from the old theme editor to the new theme editor

Bonus Features

  • Users should be able to change the skin of the theme editor, i.e. change the look of the theme editor. There are cases where individuals may have visual impairment when it comes on to certain colors. By default, ACE Editor allows developers to set the theme to be used when instantiating the editor. With the suggested new theme editor, it will allow users to update the skin from a drop-down menu with all available themes, similar to changing the skin for c9 or sublime text. The selected skin will be stored in localStorage to be activated upon visiting the theme editor.
  • Users should be able to revert to a previous version of a file from the version history of the file. This should work similar to Google Docs document history mechanism. Old revisions of the file should be loaded from ZODB, but would be a good amount of backend coding. This feature was recommended by Asko Soukka from the plone community.
  • TTW Git, Apart from uses git versioning to do the file comparison mentioned above, users should be able to push their theme directly to a git repository.

Aims

The aim of this project is to build a fully stable user-friendly version of the Theme Editor that supports automated backups, version comparison and integrated service component with git and external services.
Aims:

  • improve the UX/UI for the theme editor, especially for web accessibility.
  • reduce the worry about overriding themes upon upload even if someone made a change that you don't know about.
  • remove the need to download images, fragments and other files from one theme and upload those file ton another theme.
  • instead of cloning the theme and having many version of it shown in the theme editor, the editor versions the theme for you and allow you to revert or compare various versions of the theme.
3 Likes

@b4oshany submitted the idea using our form at https://plone.org/community/gsoc/submit-gsoc-project-idea/

https://plone.org/community/gsoc/submit-gsoc-project-idea/d2c/improving-the-plone-theme-editor

I think I did

Yup, I was just adding the link to your submitted idea

Hi @datakurre and @esteele, I apologize for listing both of you as possible mentors for the Plone Theme Editor without contacting you first. For this project, I am suggesting that Asko and I interchange between the lead and secondary mentor while Eric plays the role of the 3rd mentor.

Are you available to do so, @datakurre and @esteele? Also, are there any suggestions on what should be done and who should mentor this project?

@b4oshany Unfortunately, I can only handle one project this year. So, whether I could mentor this, depends on the applications.

Sure. I can be a third mentor on this one.

Hello @b4oshany,

I am Ashwin S Shenoy, an undergrad student from Amrita University, India. I am a full-stack web developer, particularly interested in UX designing. I am a member of the FOSS club in my college and have been enthusiastically contributing to Open Source. I have priorly worked with Django, WordPress, and React based projects.

I would like to work on this project. I am getting familiar with the codebase, and wish to know if there is a list of tasks/issue that I can contribute towards in preparation for the project?

GitHub Profile: https://github.com/aswinshenoy
LinkedIn Profile:https://www.linkedin.com/in/aswinshenoy/

Thank you :slight_smile:

Hi @aswinshenoy,
Thank you for reaching out to me and showing interest in this project. Also, I apologize for my late response.

You've been very active in the open source community since last year and have quite an alluring developer's profile. Your experiences/skills in UX/UI and Python (DJango) will help you out a lot. This project is mostly JS based using Plone's mockup library and a reasonable amount of Python code.

There are quite some tasks that you can do to get familiar with the codebase, such as bugs, patches and enhancements that are not directly related to this project. See https://github.com/plone/plone.app.theming/issues for tasks you can take on. However, before you can contribute, you are required to sign the Contributor Agreement form. For questions about why the agreement is required, please see Contributor’s Agreement for Plone Explained.

Also, If you haven't started to get familiar with our guidelines for coding, testing and contributing, Please visit style guides for working on Plone.

1 Like

Hi @aswinshenoy,

The application period for GSoC students is just around the corner. Have you already started working on your application proposal as yet?

I was disappointed to not see Plone selected for GSoC this time :frowning: One of my senior recommended me to work on a react project of salesforce, and I am giving it a try for gsoc now.

I still look forward to contribute to Plone, atleast after gsoc period :slight_smile:

PS: I had my semester exams going on, so didn't go through my mail, and didnt see the thread. I apologise for my late response.

Honestly, I was disappointed too. However, this project along with other Plone projects was selected for GSoC through the Python Foundation. Therefore, one can say, Plone is selected for GSoC, indirectly.

I see, thank you for informing us. It's quite understandable, and I apologize for not telling you earlier in this month., All the best, and have fun during GSoC. However, if you change your mind or know someone who might be interested, you can refer them to this page.

Great, I'm looking forward to seeing your contributions. Btw, is this your final year at Amrita University? If no, how much years do you have left?

Wow! I never thought of such a possibility. That's great.

I will be more than happy to work with this project, as I found this pretty challenging and interesting to my taste. But, It seems pretty late for me to start with, but I feel I may manage to pull up a proposal if I look into seriously now (atleast, I can give it a try for now). I have my exams ending this Saturday, after which I will be free, and with the help of some seniors here, I hope to write down a proposal asap.

I look forward to writing a proposal and start digging through the codebase, for now, hoping to get selected to GSoC with Plone. Anyways, I look forward to contributing to Plone sooner or later.

I am a fresher (first-year) doing my undergrad right now, 3 more years to go.

1 Like

I hope all is well and you did very well on your exams. The application deadline is the 9th of April, which is 7d from now. I think you definitely can write and submit the proposal within the 7 days. I along with other mentors are here to help you through the process. You can create a Google document and share it with us. Google Docs is great for document writing and collaboration. Also, we can use Google Hangouts for communication for now.

Here's the proposal template: https://github.com/python-gsoc/python-gsoc.github.io/blob/master/application2019.md

1 Like

@b4oshany
I have got started with a proposal. From my initial understanding of the project, my deliverables ideally would be -

  • Support for cloning files from another theme in the theme editor
  • Versioning of theme files through Git VCS
  • Ability to download & install themes from an external store TTW
  • Ability to install and update theme via an external Git Repository
  • Implement code hinting through ACE Editor in theme editor
  • Contextual help pop-ups within the theme editor
  • Drag & Drop Theme Upload Support
  • General UI/UX Improvements focused on Web Accessibility

I am a bit confused about the external theme store. I get the idea that we need to implement something like WordPress theme installer, where it will allow to install themes published on wordpress.org/themes. But in our case, do we have such a place where the themes are published?

Further, should I share the link to the proposal here? I can make mockups of the new proposed designs, would that be useful, or is there existing design guidelines that need to be followed? I am further far less matured with the codebase, and it would be greatly helpful if I get an initial help on locating the various files/APIs associated with the theme editor.

Cheers, and thank you :heart:

Yes, it will be something similar to the wordpress.org/themes store, which we currently do not have. Therefore, we would need to create the infrastructure and application for the store. I started to develop the application by using Plone/Guiltonia as the backend, but I haven't reached far. I had planned to provide you with the docs and server access for the Theme Store app before you finish the proposal, but I got caught up with work. Therefore, let us put the Theme Store deliverable as a bonus deliverable instead of a primary deliverable.

Let's add this feature as one of the main deliverables. It is more S.M.A.R.T than the Theme Store feature at this point. Do you agree?

Yes, you can.

There are other packages and information that you will need to know, but for now, you can check out my GSoC 2017 Wrap-up for the Plone Theme Editor for files, packages and other tools I used for this project.

BTW, have you tried to setup a development instance of Plone as yet? If not, I would recommend you to use the buildout.coredev 5.1 branch

Also, have you signed the Contributor Agreement as yet?

1 Like

@b4oshany

Hmmm... that would be better for now. However, it will be really awesome if could achieve that in some point of time.

Yes. Exactly, making themes git repository and thus using git to maintain versions (i.e. each save reflecting a commit), should enable functionality very similar to Google Docs. Since we are making theme folders git folders, we can also have external repository as remotes allowing admins to maintain the theme elsewhere. In fact, git revert/pull/fetch/push could serve us to implement a pretty advanced versioning system. This should be the primary and most useful deliverable of the project.

Here is google doc link to it -http://bit.ly/2HVGUJE. Its a rough draft for now, and I will add mockups and more details by tonight. I hope to add some code references also well in time. Thanks for sharing me the relevant packages, and your gsoc project would serve me an inspiration.

I have set-up a normal Plone 5 application, and I am not sure whether it is the development instance. I will go through the instruction and build it.

I will complete it by tonight.

@b4oshany
I could relate this project with the functionalities of AceIDE WordPress plugin, which I had been using to edit wp themes and plugins TTW. It is an open source project available on github. I think it can be a great starting point for us to get a clear perspective about the theme editor we want, and since its also using ACE Editor.

The theme store idea is very nice, but I wonder if there is a simple way to implement it (ie. not a Guillotina stack, nothing particularly fancy or complicated). I say this knowing how much of a burden even a "simple" server adds. Something file based like Github pages would be perfect :slight_smile:

@tkimnguyen
Yeah. Through the project, I intend to make each theme a git repository and one can add themes from a external git repository (git cloning the themes, and maintaining remote for updates). We can make use of this. So, essentially

  • A theme publisher can publish his theme in something like GitHub/GitLab (and maintain it there)
  • He submits his theme (with the link to the git repo) with plone (through a simple form)
  • We can list it in the theme store (maybe even scrape and get details of the theme from github itself)
  • A user can install the theme from store (we will clone the theme, same way user creates a theme from external repo as proposed)

So essentially, a semi-static website (i.e. with JS and API-fetches) should be able to do it.

What do you think about it? I would love to work on the theme store also through the project :slight_smile:

Plone Foundation Code of Conduct