Make WordPress Core

Opened 11 months ago

Last modified 10 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
11 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 11 months ago by ravipatel (previous) (diff)

#3 @SergeyBiryukov
11 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
11 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
11 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 11 months ago by ravipatel (previous) (diff)

#6 in reply to: ↑ 2 @poena
11 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 11 months ago by poena (previous) (diff)

#7 @ravipatel
11 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
11 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
10 months ago

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