Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gutenberg wp-block-code adds <br> tags for empty lines within <pre><code> #56855

Closed
Digiover opened this issue Dec 7, 2023 · 10 comments
Closed
Labels
[Block] Code Affects the Code Block Needs Testing Needs further testing to be confirmed.

Comments

@Digiover
Copy link

Digiover commented Dec 7, 2023

Description

When adding a code snippet using the code block,
HTML tags are added to the source instead of respecting EOL (end of line) like CRLF/CR.

Step-by-step reproduction instructions

  1. Go to Dashboard > Posts > Add New Post
  2. Choose the code block
  3. Write code...
  4. See the result after publishing or preview

Screenshots, screen recording, code snippet

The result HTML code is (when using "Copy Element" in Chrome DevTools):

<pre class="wp-block-code"><code>PS C:\Users\Jan&gt; Measure-Command { Test-NetConnection -ComputerName smtp.gmail.com -Port 25 }
<br>
<br>Days              : 0
<br>Hours             : 0
<br>Minutes           : 0
<br>Seconds           : 0
<br>Milliseconds      : 349
<br>Ticks             : 3498166
<br>TotalDays         : 4.04880324074074E-06
<br>TotalHours        : 9.71712777777778E-05
<br>TotalMinutes      : 0.00583027666666667
<br>TotalSeconds      : 0.3498166
<br>TotalMilliseconds : 349.8166</code></pre>

image

Environment info

WordPress 6.4.2
Gutenberg 17.2.0

Verified with multiple WordPress instances, different syntax highlighting plugins and without. Problem first noticed in Gutenberg version 16.9.0.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@Digiover Digiover added the [Type] Bug An existing feature does not function as intended label Dec 7, 2023
@Digiover
Copy link
Author

Digiover commented Dec 7, 2023

Addendum

What I meant with

Problem first noticed in Gutenberg version 16.9.0.

is that 16.9.0 was the first version I noticed markup issues with code blocks (EOL completely missing, everything came on line line). Now with 17.2.0 the <br>'s are added withing <pre><code>

@jordesign jordesign added Needs Testing Needs further testing to be confirmed. [Block] Code Affects the Code Block labels Dec 7, 2023
@t-hamano
Copy link
Contributor

Thanks for the report.

I was also able to confirm this symptom, but I think this behavior is an intentional change.

The PR related to this change is #55999, which mentions:

Now all rich text values serialise the same way, with line breaks always serialising to the HTML BR tag.

I don't think this behavior is a bug, so I'd like to close this issue, but if there's anything I've missed, please comment.

@t-hamano t-hamano closed this as not planned Won't fix, can't repro, duplicate, stale Dec 12, 2023
@t-hamano t-hamano removed [Type] Bug An existing feature does not function as intended Needs Testing Needs further testing to be confirmed. labels Dec 12, 2023
@Digiover
Copy link
Author

Thank you for your reply @t-hamano . Can't say I'm happy with it though...

Apparently, it's allowed to use <br> in <pre> according to the HTML specifications (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre#technical_summary, https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) but it's changes like these that break sites. Since Gutenberg 16.9.0 -for as far as I remember- my site's code blocks are all messed up, without any indication why.

And now I still have to edit every post to fix code blocks, because I guess this isn't getting reversed.

@t-hamano
Copy link
Contributor

@digover

Is the code block you're using from Gutenberg core? If so, I think this should be fixed on Gutenberg's side.

@Digiover
Copy link
Author

Digiover commented Dec 12, 2023

@digover

Is the code block you're using from Gutenberg core? If so, I think this should be fixed on Gutenberg's side.

Yes, it's the Gutenberg core code block. But I have had "syntax highlighting" plugins installed, so there is no telling what is in my database now :) I removed those plugins a while ago.

Just tested it quickly: I do have to edit a code block. First image is how a random posts code block looks, second image is after editing (I added EOL's until </filter>, but pressing Update fixed the entire block. Caveats:

  1. Other blocks remain unchanged (image 3)
  2. only opening the "edit post" page en pressing "Update" doesn't do anything to fix the block. I have to change the block. See image 4, which is image 3 after inserting an space.

image 1
image 2
image 3
image 4

/edit: fixed image order

@t-hamano
Copy link
Contributor

@Digiover

Sorry it took so long to reply. I haven't yet had enough time to look into this issue in detail, but I'm wondering if it's an issue with the code block itself, or with a compatibility issue with the plugin extending the code block. I would like to keep this issue open until there is clarity.

@t-hamano t-hamano reopened this Jan 16, 2024
@t-hamano t-hamano added the Needs Testing Needs further testing to be confirmed. label Jan 16, 2024
@t-hamano
Copy link
Contributor

I would like to add this issue to the WP6.5 project board as it might affect many developers.

@Digiover
Copy link
Author

Yeah great, @t-hamano . Anything I can do to help / assist? I've been out of the WP dev business quite some time but can always test or something.

@t-hamano
Copy link
Contributor

t-hamano commented Feb 5, 2024

Sorry for getting in touch with you so late. It turns out that the problem you reported has a much larger impact than I expected. A summary of the problem is summarized in #58659.

@t-hamano
Copy link
Contributor

t-hamano commented Feb 5, 2024

I think #58659 covers this issue, so I'd like to close it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Code Affects the Code Block Needs Testing Needs further testing to be confirmed.
Projects
No open projects
Status: Done
Development

No branches or pull requests

3 participants