Opened 3 years ago
Last modified 10 months ago
#52780 new defect (bug)
Twenty Twenty-One: Code tag shows outside of section area
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.6 |
Component: | Bundled Theme | Keywords: | has-patch needs-testing |
Focuses: | ui, css | Cc: |
Attachments (3)
Change History (16)
#3
@
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
@
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
@
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.
#6
in reply to:
↑ 2
@
3 years ago
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.
#7
@
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
@
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.
This ticket was mentioned in PR #2980 on WordPress/wordpress-develop by carolinan.
17 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
#12
@
10 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
- Apply the patch
2.Install the classic editor plugin.
- Activate Twenty Twenty.
- In your code editor, open the root directory of Twenty Twenty and build the CSS files:
npm install npm run build
- Create a new post.
- Select text mode.
- 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.
this one new screenshots with close tag.