Any plans to support Gutenberg?

Tagged: 

This topic contains 12 replies, has 2 voices, and was last updated by  Sebastian 2 months, 4 weeks ago.

Author Posts

nick

One of the main purposes of Gutenberg, besides making us work harder as developers, but if done properly the results for the end user can be spectacular, is the ability (if done properly), to accurately display the blocks on the backend. When making changes with Microthemer, all is well on the front end, but those changes are not displayed in the backend (Gutenberg).

Since there is no turning back with Gutenberg, are there any plans to dynamically export the changes made in Microthemer into a CSS file that is loaded by Gutenberg to style things while editing pages/posts/CPTs?

Thanks as usual Sebastian.


Sebastian

Hey Nick,

Thanks for your comment. I have been thinking about deep integration with Gutenberg. I need to do a bit more research into the ultimate vision for it. Right now, it feels like it’s sort of in limbo as a backend editor. Will it eventually become a full frontend editor like Elementor and Beaver Builder? If so, I will wait for that to happen.

If not, I will add the best deep integration I can given the technical constraints. One of which would be limiting the scope of MT’s selectors so they only style content in the Gutenberg editor area, and in the correct way, without affecting other elements in the WP admin area.

So there are some issues to consider here…

Cheers,
Sebastian


nick

Hi Sebastian,

I’ve been following everything very closely what’s going on with the project, forums, slack etc… every time somebody suggested to make Gutenberg a front end editor, the devs reject that notion and insist that there are no plans for that. As a theme developer who makes themes and blocks for Gutenberg, I can see why nobody even has attempted to accurately represent the front end in the back end, not Divi, not WP Bakery etc… It’s too much burden on the theme developers to make things look as accurate as possible.

Anyway, I’m glad that you are thinking one step ahead. I think the whole thing should be pretty straight forward – dump the Microthemer changes in a CSS file, and register that CSS file to load it’s rules in the Gutenberg editor, I guess after all the editor styles are loaded by any plugins and the active theme.

Thanks,
Nick.


Sebastian

Hey Nick,

Sorry for the slow reply. I was away on a long weekend and just catching up on non-urgent things now.

I’ve just inspected the HTML the Gutenberg editor uses on the WP backend (e.g. the edit Post/Page screens). It differs considerably from the final HTML output on the frontend. Therefore, the CSS used to style the content on the frontend will not style the content on the backend. Microthemer’s CSS selectors will not be valid in both contexts. Therefore, I do not think it will be useful to load Microthemer’s CSS file (active-styles.css) in the Gutenberg editor, I’m sad to say.

Cheers,
Sebastian


Sebastian

P.S. I made a quick video demonstrating the issue with dissimilar Gutenberg HTML on the front and back when this question was asked again recently:


nick

Hi Sebastian,

I just watched your video about the Gutenberg support, and I understand the issues… that said, you really never commented on my suggestion how to achieve this…

“dump the Microthemer changes in a CSS file, and register that CSS file to load it’s rules in the Gutenberg editor, I guess after all the editor styles are loaded by any plugins and the active theme.”

As a theme developer, I have created a CSS file SPECIFICALLY for the Gutenberg editor to use. For example, Gutenberg out of the box, has some basic CSS rules that uses to display items in the backend, button styles, text colors, sizes, etc… which in 99.9% of the cases are different that what the theme’s CSS file does, therefore the backend and frontend look different, which defeats ONE of the main purposes of Gutenberg – for the backend and frontend to look as identical as possible. That said, Gutenberg allows, and suggests creating a CSS file SPECIFICALLY for the backend, making both ends to match.

Therefore, if I were you (not nearly intelligent enough to be you btw…), to add Gutenberg support, besides registering the CSS rules in the active-styles.css file for the frontend, I would also simply register the same file for the Gutenberg’s backend. If I can do it with my themes, someone with your experience, should be able to do it in a heartbeat – unless I’m not seeing some issue from preventing you to do so.

The ONLY way to achieve this whole thing right now, is manually…

1. Create the CSS rules in Microthemer. At this point, the changes will be only visible on the front end. One of the best parts of Microthemer (compared to other similar plugins) is that it hs the ability to completely display the CSS rules it produces.
2. I would have to copy the CSS that Microthemer produces, and copy the code in my theme’s CSS file that I have registered for Gutenberg use. Because this file is static, I have to use FTP to bring it to my local computer, add the CSS from the Microthemer, and FTP the file back to the server…

If you do these manual 2 steps over and over again, it is guaranteed that you will first get depressed, then become alcoholic and anorexic, and finally suicidal !!! (little humor here…)

If anything is not clear, please let me know, so I can prepare a video explaining my points visually…
Thanks for paying attention to this issue…


Sebastian

Hey Nick,

It wasn’t so much the technical challenges of loading Microthemer’s active-styles.css file on Gutenberg admin pages. It was more that the CSS code Microthemer generates on the frontend will not always be well suited to the backend content. In some cases the selectors might be valid in both contexts. A good thing. But in other cases the selectors will not have any effect. A neutral thing perhaps. But in other cases, the selectors will apply unintended styling to random elements in the WP admin area – definitely a bad thing. This problem is nicely illustrated on the ‘Potential Pitfalls’ section of this article.

I understand that you might be being careful with the selectors you generate using Microthemer. But to ensure that styles work on the frontend and the Gutenberg backend takes care. If MT loaded it’s stylesheet on the backend, it would break the interface for some users.

In order to load MT styles on the Gutenberg editor, could you add the following code to your theme’s functions.php file (as recommended by the article I referenced).

/**
 * Sets up theme defaults and registers support for various WordPress features.
 */
function tabor_setup() {
	  // Add support for editor styles.
	  add_theme_support( 'editor-styles' );
  
	// Enqueue editor styles.
	add_editor_style( '/wp-content/micro-themes/active-styles.css' );
}
add_action( 'after_setup_theme', 'tabor_setup' );

Cheers,
Sebastian


nick

And there it is ! You made the point I was missing – in some cases simply applying the CSS produced in Microthemer, will break things in the backend.

The only way to make it work, is for each element to have the choice to write the CSS that Microthemer creates to the static CSS file that Gutenberg uses to style the backend, or have the CSS apply only to the front end. I guess that best place to have this is next to the “disable” and “the Reset” settings that each element has.

I’m not sure of this will be worthwhile to do, at least for now, but with time, as more people adapt to Gutenberg, making the front end match with the backend, which is Gutenberg’s main golas, could be beneficial to all…

For now, if I demand “perfection” will have to apply the Microthemer CSS manually I suppose.

As usual, thanks Sebastian,
Nick.


Sebastian

Hey Nick,

Yes, hopefully you can use the above code to load active-styles.css on the backend, without having to to manual copy and pastes.

Thanks for taking such an active interest in MT’s development, these kinds of suggestions are always welcome 🙂

Cheers,
Sebastian


nick

Hi Sebastian,

At least point, you might think I’m becoming a problem for you… I’m one of the earliest adopters, and one of your biggest fans, so my persistence in finding different avenues is to improve the product, and they should NEVER be perceived as criticism of any kind, on the contrary…

Let me suggest something else – which could be a workable solution (finally?)

So before anything else… the above code you provided above did not work, and it’s not important right now, I wonder in we can set multiple such CSS editor files, since my theme already uses one…

The issue is little bit more complicated than just putting the CSS code in the editor file – the outside resources must be taken care of too. For example, with Microthemer, I can change the color of some text, size, margins/paddings, etc… and also change the font to some Google font. Then when I copy the generated CSS to my editor file, in Gutenberg everything is there except the Google font. So this is one more hurdle to overcome.

So my next suggestion is since blindly forcing all the generated CSS to the editor, for Microthemer to create an additional file to be used by Gutenberg, and in this file have the CSS rules that will not break the backsite. For example, I don’t think having the animations in the backsite is a good idea, or simple things, like font colors, sizes, etc… could work.

Again, my only purpose is to improve the product.
BTW, a few days ago a competitor of yours (I don’t want to publish a competitor’s plugin url – unless you are ok with it), released something similar that works in the backsite and not on the front like Microthemer… just a heads up for you to watch and keep being 5 steps before everyone else…

Nick.


Sebastian

Hey Nick,

Your suggestions are never annoying lol. OK, what you are describing might actually fit in with another feature that is already on my todo list – page logic. So there would be a popup screen for creating sets of conditions e.g. ‘only Pages’, ‘only Posts’, or ‘not Front page’, or ‘only Admin area’. A bit like Advanced Custom fields has. This logic can then be applied to Microthemer folders.

The benefits this system would bring:

  1. Selectively apply styles for Gutenberg
  2. Selectively apply styles to the admin area (inc login page)
  3. Selectively apply styles to individual frontend pages

Does that sounds like a good solution?

Cheers,
Sebastian


nick

“Does that sounds like a good solution?” – Is the Pope Catholic? Is Manchester United the biggest club in the World? Is Microthemer the best plugin in it’s category?

Yes, yes, yes, and YES !!!

Sounds perfect Sebastian… Thanks once again.


Sebastian

Excellent. It’s on the todo list!

It will follow adding support for transition and CSS grid. But the reasons for implementing this feature are stacking up so it should be too long.

Cheers,
Sebastian

You must login or register to reply to this topic.