Any plans to support Gutenberg?

Tagged: 

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


kfedorov

Hi there!

How the things is going? Soon this update will be must as Gutenberg becomes more and more important.

I’ve recently was creating an ACF Blocks for Gutenberg and decided to style them using Microthemer and swithing to preview mode on backend bring no formatting used but it will be usefull to have one.

Finally I’ve just transferred the styling made into oxygen custom styles and formatting appeared on Gutenberg backend, so they are dealing with it nice. What about Microthemer plans? πŸ™‚


Sebastian

Hey, when I said “this will follow adding support for transition and CSS grid”, I actually meant transform and CSS grid. Grid is done, transform is next. After that some improvements to streamline the targeting process. And then this will be sorted. It’s a high priority because loading CSS conditionally on individual pages is a high priority, but I do understand the Gutenberg cross-formatting will be beneficial to some πŸ™‚


kfedorov

Hey Sebastian, thanks!

I thought again and you are completely right that Gutenberg cross-formatting won’t be beneficial to wide audience πŸ™‚


oddZilla

Wondering if the conditional logic is arriving in the upcoming MT7.0? Selective styles for admin and Gutenberg etc is very much needed.


Sebastian

It won’t be included in version 7, but it will be the very next feature afterwards. I considered including it, but ended up making more changes that initially planned under the theme of improving the workflow. As a result, the update has taken longer than planned, and I don’t want to delay the release any longer than necessary – there are tons of improvements that will speed up the design process for everyone.

Cheers,
Sebastian


oddZilla

Thanks, hoping that feature will arrive later this year perhaps. And looking forward to the v7 update, can you already share approximately when that will be released?

Cheers,
Richard


Sebastian

I’m hoping the beta will be ready by the end of July, but it depends how the final bits go. I’m not rushing this release, as the main focus is revisiting existing features and making them work as well as possible.

The end of the year for conditional logic sounds reasonable.


oddZilla

Awesome and good luck with those final bits.


Sebastian

Thanks!

You must login or register to reply to this topic.