Display error in Gutenberg
-
It’s great that TinyMCE is now available for WP 5 as well. But one thing is disturbing at the moment – maybe it has already been noticed.
If there is a graphic in a block, it overlays the head of the block and you can no longer use some buttons of the TinyMCE.
For some reason, the graphic always stays at the top of the block.greetings, Jan
-
Have a look in the (just released) 4.8.2 🙂 Should be fixed there. If not, would it be possible to test with one of the default themes? Or perhaps look at the CSS for the images in the browser tools, then copy the top 4-5 selectors and paste them here. Could be a CSS conflict.
-
This reply was modified 7 years, 3 months ago by
Andrew Ozz.
I just made the update to 4.8.2.
Unfortunately the TinyMCE is not visible now …?
The plugin is active and I have chosen the default settings.
The blocks were always shown under 4.8.1 as “Classic”. This is missing now. They look like normal “Gutenberg blocks” without the plugin … 🙁
Am I doing something wrong?-
This reply was modified 7 years, 3 months ago by
jan28.
The blocks were always shown under 4.8.1 as “Classic”. This is missing now.
Hmm, they should still be Classic…
In the 4.8.2 version I had to separate the Classic Block in another option on the plugin setting screen. These are now:
- Hybrid Block Editor Mode
- Add “Classic Paragraph” Block
Both need to be checked to make the most of the editor. Perhaps the second is not checked?
If Classic is still not showing, could you look for errors in the browser tools and paste them here if you see any.
For the (original) image issue: I’ve re-tested it and still cannot reproduce it. Best would be to right-click on the image in the editor, then select “Inspect”, then copy the top few selectors from the CSS part of the tools. (You can also uncheck the checkboxes next to the selectors to see which one is doing it, then see the URL for the actual file where the CSS comes from.)
-
This reply was modified 7 years, 3 months ago by
Andrew Ozz.
The TinyMCE is available 🙂
However, you have to manually change the block type to “Classic Paragrahp” (does NOT work in Microsoft Edge …)
However, the overlay of the image still exists.I tried all the checkboxes – no change. The CSS is attached below. I hope it is the right one.
Element { } .wp-block-image .components-resizable-box__container img { display: block; width: 100%; } .block-editor__container img { max-width: 100%; height: auto; } .wp-block-image img { max-width: 100%; }Hmmmm, not seeing anything out of the ordinary there… May be somewhere else.
It’s probably some
z-indexsomewhere being too aggressive. Another thing to try is:- Right-click on the image and select “Inspect”.
- Switch to the “Computed” tab for styles (that’s in Chrome).
- Scroll down to the bottom there (it’s sorted alphabetically).
- Now keep clicking on the parent elements in the left pane until you see one that has
z-index. - Click on the small arrow in front of z-index to see where it’s coming from.
I did not find a z-index entry.
However, there is a point:.editor-block-list__layout .editor-block-list__block { position: relative; padding-left: 14px; padding-right: 14px; overflow-wrap: break-word; }If I break the hook in “Position: relative”, the graphic disappears behind the menu.
So far I have not found a point where the graphic is displayed under the menu – as the text …
Uh, this CSS is part of the default styles in WP. Not finding a z-index means the conflicting CSS would be harder to find 🙁
What theme do you use? Is it available in the WP themes repo so I can have a look there? If not, perhaps see if it has
editor-style.cssand if yes, back it up and replace it with an empty file. That shouldn’t affect anything on the front-end, just the editor. If that fixes it, contact the theme authors and ask for a fix 🙂I use “Hueman” in the free version and update regularly. Also today came an update which supports WP 5.0.2.
I only created a custom CSS in Hueman. But only the look of the frontend is affected. I did not create an CSS editor style.We’ll get the problem under control – I’m sure 🙂
Hello,
Although I have not yet solved the problem, but I could reproduce it today.
I have created a new block – “Classic Paragraph” is selected. Then I inserted a graphic. The graphics remained below the menu bar, exactly as it should be ingenious.
If I change the block setting to “Paragraph” and then back to “Classic Paragraph”, the graphic shows exactly the behavior that overlays the menu block.I hope that helps in finding a solution.
Best regards and have a nice Christmas.
Jan
-
This reply was modified 7 years, 3 months ago by
The topic ‘Display error in Gutenberg’ is closed to new replies.