WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 6 months ago

#52780 new defect (bug)

Twenty Twenty-One: Code tag shows outside of section area

Reported by: ravipatel Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: 2nd-opinion
Focuses: ui, css Cc:

Description

Code tag formatting issue, text show outside of section area

https://i.ibb.co/Jpym68L/1.png

https://i.ibb.co/G0Z18Wc/2.png

Change History (8)

#2 follow-up: @ravipatel
7 months ago

this one new screenshots with close tag.

https://i.ibb.co/2KcvhYH/1.png
https://i.ibb.co/5Bs1Rk0/2.png

Last edited 7 months ago by ravipatel (previous) (diff)

#3 @SergeyBiryukov
7 months ago

  • Component changed from Editor to Bundled Theme
  • Summary changed from Twenty Twenty-One : Code tag formatting css issue to Twenty Twenty-One: Code tag shows outside of section area

#4 @poena
7 months ago

Hi @ravipatel

Can you give any more details about your installation?
What version of WordPress and what version of the theme are you using?

Do I understand correctly that you have the classic editor plugin installed?
Are there any other plugins active, and does the problem persist when you deactivate all plugins?

#5 @ravipatel
7 months ago

I am testing code with development version.

Development version (5.8-alpha-50427-src).

i have not added any extra plugin. using a Twenty Twenty-One theme latest version.

Last edited 7 months ago by ravipatel (previous) (diff)

#6 in reply to: ↑ 2 @poena
7 months ago

Replying to ravipatel:

this one new screenshots with close tag.

https://i.ibb.co/2KcvhYH/1.png

i have not added any extra plugin.

Then I am afraid I don't understand what is in this screenshot. Can you provide any more details?

Please write down the detailed steps to how this can be reproduced.

Last edited 7 months ago by poena (previous) (diff)

#7 @ravipatel
7 months ago

@poena Yes we have added some HTML code in code tag.

Add this in you content and see single blog page.

<code>
     <h1>Heading h1</h1>
     <h2>Heading h2</h2>
     <h3>Heading h3</h3>
     <strong>strong content</strong>
     <em>italic content</em>
     <a href="#" rel="noopener" target="_blank">asdasdas</a>
     <blockquote>sdad</blockquote>
</code>

#8 @sabernhardt
7 months ago

  • Keywords 2nd-opinion added

This happens because the max-width does not apply to the inline code element. If we want to support this in Twenty Twenty-One and/or Twenty Twenty, we would need to set the element to block:

.entry-content > code {
    display: block;
}

(related: ticket:48734#comment:11)

However, wrapping the code tag inside either pre or div aligns it properly.

#9 @peterwilsoncc
6 months ago

  • Version changed from trunk to 5.6
Note: See TracTickets for help on using tickets.