Make WordPress Core

Opened 3 years ago

Last modified 15 months ago

#52780 new defect (bug)

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

Reported by: ravipatel's profile ravipatel Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch needs-testing
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

Attachments (3)

52780.diff (830 bytes) - added by poena 15 months ago.
Add display block to <code>
Screenshot 2023-01-31 at 09.19.00.png (18.0 KB) - added by poena 15 months ago.
Twenty Twenty, after: the <code> aligns with the rest of the post content.
Screenshot 2023-01-31 at 09.22.37.png (14.5 KB) - added by poena 15 months ago.
Twenty Twenty-One, after: the <code> aligns with the rest of the post content.

Download all attachments as: .zip

Change History (16)

#2 follow-up: @ravipatel
3 years ago

this one new screenshots with close tag.

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

Last edited 3 years ago by ravipatel (previous) (diff)

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

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

#7 @ravipatel
3 years 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
3 years 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
3 years ago

  • Version changed from trunk to 5.6

This ticket was mentioned in PR #2980 on WordPress/wordpress-develop by carolinan.


22 months ago
#10

  • Keywords has-patch added

Add display:block to <code> added with the classic block so that it aligns with regular post content.

Trac ticket: https://core.trac.wordpress.org/ticket/52780

#11 @poena
15 months ago

  • Keywords needs-refresh added

@poena
15 months ago

Add display block to <code>

#12 @poena
15 months ago

  • Keywords needs-testing added; 2nd-opinion needs-refresh removed
  • Milestone changed from Awaiting Review to 6.2

I was not able to solve the merge conflict with the built files in the original PR, so I created a new patch.

In 52780.diff I have added the code suggested by @sabernhardt to both Twenty Twenty and Twenty Twenty-One.
I have not included the built CSS files this times since they are prone to cause merge conflicts when there are other updates to the themes.

Testing Instructions

These steps define how to test the feature or enhancement, and indicates the expected behavior or results.

Steps to Test

  1. Apply the patch

2.Install the classic editor plugin.

  1. Activate Twenty Twenty.
  2. In your code editor, open the root directory of Twenty Twenty and build the CSS files:
    npm install
    npm run build
    
  3. Create a new post.
  4. Select text mode.
  5. copy paste the following:
    <h1>hello</h1>
    <code><h2>Yes hello?</h2></code>
    

Save the post and view the front.

Next please test Twenty Twenty-One using the same steps. The build commands for the CSS are also the same.

Expected Results

Lists each expected result or behavior, i.e. what should happen when running the test(s):

  • ✅ The custom code should align with the rest of the content.

@poena
15 months ago

Twenty Twenty, after: the <code> aligns with the rest of the post content.

@poena
15 months ago

Twenty Twenty-One, after: the <code> aligns with the rest of the post content.

#13 @poena
15 months ago

I am still unsure which theme is in the original screenshot, since it's background is white, but at least this can be reproduced and solved in Twenty Twenty and Twenty Twenty-One.

#14 @poena
15 months ago

  • Milestone changed from 6.2 to Future Release
Note: See TracTickets for help on using tickets.