Fix content breaking out of main container

[ryelle]

Fixes WordPress/wporg-documentation-2022#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
2. Code Docs
3. Link About
4. Tables No difference, already works

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 Content overflow in responsive views wporg-documentation-2022#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]

Is this in the right PR?

[ryelle]

Yeah, this causes the content to break out of the screen when the search is in a sidebar.

[StevenDufresne]

This is causing an issue:

Video Shortcode:

[ryelle]

I've fixed the content there — looks like it was hit by this shortcode issue, it was not meant to actually embed any videos. If a video is embedded not in a pre, it should wrap the error message just fine.

[StevenDufresne]

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]

I'm still getting the issue I WordPress/wporg-documentation-2022#50 (comment) 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.

[StevenDufresne]

From what I tested works well. 👍

We can open new tickets for more example that are found.