search

mitodl / micromasters

Portal for learners and course teams to access MITx Micromasters® programs
https://mm.mit.edu
BSD 3-Clause "New" or "Revised" License
29 stars 17 forks source link

Considering Micromasters is having issues leveraging Wagtail as it does not use StreamField for content, should we update the models to reflect that change? #4599

Open odlbot opened 4 years ago

odlbot commented 4 years ago

➤ Peter Pinch commented:

I believe the migration to StreamField is part of this PR: https://trello.com/c/wrq7CFtz/366-cms-add-support-for-linkable-images-on-program-pages

odlbot commented 4 years ago

➤ AB commented:

pdpinch that is correct however we will also need to include custom blocks such as the embedded video block and any other type of content that we would like to include, for example the image with link block that Asad is already working on.

odlbot commented 4 years ago

➤ Peter Pinch commented:

What value would we get out of adding the embedded video block, as opposed to how we do it now with the richtext block?

odlbot commented 4 years ago

➤ Peter Pinch commented:

Since this is a MicroMasters specific idea, I'm going to move it to the MicroMasters board.

odlbot commented 4 years ago

➤ AB commented:

pdpinch The richtext block puts out a single block of html without the capability of picking up individual elements out of it and providing its specific markup/css/js. The way Wagtail's Streamfield is intended to be used is that you build all of these custom block types, each specific to the type of content you want to add to the stream, and build the content stream including those specific block type. Having a specific block type allows us to have its own template (markup). Consequently we can write CSS/JS for that specific markup, for example, an embedded video in a richtext block is just an iframe within a vanilla div element. So if you want to do anything for that embedded video, you cannot go through CSS as there is no identifying markup/classes applied to the wrapper div. That's the reason "full column width" fix for the embedded video had to be implemented in JS by querying all elements within the richtext div, looking for any child div that encapsulated an iframe (making the assumption that any iframe within a div will be an embedded video) and applying specific CSS attributes to those elements from within the script. If we had an embedded video block it would be as simple as adding a couple rules to the CSS for the page, no hacking about in the JS code to achieve a styling effect.