WordPress / wporg-parent-2021

21 stars 11 forks source link

Fix content breaking out of main container #84

Closed ryelle closed 1 year ago

ryelle commented 1 year ago

Fixes https://github.com/WordPress/wporg-documentation-2022/issues/50 — Force a word break on content so that the text wraps rather than breaking out of the container.

This also removes the wrap from pre blocks, since they're usually code and the wrap distorts the indentation.

Screenshots

Three examples from Docs, and one from About, to show this works across the child themes.

Before After
1. Preformatted
Docs
t-preformatted b-preformatted
2. Code
Docs
t-list-code b-list-code
3. Link
About
t-list-link b-list-link
4. Tables
No difference, already works
t-table b-table

https://wordpress.org/documentation/article/twenty-twenty-changelog/ — For this one I edited the article itself to remove the  s between the words, which along with the break-word rule correctly wraps on small screens.

https://wordpress.org/documentation/article/what-are-smilies/ — This was another page with slightly malformed content, the table block was missing the figure wrapper. Just by updating the page I fixed the table display and now it overflows with a scroll instead of breaking the container.

How to test the changes in this Pull Request:

  1. Apply this to a sandbox
  2. View any of the linked pages on https://github.com/WordPress/wporg-documentation-2022/issues/50
  3. The page should not have a horizontal scroll
  4. Some elements on the page (preformatted blocks, tables) might have a horizontal scroll
  5. Check other pages at larger sizes too for regressions
StevenDufresne commented 1 year ago

I'm still getting the issue I commented on on this page . Should we address this here? Its probably likely that other examples exist.

ryelle commented 1 year ago

I'm still getting the issue I https://github.com/WordPress/wporg-documentation-2022/issues/50#issuecomment-1503606783 on this page . Should we address this here? Its probably likely that other examples exist.

I didn't fix that because that page is unpublished, no one will see it (in fact it should redirect to https://developer.wordpress.org/advanced-administration/before-install/howto-install/ now). The cause of the issue was the content itself- the image was copied over from maybe the Codex? with extra styles/classes. It's the only article I can find using thumbinner or thumbimage, so I think it's fine.