Editor Error due to Image as H1 (after wp 5.9. update)

  • Hey WP community,

    I am experiencing some problems with the above named page which exists since wordpress was updated to 5.9.
    I am using images as page H1s (I know you should not do due to SEO reasons but we decided to still do so as SEO is not such a big issue for us). This means H1s on some pages look like: img src=”www.abc.com” /
    However after updating to wordpress 5.9 the block editor is not able to open/display my page anymore (but just gives the follwing error and the 3 options:
    The editor has encountered an unexpected error. Attempt Recovery. Copy Post Text. Copy error code).

    I tried disabling all plugins, clearing wp and browser cache, updating browser (I found all those as possible solutions on the internet) but nothing fixed the problem.
    Switching to classic editor solves the problem and I can access and edit my pages. However, I would strongly prefer using the block editor.

    I am pretty sure the problem is due to the images as H1s as some pages which do not have images in H1 can be displayed and edited normally.

    Is there anybody who experienced the same problems and (hopefully ?? ) already found a solution to this (which is not: remove the images due to SEO). ?

    Best!

    • This topic was modified 3 years, 1 month ago by therealreiti.
    • This topic was modified 3 years, 1 month ago by therealreiti.
    • This topic was modified 3 years, 1 month ago by therealreiti.

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

Viewing 6 replies - 1 through 6 (of 6 total)

  • How did you get a Header to take an image as the text in the block editor? The block editor uses REACT to display and build the site in the editor. The blocks are written in javascript and translated back to HTML. Probably REACT doesn’t like having an image inside an h1 tag. When you are in the block editor, You are dealing with javascript not PHP or HTML.

    Thread Starter therealreiti

    (@therealreiti)

    Thanks for your reply!
    I am using twenty-twenty theme and just put the html code snippet for inserting an image from my media library into the field that carries the H1 (i.e., I just put the <img src=”” container into the H1 field).

    Until version 5.8.3 (I think that was the previous version before 5.9) the block editor was able to handle this and and perfectly showed me the respective pictures from the html image code in the editor (edit and preview mode) and on the final website.
    However, after having the 5.9 update this does not work anymore.
    Is there any way of getting it back to work? E.g., by embedding the images via PHP

    it serves no purpose to put an image into an h1 tag. h1-h5 are used to donate the importance of titles. H1 is the most important and H5 is the least important. When Search Engines like google look at your HTML they consider the H1 the most important. You should have 1 and only 1 h1 tag per page and it should contain the theme of the page or what the page is about.

    Remember the blocks in the block editor use JSX not HTML. The results of the blocks are converted to HTML and stored in the post table along with comments that contain what properties were set in the REACT component. My guess is you are giving the block editor something it is not prepared to handle.

    • This reply was modified 3 years, 1 month ago by mrtom414.
    Thread Starter therealreiti

    (@therealreiti)

    Thanks for your feedback!
    I totally understand the flaws and problems of using an image as H1 and know that this is a stupid idea in terms of SEO!
    However, SEO is not the biggest target for this website as we mainly focus on using the website for informing participants of our project about the project. For this we wanted to create a somewhat representative website to serve this objective.
    If we would have an easy solution to create the same kind of heading with a proper H1 (that results in same looks without having a major restructuring of the website) I would be totally fine.
    So far our (not very elegant) solution worked. This was why my initial question was whether there is any solution to get back to our status quo of one week in the face of the WP update… But it seems as if there would not be any…

    One thing that could be causing you problems is you have class on your h1 tag. If it tries to use JSX using class it will have a problem. JSX is javascript, not PHP or HTML and class is a reserved word in javascript. If the block editor is trying to use your code as jsx it will have a problem. Classes are defined in jsx by using ClassName. You can try changing it and seeing if it makes a difference. Have you looked in your console for any javascript errors?

    Thread Starter therealreiti

    (@therealreiti)

    Thanks for your reply!
    Unfortunately, I am not a 100% sure what you mean.
    The errors in the console (or if i click “copy error”) are:

    TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at de (https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:1:19671)
    at le (https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:1:18610)
    at be (https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:1:20112)
    at Te (https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:1:20550)
    at T (https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:5:8967)
    at N (https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:5:10199)
    at https://coco-study.org/wp-content/plugins/gutenberg/build/rich-text/index.min.js?ver=8c8864de15088443cbca75e2aba2710e:5:11429
    at https://coco-study.org/wp-content/plugins/gutenberg/build/compose/index.min.js?ver=cdf5122fe9aebc0dda95dc229614060e:1:22435
    at P (https://coco-study.org/wp-content/plugins/gutenberg/build/compose/index.min.js?ver=cdf5122fe9aebc0dda95dc229614060e:1:25617)
    at https://coco-study.org/wp-content/plugins/gutenberg/build/compose/index.min.js?ver=cdf5122fe9aebc0dda95dc229614060e:1:26052

    In addition, inspecting the error box gives:
    <div id="editor" class="block-editor__container hide-if-no-js"><div><div class="editor-error-boundary block-editor-warning"><div class="block-editor-warning__contents"><p class="block-editor-warning__message">The editor has encountered an unexpected error.</p><div class="block-editor-warning__actions"><span class="block-editor-warning__action"><button type="button" class="components-button is-secondary">Attempt Recovery</button></span><span class="block-editor-warning__action"><button type="button" class="components-button is-secondary">Copy Post Text</button></span><span class="block-editor-warning__action"><button type="button" class="components-button is-secondary">Copy Error</button></span></div></div></div></div></div>

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Editor Error due to Image as H1 (after wp 5.9. update)’ is closed to new replies.