Joen Asmussen

I’ll try and remember to come back to this post when I see it pop up. But I know from core editor chats that the mover control being hidden, and drag and drop being flaky has been discussed a lot, so I’m sure a ticket to revisit this will land soon.

But the place to look is here: https://github.com/WordPress/gutenberg/issues

> was wondering if it had been discussed (or was even possible?) to have the dom elements for the Gutenberg controls sit outside the editor-styles-wrapper class element, and get absolute positioned inside editor based on the a Gutenberg wrapper element for the selected/hovered block

The problem I sense here is that when styling the editor, you inadvertently and at times style editor UI as well!

This is CSS bleed and definitely something to address. Yes, it’s technically a challenge, but an important one that is actually being tackled in many small steps.

For starters, with WordPress 5.4 and continued in the Gutenberg plugin, many elements like the block toolbar and the inserter button that sits between blocks has already actually been moved outside the editor-styles-wrapper element as you suggest. It has been moved to a “popover” component, which means it’s no longer subject to CSS bleed. This will likely be further solidified if the iframe PR is able to land.

One aspect is trickier — setup states/placeholders have to be in the DOM itself in order to function. But there are a couple of ways to move forward there, including leveraging “Shadow DOM”.

But yes, the challenge is heard and being tackled!

Same to you!

> I was wondering if you need to close all these before a release is made as they are in the “closed” tab as a ticket, but still have some steps inside which are not finished?

What goes into a release vs. what doesn’t is not always cut and dry. When features are finished and ready to land, they go in. But sometimes bugs are discovered that make them need more time in the oven. Releases should not necessarily be held up based on that.

I would recommend you follow https://github.com/WordPress/gutenberg/releases for hints at the status of a release.

Stellar!

Ah yes, that helps! It appears that the “Hello” theme has zero support for the block editor, so you see the fallback styles. So there are a couple of things to try:

– Contact the theme author and ask them to support the block editor.
– Switch to a theme that does support the block editor.
– Use the classic editor.
– Try to add support for the block editor yourself.

The 4th item is a bit roundabout, but if you’re feeling adventurous, here’s how it’s done:

1. First, open the wp-content/themes/hello-elementor/functions.php file.

2. Search for add_editor_style, and replace the text so it says this:

			/*
			 * Editor Style.
			 */
			add_theme_support('editor-styles');
			add_editor_style( 'editor-style.css' );

3. Open the wp-content/themes/hello-elementor/style-editor.css, and add the following at the end:

/* Main column width */
.wp-block {
    max-width: 960px;
}
 
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}
 
/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

That should get you the same width of blocks in the editor as they are on the frontend.

Note that if you do edit these files yourself, there is a chance if you update the theme later on, that those changes will have to be reapplied. But given the theme doesn’t have block editor support, I would wager to guess it’s not receiving updates much anymore.

Hope that helps!

There’s absolutely a place for contributing in a manner that isn’t coding, and your help is much appreciated. There are some guidelines in https://github.com/WordPress/gutenberg/blob/master/docs/contributors/readme.md#sections, for documentation, triage and localization also!