I’m creating a plugin to improve the default blocks library with some custom navigation elements.
To ensure the blocks editablility I follow the suggestion on the tutorials: I created a custom backend css to add the feature needed to show the hidden panels in the back-end.
Then I create the block’s attribute to toggle the edit class to the element
The toggle works fine. The class get applied as expected.
The backend css is loaded too.
The crazy thing is that this css does not effect to the page in any way.
Is there something I can try to understand where’s the problem?
Hey, @matteobanana. The best place to start troubleshooting is the browser’s developer tools. That should show you whether the CSS file is being loaded, classes are being applied, and what is going on with the rules.
Thanks for the reply.
Don’t worry, I’m used to the browser’s developer tools!
What appen is that the rules written in the css made just for the backend does not affect the page.
I tried to style other elements from that css, but no one of the rules written effect the page.
It is loaded. I found it in the tree an also in the network panel.
That’s the first time that it happen to me.
Unfortunately everything is still on my computer. I’ll put it on a clean environment to meke online test and share the real situation.
The PG functionality to include the backend css loads 'em in the main html page structure.
Unfortunately the editor render the content inside an iframe, so the css can’t effect the elements inside it.
My workaround has been to create a general backend script loaded by custom code.
function bs_block_enqueue_backend_script()
{
add_editor_style( plugin_dir_url( DIR ) . ‘blocks/off-menu/offmenueditor.css’);
}
add_action(‘after_setup_theme’, ‘bs_block_enqueue_backend_script’);
So now I’ve got to set up a better css position in the plugin folder and for the next blocks I’ll include every backend style in the same css.
Those are the issues I found in PG during this triky days.
I hope the team can solve or explain better:
Editor Style in block settings doesn’t work as tell in the documentation
In a plugin development is not possible to include backend scripts from “plugin settings” as in a theme
@matteobanana replying here because it will be useful for others as well.
First of all, in most cases, block plugins should not use add_editor_style function, this is meant for themes. Instead, each block should take care of loading its own required backend and frontend styles.
The most important point for these blocks CSS files is that CSS selectors should be scoped to the target block.
In your case, your blocks have ids such as #offMenu. The rule for .trigger should be #offMenu .trigger {…}
This will prevent styles affecting any other .trigger on the page.
Note, using classes is better than ids.
Please see the guide for example of how to scope the rules:
