Max Mega Menu falsely rendered as bullet list in Site Editor of Block Theme

Got a new idea: Is the MMM’s CSS also enqueued properly in the editor? Note there is an enqueue CSS function for the frontend and one for the block-editor environment. Is your plugin also hooked into the block-editor enqueue function call?

Note that I encountered the bug while using the TT3 theme, which departs from previous themes insofar as it has only a theme.json for styling and no functions.php — I’m no developer, but learned about the architectural changes in TT3 and block themes, and this came to my attention, and I thought to share that with you.

• This reply was modified 1 year, 8 months ago by abitofmind.
• This reply was modified 1 year, 8 months ago by abitofmind.
• This reply was modified 1 year, 8 months ago by abitofmind.

https://wordpress.tv/2023/02/08/builder-basics-adding-custom-css-to-block-themes/ from minute 20 to 28 shows exactly the CSS specificity differences between frontend vs. editor-environment one can have when diverging only a tiny bit from the intended standards. Maybe MMM is dealing with exactly that issue.

Hi,

The CSS for MMM is dynamically generated and stored in the uploads directory, so it is not the same as a standard block in that respect. Even so, you can view the page source on your page and see that the CSS is there, so it is enqueued correctly, and as you saw in my test video it is working on a clean install (you can try the same using “Local”).

Regards,
Tom

Ok, was clearly a false suspicion then.

So the most likely cause still is that iframe / shadow-DOM in the Editor environment causing some specificity issues in comparison to the frontend.

Finally! I found the cause and the solution:

Cause: I use a child theme of a block theme. The Block Editor environment itself (what’s in the innermost iFrame / Shadow DOM) seems to not load/scope any external stylesheets! Only what the theme.json Style Engine provides it.

Fix: To use external CSS files such as the one coming from MMM also in the Block Editor you need to explicitly enqueue them in the functions.php of your (child)theme with the add_editor_style function and the after_setup_theme hook.

function tt3childtheme_theme_setup() {
	add_editor_style( 'https://media.example.com/maxmegamenu/style.css' );
}
add_action( 'after_setup_theme', 'tt3childtheme_theme_setup' );

Alternatively to the CSS file from the media subdomain I also tried out the the CSS file on the media domain folder symlinked into the main domain and I can confirm add_editor_style also worked successfully when the paths to that symlinked file were stated like these:

'/assets/css/megamenu.css'

'https://example.com/wp-content/themes/tt3childtheme/assets/css/megamenu.css'

Hi abitofmind,

That’s quite interesting! Does it only happen when using a child theme?

Regards,
Tom

I’m already exhausted. Spent already months in tech work now, and finally want to get to creative/editorial/content work.

Testing this seriously, possibly takes again 1h. If something surprisingly comes up, 1-2h extra. Restoring status before easily again 1h.

So, maybe it’s more efficient to test from the other way round (from normal config to more and more extravagant), so that it can be done from your side without too much effort either:

1. In my last post I concluded that the media library on a subdomain did not play the crucial role at all. I had only thought that previously. So this setup should be easily obtainable for you as a WordPress plugin developer.
2. It seems to have to do with that external stylesheets need add_editor_style(‘/external/style.css’) to also be present in the Block Editor.
3. Then you could try to further narrow it down whether Block Theme or Child Block Theme makes the difference with/out add_editor_style(‘/external/style.css’).

What do you say?

Hi abitofmind,

I’ll give it a go. Thanks for the feedback.

Regards,
Tom

Cool! Keep me posted! Thanks!

I love that I had the endurance to find the cause for the glitch, and meanwhile enjoy having a reliably WYSIWYG in the Block Editor environment too.

Have you been able to isolate the issue to what I found (childtheme needing functions.php which loads stylesheet into Editor ENV)?

• This reply was modified 1 year, 5 months ago by abitofmind.
• This reply was modified 1 year, 5 months ago by abitofmind.