Paragraph elements now all have id attribute

  • goodlug

    (@goodlug)


    5 years, 6 months ago

    In the last few days something has changed in the Gutenberg editor to add a unique id to each <p> paragraph tag (visible when editing html/code and in published source code). The form is id=”[something that looks like a GUID]”. I have not added any plugins or done anything I know of to trigger this behaviour.

    It may also be that the setting of a paragraph background colour now uses a span element (with likely associated in line element problems) rather than adding the CSS to the <p> tag.

    Is there any explanation? Seems like unnecessary bloat, and may also be breaking some pages?

    Thanks for any insights/answers/fixes.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 6 months ago

    Please provide a link to a page on your site where we can see this. Thanks. Note: Your link will be public and we will not later remove it.

    I can’t reproduce this on a “clean” WP site.

    This may be a plugin or theme thing. Please attempt to disable all plugins, and use one of the default (Twenty*) themes. If the problem goes away, enable them one by one to identify the source of your troubles.

    Thread Starter goodlug

    (@goodlug)

    5 years, 6 months ago

    Hi Steven and thanks for the reply. No recent plugin additions or theme changes or even updates that I can recall, so seems unlikely cause and disabling plugins will temporarily disable features so only a attempted fix of last resort.

    The new additions aren’t visible on the published page, only in the source eg:

    <p id="block-c0eb6f5f-99ab-4597-a9aa-6665af41b3c6">Bla bla bla</p>

    Previously this would have been

    <p>Bla bla bla</p>

    The background colour thing (which I removed and added manually instead) appeared if I recall right to do this:

    <p id="block-c0eb6f5f-99ab-4597-a9aa-6665af41b3c6"><span style="background-color: #eee;">Bla bla bla</span></p>

    rather than

    <p id="block-c0eb6f5f-99ab-4597-a9aa-6665af41b3c6" style="background-color: #eee;">Bla bla bla</p>

    Problem is being an inline element it behaves differently to block level paragraph.

    Regards

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 6 months ago

    Again, this is not something I can reproduce. And, yes, I understand how to look at a <p> element. Since it’s apparently not part of core, it’s coming from a plugin or theme.

    If you can install plugins, install “Health Check”: https://wordpress.org/plugins/health-check/ On the troubleshooting tab, you can click the button to disable all plugins and change the theme for JUST you, while you’re still logged in, without affecting normal visitors to your site. You can then use its admin bar menu to turn on/off plugins and themes one at a time. See https://make.wordpress.org/support/handbook/appendix/troubleshooting-using-the-health-check/ or https://rankmath.com/kb/check-plugin-conflicts/ for more information.

    Your choice whether to proceed with this troubleshooting.

    This is what I get when try:

    <div class="entry-content">
		
<p>paragraph with no styling</p>

<p class="has-secondary-color has-light-gray-background-color has-text-color has-background">paragraph with styling</p>
	</div>
    Thread Starter goodlug

    (@goodlug)

    5 years, 6 months ago

    Thanks again, and I will certainly proceed. Health Check sounds as though it will provide the sort of troubleshooting needed without blowing up the site while I do the troubleshooting. Will need to wait until tomorrow though.

    Joy

    (@joyously)

    5 years, 6 months ago

    Are you using the Gutenberg plugin? There has been some discussion about having IDs on every block.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 6 months ago

    This is with the gutenberg plugin (9.3.0) enabled

    <div class="entry-content">
<p>plain paragraph</p>
<p class="has-dark-gray-color has-light-gray-background-color has-text-color has-background">paragraph with fg and bg colors</p>

    So, it’s not the Gutenberg plugin. Please ocntinue with the troubleshooting when you get a chance.

    Thread Starter goodlug

    (@goodlug)

    5 years, 6 months ago

    Joy – no, I’m just using the standard Gutenberg editor bundled with a standard WordPress installation. Do you have a link to the discussion you mention, as there may be clues there, as presumably the bundled and plugin versions share code?

    Steven = yes, will continue as discussed.

    One of the unwanted things that appeared to happen because the style was being added to an inserted nested <span> tag was that each line had the added background colour, but there were white lines between the text plus background colour lines. Is there a way to upload images? If so, I can post one to show what I mean.

    Thread Starter goodlug

    (@goodlug)

    5 years, 6 months ago

    Well, I am getting somewhere.

    First, the <span> background colour problem. Fell a bit silly about this. The Gutenberg editor opens (for me, but I don’t think it has always done this) with the paragraph ‘Colour Settings’ (immediately under Typography) collapsed and the lower down Inline Text Colour and Inline Background Colour Settings expanded and I ‘saw what I wanted to see’ ie a selection of colours etc but of course it did what it says on the tin, applies inline colours. If I expand and use the Colour Settings, I get the behaviour I expect.

    The other thing is this morning I am not getting any of the mystery id attributes added. I am trying to think if I did anything when editing yesterday’s post that was out of the ordinary, and I can’t think of anything.

    The only thing I do recall is that at one point the editor appeared to hang (I think while doing a preview) and the ‘Save draft’ got stuck (I think) as (greyed?) ‘Saving’. I had to restart the browser. I wonder if that somehow added the id attributes?

    Joy

    (@joyously)

    5 years, 6 months ago

    the ‘Save draft’ got stuck (I think) as (greyed?) ‘Saving’. I had to restart the browser. I wonder if that somehow added the id attributes?

    It probably was this. The ID discussions I saw (very little of, on Slack) were not for persistent IDs, but only during editing.

    Thread Starter goodlug

    (@goodlug)

    5 years, 6 months ago

    Thanks Joy. Though not a definitive answer, it does seem plausible – the IDs present during editing somehow getting locked in by the crash – so I guess I am going to have to leave it at that, unless it happens again, in which case I will pay more attention to what I am doing at the time.

    Thanks both of you for your help.

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

The topic ‘Paragraph elements now all have id attribute’ is closed to new replies.