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

[ravipatel]

Code tag formatting issue, text show outside of section area

[ravipatel]

this one new screenshots with close tag.

[poena]

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?

[ravipatel]

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.

[poena]

Replying to ravipatel:

this one new screenshots with close tag.

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.

[ravipatel]

@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>

[sabernhardt]

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.

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

[poena]

Add display block to <code>

[poena]

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.

3. Activate Twenty Twenty.
4. In your code editor, open the root directory of Twenty Twenty and build the CSS files:

   npm install
   npm run build
   

5. Create a new post.
6. Select text mode.
7. 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]

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

[poena]

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

[poena]

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.

[karmatosed]

I think this might be a candidate for following into testing and committing then if we have testing so let me see about doing that. Thanks everyone.

[karmatosed]

In 58557:

Twenty Twenty and Twenty Twenty-One: Fixes code tag showing outside of section area.

The code tag had a formatting issue where it was showing outside of the section area. This resolves it in both themes.

Props ravipatel, SergeyBiryukov, poena, sabernhardt, peterwilsoncc.
Fixes #52780.