• Resolved TheSupercargo

    (@thesupercargo)


    Hi!

    I am rebuilding my website on a localhost and trying to learn to use Gutenberg while I do so. I can see there are some very positive things about Gutenberg, but one thing I cannot manage to make it do is to wrap text around a thumbnail as I could in the Classic version of WordPress.

    I thought the Classic block was the answer to my problems when I found it, but it isn’t. There is some sort of a bug in it that causes it to fail on the back end. (But only on the back end, I think.)

    This is what I did. I created a two column block and added one Classic block to each column. In each Classic block I put a thumbnail image and a wrap around text. The image and text in one block links to another page or a post on my site. (The image behaves as a button.) It all looked good, both in the visual editor and the preview, so I saved it.

    The following day when I returned to edit some more, instead of seeing the contents of the classic block I see two error messages (one for each Classic block): “This block contains unexpected or invalid content”.

    I’m given the option to Resolve or Convert to HTML. Clicking on the Convert to HTML button does nothing. The button is dead.

    Clicking on the Resolve button calls up a Resolve Block pop-up. This shows the HTML of the block to the left (called Current) and the same HTML to the right with one or two characters highlighted in red and some new text added and highlighted in green. This is called After Conversion.

    Specifically, it seems to be telling me to remove a <p> and a </p> tag (which it has presumably put there earlier as I wasn’t then working in the code view) and insert a <figure> and </figure> tag around the image.

    The two buttons at the bottom of the Resolve Block – Convert to HTML and Convert to Block – are dead. They do not work.

    Instead I open the same page in a second tab in my browser, view it in the Code Editor and make what I suppose are the recommended changes there. I save it and switch back to the Visual Editor. But I’m still only seeing “This block contains unexpected or invalid content”.

    Clicking on the Resolve button now shows the HTML on both sides of the Resolve Block (Current and After Conversion) to be identical, but <figure> and </figure> in the After Conversion are highlighted in green.

    However, the page Preview appears to show the images and text on the front end looking and behaving as I want them to.

    Two things to be said:

    1) This seems to be a very complex way of correcting an error which I think Gutenberg has itself introduced. The dead buttons and the need to open the Code Editor in a separate tab suggest to me there’s a serious flaw in this block. I see plenty of other people have been having similar problems (but not the same problem). I’ve not been able to find a solution other than the one I describe above. I hope some one is working on this.

    2) Can I trust that the code will work on the front end (once corrected) even if it doesn’t on the back end?

    Thanks for reading this. Any advice – especially in response to my second question – gratefully received.

    John

    I am using the latest version of WordPress: 5.2.2 with the latest version of the basic Generate Press 2.3.2 (Child theme)

    PS: It seems to be insanely difficult to start a topic on WP.org. Trying to find the input field this morning I ended up Googling “how to start a topic in word press support forum” and unfortunately Google directed me to WP.com – which I didn’t realise until just now.

    On the bright side, I’ve been able to correct a couple of small mistakes.

    J

    • This topic was modified 5 years, 3 months ago by TheSupercargo.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    The inability to text wrap image blocks is in part a theme issue. The issue then would be that all image blocks will text wrap, which may not be desirable. A theme could offer custom CSS you can specify. Not a very user friendly way to do it, I know. Ideally there would be a tool icon button to do so.

    You’re still stuck with inserting images only at paragraph boundaries, but I’ve not found that to be a serious impediment. But I develop a lot more than create content. You can create your own CSS to text wrap, essentially the max-width should be a percentage like 50% and apply the float: left; (or right) rule. Add the CSS to the Additional CSS panel of the customizer and specify the chosen selector class in the image’s Advanced property on the editor screen.

    You’ll need to use preview to see the wrap effect, it will not wrap in the editor unless you create a child theme and utilize a custom editor stylesheet.

    Still not ideal obviously, but it gets you away from needing to use a classic block and presumably gets you away from the invalid content errors. Then the answer to your second question is moot. The error recovery scheme clearly needs work. In the interim the best solution is to not fall into error recovery ??

    I’m sorry you had trouble finding where to post. What would you suggest as an improvement, considering that we must first get visitors to the correct forum before they post? Additionally, we hope users will search for existing solutions before posting their own topic. You can imagine making it too easy to post new topics subverts these other goals. Once anyone lands on any individual forum page, there is a “+ Create Topic” button right at the top opposite the page navigation. And of course the new topic form is at the bottom of every forum page. I get that the bottom is not an ideal location, but the full form at the top would subvert the other goals.

    Thread Starter TheSupercargo

    (@thesupercargo)

    Thanks for your reply @bcworkz

    Now I’m looking at the possibility of using the Short Code Ultimate plug-in as a work around. Based on what I made in the Classic Editor, I’ve created a sort of HTML template that I can paste into the short code and then fill with the relevant text, images and links. It’s fiddly, but at least I can see and understand what I’m doing.

    CSS I’m afraid is a foreign language to me. The effort and above all the time I’d need to learn how to to do this small thing from the bottom of the pit of my ignorance doesn’t seem to me to be justified. Coding is not what I have a WP blog for and I really DON’T think Code is Poetry!

    Maybe I’ll give up on Gutenberg and go back to the Classic Editor for now. I’ve just wasted the better part of a weekend on something I thought would take a couple of hours. All a bit depressing really.

    As far as finding the Create Topic form goes, I appreciate your (WP.org’s) dilemma. That you want to get people to create topics in the right forum and also to discourage too many new topics. I don’t ask that many questions nowadays (perhaps that’ll change if I’m going to get a grip on Gutenberg) so I’d forgotten how to start a topic.

    My situation was that I’d been searching around and around for what felt like hours looking for help on my issue when I realised I’d have to start a topic. At that point I just couldn’t find where to start. NOW I can see that “+ Create Topic” button, but THEN I was blind to it. ??

    Admittedly Googling “how to start a topic” was a bit desperate.

    Perhaps if there were a duplicate of the “+ Create Topic” button in the side column between “Log out” and “Recent posts” or between “Subscribe” and “Views”?

    Thanks again for your response.

    My question isn’t really resolved, so I’ll leave this open for another 48 hours just in case anyone else has something to add.

    John

    Moderator bcworkz

    (@bcworkz)

    A number of site owners I know who are comfortable creating HTML content have rejected the block editor and have installed and use the classic editor. I personally don’t like the block editor either, but I’m still trying to give it a chance. It’s not for everyone and is in need of refinement for those who like it.

    FWIW, shortcodes are not part of the block editor concept, though they are supported. The ultimate goal is to have custom blocks replace shortcode functionality. But I’m sure shortcodes will be supported for a good long while.

    Thanks for your feedback on the forum UI. I agree that the add topic button tends to blend in with the other page content and could stand out better. A sidebar link is also a good suggestion. I’ll pass your suggestions along to the proper WP team for consideration. I can’t promise anything will come of it, but it will at least be considered.

    Thread Starter TheSupercargo

    (@thesupercargo)

    I do see potential in the Gutenberg blocks, and how they might replace (some) shortcodes eventually. But as a non-coder, I’m disappointed it’s still so difficult to work with. I put off looking at it for six months or so after the launch hoping most of the teething problems would be solved by now. Maybe I should try it again next year.

    Another thought on the forum interface. How about putting the “+ Create Topic” button in a nice bright contrasting colour. Fluorescent orange or acid green perhaps. Just so it stands out!
    ??

    Moderator bcworkz

    (@bcworkz)

    Yes, good suggestion for the button standing out better. Though your specific color suggestions, not so much ??

    Thread Starter TheSupercargo

    (@thesupercargo)

    ??

    I’ll mark this thread resolved now.

    Cheerio!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘classic block bug – “This block contains unexpected or invalid content”’ is closed to new replies.