MDL-60020 | Missing custom CSS classes (HTML Block) in Boost?

MDL-60020 | Missing custom CSS classes (HTML Block) in Boost?

by Anthony Rimmer -
Number of replies: 15

Hi All, 

I haven't been able to find anyone else with a similar problem, but I have tested this on the Moodle Demo site and it appears to be the same. Forgive me if this has already been discussed.

Essentially, with Boost, HTML blocks do not appear to pull through custom CSS classes added in the block's setting page, despite the administration setting for allowing additional CSS classes being enabled.

I understand the move towards doing away with blocks, and this may be the reason, but it looks like the block.mustache template file has been set up to take over CSS class definitions, omitting the classes set by the block itself. In the case of the HTML block, this suggests that the additional classes are not included. Inspecting an element in-browser proves it.

I can include the classes again by adding them to the block's context In the core-renderer (boost/classes/output/). However, this includes all classes as defined by the block; block, block_html custom_css. This then duplicates the class definitions unless removed from the block.mustache file.

I suppose the question is whether this is by design, a fault or an oversight on my part?

(Edited by Mary Evans - original submission Monday, 24 July 2017, 12:50 PM)

Average of ratings: -
In reply to Anthony Rimmer

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Can you copy / paste a section of the code you are adding with your custom css classes?

I want to test this as I have a feeling it may be the ATTO Editor that is doing this.

I use the TinyMCE Text Editor as I find it more useful when adding Boostrap code.

If you are using the Default ATTO Editor then try switching to the TinyMCE Editor from the User Menu > Preferences > Editor Preferences

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Missing custom CSS classes (HTML Block) in Boost?

by Anthony Rimmer -

Hi Mary, 

Thanks for the reply!

Forgive me, it might have been how I explained it, but I don't think this is related to the text editors. 

The HTML block has the additional setting for CSS classes that are applied to the blocks div element, so I'm not referring to the content of the block itself, but it's general markup.

In boost/classes/output/core_renderer.php the block context is put together around line 330 in the 'block' function and doesn't appear to include the classes as set by each block type. I guess I was looking for something along the lines of $context->classes = $bc->attributes['class']; ??

This would then need to be rendered in the block.mustache template file as {{classes}} if my understanding is correct. By default, the block's class is set and the type is taken from the context as block_{{type}}. 

Anthony


Average of ratings: -
In reply to Mary Evans

Re: Missing custom CSS classes (HTML Block) in Boost?

by Richard Clay -

Hi Mary / Anthony

I've just hit this problem too and can explain a bit more. The problem occurs when you add a custom CSS class via the configure block page (see below). The class is not applied when the main course page is rendered. The Chrome web inspector confirms this.


Block exmaple


Could be a bug.


Thanks
Richard

Average of ratings: Useful (1)
In reply to Richard Clay

Re: Missing custom CSS classes (HTML Block) in Boost?

by Anthony Rimmer -

Hi Richard, 

Thanks for taking this further, I think your screenshot helps illustrate the issue.

I can confirm this is exactly what I am experiencing.

Anthony

Average of ratings: -
In reply to Anthony Rimmer

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I see what you mean.

Can you clarify that this ONLY happens in Boost theme and not Clean or More theme. If so then it is a Boosl theme problem. If not then it is a Block problem and I will move this discussion into the Blocks forum.

I will await your answer...thanks

PS: Can you also tell me the version of Moodle you are discussing?

Mary

Average of ratings: -
In reply to Richard Clay

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Anthony,

I have just tested this ins a brand new Moodle 3.2 set up on my test server and found that what you are saying is not true. Either I am reading this wrong or I am doing something wrong?

Having already added the HTML block to the Frontpage and enabled the Custom CSS Classes. I added some content and included within that content one of the class selectors I had added to the block.

I created a course and then configured the HTML block to be seen in every page.

I went to the course page and checked to see if the HTML block was on the page, which it was. I then examined the content to see if the list of classes at the bottom of the content settings page was there and it was. I also checked using Web Dev tools and found the class that I had added was there in the soure code too.

So what part am I missing in all of this?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Missing custom CSS classes (HTML Block) in Boost?

by Richard Clay -

Hi Mary

Please see the video below which highlights the problem. I'm testing using  3.2.2+ (Build: 20170316).


Cheers Richard
Average of ratings: -
In reply to Richard Clay

Re: Missing custom CSS classes (HTML Block) in Boost?

by A W -

Mary,

Can you confirm the CSS classes are added to the block's default class? Can you send a screenshot?

This isn't working for me either.

Thanks,

Alex

Average of ratings: -
In reply to A W

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
What exactly do you mean by "blocks default class"?
Average of ratings: -
In reply to Mary Evans

Re: Missing custom CSS classes (HTML Block) in Boost?

by A W -

Thanks Mary,

On the Additional CSS Classes help "?" it says "Any CSS classes entered here (space delimited) will be appended to the blocks default class" which I take to mean the top level of the block itself, which seems to be borne out by Rich's video showing how the class is added on non Boost themes.

Thanks for raising the bug, we'll see what happens with it smile



Average of ratings: -
In reply to A W

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Ah...thank AW now I understand. Also thank you for posting that image as I could not read the video, me being partially sighted has its downfall unfortunately.

With a bit if luck I may be able to fix the problem.

Cheers

Mary


Average of ratings: -
In reply to Anthony Rimmer

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I  have reported this as a BUG in Moodle Tracker 

Please vote for MDL-60020 if you want it to be fixed.

Thanks

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Missing custom CSS classes (HTML Block) in Boost?

by David Scotson -
I think I reported a related issue, it was to do with the way the class names for "fake" blocks, previously code set the extra class, much in the same way as the bug described in this thread, this then got thrown away by the template.

More details here:

https://tracker.moodle.org/browse/MDL-59037

I also found a previous submission of this current bug:

https://tracker.moodle.org/browse/MDL-58315

So one should be closed as a dupe probably.
Average of ratings: -
In reply to David Scotson

Re: Missing custom CSS classes (HTML Block) in Boost?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi David, 

I saw the MDL-59037 issue when I opened MDL-60020 but did not make the connection. I didn't see the other. thanks for that I'll close that last track issue I created and link back to MDL-58315

Cheers

Mary



Average of ratings: -
In reply to Mary Evans

Re: Missing custom CSS classes (HTML Block) in Boost?

by Anthony Rimmer -
Apologies for not replying to these messages sooner. 

Richard & A W, thanks for expanding on this. Mary, thanks for posting/relating in the tracker. Apologies for not making it clear in the initial query.

Anthony

Average of ratings: -