• muppix

    (@muppix)


    Hi Folks,

    My query relates to an error I’m seeing since a recent WP upgrade, so apologies if this is in the wrong forum – didn’t seem to fit anywhere else.

    The issue concerns a recently introduced editor anomaly whereby the addition of a class to an LI tag in HTML mode causes that tag to be flagged as unexpected or invalid content.

    View post on imgur.com

    View post on imgur.com

    I need to edit tags in this way because there is no other way for me to add CSS classes to individual list items, which in turn is necessary because if two competitors reach equal first place in our sport, there is no second place, and we jumped straight to third.

    View post on imgur.com

    Until a recent update I was able to add classes in HTML mode without seeing the unexpected / invalid content error. The page still saves and displays OK, it’s just a little jarring to see an error being generated by something that’s always worked without a hitch.

    The post linked below shows two examples of this approach.

    Cheers,
    Mark.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • threadi

    (@threadi)

    If I understand correctly, in your block editor texts prior to version 6.1, you have customized the HTML code generated by the list editor? So, for example, you manually customized the content in the code editor like this:

    <!-- wp:list -->
    <ul><li class="firstclass">first</li><li class="secondclass">second</li></ul>
    <!-- /wp:list -->

    Is this correct?

    In wordpress 6.1, the list block has been revised. The individual list items are now themselves blocks that are inside a bypassed list block. This allows you to give list items their own classes via the editor interface under Advanced. In the code editor it looks like this:

    <!-- wp:list -->
    <ul><!-- wp:list-item {"className":"firstclass"} -->
    <li class="firstclass">first</li>
    <!-- /wp:list-item -->
    
    <!-- wp:list-item {"className":"secondclass"} -->
    <li class="secondclass">second</li>
    <!-- /wp:list-item --></ul>
    <!-- /wp:list -->

    My guess now is that your customizations to the HTML code are lost in 6.1 precisely because of this customization. This is also why you get this message.

    My recommendation would be that you report this to the Gutenberg team: https://github.com/WordPress/gutenberg/issues/new/choose

    Thread Starter muppix

    (@muppix)

    Many thanks for taking the time to give me such a detailed response @threadi. Your understanding of the situation is correct; I didn’t know that list items could now be given classes via the editor without going into HTML mode, and my only takeaway from a recent upgrade was that it now takes me one extra click to change the default UL (which I hardly ever use) to an OL, which I use all the time. But I digress. ??

    With regards to HTML customisation being lost, there are two sides to this, one positive and one negative:

    (+) classes which were added to LI using HTML mode in old posts are picked up correctly in the new editor at LI level, and I’m not inadvertently scrubbing HTML customisations by making other edits to those old posts. There’s always that danger when parsing existing content to support a new UI feature, so we’re all good here.

    (-) when I add a class to a newly created list using the editor it still creates an error as soon as I switch to focus from the LI to the parent OL and enter HTML mode. To be clear I’m not actually changing anything in the HTML editor, it’s just turning its nose up at the class name that was added with the UI focussed on the list item.

    Can you do me a favour and briefly confirm the behaviour I’m seeing please @threadi? Create a list with a couple of list items, add a class name to one of those items, then switch to the parent list and toggle in and out of HTML mode without changing anything.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Unexpected / Invalid block content since 6.1.1’ is closed to new replies.